Dedovanje v CSS

V CSS dedovanje pomeni, da nekatere lastnosti privzeto prehajajo s starševskega elementa na njegove potomce. To se zgodi takrat, ko za potomca ni določena druga vrednost iste lastnosti. Pri dedovanih lastnostih element prevzame izračunano vrednost starša, pri nededovanih lastnostih pa začetno vrednost lastnosti.

Pomni: Dedovanje ni isto kot kaskada. Dedovanje določa, katere lastnosti otrok privzeto prevzame od starša. Kaskada pa določa, katero pravilo zmaga, kadar na isti element vpliva več pravil.

Osnovna pravila

Nekatere lastnosti se v CSS privzeto dedujejo, druge pa ne.
Če za dedovano lastnost na elementu ni določena posebna vrednost, element prevzame vrednost starša.
Če za nededovano lastnost na elementu ni določena posebna vrednost, element dobi začetno vrednost lastnosti.
Ali se posamezna lastnost deduje ali ne, je določeno pri opisu te lastnosti.

Med lastnosti, ki se pogosto dedujejo, sodijo na primer color, font-family in druge lastnosti besedila. Lastnosti, povezane z ozadjem, robovi, odmiki in postavitvijo, pa se praviloma ne dedujejo.

Dedovanje po drevesni strukturi HTML

Dokument HTML je hierarhično strukturiran. Višje oznake predstavljajo starše, nižje pa njihove otroke. Otrok lahko podeduje nekatere slogovne lastnosti svojega starša, na primer barvo besedila ali družino pisave.

Primer drevesne strukture HTML:

<!DOCTYPE html>
<html>
   <head>
      <title>Stran</title>
   </head>
   <body>
      <h1>Glavni naslov</h1>
      <p>Leto ima štiri letne čase:</p>
      <ul>
         <li>pomlad</li>
         <li>poletje</li>
         <li>jesen</li>
         <li>zima</li>
      </ul>
   </body>
</html>

Definicije glede na drevesno strukturo HTML:

html je starš elementoma head in body,
head in body sta otroka elementa html,
body je prednik elementu li,
li je potomec elementa body,
h1, p in ul so sorodni elementi, ker imajo istega starša.

Pozor: Element ne podeduje lastnosti zato, ker je nekje nižje v dokumentu, ampak zato, ker je potomec drugega elementa in ker se ta lastnost po pravilih CSS deduje.

Primer dedovanja po drevesni strukturi HTML:

<table>
   <tr>
      <td>celica 1</td>
      <td>celica 2</td>
      <td>celica 3</td>
   </tr>
</table>

table {
   color: red;
   font-family: Verdana, sans-serif;
}

td {
   color: blue;
}

Pojasnilo:
Element td podeduje od elementa table lastnost font-family, ker zanjo nima svoje vrednosti. Lastnost color pa ima nastavljeno posebej, zato bo besedilo v celicah modro.

celica 1

celica 2

celica 3

Lastnosti, ki se ne dedujejo

Vse lastnosti se ne dedujejo. Veliko lastnosti, povezanih s postavitvijo in škatlastim modelom, ima privzeto začetno vrednost in se ne prenesejo na potomce. To velja na primer za lastnosti background, border, margin in padding.

Na primer, če elementu div določimo ozadje, njegov otrok ne bo samodejno dobil istega ozadja:

div {
   background-color: #f8e9c2;
   color: #0a58ca;
}

V tem primeru bo otrok običajno podedoval color, ne pa tudi background-color.

Prisilno dedovanje in ponastavitve

Na katerikoli lastnosti lahko uporabimo posebne ključne besede. Ključna beseda inherit prevzame izračunano vrednost starša. Ključna beseda initial vrne lastnost na začetno vrednost. Ključna beseda unset deluje kot inherit pri dedovanih lastnostih oziroma kot initial pri nededovanih. Ključna beseda revert pa vrne vrednost na prejšnji izvor v kaskadi.

inherit – element prevzame izračunano vrednost lastnosti od starša,
initial – lastnost se vrne na svojo začetno vrednost,
unset – pri dedovanih lastnostih deluje kot inherit, pri nededovanih pa kot initial,
revert – lastnost se vrne na vrednost prejšnjega izvora v kaskadi.

Primer uporabe inherit:

<div class="starsevski">
   To je starš.
   <p class="otrok">To je otrok.</p>
</div>

.starsevski {
   color: green;
}

.otrok {
   color: inherit;
}

Otrok bo prevzel zeleno barvo od starša tudi zato, ker smo to izrecno zahtevali.

Pomni: Ključna beseda unset je uporabna takrat, ko želimo zapis, ki se pravilno obnaša tako pri dedovanih kot pri nededovanih lastnostih.

Dedovanje in selektorji CSS

Selektorji sami po sebi ne ustvarijo druge vrste dedovanja. Selektorji samo določijo, kateri elementi dobijo določeno pravilo. Kadar element neposredno ujame pravilo, dobi vrednost zaradi ujemanja selektorja in kaskade, ne zaradi dedovanja.

Primer:

<p id="barva">To je odstavek besedila.</p>

p { 
   color: blue;
   font-size: 1.1em;
}

#barva { 
   color: orange;
}

Pojasnilo:
Element p dobi velikost pisave 1.1em iz pravila p. Barva pa postane oranžna, ker pravilo #barva neposredno nastavi novo vrednost lastnosti color. To ni dedovanje, ampak običajno ujemanje selektorja in kaskada.

To je odstavek besedila.

Priporočila

Za skupne lastnosti besedila jih pogosto določi na nadrejenem elementu, kadar je to smiselno.
Vedno preveri, ali se posamezna lastnost sploh deduje.
Ključne besede inherit, initial, unset in revert uporabljaj premišljeno.
Dedovanja ne zamenjuj s specifičnostjo in kaskado.
Za bolj pregledno kodo ne ponavljaj po nepotrebnem enakih vrednosti na vseh potomcih.

Pogoste napake

Pričakovanje, da se vse lastnosti dedujejo samodejno.
Prepričanje, da bolj specifičen selektor pomeni dedovanje.
Napačna uporaba initial tam, kjer bi bil primernejši inherit ali unset.
Ponovno zapisovanje istih slogov na več elementih, če bi jih bilo mogoče podedovati.

Nazaj

Naprej