Yleistä

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

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

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:

• 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.

Periytyminen

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 (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ä.

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 ():

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

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.

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).
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

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.

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.

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.