CSS-opas

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

Periytyminen ja valitsimet

Periytyminen

Periytymisellä tarkoitetaan tilannetta, jossa lapsielementti perii ulkoasuun liittyvät ominaisuudet vanhemmaltaan. Esimerkiksi jos HTML / XHTML-dokumentin body-elementille määritellään tekstinväri ominaisuudella color, perivät kaikki bodyn sisällä olevat elementit ko. arvon.

Miten yllä oleva tieto on hyödyllinen? Periytymisen avulla on mahdollista vähentää CSS-tiedostojen kokoa ja monimutkaisuutta, ja sitä kautta hyötyä mm. nopeammin latautuvasta sivustosta ja helpommin ylläpidettävästä koodista. Alla kaksi esimerkkikoodia, jotka tekevät täsmälleen saman loppuvaikutuksen. Ensimmäinen koodi ei hyödynnä periytymistä (tai ryhmittelysääntöjä), kun taas jälkimmäinen hyödyntää. Erona on lähes 50% tehokkaampi koodin hyödyntäminen ja tiedostokoko:

/* periytymistä ja ryhmittelyä ei hyödynnetä */
body { 
  background-color: red;
  color: #00FF00;
  font-family:Arial,Verdana,sans-serif;
}
h1 {
  color: #00FF00;
  font-family:Arial,Verdana,sans-serif;
  font-size:90%;
}
h2 {
  color: #00FF00;
  font-family:Arial,Verdana,sans-serif;
  font-size:90%;
}

/* periytymistä ja ryhmittelyä hyödynnetään */
body { 
  background-color: red;
  color: #00FF00;
  font-family:Arial,Verdana,sans-serif;
}
h1, h2 {
  font-size:90%;
}

Periytymisessä on olemassa rajoituksia, jotka täytyy ottaa huomioon:

taulukot ja taulukko-elementit eivät peri kuin toisilta taulukkoelementeiltä
vain seuraavat CSS:n noin 130 ominaisuudesta periytyvät: border-collapse, border-spacing,caption-side,color,cursor,direction,empty-cells,font ja kaikki muut font-alkuiset ominaisuudet, letter-spacing, line-height, list-style ja kaikki muut list-style-alkuiset ominaisuudet, orphans,page, page-break-inside, quotes, speak,speak-header, text-align, text-intend, text-transform, volume, white-space, widows ja word-spacing. Muut ominaisuudet eivät periydy.
Mikäli ominaisuuden periytyminen halutaan erikseen vahvistaa, voidaan se tehdä asettamalla ominaisuuden arvoksi "inherit".

Periytymisessä otetaan aina huomioon cascade-prosessi ja sen vaikutus tyylisääntöjen keskinäiseen priorisointiin.

Tutustu artikkelin muihin osiin:
»»» CSS »»»Periytyminen
»»» CSS »»»CSS:n valitsimet - yleisesti ja listaus
»»» CSS »»»CSS:n valitsimet - esimerkit ja tarkempi esittely
»»» CSS »»»CSS:n valitsimet - pseudovalitsimet
»»» CSS »»»CSS:n valitsimet - toimivuus eri selaimilla

CSS-opas

Periytyminen ja valitsimet

Periytyminen

Tallenna tämä sivu kirjanmerkkeihin!