Dedovanje v CSS

Poznamo dva načina dedovanja:

Dedovanje po drevesni strukturi HTML

Dokument HTML je hierarhično strukturiran. Višje oznake predstavljajo roditelje (starše) nižjim oznakam (otrokom). Te pa so lahko roditelji drugim nižjim oznakam. To je pomembno zato, ker hierarhično nižja oznaka (otrok) lahko podeduje določene slogovne učinke starševske oznake.

Tako lahko na primer določimo slogovne učinke oznaki body. Vsi njeni potomci (torej vse oznake, saj so vse vsebovane znotraj te oznake) bodo te slogovne učinke podedovali. Izjema so le učinki, ki uporabljajo lastnosti, ki se ne dedujejo. Tako se na primer lastnost ozadja elementov ne deduje. Seveda posamezne oznake lahko podedovane slogovne učinke prekrijejo (nadomestijo s svojimi učinki). Podedovana lastnost torej velja le, če oznaki te lastnosti ne določimo posebej.

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 drevo označb HTML:

html je starš od head in body
head in body sta otroka od html
p je predhodnik od ul
ul je naslednik od p
h1, p in ul so sorodniki
li je potomec od body
body je prednik od li

Primer dedovanja glede na drevesno strukturo HTML:

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

table {
   color: red;
   font-family: verdana;
}

td {
   color: blue;
}

Pojasnilo:
Elementi višji v drevesni strukturi imajo višjo prioriteto. V tem primeru bo pisava v tabeli modra, ker je element td definiran višje v drevesni strukturi, pisava pa bo verdana.

celica 1

celica 2

celica 3

Po strukturi CSS

Primer dedovanja glede na strukturo CSS:

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

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

p #barva { color: orange }

Pojasnilo:
p #prvi podeduje velikost pisave font-size:1.1em, barva pisave odstavka pa je oranžna.

To je odstavek besedila.

To velja za vse podobne primere. Povsod, kjer je določen glavni element p, h1, td... in njegov
podelement p #barva, p.barva, h1 #barva... le ta podeduje vse lastnosti, ki niso predpisane.

Nazaj

Naprej