Kako CSS dedovanje deluje v spletnih dokumentih

Pomemben del oblikovanja spletne strani s CSS je razumevanje koncepta dedovanja.

Z dediščino CSS se samodejno določi slog uporabljene lastnosti. Ko pogledate barvo ozadja v slogu, boste videli razdelek z naslovom »Dedovanje«. Če ste kot večina spletnih oblikovalcev, ste prezrti ta razdelek, vendar pa služi namenu.

Kaj je CSS dedovanje?

Vsak element v dokumentu HTML je del drevesa in vsak element, razen začetnega elementa , ima nadrejeni element, ki ga obdaja. Ne glede na to, kateri stilovi se uporabljajo za ta starševski element, se lahko uporabijo za elemente, ki so v njej zaprti, če so lastnosti tiste, ki jih je mogoče podedovati.

Na primer, ta spodnja HTML koda ima oznako H1, ki obdaja oznako EM:

To je veliki naslov

Element EM je otrok elementa H1, vsi slogi na H1, ki so podedovali, bodo posredovani tudi EM-besedilu. Na primer:

h1 {velikost fonta: 2em; }

Ker je podedovana lastnost velikosti pisave, se besedilo, ki pravi "Big" (kar je tisto, kar je zaprto znotraj oznak EM), bo enako velikosti kot preostali del H1. To je zato, ker podeduje vrednost, določeno v znamki CSS.

Kako uporabljati CSS dedovanje

Najlažji način za njegovo uporabo je spoznavanje lastnosti CSS, ki so in niso podedovane. Če je lastnost podedovana, potem veste, da bo vrednost ostala enaka za vsak otrokov element v dokumentu.

Najboljši način za to je, da nastavite svoje osnovne sloge na zelo visoki ravni, kot je BODY. Če svojo lastnost pisave nastavite na lastnost telesa, potem bo zaradi dedovanja celoten dokument obdržal to isto družino pisav. To bo dejansko naredilo manjše liste slogov, ki jih je lažje upravljati, ker je manj splošnih slogov. Na primer:

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

Uporabite vrednost sledenja dediščine

Vsaka lastnost CSS vključuje vrednost "inherit" kot možno možnost. To govori spletnemu brskalniku, da bi tudi, če bi bila lastnina običajno podedovana, mora imeti enako vrednost kot starša. Če nastavite slog, kot je rob, ki ni podedovana, lahko uporabite dedno vrednost pri naslednjih lastnostih, da jim daste enako maržo kot starš. Na primer:

telo {margin: 1em; } p {margin: dediščino; }

Dedovanje uporablja izračunane vrednosti

To je pomembno za podedovane vrednosti, kot so velikosti pisave, ki uporabljajo dolžine. Izračunana vrednost je vrednost, ki je v primerjavi z neko drugo vrednostjo na spletni strani.

Če v elementu BODY nastavite velikost pisave v velikosti 1em, vaša celotna stran ne bo samo ena 1em velikosti. To je zato, ker elementi, kot so naslovi (H1-H6) in drugi elementi (nekateri brskalniki drugače razlikujejo lastnosti tabele), imajo v spletnem brskalniku relativno velikost. Če ni drugih informacij o velikosti pisave, bo spletni brskalnik vedno postavil naslov H1 največje besedilo na strani, ki ji sledi H2 in tako naprej. Ko svoj element BODY nastavite na določeno velikost pisave, se to uporablja kot "povprečna" velikost pisave, pri čemer se elementi naslova izračunajo od tega.

Opomba o lastnostih dediščine in ozadja

Obstaja več stilov, ki so navedeni, niso podedovali v CSS 2 v W3C, vendar spletni brskalniki še vedno podedujejo vrednosti. Na primer, če ste napisali naslednje HTML in CSS: