Jak dědičnost CSS funguje ve webových dokumentech

Důležitou součástí stylingu webových stránek s CSS je pochopení pojmu dědictví.

CSS dědičnost je automaticky definována stylem použitého objektu. Když se podíváte na barvu pozadí vlastností stylu, zobrazí se část s názvem "Dědičnost". Pokud jste jako většina webových designérů, tuto sekci jste ignorovali, ale slouží účelu.

Co je dědičnost CSS?

Každý prvek dokumentu HTML je součástí stromu a každý prvek kromě elementu prvku má rodičovský prvek, který jej obklopuje. Ať už se na daný nadřazený prvek použijí jakékoliv styly, lze použít na prvky obsažené v něm, pokud jsou vlastnosti, které lze zdědit.

Tento HTML kód má například značku H1, která obsahuje značku EM:

Jedná se o nadpis Big

Prvek EM je dítě prvku H1 a všechny styly na H1, které jsou zděděny, budou předány i do EM textu. Například:

h1 {velikost písma: 2em; }}

Vzhledem k tomu, že je vlastnost velikosti písma zděděna, text, který říká "Big" (který je součástí přiložených značek EM), bude mít stejnou velikost jako zbytek H1. Je to proto, že dědí hodnotu nastavenou ve vlastnostech CSS.

Jak používat dědičnost CSS

Nejjednodušší způsob, jak je použít, je seznámit se s vlastnostmi CSS, které jsou a nejsou zděděny. Pokud je vlastnost zděděna, víte, že hodnota zůstane stejná pro každý podřízený prvek v dokumentu.

Nejlepším způsobem, jak tento způsob použít, je nastavit základní styly na prvek velmi vysoké úrovně, jako je BODY. Pokud nastavíte rodinu písma na vlastnost těla, pak díky dědění celý dokument udrží stejnou rodinu písma. To skutečně zajistí menší styly, které lze jednodušeji spravovat, protože existuje méně celkových stylů. Například:

tělo {font-family: Arial, sans-serif; }}

Použijte hodnotu Dědící styl

Každý vlastnost CSS obsahuje jako možnost možnost hodnotu "dědit". To informuje webový prohlížeč, že i když by vlastnost obvykle nebyla zděděna, měla by mít stejnou hodnotu jako rodič. Pokud nastavíte styl, jako je zisk, který není zděděn, můžete použít dědičnou hodnotu v následujících vlastnostech, abyste jim poskytli stejnou rezervu jako rodič. Například:

tělo {margin: 1em; } p {okraj: dědí; }}

Dědičnost používá vypočítané hodnoty

To je důležité pro zděděné hodnoty, jako jsou velikosti písma, které používají délky. Počítaná hodnota je hodnota relativní na nějakou jinou hodnotu na webové stránce.

Pokud v prvku BODY nastavíte velikost písma 1m, celá vaše stránka nebude mít pouze 1m velikost. Je to proto, že prvky jako hlavičky (H1-H6) a další prvky (některé prohlížeče počítají vlastnosti tabulky jinak) mají relativní velikost ve webovém prohlížeči. Pokud chybí další informace o velikosti písma, webový prohlížeč vždy vytvoří nadpis H1 největší text na stránce, za ním následuje H2 a tak dále. Když nastavíte prvek BODY na určitou velikost písma, použije se jako "průměrná" velikost písma a od něj budou vypočteny nadpisy.

Poznámka o dědictví a vlastnostech pozadí

Existuje celá řada stylů, které jsou uvedeny v seznamu Cess 2 ve W3C, ale webové prohlížeče stále dědí hodnoty. Například pokud jste napsali následující HTML a CSS: