V této lekci si shrneme poznatky o dědění a kaskádování vlastností elementů, které byly porůznu "roztroušené" v minulých lekcích.

Dědičnost

Dědičnost v CSS znamená předávání vlastností elementů z předka na potomka. Potomek je element, který je obsažený ve svém předkovi, například:

<p>Text v odstavci <span>zvýrazněný text</span></p>
V tomto textu je element <span> potomkem a to dokonce přímým potomkem elementu <p>.

Znamená to také, že element body je předkem všech elementů na stránce (i když někdy ne přímým), proto všechny elementy dědí některé jeho vlastnosti (jak už jsme si uváděli). Jestliže je například ve stylu uvedeno:
body {font-family: Verdana, Helvetica, sans-serif; color: blue}
potom bude text ve všech elementech, ve kterých nezměníme font a barvu písma, písmem Verdana (či následujícím, podle toho, které je na počítači uživatele nainstalované) a modrou barvou. Přidáme-li do stylu například
p {color: red;} ,
bude mít text v odstavci červenou barvu (písmo zůstane Verdana), styl elementu má přednost před zděděným stylem (což je logické, jinak bychom ani nikde nemohli zvolit jinou barvu než byla dána v body).

Dědí se vlastnosti textu, nedědí se vlastnosti rámečků, okrajů, umístění.

Právě také vzhledem k dědičnosti je vhodnější pro velikost písma používat jako jednotky em. Přiřadíme-li elementu body velikost písma 1em (kvůli IE prý spíše 100%, což je totéž), odstavci třeba .8em (to je 0.8em) a odkazům .7em, můžeme změnit všechny uvedené velikosti jen změnou velikosti písma v body (například na 1.2em nebo 120%), ostatní se přizpůsobí. Bohužel je opět u IE vyjímka - na rozdíl od ostatních prohlížečů by se musela určit i velikost nadpisů (h1 až h7), aby došlo k přizpůsobení jejich velikosti.

Na druhou stranu by nám jednotka em a dědění mohli způsobit následující problém - ve stylu je velikost písma body 1em, velikost písma odstavce i elementu span je 0.5em. Pokud bude span potomkem odstavce, bude velikost jeho písma polovina z poloviny em! Tento problém je možné řešit pomocí hodnoty inherit - převezme vlastnost od rodičovského prvku (předka), pro uvedený příklad:
p span {font-size: inherit;} (to mi ale nefungovalo v IE6).
Autor stránek má skutečně pořád o čem přemýšlet:-)

O kaskádování jsme už také mluvili, uvedené znalosti shrneme a doplníme v následujícím odstavci.

Kaskádování

Kaskádování stylů znamená "vršení" stylů na sebe - přidávání (či přepisování) vlastností podle stylů z různých zdrojů. Kdybyste pro stránku nedefinovali žádný styl (nebo napsali špatnou cestu :-)), potom prohlížeč rozlišuje jednotlivé elementy podle svého vlastního předdefinovaného stylu (například h1 je větší a tučný, položky seznamu mají odrážky apod., v některých prohlížečích máte k dispozici nabídku Zobrazit - bez stylu, potom se použije právě tento předdefinovaný styl prohlížeče).

Další kdo může volit styly je uživatel, například v IE je nabídka Nástroje - Možnosti Internetu - záložka Obecné - Usnadnění, kde je možné vybrat vlastní možnosti stylu. Takoví uživatelé jsou ale výjimeční, týká se například zrakově postižených, kteří by si mohli nastavit ve svém stylu zvětšení písma.

Potom ve "vršení" stylů pokračuje autor. Říkali jsme si, že i k jedné stránce je možné připojit více souborů se styly (což se může používat například u rozsáhlých podnikových webů), potom se vlastnosti postupně doplňují podle pořadí připojených souborů. Víme také, že můžeme nadefinovat styl v hlavičce stránky (vnořený styl), nebo přímo u jednotlivých elementů, které bychom chtěli odlišit (řádkový styl).

Webový prohlížeč prochází všechny zdroje v uvedeném pořadí a pokaždé, když narazí na novou definici vlasnosti elementu, aktualizuje ji.


Úkoly:

Úkol (2 body):

Převeď stránku vtipy.html do XHTML. Použij pro body velikost písma 100% a nastav pomocí em vhodné velikosti písma pro odstavec a použité nadpisy. Vyzkoušej, jak se budou texty chovat při změnách velikosti textu z nabídky Zobrazit - Velikost textu.

Název školy:Základní škola, Hradec Králové, M. Horákové 258
Název projektu:EU peníze školám
Číslo projektu:CZ.1.07/1.4.00/21.2575
Téma:Tvorba WWW stránek
Název:VY_32_INOVACE_26_10B_tvorba www26
Autor:Pavel Petr
Použité zdroje: Není-li uvedeno jinak, jsou všechny ilustrační obrázky dílem autora.