Päivitetty: 10.03.2003.

Prosessointi

Prosessoinnilla tarkoitetaan sitä, miten selain tulkitsee saamansa eri CSS -säännöt ja asettaa päällekkäin menevät säännöt järjestykseen. Tässä yhteydessä on myös korkea-aika tarkastella HTML-elementtien hierarkkista suhdetta toisiinsa. Vain siten voit ymmärtää CSS -sääntöjen periytymisen sekä sääntöjen järjestyksen ohittamisen. W3C käyttää HTML-elementtien hierarkian kuvaamiseen sukumetaforaa, joka onkin varsin helppo omaksua.


Prosessointi

Sukupuu

Käyn seuraavaksi läpi W3C:n käyttämää sukumetaforaa. Huomaa kuitenkin , että CSS1:sää käytetään vain kahta elementtitasoa eli Emo- ja lapsielementti joita kutsutaan myös ylemmän- ja alemman tason elementeiksi.

Tosin jälkeläiselementti on olemassa mutta sitä kutsutaan kontekstin (Contextual Selector) eli asiayhteyden mukaiseksi valitsimeksi.

HTML sukupuu:

<BODY>
 <DIV>
  <OL>
    <LI>Pekka</LI>
    <LI>Ville</LI>
    <LI>Kaisa</LI> 
  </OL>
  <P>
   <b>Moi/b>
  </P> 
 </DIV>
</BODY>

'Emoelementti' eli 'vanhempi' (Parent Element). Dokumenttipuussa emoelementillä on vähintään yksi lapsielementti, jonka se sulkee sisäänsä, niin ettei vanhemman- ja lapsielementin väliin jää muita elementtejä. Esimerkissä <OL> on <LI> -elementtien emoelementti, vastaavasi <P> on <b> -elementin emo.

'Lapsielementti' (Child Element). Lapsielementti on emoelementin jälkeen ensimmäinen alatason elementti niin, ettei emo- ja lapsielementin välissä on muita elementtitasoja. Lapsi on emolle joko pakollinen alatason elementti, kuten <LI> -elementit ovat <OL> -elementille. Tai Lapsi voi olla jokin alemman tason HTML-elementti, kuten <b> -elementti on <P> -elementille.

'Esikoinen' eli 'ensimmäinen lapsi elementti' (First-child Element ). Emoelementin jälkeen välittömästi ensimmäisenä oleva ensimmäinen alatason elementti. Esimerkissä <OL> -elementin ensimmäinen lapsi on ylin <LI> -elementti eli 'Pekka'.

'Sisarelementti' tai 'viereissisarelementti' (Adjacent sibling Element). Sisarelementeillä tarkoitetaan emoelementin jälkeläisiä, jotka ovat kaikki keskenään samalla tasolla, eivätkä ne koskaan ole sisäkkäin. (Sisarelementtejä voidaan vielä tarkentaa, mutta kerron niistä lisää CSS2-osiossa). Esimerkissä kaikki <LI> -elementit ovat toisten sisarelementtejä, myös OL ja P ovat samalla tasolla joten ne ovat toistensa sisaria.

'Jälkeläiselementti' eli 'perillinen' (Descendants Element). Emoelementin sulkemat kaikki alemmantason elementit, kuten lapsielementit sekä myös lapsenlapsielementit, ovat aina perillisiä emoelementtiin nähden. Tasoja voi olla useita. Viereisessä esimerkissä kaikki elementit ovat <BODY> -elementin jälkeläisiä. Halutessasi voit luoda säännön, joka vaikuttaa elementtiin vain kun se on tietyn elementin jälkeläinen katso esimerkki 4.

'Esi-isäelementti' (Ancestor). Esi-isäelementillä on vähintään kahdentason jälkeläisiä, eli lapsia sekä lapsenlapsia, tasoja voi olla useita. Viereisessä esimerkissä <DIV> on <LI>- ja <b>-elementtien esi-isä.

<< Alkuun


Periytyminen

Nyt kun sukupuu on hallinnassa voidaan tarkastella perintöasioita. Periytyminen helpottaa huomattavasti CSS -sääntöjen kirjoittamista, koska säännöt periytyvät automaattisesti eikä niitä tarvitse kirjoittaa joka elementille erikseen.

Esimerkki 1:

Tarkastellaan ensin yksinkertaista periytymissääntöä. Oletetaan, että p-elementillä on seuraava määritys:
P { color: red}. Jolloin seuraava HTML-koodi:
<P>Tässä on <b>punaista</b>.</P> näyttää tältä:

Tässä on punaista.

Kuten yllä olevasta sukupuusta voimme todeta <b> -elementti on <p> -elementin lapsi. Jos tarkastelemme sivua Ominaisuudet/tausta&väri ja siltä kohtaa color huomaamme, että taulukossa lukee näin Periytyvä: Kyllä.

Eli p-elementin color -arvo on periytyvä. Näin ollen p-elementin lapsi (b) perii sen ominaisuuden (color: red). Itse asiassa kaikki P-elementin jälkeläiset ovat perillisiä, eli ne saavat punaisen värin. Näin sinun ei tarvitse määritellä jokaiselle haluamallesi elementille kyseistä sääntöä erikseen, vaan se periytyy automaattisesti.

Esimerkki 2:

Jatketaan yllä olevaa esimerkkiä. Muutetaan CSS -sääntöä seuraavanlaiseksi:

P { color: red; background-color: beige}.

Nyt kun tarkastelemme Ominaisuudet/tausta&väri ja sieltä kohtaa backround-color voimme todeta, että taulukossa lukee: Periytyvä: Ei. Eli taustavärin ei pitäisi periytyä. Katsotaan nyt, miltä seuraava HTML-koodi näyttää:

<p>Tässä on <b>punaista.<b> ja tausta on Beige</p>

Tässä on punaista ja tausta on Beige.

Mutta miksi <b> -elementin tausta on beige, eihän taustavärin pitänyt periytyä? Itse asiassa <b> -elementin tausta ei ole beige, vaan läpinäkyvä (transparent).

Jos katsot samaa taulukkoa kuin yllä siinä lukee myös: Oletus arvo: transparent (läpinäkyvä). Eli <P> -elementin taustaväri ei periydy <b> -elementille, mutta koska <b> -elementin tausta on läpinäkyvä, näkyy <P> -elementin taustaväri siitä läpi.

Esimerkki 3:

Jatketaan vielä samaa esimerkkiä. CSS -säännöt ovat:

P { color: red; background-color: beige }
b { background-color: silver }

Tässä on punaista ja tausta on Beige.

Nyt b-elementillä on oma taustaväri, joten p-taustaväri ei enää näy läpi.

Esimerkki 4:

Muutetaan sääntöä niin, että kun b-elementti esiintyy P-elementin sisällä niillä on sama väri ja muulloin sillä on väri silver:

  P { color: red; background-color: beige }
P b { background-color: beige }
  b { background-color: silver} 

Tässä on punaista ja tausta on Beige.

B-elementti h5-elementissä.

<< Alkuun


Periytymisen hyödyntäminen

Kun suunnittelet CSS -sääntöjä kannattaa muistaa, että osa säännöistä periytyy. Eri ominaisuuksien yhteydessä mainitaan aina onko ominaisuus periytyvä vai ei. Huomaa kuitenkin, että jotkut ominaisuudet näyttävät periytyvän vaikka niin ei olekaan. Seuraavaksi muutama esimerkki periytymisestä.

body { font-family: Arial; 
       color: maroon; 
       background-color: whitesmoke; 
       margin-left: 8%; 
       margin-right: 4% 
     }

Yllä olevat säännöt määrittävät dokumentille fontin Arial ja väriksi maroon. Kirjaisin määritys Arial periytyy kaikille elementeille, koska kaikki HTML-elementit ovat <BODY> -elementin jälkeläisiä eli perillisiä ja koska font-family -ominaisuus on periytyvä.

Taustaväri puolestaan vain näyttää periytyvän kaikille elementeille, ellei niillä ole omaa määritystä. Myöskään marginaalit eivät periydy vaikka tulos ehkä näyttääkin siltä. Vanhemmat selaimet eivät välttämättä osaa toteuttaa oikeaa periytymistapaa, joten on turvallisempaa määrittää fontti ja väri joka elementille erikseen.

Marginaalit puolestaan voidaan määritellä suoraan body -elementille, esim. body: margin-left: 10%. Tällöin voidaan antaa muille elementeille negatiivisia (suhteellisia) arvoja esim. h1: margin-left: -7%.

Huomaa kuitenkin, että jos määrität marginaaleja myös muille elementeille (div: margin-left: 15%) niin nämä arvot summautuvat bodyn arvojen kanssa (10+15=25), tosin tämä riippuu täysin käytettävästä selaimesta. Näin ollen marginaalit on turvallisempi määrittää kaikille halutuille elementeille erikseen

<< Alkuun


CSS:n lähteet

WWW-dokumentin CSS -säännöt voivat olla peräisin useista eri lähteistä, joilla on kaikilla eri tärkeysarvot. CSS säännöt voivat olla peräisin seuraavista paikoista:

CSS -prosessorissa käsitellään kaikki yllä olevat säännöt ja lajitellaan ne. Sen jälkeen kaikki toimivat säännöt astuvat voimaan. Jos samalle elementille on määritelty päällekkäisiä sääntöjä asetetaan ne arvojärjestykseen ja korkeammaksi tullut sääntö astuu voimaan.


CSS:n arvojärjestykset

CSS1 yhteensopivat selaimet asettavat eri säännöt seuraavaan tärkeysjärjestykseen:

CSS2 yhteensopivat selaimet asettavat kävijän tärkeät säännöt sivun tärkeiden sääntöjen edelle. Myös eri CSS -sääntöjen painoarvo vaihtelee. Nyrkkisääntönä voidaan sanoa, että viimeiseksi määritelty sääntö kumoaa edellisen. Eli elementin sisäinen sääntö ohittaa <STYLE> -elementillä upotetun tyylisäännön. Joka puolestaan ohittaa <LINK> -elementillä linkitetyn säännön.

!important

Normaalin järjestyksen voi ohittaa ns. !important- eli tärkeyssäännöllä. Tämä sääntö määrä, että selaimen tulee noudattaa kyseitä CSS -sääntöä vaikka se myöhemmin kumottaisiin.

Tärkeyssäännön määrittäminen on erittäin helppoa. Normaalin CSS -säännön jälkeen kirjoitat vain: !important (huomaa huutomerkki), jonka jälkeen tulee vasta puolipiste. Esimerkiksi määritteet:

body {color: #000000 !important; background-color: #FFFFFF !important;}

Määräävät body -elementille valkoisen värin ja taustaksi mustan, lisäksi kummankin säännön painoarvo on !important, eli se ohittaa muut säännöt. Tämä takaa sen, että teksti (joka on oletusarvoisesti mustaa) erottuu varmasti taustasta.

Tämä menetelmä saattaa tuntua hienolta, mutta kehotan käyttämään !important -sääntöä hyvin harkiten. Tämä sen vuoksi, että sivuja saattaa katsoa henkilöt jotka haluavat käyttää omia tyylimääritteitään (esim. värisokeat). Mutta jos käytät runsaasti tärkeyssääntöä voi heille tulla niin suuria ongelmia, että heidän täytyy ottaa selaimen CSS -tuki pois päältä!

<< Alkuun


© Petteri Perälä 1999 - 2003.
E-mail: [ petepe@mbnet.fi ].

Valid CSS! Valid HTML 4.01!