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

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]