[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]

5. Mikä on CSS:n prosessointijärjestys

Yleistä

CSS-tiedostojen rakentelun kannalta olennaisinta on ymmärtää, missä järjestyksessä selain lukee CSS-ominaisuudet.

CSS

Periaatteessa selaimella on kolmenlaisia tyylisivuja (en voi antaa esimerkkejä vaan sinun on itse tutkittava käyttämääsi selainta):

  1. UA style sheets (UA = User Agent = asiakassovellus, joka on yleensä selain tai sitten jokin muu ohjelma, joka osaa käyttää tyylisivuja). Kyse on ohjelman omista elementtimäärittelyistä silloin, kun kukaan ei ole määritellyt tyylisivuja. Itse asiassa kyse on pääosin tavallisten HTML 3.2 tai HTML 4.01 elementtien ja attribuuttien ymmärtämisestä. Eri selaimilla on hieman toisistaan poikkeavia oletusarvoja. Tallennetut asetukset luovat eräänlaisen selaimen oman tyylisivutiedoston. Selaimilla voi olla myös tuki eräille CSS-ominaisuuksille, joita voi sovittaa mille tahansa www-sivulle. MS IE 5.x+:lla voi määrittää linkeille ominaisuuden hover. Sillä on sama merkitys kuin näennäisluokalla :hover. Mozilla Gecko -selaimet määrittävät HTML-asetukset UA CSS:n avulla res/html.css ja /res/html.css tiedostoilla (myös Opera hyödyntää UA CSS:ää muissa kuin HTML-toteutuksissa; käsittelen UA CSS:n käyttöä erillisivulla[S]). Selaimen omat elementtimäärittelyt ovat voimassa silloin, kun elementtejä ei ole CSS:n avulla erityisesti määritelty.

    Muulla tavoin määritellyt CSS-ominaisuudet ohittavat yleensä selaimen tyylisivutiedoston ja HTML-attribuutit, mutta on olemassa eräitä poikkeuksia ja selainten välillä on tässä suhteessa eroja. Nämä muutamat erot on sivujen tekijän syytä tuntea, mikäli hän haluaa sivujensa näkyvän mahdollisimman samankaltaisena CSS-ominaisuuksia tukeville selaimille. Käsittelen näitä toisissa yhteyksissä.

  1. User style sheets eli selaimen käyttäjän selaimelle määrittelemät CSS-tyylisivut. Periaatteessa selaaja voi luoda CSS-ominaisuudet kaikille netistä lukemilleen tiedostoille luomalla oman tyylisivutiedoston, jonka hakemistopolun (path) hän ilmoittaa selaimelle (selitän niiden käyttöä tarkemmin sivulla[S].
  2. Author style sheets eli dokumentin kirjoittajan tekemät CSS-määrittelyt. Näiden suhde käyttäjän tyylisivuihin on käytännössä selainriippuvainen. Periaatteessa sitä voi hieman kontrolloida CSS:n avulla ns. important rule -periaatteella, jonka avulla yksittäiset CSS-ominaisuudet määritellään erityisen tärkeiksi (selitän tarkemmin sen käytön tämän sivun lopussa). CSS2:n mukaan etusija on käyttäjän tyylisivuilla ja CSS1:n mukaan dokumentin laatijan tyylisivuilla.
W3C: CSS2: 6.4.2 !important rules[S][Pw].

[Alku]

Perusideat

Aiheet

Perusvertauskuvat

Selain tulkitsee kaikki määrittelyt tiettyjä sääntöjä noudattaen. Useimmat säännöt perustuvat ns. dokumenttipuuhun. Puuvertauksen lisäksi tietokonekielessä käytetään sukumetaforaa. Alkukielessä puhutaan mm. vanhemmasta (parent) ja lapsista (child). Suomenkielisen yleisen tietokonekielen pohjalta on kuitenkin syytä käyttää ilmaisua emo (lue perustelut[S][Pw]). Lapsielementeillä saattaa edelleen olla pakollisia (required) ja siten tavallaan luonnollisia lapsielementtejä (lapsielementit voivat olla myös ei-välttämättömiä).

Emo- ja lapsielementtien välistä suhdetta havainnollistaa yksinkertaistettu dokumenttipuu:

BODY  - H1 (pääotsikko, jonka sisään laitetaan yleensä vain joitakin rivinsisäisiä fonttityylielementtejä; ne eivät ole elementin H1 välttämättömiä lapsia)
- P - BLOCKQUOTE
- OL (tämä on seuraavien listaelementtien "emo"; emolla täytyy olla vähintään yksi lapsi )
LI (yksittäinen listaelementti eli siis edellisen elementin lapsi)
LI (toinen listaelementti listaelementeillä voi olla hyvinkin monia tasoja ja siten ikään kuin "lastenlapsia")

Suurin osa säännöistä on nimetty sukumetaforaa käyttäen eikä metaforan rikkautta voi täysin ilmaista suomenkielisissä vastineissa. Alkukielen kuvakieli on kuitenkin syytä pitää mielessä. Elementeistä puheen ollen on muistettava, että nämä nimet liittyvät elementtitasoihin ja elementtien keskinäisiin suhteisiin toisiinsa nähden ns. dokumenttipuussa (systeemi toimii osittain myös attribuuttivalitsimilla). Käsittelen tässä yhteydessä myös :first-child näennäisluokkavalitsimen (sitä voisi kutsua "näennäisesikoisluokkavalitsimeksi"). Se on osa koko systeemiä ja se voidaan ymmärtää vain suhteessa muihin käsitteisiin. Yritän selittää kaiken niin ruohonjuuritasoisesti kuin voin. Elementtien keskinäisiä suhteita koskevat CSS-metaforan osat ovat seuraavat:

 
  • Parent = taso vanhempi eli "emoelementtitaso". Olennaista on se, että kirjoitettaessa emosta, emolla tulee olla vähintään yksi lapsitason elementti, jonka se sulkee sisäänsä. Se sulkee lapsielementin sisäänsä suoraan, ilman, että rakenteessa on niiden välissä muuta elementtiä eli kyseessä on ympäryselementti.
    Kanaemo ja sen poikaset
  • Child = taso lapsi eli mikä tahansa lapsitason elementti, jolla on emotason elementti. Huomaa, että lapset ovat vain ensimmäisen alatason elementtejä ilman, että rakenteessa on emo- ja lapsielementtien välissä muuta elementtiä. "Lastenlapset" ovat "perillisiä" (descendants). Lapsielementit voivat olla emoelementille pakollisia osaelementtejä, mutta ei välttämättä.
  • First-child = ensimmäinen lapsi eli esikoinen; elementtitasoista puhuttaessa kyseessä on ensimmäisen emoelementtitason jälkeen tuleva lapsielementtitaso (:first-child - näennäisluokassa kyse on puolestaan yksittäisestä elementistä jollakin elementtitasolla)
  • Ancestor = esi-isä, esivanhempi eli "esi-isäelementti" (tai "esiemoelementti"). Osittain sama kuin parent, mutta toistensa sisään sijoittuvia tasoja voi olla useita, kuten perheessä isoisällä on lastenlapsia ja lastenlapsilla voi edelleen olla lapsia jne.
  • Descendant = perillinen eli perilliselementtitaso. Osittain sama kuin child, mutta elementtien välissä voi olla useita elementtitasoja. "Lapsenlapset" ovat aina perilliselementtejä.
  • Adjacent sibling = viereissisarelementti eli "viereissisarelementtitaso". Sisarelementeillä on sama emo. Sisarelementit eivät ole koskaan keskenään sisäkkäin vaan ovat samalla tasolla ikään kuin siskokset. Adjacent sibling on ilmoitetun sisarustason jälkeen seuraava saman tason elementti. CSS2 liittää "sisarussuhteisiin" vieläkin tarkempia ilmaisuja.
    • Preceding sibling. Perheessä on aina yksi esikoinen ja hänen jälkeensä tulevat muut siskokset. Adjacent sibling määrittää vain elementtitason. Jotta esikoinen voitaisiin tarkasti nimetä, tarvitaan :first-child näennäisluokkaa. Preceding sibling on sisarusparven esikoinen, ennen muita sisaria.
    • Following sibling. Joku muu saman "elementtiperheen" sisarus.
    • Preceding element. Elementti, joka on heti jäljessä tulevaan sisarelementtiin nähden samalla tasolla sitä ennen tai edellisellä elementtitasolla.
    • Following element. Kyseessä on edelliseen nähden päinvastaisesta suhteesta. Näiden eroa aiemmin mainittuihin yleisempiin ilmaisuihin selventänee (?) seuraava yritys suomentaa CSS2 spesifikaation selityksiä (mukana on alkuperäistermit, sillä ilman niiden ymmärtämistä ei selviä):
      • Ancestor (element). Elementtiä A kutsutaan elementin B esi-isäelementiksi (ancestor), jos ja vain jos B tulee elementin A jälkeen eli on sen jälkeläiselementti (descendant).
      • Descendant (element). Elementtiä A kutsutaan elementin B jälkeläiselementiksi (descendant), jos elementti A on joko
        (1) elementin B lapsi or
        (2) jonkun muun elementin (C) lapsi ja on samanaikaisesti elementin B jälkeläiselementti (descendant) elementti
      • Preceding element. Elementtiä A kutsutaan elementin B edeltäväksi (preceding) elementiksi, jos ja vain jos
        (1) A on elementin B esi-isäelementti or
        (2) A on elementin B edeltävä sisarelementti (preceding sibling).
      • Following element. Elementtiä A kutsutaan elementin B jäljessä tulevaksi elementiksi (following) jos ja vain jos B on elementin A edeltävä (preceding) elementti.
W3C: CSS2: 3 Conformance: Requirements and Recommendations[Pw].
[Alku]

Periytyminen

Perintö

Perheessä lapsi perii vanhempansa ja jälkeläinen saa perinnön esi-isiltään tiettyjen lakien ja asetusten mukaisesti. CSS-ominaisuuksien ymmärtämisessä on olennainen kysymys "perimysjärjestyksestä" (inheritance). Periytymisessä on kyse selaimen automaattisesta toimintamekanismista, jolla ominaisuudet sovitetaan eri elementeille. Periaate koskee toisten sisällä olevia eli sisäkkäisiä elementtejä, jotka ovat dokumenttipuun[S][Pw] (document tree) osia.

HTML-dokumenteissa määriteltävä peruselementti on yleensä BODY. BODY-elementin ominaisuuksien periytyminen toimii hyvin erityisesti tietyillä lohkoelementeillä ja niiden pakollisilla lapsilla. Lohkoelementeille automaattisesti periytyviä ominaisuuksia ovat lähinnä useimmat fontti- ja tekstityyppimääreet.

Käytettävään tekstityyppiin vaikuttavilla elementeillä, kuten H1-H6, B ja I säilyy vaihtelevassa määrin niiden ominaispiirteet. H1-H6 säilyttävät suhteelliset kokosuhteensa perustekstiin nähden, mutta tekstityyli periytyy BODY-elementiltä. Toisilla elementeillä perustyyli ei periydy BODY-elementiltä vaan sen muuttaminen edellyttää uudelleen määrittelyä. Syy siihen, miksi tietyt fontteihin liittyvät ominaisuudet eivät periydy kaikille mahdollisille elementeille on yksinkertaisesti siinä, että niille on määritelty selaimen omissa määrittelyissä tietyt perusominaisuudet. Esimäärittelyjen määrä vaihtelee selainkohtaisesti. Siksi jotkut selaimet tarvitsevat enemmän CSS:ää kuin jotkin toiset. Periytymissysteemissä on lisäksi joitakin puutteita, mutta käsittelen niitä muissa yhteyksissä.

Kaikki ominaisuudet (kuten taustamäärittelyt) eivät periydy emolta lapselle (CSS2 spesifikaation liiteosassa on taulukko, joka kertoo, mitkä ominaisuudet ovat periytyviä ja mitkä eivät).

CSS2:een standardiin on lisätty arvo inherit (esim. TABLE {color:inherit;}), joka siis tarkoittaa, että arvo peritään lähimmältä emoelementiltä. Kyseessä on "pakotettu periytyminen".

Selainkohtaisia huomautuksia:

  1. En suosittele arvon inherit käyttämistä, koska monet selaimet, jotka muuten osaavat sangen hyvin CSS:ää eivät sitä ymmärrä. Omissa testeissäni se on toiminut vain Mozilla 0.7:ssä sekä Mozilla 1.1a:ssa, mutta ei kaikissa suhteellisen uusissa Mozilla Gecko -selaimissa.


W3C: CSS2: Appendix F. Property index[Pw].

[Alku]

Tunnistettavat hahmot ja tapauskohtaiset valitsimet

Automaattinen periytymissysteemi koskee oikeastaan vain elementtien luonnollisia sisäkkäisyyssuhteita. Luonnollisella sisäkkäisyyssuhteella tarkoitan sitä, että esim. listaelementeillä voi edelleen alilistoja, joihin automaattisesti sovitetaan CSS-ominaisuuksia. Elementtien sisäkkäisyys voi olla hyvin monitasoista eikä automaattinen periytyminen pysty luomaan kuin yleislinjat. Tarkemman kontrollin aikaansaamiseksi voidaan luoda ominaisuuksien sovittamisen vastaavuus sääntöjä. Vastaavuussäännöt luovat elementtien kanssa ikään kuin "hahmon", jolle selain pyrkii etsimään sitä vastaavan kohdan dokumentista. Tapauskohtaisia sovelluksia voisi kutsua vaikka nimellä tunnistettava hahmo (a matching pattern).

Koska tunnistettavien hahmojen tarkoitus on luoda yksilöllisiin tilanteiseen sopivia sääntöjä, CSS1 spesifikaatio kirjoittaa tapauskohtaisista valitsimista (contextual selectors), mutta nimitystä ei käytetä CSS2 spesifikaatiossa (siinä säännöt ilmaistaan käyttämällä sanoja ancestor, descendant jne.; ilmaisu tapauskohtainen valitsin on kuitenkin niin kuvaava, että suosittelen senkin käyttämistä).

Näissäkin toimintamekanismi perustuu pääosin dokumenttipuuhun ja suhteiden kuvaamiseen käytetään aiemmin selittämääni sukumetaforaa. Mutta toisin kuin automaattisessa ominaisuuksien periytymisessä, ominaisuuksia ei soviteta automaattisen mallin mukaan vaan ikään kuin avain ja lukko -periaatteella. Kontekstin mukaiset valitsimet ottavat nimensä mukaisesti huomioon ympäristön, jossa tyyli on määritelty. Määritelty tyyli on voimassa vain, mikäli elementti on oikeassa paikassa or sillä on tietty elementti vanhempana.

Itse asiassa yksinkertainen yleis- tai elementtityyppivalitsin on tunnistettava hahmo. Monimutkaisissa tunnistettavissa hahmoissa käytetään kohdistetumpia valitsimia. Erottaaksemme ne yksinkertaisista luokka- ja elementtityyppivalitsimista, tarkoitan tunnistettavalla hahmolla sellaista sääntöjä, jossa on vähintään kaksi ehtoa. Esimerkki yksinkertaisesta tunnistettavasta hahmosta ([M][S][Pw]):

table p {color:green;} /* jälkimmäistä osaa tässä säännössä kutsutaan nimellä descendant selector; määrittelyssä on huomattava, että kaarisulun eteen ei saa laittaa rivikatkoa, sillä olen todennut, että se tekee määrittelyt joskus toimimattomiksi */

Tämän säännön mukaan sellaiset kappaleet jotka ovat elementin TABLE jälkeläisiä (descendant), saavat värin green eli vihreän (kappaleet ovat elementin TD aloitus- ja päätöskoodien sisällä).

Käytän itse tämän tapaista menettelyä usein määritellessäni ei-järjestettyjä listoja (UL) ja niille erilaisia listakuvia. Käyttämällä ryhmittämistä[S][Pw], saadaan eri tason kuville yhtä aikaa sama kuvaus. Alla on esimerkki tällaisesta ratkaisusta ([M][S][Pw] - mukana on myös seuraavan esimerkin mallit):

ul li, ul li li li { /* tässä esimerkissä listan ensimmäisen ja kolmannen tason kuvat saavat vihreän listakuvan (selitän toisessa yhteydessä listoille sallittuja ominaisuuksia) */
list-style-type: disc;
list-style-image: url(pallo-vihrea.gif);
list-style-position: inside;
margin-left: -10px; }


ul li li { /* tässä esimerkissä listan toinen taso saa punaisen listakuvan; ilman lisämäärittelyä se olisi edellisen sääntöryhmän perusteella vihreä */
list-style-type: disc;
list-style-image: url(pallo-punainen.gif);
list-style-position: inside;
margin-left: -10px;}

CSS1-tason tunnistettavissa hahmoissa voidaan elementtityyppivalitsimiin lisätä luokka-tarkentimia. Tavallaan jo luokkavalitsimella tarkennettu elementtityyppivalitsin on jo sinänsä tarkoittamani tunnistettava hahmo, koska siinä samaan kohtaan annetaan kaksi ehtoa (elementti ja sille luokka). Mutta liittämällä nämä muihin elementtityyppivalitsimiin, saadaan monimutkaisempia tunnistettavia hahmoja seuraavien esimerkkien tapaan ([M][S][Pw] - mukana on myös edellisen esimerkin mallit):

ul.class li {
list-style-type: disc;
list-style-image: url(pallo-vaalea.gif);
list-style-position: inside;
margin-left: -10px;}

table.erityinen td p {color:green;} /* tämän säännön mukaan taulukkosolun sisällä oleva kappale saa värin vihreä, vain mikäli se on taulukossa, jolla on luokka erityinen. Huomaa, että luokkaa ei tarvitse määritellä, sillä se on tässä tapauksessa epäolennaista, sillä selain etsii määrittelyä taulukkosolun sisällä olevalle kappaleelle! */

Uudempi CSS määrittely tuo vielä tarkempia sovitussääntöjä. Seuraava kaavio kuvannee asiaa - (OL ja UL ovat listatyyppejä; LI tarkoittaa yksittäisiä listaelementtejä; olen yrittänyt selittää muutamin kommentein systeemiä - mieti sitä joskus kaikessa rauhassa):

 
1) li ol li /* sovitetaan seuraavassa esimerkissä kohtaan, jotka on merkitty class="a"; tämä kuuluu jo CSS1 määrittelyihin ja suosittelen toistaiseksi vain tämän tyyppisten määrittelyjen käyttämistä */
2) li ol > li /* sovitetaan seuraavassa esimerkissä kohtaan, joka on merkitty class="b" */
3) li ol > li:first-child /* sovitetaan seuraavassa esimerkissä kohtaan, joka on merkitty class="b+" */
4) li ol + ul /* sovitetaan seuraavassa esimerkissä kohtaan, joka on merkitty class="c" */
<UL>
<LI>
<OL>
<LI class="b+"></LI>
/* class="b+" on elementin OL "lapsitason" ensimmäinen lapsielementti (kyseessä on ns. first-child selector tarkennettuna :first-child pseudo-class näennäisluokalla): tälle elementille määritellyt ominaisuudet eivät koske seuraavan tason listaelementtejä eikä edes seuraavia samalla tasolla olevia listaelementtejä */
<LI class="b"></LI> /* class="b" on elementin OL toinen lapsielementti (kyseessä on ns. first-child selector): mitkään tämän tason lapsielementeille määritellyt ominaisuudet eivät koske seuraavan tason listaelementtejä */
<UL>
<LI class="a"></LI>
/* class="a"; tämä saa arvon ensimmäisen säännön mukaan, vaikka ei olekaan elementin OL ensimmäisen tason lapsi vaan vasta seuraavan tason lapsi eli "lapsenlapsi"; mikäli tällä elementillä olisi edelleen lapsia, ne saisivat tämän elementin määrittelyt */
</UL>
</LI></OL>
<UL class="c"> /* kyseessä on elementin OL jälkeen seuraavaksi löytyvä elementti UL eli saman tason sisarelementti, (kyseessähän on adjacent sibling selector) , joka määrittelee myös sitten yksittäisten lista-elementtien ulkonäön */
<LI></LI>
</UL>
</LI>
</UL>

On kuitenkin on muistettava, että tunnistettavan hahmon pituus ei yksistään ratkaise. Minulle kävi listatestiä tehdessäni virhe, kun en huomannut kaikkia sääntöjä ja niiden keskinäisiä vuorovaikutussuhteita. Seuraava esimerkki hahmottaa niitä sinulle:

li ol+ul {list-style-type: disc; /* tämän säännön tulisi muuttaa listakuva punaiseksi testatessani sitä eräällä Netscape 6.x esiversiolla */
list-style-image: url(./Css/Kuvat/pallo-punainen.gif);
list-style-position: outside;}

ul li {list-style-type: disc; /* sääntö ei jää voimaan, koska lyhyempi hahmo UL LI kumoaa sen, sillä se jatkaa edellistä määrittelyä siitä, mihin se päättyi! */
list-style-image: url(./Css/Kuvat/pallo.gif);
list-style-position: outside;}

li ol+ul li {list-style-type: disc; /* jotta ensimmäinen sääntö saadaan voimaan ja lyhyempi kumottua, ensimmäistä patteria tulee pidentää yhdellä elementillä - nyt Netscape näyttää suunnitellun kuvan! */
list-style-image: url(./Css/Kuvat/pallo-punainen.gif);
list-style-position: outside;}

Kaikista tarkimmat tunnistettavat hahmot voisi luoda yhdistämällä elementtityyppi- ja attribuuttivalitsimia[S][Pw].

Selainkohtaisia huomautuksia:

  1. MS IE ei tue mitään CSS2-tason tuomaa uutta tunnistettavaa hahmoa.

  2. Vain Mozilla Gecko ja Opera 7.x+ -selaimet tukevat kaikkia tällä sivulla mainittuja tunnistettavia hahmoja mukaan luettuna :first-child näennäisluokan ja attribuuttivalitsimet (voit katsa virhesivulta mallilistan[S][Pw] siitä, miten valitsinten tulisi toimia).

  3. Opera 3.6x eli tue .class p {...}. kaltaisia sääntöjä.

  4. Opera 3.6x+ tukee OL > LI {...} kaltaisia sääntöjä.

  5. Opera 5.x-6.x -selaimet tukevat myäs osittain tai täysin OL + UL {...} kaltaisia sääntöjä.

  6. Opera 4.x+ -selaimet tukevat attribuuttivalitsimia.

[Alku]

Porrastettu valintajärjestys (cascading order)

Aiheet

Tavanomaiset tilanteet

Sovittamissäännöt ovat periaatteessa sangen yksinkertaisia Niihin liittyy myös porrastettu valintajärjestys (cascading order; lue termin selitys[S][Pw]). Selain saattaa kohdata samanarvoisia sääntöjä, jolloin saman arvoisista säännöistä viimeiseksi annettu jää voimaan.

Kokonaisuudessaan ominaisuuksien sovittamisen yleisperiaate on näin ollen se, että yksityiskohtaisempi sääntö voittaa yleisemmän ja viimeksi mainittu saman arvoinen sääntö voittaa aiemmin määritellyn säännön. Tässä prosessissa on muistettava myös ns. tuontisäännön (@import) oikea käyttö, jota käsittelin aiemmin sivulla Miten CSS liitetään Web-sivuihin[S][Pw].

Porrastettu valintajärjestys on osa CSS-ominaisuuksien prosessointijärjestystä. Se on kytkeytynyt hahmonsovitukseen (pattern matching). Koko systeemin voi yksinkertaistaa seuraaviin kolmeen tekijään, jotka esitän vielä alkuperäistermien kanssa:

  • Periytyminen (inheritance; CSS1 tasolla vain automaattisena ja sisältää myös CSS2 "pakkoperiytymisen")
  • Tunnistettavat hahmot: kaikki mahdolliset valitsimet toisen valitsimen kanssa ovat tunnistettavia hahmoja (matching patterns)
  • Porrastettu valintajärjestys (cascading order)

Koska nämä kolme ovat koko ajan yhtä aikaa toiminnassa, on mahdotonta yksiselitteisesti esittää yleismallia, joka kuvaisi sitä, mikä on yksityiskohtaisempi määrittely kuin joku toinen. Ennemminkin voidaan esittää esimerkkejä, mikä määrittely yksittäisessä tilanteessa ohittaa jonkun toisen määrittelyn. Sivujen tekijän täytyy miettiä, miten selain tekee ratkaisunsa. Hänen tulee myös tietää, mitä selain todella osaa toteuttaa ja mitä ei! Seuraava järjestys suuntaviivoja pyrittäessä yleisemmästä yksityiskohtaisempaan määrittelyyn. Järjestys voi olla yksittäisessä tilanteessa toinen.

  1. Yleisvalitsin ilman mitään tarkenninta.
  2. BODY-elementti ilman luokkaa.
  3. Class-tarkennettu yleisvalitsin
  4. Muu yksilöity tyyppivalitsin kuin BODY
  5. Muu yksilöity tyyppivalitsin kuin BODY luokkatarkennettuna
  6. Monimutkainen tunnistettava hahmo, jossa on mukana myös luokkatarkentimia.
  7. Id-valitsin.

Sivuntekijöiden pyrkimyksenä on varmastikin luoda mahdollisimman tehokas ja vaivaton systeemi, jossa CSS-määrityksiä tarvitaan suhteellisen vähän dokumentin BODY-osassa. Annan seuraavat suositukset:

  1. Yksi yleinen BODY-määrittely ja yleinen taulukkoelementtien kuvaus (siitä on tarkempi selitys sivulla Taukot[S][Pw]).
  2. Asiakirjakohtaisia muutoksia ajatellen erilaisia sääntöjä BODY-elementille, jolla on luokka- ja id-tarkennin.
  3. Yksittäisille tekstielementeille omat säännöt.
  4. Muut mahdolliset säännöt pyritään toteuttamaan BODY-elementistä lasketuilla tunnistettavilla hahmoilla.
  5. Dokumenttikohtaisia sääntöjä käytetään harkiten
[Alku]

Tärkeyssääntö (!important)

Normaalin järjestyksen voi ohittaa ns. eli tärkeyssäännöllä (important rule), esim:

body {color: black !important; background-color: white !important;}

Mikäli selain ei tapaa toisia samanlaisia tärkeyssääntöjä, vastaavia jälkeenpäin annettuja ominaisuuksia ei oteta huomioon. Kyse ei ole kuitenkaan vain yksinkertaisesta järjestykseen liittyvästä säännöstä. Näin määritellyt ominaisuudet ohittavat myös elementille luokkiin ja tunnistimiin (id) perustuvilla tunnistettaville hahmoille annetut sekä elementtien sisälle yksilöllisesti annetut ominaisuudet.

Sääntö koskee kuitenkin vain elementtiä ja sille annettuja ominaisuuksia, joihin se on liitetty. Jos lapsielementille on annettu poikkeava arvo, lapsielementti ottaa sen. Seuraavat esimerkit valaisevat asiaa ([M][S][Pw]):

body {color: black !important;}
body.CssSite {color:blue;}
/* värimääritys ohitetaan, vaikka BODY-elementille on määritetty luokka */
p.uusi {color:blue;} /* ensimmäinen määrittely ohitetaan elementin P osalta, sillä elementille BODY annettu määrittely ei ohita uudelleen määritellyn lapsielementin ominaisuutta (sillä, onko lapsielementille annettu luokka ei ole tässä tapauksessa mitään merkitystä) vaan tälle elementille väriarvo tulee voimaan; mutta mikäli sitä ei olisi annettu, se saisi sen tärkeyssäännön omaavalta BODY-elementiltä */
p {color:olive !important;}
/* uusi !important-sääntö kumoaa kaikki edelliset määrittelyt elementin P osalta */
p#id_p {color:blue;} /* edellisen tärkeyssääntö ohittaa tämän värimäärittelyn; samoin ensimmäisen dokumentin runko-osassa olevan määrittelyn; koska se on voimakkaampi kuin id-valitsin, se on samalla voimakkaampi kuin tunnistettaviin hahmoihin perustuvat ominaisuudet */

...
<BODY>
<P style ="color:purple;">
Saatat luulla, että tämän tekstin väri on purppuranpunainen, mutta näin ei olekaan, koska tärkeyssääntö antaa tälle värin olive. Tätäkö sinä juuri halusit?</P>
<P style ="color:purple !important;">Jos haluat, että määrittely toimii, sinun pitää laittaa siihen tärkeyssääntö!</P>

Sen vuoksi, että tärkeyssääntö ohittaa kaikki elementille määritellyt muut säännöt, katson sen olevan eräänlainen erityissääntö (termi on kuitenkin hieman ongelmallinen - ks. Alaviite 1). Sivujen suunnittelija saattaa määrätä ohitettavaksi kuvauksen, jota hän ei haluasikaan ohittaa! Koska em. sääntö tuo melkoista päänvaivaa sivujen laatijalle ja selaimelle lisätöitä, suosittelen sen käyttämistä erittäin harkitusti.

Selainkohtaisia huomautuksia:

  1. Tärkeyssääntö ei toimi Netscape 4.x -selaimilla.

  2. Näennäiselementtien :first-letter ja :first-line tärkeyssääntö liittyy vain itse elementtiin. Jos heti elementin alussa on toinen elementti (esim. >p>>cite>) lapsielementille annetut poikkeavat arvot säilyvät Opera 7.x -selaimissa tärkeyssäännön käytöstä huolimatta (esim. cite {font-weight:normal}, vaikka on p:first-letter {font-weight:bold !important}). Muilla moderneilla selaimilla näennäisluokille !important avulla annetut arvot voittavat. Mielestäni Opera 7.x toimii täysin johdonmukaisesti.

  3. Tärkeyssäännön uudelleen määrittely ei aina onnistu.

Koska CSS:llä yleisimpänä käyttökohteena voidaan pitää käytettyyn tekstityyliin vaikuttamista, käsittelemme Seuraavaksi fontin ja tekstin määrittämistapoja sekä erilaisten käyttötilanteiden huomioimista.

 
[Alku]

Alaviite 1. On ongelmallista kirjoittaa tärkeyssääntö, sillä kyseessä ei ole siinä mielessä sääntö, mitä CSS:ssä useimmiten tarkoitetaan säännöllä: ks. selitys sivulta Valitsimet[S][Pw]. Koska se on kuvauslohkon yksittäisen kuvauksen (declaration) sisällä (em. sanan merkitys on selitetty sivulla Miten CSS liitetään Web-sivuihin[S][Pw], jolloin sitä voisi kutsua tärkeyskuvaukseksi. Täsmälleen ottaen kyse on tärkeysominaisuudet (important properties), koska se liitetään juuri ominaisuuslistaan. Koska se kuitenkin luo poikkeuksellisen kuvauslohkon, jonka painoarvo riippuu CSS-säännöistä, se luo tavallaan eräänlaisen säännön. Ks. myös tämän sivun englanninkielisen version alaviite[S].

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004