Siirry sivun sisältöön Avut CSS HTML JS Wp

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

Sisällysluettelo

1. Yleistä CSS-tyyleistä
   • CSS:n suomat edut
2. Tyyliehdotuksien koostumus ja kommentointi
3. Selektorit ja ominaisuuksien periytyminen
   • Tyyppiselektorit
   • Luokkaselektorit
   • Tunnisteselektorit
   • Näennäisluokat ja kaskadointijärjestys
4. Deklaraatiot, eli käytettävät ominaisuudet arvoineen
5. CSS:n yhdistäminen dokumenttiin
   • CSS:n upotus STYLE-attribuutilla
   • CSS:n upotus STYLE-elementillä
   • CSS:n tuonti LINK-elementillä
   • CSS:n tuonti @import-säännöllä
6. Ongelmien ratkaiseminen
   • Koodien tarkistus
   • Asiakasohjelmatuen tarkistus
   • Suosituksien tarkistus

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:

• asiakasohjelman oletustyylit
• dokumentin tekijän tyyliehdotukset
• käyttäjän omat tyyliehdotukset

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ä:

• Dokumenttien käyttöalueet laajenevat: sama rakenne kelpaa eri välineille, kuten tulostimille, puhesyntetisaattoreille, projektoreille, yms., joille sitten tyylien avulla voidaan ehdottaa kullekin sopivaa esitystapaa.

• Dokumenttien luonti ja ylläpito yksinkertaistuu: esitystavan suunnittelu, toteuttaminen ja viimeistely voidaan jättää viimeiseksi toimenpiteeksi, tarvittaessa eri osaamisalueiden taitajille. Rakenteellinen koodi helpottaa myös sisältöpäivityksiä ja keskitetty ulkoasuhallinta nopeuttaa esitykseen liittyviä muutoksia.

• Dokumenttien tiedostokoko pienenee: samoja tyylejä voidaan yhdistää moneen dokumenttiin, jolloin välimuistien hyödyntäminen tehostuu ja dokumenttien siirrettävyys ja latautuminen nopeutuu.

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 selektorin, 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:

selektori {ominaisuus:arvo}

Selektori erotetaan tyhjällä tilalla (whitespace, esim. välilyönti) aaltosulkujen sisälle sijoittuvasta deklaraatiosta, jossa ominaisuudet erotetaan arvoistaan kaksoispisteellä. Tyylisäännössä voi esiintyä useampia selektoreita, 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:

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

/* Ryhmitellyssä 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

Selektoreiden avulla siis yhdistetään deklaraatiot kohteisiinsa dokumentissa. Selektoreiden ominaisuudet useasti myös periytyvät jälkeläiselementeille, esim. 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-selektoreita 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, esim. 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 kuuluvikasi tarkea-luokkaan. Toisessa säännössä elementtisidonnaisuutta ei ole, joten se koskee kaikkia elementtejä, jotka on merkitty kuuluvikasi tarkea-luokkaan.

Tunnisteselektorit

Kaikki elementit voidaan merkitä yksilöllisellä tunnisteella, eli yleisellä ID-attribuutilla, esim. 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 selektorit viittaavat linkkeihin niiden tilan mukaan:

1. a:link - selektori vaikuttaa vierailemattomaksi luokiteltuun linkkiin
2. a:visited - selektori vaikuttaa vierailluksi luokiteltuun linkkiin
3. a:hover - selektori vaikuttaa osoittimen alla olevaan linkkiin
4. a:active - selektori vaikuttaa aktiivissa tilassa olevaan linkkiin

/* 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 selektorin 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 esim., sekä visited-, että hover-tilassa, mutta kummatkin ovat yhtä spesifisiä. Asia ratkaistaan siten, että viimeiseksi ilmoitettu sääntö jää voimaan, joten esimerkkimme ilmoitusjärjestys on oleellinen.

Nämä olivat yleisimpiä ja yksinkertaisempia selektoreita. 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. CSS1-tason ominaisuudet arvoineen ja esimerkkien kera löytyvät omana suomenkielisenä kokonaisuutenaan. Edistyneempiäkin tyyliehdotuksia löytyy englanninkielisestä CSS 2.1 -spesifikaatiosta, mutta näiden asiakasohjelmatuki on toistaiseksi vielä kirjavaa.

Valitettavasti edistyneimpien tyylien 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ä CSS1-) 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 selektoria 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>

Pakollinen TYPE-attribuutti ilmoittaa tyyliehdotusten sisältötyypin, joka on aina tuo sama CSS:n ollessa kyseessä.

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" />

Yo. esimerkkiimme on merkitty neljä attribuuttia arvoineen:

• TYPE-attribuutilla ilmoitetaan linkitetyn tiedoston sisältötyyppi, joka on aina tuo sama CSS:n ollessa kyseessä.
• REL-attribuutilla ilmoitetaan linkin suhde (relationship) dokumenttiin; tässä tyylisäännöstö.
• CHARSET-attribuutilla ilmoitetaan ulkoisen resurssin merkistö; tässä suomenkielisen kommentoinnin mahdollistava länsi- ja pohjoiseurooppalainen Latin-1.
• HREF-attribuutilla ilmoitetaan CSS-tiedoston URL; tässä dokumentin kanssa samassa hakemistossa (kansiossa) sijaitseva tyylit.css.

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 sillä on myös pari käytännöllistä lisäetua kun sitä käytetään esimerkkimme mukaisesti:

• tuotettavia tyyliehdotuksia voidaan täydentää tai ohittaa yhdessä samassa elementissä
• vanhemmat tyylisääntöjä varsin puutteellisesti tukevat selaimet (Netscape 4, Internet Explorer 3 ja 4) eivät ymmärrä esimerkkimme syntaksia, jolloin kaikki tai ongelmia aiheuttavat tyylisäännöt voidaan helposti ja luotettavasti piilottaa yhteensopivuusongelmia aiheuttavilta selaimilta

Ongelmien ratkaiseminen

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

1. Koodien tarkistus

   Ehkäpä yleisin syy tyylien toimimattomuuteen löytyy omasta koodistamme. Vika voi piiletä kahdella suunnalla, sekä tyylien että merkkauksen virheellisyydessä. Onneksemme kummankin muodollinen oikeellisuus voidaan tarkistaa ohjelmallisesti.

   Merkintäkieleen liittyvät virheet voidaan sulkea pois validoimalla koodi. Validointi voidaan toteuttaa joko verkon kautta, esimerkiksi online-validointityökaluilla, tai omalle työasemalle asennettavalla validaattorilla. Tyylimäärityksiin pujahtaneet kirjoitus- tai ajatusvirheet voidaan taas eliminoida CSS-syntaksin tarkistuksella.

2. Asiakasohjelmatuen tarkistus

   Mitä edistyneimpiä tyylejä käytämme, sitä todennäköisemmin törmäämme jonkinlaiseen asiakasohjelmatuen puutteeseen. Yksittäisestä asiakasohjelmasta voi puuttua jonkun ominaisuuden tuki kokonaan. Tuki voi olla myös puutteellista tai peräti virheellistä. Edelleen, tilanne voi olla sellainen ettei yksikään asiakasohjelma vielä tue jotain edistyneempää ominaisuutta.

   Asiakasohjelmatuen tarkistuksen apuna voidaan käyttää Web-resursseja, joihin on koottu tietoa keskitetysti, kuten Web browser CSS support -sivua, jossa nimensä mukaisesti käsitellään yleisempien selainten CSS-tukea. Tässä yhteydessä tulee huomioida että tyylien toimimattomuus voi liittyä myös puutteelliseen merkintäkielitukeen, joten sekin kannattaa tarkistaa, esimerkiksi Web browser HTML support -sivulta, mikäli CSS-tuki löytyy.

3. Suosituksien tarkistus

   Kolmas yleinen mutta edellisiä harvinaisempi ongelman lähde voi liittyä puutteelliseen käsitykseemme jostakin tyylisäännöstä tai sen soveltuvuudesta. Myös joihinkin ominaisuuksiin liittyviä yksityiskohtia on myöhemmissä suosituksissa muutettu tai korjattu. Kannattaa siis tarkistaa ajankohtaisesta CSS-spesifikaatiosta että olemme ymmärtäneet ongelmallisen säännön soveltuvuuden oikein, mikäli edelliset kohdat ovat kunnossa.

   Ominaisuuksien piirteiden tarkastelemisen apuna voidaan käyttää CSS 2.1 -ominaisuuksien kehyskäyttöliittymää. Monimutkaisemmat selektorit taas voidaan kääntää selkokielisiksi selektoriselityksen avulla.

Osmo Saarikumpu