Kako CSS nasljeđivanje funkcionira u web dokumentima

Važan dio oblikovanja web stranice s CSS je razumijevanje koncepta nasljeđivanja.

CSS nasljeđivanje automatski se definira stilom entiteta koji se koristi. Kada pogledate pozadinsku boju entiteta, vidjet ćete odjeljak pod naslovom "Nasljeđivanje". Ako ste poput većine web dizajnera, zanemarili ste taj odjeljak, ali služi svrsi.

Što je CSS nasljeđivanje?

Svaki element HTML dokumenta dio je stabla, a svaki element, osim početnog elementa , sadrži element roditelja koji ga okružuje. Koji god se stilovi primijenili na taj element roditelja, može se primijeniti na elemente koji se nalaze u njemu ako su svojstva ona koja se mogu naslijediti.

Na primjer, ovaj HTML kôd u nastavku ima oznaku H1 koja sadrži EM oznaku:

Ovo je velika naslov

EM element je dijete H1 elementa, a svi stilovi na H1 koji su naslijeđeni prenijet će se i na EM tekst. Na primjer:

h1 {font-size: 2em; }

Budući da je veličina fontova naslijeđena, tekst koji kaže "Big" (što je ono što je zatvoreno unutar EM oznaka) bit će iste veličine kao ostatak H1. To je zato što nasljeđuje vrijednost postavljenu u CSS svojstvu.

Kako koristiti CSS nasljeđivanje

Najlakši je način da se upoznate s CSS svojstvima koja su i nisu naslijeđena. Ako je imovina naslijeđena, znate da će vrijednost ostati ista za svaki element djeteta u dokumentu.

Najbolji način da to koristite je da postavite osnovne stilove na element vrlo visoke razine, poput BODY. Ako svoj vlasnik fontova postavite na svojstvo tijela, onda, zahvaljujući nasljeđivanju, cijeli će dokument zadržati istu vrstu fontova. To će zapravo učiniti za manje stilske listove koji su lakše upravljati jer ima manje ukupnih stilova. Na primjer:

tijelo {font-family: Arial, sans-serif; }

Upotrebljavajte vrijednost stila s entitetima

Svaki CSS svojstvo uključuje vrijednost "naslijediti" kao moguću opciju. To govori web pregledniku, da čak i ako imovina obično ne bude naslijeđena, ona bi trebala imati istu vrijednost kao i roditelj. Ako postavite stil kao marginu koja nije naslijeđena, možete koristiti nasljednu vrijednost na sljedećim svojstvima kako biste im dati jednaku marginu kao i roditelj. Na primjer:

tijelo {margina: 1em; } p {margina: naslijediti; }

Nasljeđivanje koristi izračunate vrijednosti

To je važno za naslijeđene vrijednosti poput veličina fonta koji upotrebljavaju duljinu. Izračunata vrijednost je vrijednost koja je u odnosu na neku drugu vrijednost na web stranici.

Ako postavite font veličine 1em na svoj BODY element, cjelokupna stranica neće biti samo 1em veličine. To je zbog toga što elementi poput naslova (H1-H6) i drugih elemenata (neki preglednici različito računaju svojstva tablice) imaju relativnu veličinu u web pregledniku. U nedostatku drugih informacija o veličini fonta, web preglednik će uvijek napraviti naslov H1 najveći tekst na stranici, nakon čega slijedi H2 i tako dalje. Kada postavite svoj BODY element na određenu veličinu fonta, tada se koristi kao "prosječna" veličina fonta, a elemente naslova izračunavaju se iz toga.

Napomena o svojstvima nasljeđivanja i pozadine

Postoji niz stilova koji su na popisu nije naslijeđen u CSS 2 na W3C, ali web preglednici i dalje nasljeđuju vrijednosti. Na primjer, ako ste napisali sljedeći HTML i CSS: