Nasljeđivanje

 
Podsjetimo se – HTML hijerarhijsko stablo.

Slikom HTML hijerarhijskog stabla možemo ilustrirati nasljeđivanje, još jedno važno svojstvo CSS-a. Elementi koji su niže u stablu – tzv. potomci – nasljeđuju svojstva od svojih roditeljskih elemenata.

Ukoliko na primjeru sa slike imamo definiran sljedeći selektor:

td {
color: red;
}

tada će cjelokupni tekst unutar ćelije tablice biti crvene boje, bez obzira bio on unutar paragrafa ili elementa popisa.

Naravno, ako je na nekom od elemenata – potomstva primijenjen neki drugi stil, taj stil ima prioritet pri prikazivanju.

Razmotrimo još jedan tipičan primjer upotrebe nasljeđivanja:

body { font-size: 10pt; }
h1 { font-size: 120%; }

Budući da je <h1> unutar oznake <body>, veličina znakova unutar oznake <h1> bit će 12pt. S druge strane, možemo sav tekst na stranici povećati samo izmjenom veličine znakova u elementu body, pri čemu će odnos veličina običnog teksta i naslova ostati jednak kao prije promjene.

  • U prilogu se nalazi HTML datoteka s pripremljenim primjerima nasljeđivanja. Spremite je na računalo, proučite kôd i eksperimentirajte mijenjajući primijenjeni stil.
     

CARNet
Accessibility
Reset All

Boja pozadine

Font

Veličina fonta

1

Boja teksta