Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

Johdanto CSS-tyyliehdotuksien käyttöön Web-sivuilla

Sisällysluettelo

  1. Yleistä CSS-tyyleistä
    1. CSS:n suomat edut
  2. Tyyliehdotuksien koostumus ja kommentointi
  3. Selektorit ja ominaisuuksien periytyminen
    1. Tyyppiselektorit
    2. Luokkaselektorit
    3. Tunnisteselektorit
    4. Näennäisluokat ja kaskadointijärjestys
  4. Deklaraatiot, eli käytettävät ominaisuudet arvoineen
  5. CSS:n yhdistäminen dokumenttiin
    1. CSS:n upotus STYLE-attribuutilla
    2. CSS:n upotus STYLE-elementillä
    3. CSS:n tuonti LINK-elementillä
    4. CSS:n tuonti @import-säännöllä
  6. Ongelmien ratkaiseminen
    1. Onko Web-sivujen merkkaus validia?
    2. Onko CSS muodollisesti virheetöntä?
    3. Olenko ymmärtänyt ominaisuuden oikein?
    4. Olenko ymmärtänyt valitsimen oikein?
    5. Apua muualta?

Yleistä CSS-tyyleistä

CSS-tyylit (Cascading Style Sheets, tästä edes CSS) on tekniikka, joka mahdollistaa syntaksiltaan yksinkertaisten ja helposti omaksuttavien tyyliehdotuksien yhdistämisen rakenteellisiin dokumentteihin, kuten HTML- ja XML-tiedostoihin. Tyyliehdotukset koskevat dokumenttien esitystapaa, esimerkiksi sen graafista ulkoasua, ääntämistä, tai tulostusta. Tyylikielen nimessä esiintyvällä Cascading -sanalla viitataan mahdollisuuteen vaikuttaa dokumentteihin usean tyylisäännöstön ja -säännön välityksellä samanaikaisesti.

Tyyliehdotuksia voidaan yhdistää dokumentteihin asiakas/palvelin-arkkitehtuurin kummassakin päässä. Yksittäisen dokumentin esitystapaan voivat vaikuttaa:

Nämä kaikki voivat vaikuttaa yhdessä tai erikseen. Lisäksi asiakasohjelmat, ja joskus itse dokumentitkin, voivat tarjota mahdollisuuksia vaihtaa dokumentin esitysasua. CSS mahdollistaa tekijä ehdottaa, käyttäjä komentaa -periaatteen, eli viimeinen sana dokumenttien lopullisesta esitystavasta jää aina käyttäjälle.

CSS:n suomat edut

CSS tuo vain etuja tullessaan, sillä sen avulla voidaan erottaa esitykseen liittyvät seikat dokumenttien rakenteesta ja asiasisällöstä. Tämä on tavoiteltavaa mm. seuraavista syistä:

Tyyliehdotuksien koostumus ja kommentointi

Tyyliehdotus (style sheet) koostuu vähintään yhdestä tyylisäännöstä (style rule). Tyylisääntö sisältää vähintään yhden valitsimen tai toiselta nimeltään selektorin (selector), jolla määritellään tyylisääntöjen kohde dokumentissa, ja deklaraatiolohkon, jossa määritellään tyylit yhdelle tai useammalle selektorille. Deklaraatiolohko taas koostuu vähintään yhdestä deklaraatiosta, eli ominaisuus/arvo parista, jollei se ole tyhjä. Yksinkertaisimmillaan tyylisäännön syntaksi on seuraava:

valitsin {ominaisuus:arvo}

Valitsin erotetaan tyhjällä tilalla (whitespace, esimerkiksi välilyönti) aaltosulkujen sisälle sijoittuvasta deklaraatiosta, jossa ominaisuudet erotetaan arvoistaan kaksoispisteellä. Tyylisäännössä voi esiintyä useampia valitsimia, jolloin nämä erotetaan toisistaan pilkuilla. Samoin deklaraatiota voi esiintyä useita, jolloin nämä erotetaan toisistaan puolipisteillä. Seuraava kuvaa yksinkertaista tyylisääntöä, jossa H1- ja P-elementeille ehdotetaan kaksi deklaraatiota:

Tyylisäännön koostumus

Tyhjää tilaa voidaan käyttää vapaasti muotoilemaan tyylisääntöjä helpommin luettaviksi. Yleisenä tapana on kirjoittaa deklaraatio omalle rivilleen, esimerkiksi seuraavasti:

/* Ryhmittelyssä selektoreiden järjestys on vapaa.  */

p,h1 {
font-family:serif;
margin-left:2em;
}

/* Yksinkertaisissa ja ristiriidattomissa tapauksissa
   deklaraatioidenkaan järjestyksellä ei ole merkitystä. */

CSS-kommentit alkavat kauttaviiva-asteriksi yhdistelmällä ja päättyvät asteriksi-kauttaviiva yhdistelmään. Kommenttien syntaksi on siis sama kuin monessa ohjelmointikielessä, kuten JavaScriptissä.

Selektorit ja ominaisuuksien periytyminen

Valitsimien avulla siis yhdistetään deklaraatiot kohteisiinsa dokumentissa. Nämä ominaisuudet useasti myös periytyvät jälkeläiselementeille, esimerkiksi P-elementin lapsena oleva B-elementti perii lähes kaikki sellaiset ominaisuudet emoltaan, jotka intuitiivisesti vaikuttaisivat periytyviltä, kuten kirjasintyylin ja värin.

Tyyppiselektorit

Yksinkertaisempia CSS-valitsimia ovat tyyppiselektorit, joilla viitataan elementtityyppeihin niiden nimellä. Esimerkiksi seuraavassa ensimmäinen sääntö ehdottaa body-tyyppiselektorilla koko dokumentin rungolle kirjasinlajin:

body {
font-family:sans-serif;
}
h1,h2,h3,h4,h5,h6 {
font-family:serif;
}

body-selektorin font-family -ominaisuus periytyy BODY-elementin jälkeläisiin, mutta esimerkkimme toinen sääntö asettaa poikkeuksen kaikille yleisille otsikkoelementeille. Luonnollisesti otsikkoelementtien lapset perivät serif-fontin, jollei muuten määritetä. Vastaava periytyminen koskee muitakin ominaisuuksia.

Luokkaselektorit

Lähes kaikki elementit voidaan merkitä kuuluviksi luokkiin yleisellä CLASS-attribuutilla, esimerkiksi seuraavasti:

<p class="tarkea">On tärkeää huomioida, että...</p>

Elementti voi kuulua useaan luokkaan ja erilaiset elementit voivat kuulua samaan luokkaan. Luokitus siis helpottaa viittausta useaan elementtiin kerralla, mutta samalla vapauttaa viittaukset elementtisidonnaisuudesta.

Tyylisäännöissä luokkiin viitataan pisteellä:

p.tarkea {
border:3px double;
}
.tarkea {
color:red;
background-color:yellow;
}

Esimerkkimme ensimmäinen sääntö koskee P-elementtejä, jotka on merkitty kuuluviksi tarkea-luokkaan. Toisessa säännössä elementtisidonnaisuutta ei ole, joten se koskee kaikkia elementtejä, jotka on merkitty kuuluviksi tarkea-luokkaan.

Tunnisteselektorit

Kaikki elementit voidaan merkitä yksilöllisellä tunnisteella, eli yleisellä ID-attribuutilla, esimerkiksi seuraavasti:

<p id="poikkeus">On tärkeää huomioida, että...</p>

ID-attribuutin arvo on dokumenttikohtaisesti uniikki, eli yksilöllinen tunniste ei saa esiintyä samassa dokumentissa kuin kerran.

Tyylisäännöissä tunnisteisiin viitataan ristikkomerkillä:

#poikkeus {
border:3px red double;
}

Näennäisluokat ja kaskadointijärjestys

Näennäisluokilla ja näennäiselementeillä vaikutetaan sellaisiin tekijöihin, jotka eivät ole saavutettavissa dokumenttioliomalliin viittaamalla. Tässä käsitellään vain suppeasti käytetyimmät näennäisluokat, joilla vaikutetaan linkkien, eli A-elementtien tyyleihin. Seuraavat valitsimet viittaavat linkkeihin niiden tilan mukaan:

/* asetetaan kaikille ankkureille valkoinen
   tausta ja linkeille värit tilan mukaan   */
a         {background:white;}
a:link    {color:blue;      }
a:visited {color:purple;    }
a:hover   {color:aqua;      }
a:active  {color:lime;      }

Kaskadointijärjestyksellä tarkoitetaan ratkaisumallia, jonka mukaan määritellään painoarvo ristiriitaisille tyyliehdotuksille ja päätetään mikä sääntö jää voimaan. Esimerkkinä mainittakoon valitsimen yksityiskohtaisuus; mitä yksityiskohtaisempi selektori, sitä enemmän säännöllä on painoarvoa. Yllä olevassa esimerkissämme säännöt ovat keskenään ristiriitaisia, sillä linkki voi olla samanaikaisesti, sekä visited-, että hover-tilassa, mutta kummatkin ovat yhtä yksityiskohtaisia. Asia ratkaistaan siten, että viimeiseksi ilmoitettu sääntö jää voimaan, joten esimerkkimme ilmoitusjärjestys on oleellinen.

Nämä olivat yleisimpiä ja yksinkertaisempia valitsimia. Kattava selektoreiden yhteenveto löytyy eri dokumentista.

Deklaraatiot, eli käytettävät ominaisuudet arvoineen

Deklaraatiot koostuvat etukäteen määritetyistä ominaisuuksista ja näiden sallituista arvoista. CSS 2.1-tason ominaisuudet visuaaliselle medialle arvoineen ja osin esimerkkien kera löytyvät omana suomenkielisenä kokonaisuutenaan.

Edistyneempiäkin tyyliehdotuksia (CSS3) löytyy, mutta näiden asiakasohjelmatuki on toistaiseksi vielä kirjavaa. Puutteellinen selaintuki usein johtaa kovin epätoivottaviin tuloksiin, kuten sivun layoutin hajoamiseen tai sisällön tulostumattomuuteen. Yksinkertaisin ja kustannustehokkain tapa välttää tällaisia ongelmia on käyttää vain yleisesti tuettuja (käytännössä suositusstatuksen saaneita) ominaisuuksia.

CSS:n yhdistäminen dokumenttiin

Tyyliehdotuksia voidaan yhdistää dokumenttiin muutamalla eri tavalla, joko tuomalla ne ulkopuolisesta CSS-tiedostosta, tai upottamalla ne suoraan dokumenttiin. Lähes poikkeuksetta on suositeltavampaa pitää CSS erillään merkkauskielestä. Seuraavaksi esitellään eri tyylien yhdistämiskeinot käännetyssä suositusjärjestyksessä.

CSS:n upotus STYLE-attribuutilla

CSS voidaan upottaa suoraan dokumenttiin käyttämällä elementtikohtaisesti yleistä STYLE-attribuuttia. Tällöin valitsinta ei tarvita, koska attribuutin sijainti implisiittisesti määrittää selektorin. Deklaraatiolohko upotetaan suoraan attribuutin arvoksi ilman lohkon rajoja ilmaisevia aaltosulkuja:

<h1
 style="font-family:sans-serif;font-style:italic">
 Esimerkkiotsikko</h1>

Tämän menetelmän selvänä haittapuolena on dokumentin rakenteen ja sen ulkoasun yhdistyminen, joten CSS:n upotus STYLE-attribuutilla sopii ainoastaan poikkeustapauksiin.

CSS:n upotus STYLE-elementillä

Tällä menetelmällä CSS sijoitetaan STYLE-elementin sisällöksi:

<style type="text/css">
h1 {
font-family:sans-serif;
font-style:italic;
}
p {
font-family:serif;
font-style:normal;
}
</style>

STYLE-elementillä voidaan koota kaikki dokumentin tyyliehdotukset samaan paikkaan, mutta tämänkin menetelmän haittana on se, että merkkauskieli ja tyyliehdotukset yhdistyvät samaan dokumenttiin. Menetelmä siis sopii parhaiten vain sellaisiin tapauksiin, jossa dokumenttikohtaiset tyylit ovat ainutlaatuisia.

CSS:n tuonti LINK-elementillä

LINK-elementillä viitataan ulkopuoliseen CSS-tiedostoon:

<link
 type="text/css"
 rel="stylesheet"
 charset="iso-8859-1"
 href="tyylit.css" />

Edelliseen esimerkkiimme on merkitty neljä attribuuttia arvoineen:

CSS-tiedostomme on aivan tavallinen tekstitiedosto, joka sisältää pelkät tyyliehdotukset ja mahdolliset kommentit. Tiedostopäätteeksi on annettu .css, sekä yhteensopivuus-, että yhdenmukaisuussyistä.

LINK-elementti sopii käytettäväksi tilanteissa, joissa useammat dokumentit käyttävät samoja tyylejä. Kokonaisen sivuston tyylimääritykset voidaan siis sijoittaa jopa yhteen tiedostoon, jolloin sivuston ulkoasun hallinta helpottuu huomattavasti.

CSS:n tuonti @import-säännöllä

@import on avainsana jolla tuotetaan toisen tyylitiedoston sisältämät tyylisäännöt. Avainsana, jonka parametriksi tulee tuotettavan tyylitiedoston URL-osoite on esiinnyttävä tuottavassa tyyliehdotuksessa ennen muita mahdollisia tyylisääntöjä:

<style type="text/css">
@import "tyylit2.css";
/*mahdolliset upotetut tyylisäännöt vasta tähän*/
</style>

Tämä tuontimetodi vastaa pitkälti edellistä, mutta käytännöllisenä lisäetuna on tuotettavien tyyliehdotuksien täydentäminen tai ohittaminen yhdestä ja samasta elementistä.

Ongelmien ratkaiseminen

Lopuksi käsittelemme tyyleihin liittyvien ongelmien yleisiä ratkaisumalleja, jotka jaamme neljään kysymykseen. Tarkistukset kannattaa tehdä esitetyssä järjestyksessä:

Onko Web-sivujen merkkaus validia?

Tyylien toiminta edellyttää muodollisesti oikeaa merkkausta. Varmistaa merkintäkielen virheettömyys ohjelmallisesti validoimalla koodisi. Validointi voidaan toteuttaa joko verkon kautta, esimerkiksi online-validointityökaluilla, tai omalle työasemalle asennettavalla validaattorilla (< HTML5).

Onko CSS muodollisesti virheetöntä?

Tyylimäärityksiin voi varsin helposti pujahtaa kirjoitus- tai ajatusvirheitä. Tyyliehdotuksien ohjelmallinen tarkistaminen on syytä tehdä aina editoinnin jälkeen. CSS-määrityksien tarkistus -sivulla on käyttöliittymiä erilaisiin CSS-koodin tarkistuksiin.

Olenko ymmärtänyt ominaisuuden oikein?

Voit käyttää CSS 2.1 -ominaisuusreferenssiä tarkastaaksesi ominaisuuksien piirteitä. Jokaisen ominaisuuden sivulla on myös linkki lisätietoihin, kuten CSS-spesifikaatioon.

Olenko ymmärtänyt valitsimen oikein?

Varmista selektoriselityksen avulla että olet ymmärtänyt selektorin oikein.

Apua muualta?

Mikäli ongelmien ratkaiseminen ei omin konstein onnistu, niin käytä avuksesi uutisryhmiä, esimerkiksi sfnet.viestinta.www, jossa käsitellään Weppiin liittyviä standardeja, ohjelmia ja käytäntöjä. Uutisryhmää voidaan tarvittaessa käyttää myös Webin kautta.

Osmo Saarikumpu

yksi taso ylös