Ako dedičstvo CSS funguje vo webových dokumentoch

Dôležitou súčasťou štýlu webovej stránky s CSS je pochopenie konceptu dedičnosti.

CSS dedenie je automaticky definované štýlom použitého vlastníctva. Keď sa pozriete na farbu pozadia farby štýlu, uvidíte sekciu s názvom "Dedičnosť". Ak ste ako väčšina návrhárov webových stránok, ignorovali ste túto časť, ale slúži jej účelu.

Čo je dedičstvo CSS?

Každý prvok v dokumente HTML je súčasťou stromu a každý prvok okrem prvku obsahuje rodičovský prvok, ktorý ho obklopuje. Akékoľvek štýly, ktoré sa uplatňujú na tento nadradený prvok, sa môžu použiť na prvky, ktoré sú v ňom uzavreté, ak sú vlastnosti, ktoré sa dajú zdediť.

Tento HTML kód má napríklad značku H1, ktorá obsahuje značku EM:

Toto je hlavička Big

Element EM je dieťa prvku H1 a akékoľvek štýly na H1, ktoré sú zdedené, budú odovzdané aj do EM textu. Napríklad:

h1 {veľkosť písma: 2m; }

Keďže vlastnosť veľkosti písma je zdedená, text, ktorý hovorí "Big" (čo je to, čo je umiestnené vo vnútri značiek EM), bude mať rovnakú veľkosť ako zvyšok H1. Je to preto, že zdedí hodnotu nastavenú vo vlastnostiach CSS.

Ako používať dedičstvo CSS

Najjednoduchším spôsobom, ako ho použiť, je oboznámiť sa s vlastnosťami CSS, ktoré sú a nie sú zdedené. Ak je vlastnosť zdedená, potom viete, že hodnota zostane rovnaká pre každý podradený prvok v dokumente.

Najlepším spôsobom, ako to použiť, je nastaviť základné štýly na prvok s veľmi vysokou úrovňou, ako je TELO. Ak nastavíte rodinu písma na telo, potom vďaka dedeniu celý dokument zachová rovnakú rodinu písma. V skutočnosti to bude znamenať menšie štýly, ktoré sa ľahšie spravujú, pretože existuje menej celkových štýlov. Napríklad:

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

Použite hodnotu štýlu dedenia

Každý vlastnosť CSS obsahuje ako "možnosť" možnosť "zdediť". Toto informuje webový prehliadač, že aj keby vlastnosť zvyčajne nebola zdedená, mala by mať rovnakú hodnotu ako rodič. Ak nastavíte taký štýl, ako je zisk, ktorý nie je zdedený, môžete použiť dedičnú hodnotu v nasledujúcich vlastnostiach, aby ste im poskytli rovnakú rezervu ako rodič. Napríklad:

telo {margin: 1em; } p {margin: inherit; }

Dedičstvo používa vypočítané hodnoty

Toto je dôležité pre zdedené hodnoty, ako sú veľkosti písma, ktoré používajú dĺžky. Vypočítaná hodnota je hodnota, ktorá sa vzťahuje na inú hodnotu na webovej stránke.

Ak v prvku BODY nastavíte veľkosť písma 1m, celá vaša stránka nebude mať len 1m veľkosť. Je to preto, že prvky ako hlavičky (H1-H6) a iné prvky (niektoré prehliadače počítajú vlastnosti tabuľky inak) majú relatívnu veľkosť vo webovom prehliadači. Ak chýba iná informácia o veľkosti písma, webový prehliadač vždy vytvorí titul H1 najväčší text na stránke, za ním nasleduje H2 a tak ďalej. Keď nastavíte prvok BODY na určitú veľkosť písma, použije sa ako "priemerná" veľkosť písma a od toho sa vypočítajú nadpisové prvky.

Poznámka o dedičstve a vlastnostiach pozadia

Existuje niekoľko štýlov, ktoré sú uvedené v zozname CSS 2 v systéme W3C, ale webové prehliadače ešte stále zdedia hodnoty. Napríklad, ak ste napísali nasledujúce HTML a CSS: