5.1. Kaskádování a dědění CSS kódu
Již jsme si řekli, jakým způsobem se CSS kód zapisuje a kam se tento kód zapisuje. Nyní se pojďme podívat na zajímavé vlastnosti, které CSS kód má.
Kaskádování
Co to znamená, že styly pocházejí z různých zdrojů? Můžeme tedy plně kontrolovat vzhled stránek, nebo nám je něco ovlivňuje?
Pravda je obojí. Vzhled našich stránek máme plně pod kontrolou pouze my. Ale také je něco ovlivňuje. V předchozích příkladech jsme si zkoušeli vytvořit stránku bez použití jakýchkoli stylů, a přesto odstavce měli odsazení, nadpisy různou velikost, odkaz byl zvýrazněn modře a podtržen. Toto jsou styly, které jsou předdefinované v každém prohlížeči. Existují jako nezávazná norma, které se většina prohlížečů více či méně drží.
Za zmínku stojí, že výchozí styly prohlížečů (Chrome, Firefox, Internet Explorer, Safari, atd.) jsou mírně odličné. Proto existují jisté předdefinované soubory, které tyto rozdíly stírají. Mezi nejoblíbenější patří normalize.css a reset.css. Každý k tomuto problému přistupuje jiným způsobem.
reset.css jak již název napovídá obnovuje všechny výchozí styly, a proto po jeho použití vypadají ve všech prohlížečích prvky stejně.
normalize.css normalizuje styl - narovnává rozdíly mezi prvky.
Pokud bychom takový styl chtěli použít, bude ve stránce volán jako první css soubor, aby nemohl ovlivnit naše styly.
Jak tedy to kaskádování vlastně funguje? Jistě si umíte představit terasovité (kaskádové) zahrady, nebo pole. V pruzích, jako schody stoupající vzhůru. Nyní si představte, že ze nejvyššího bodu tohoto pole pustíte vodu. A ta bude postupně stékat dolů po jednotlivých schodech. Úplně stejným způsobem fungují CSS styly.
<p>Text o tučňácích.</p>
<p class="greenClass">Jiný text o žirafách.</p>
<p class="redClass greenClass">Text o medvědech.</p>
p {color:orange;}
.greenClass {color:green;}
.redClass {color:red;}
Prohlížeč nejprve najde všechny <p> elementy, a nastaví barvu na oranžovou. Poté vezme všechny prvky s třídou greenClass a nastaví barvu na zelenou. Nakonec prvky s redClass a nastaví barvu na červenou. Můžete si tedy všimnout, že i když třetí odstavec má nastavené obě třídy, a zelenou až na druhém místě, výsledná barva bude červená. Nikoli proto, že je na místě prvním, class nezná priority, ale proto, že v souboru se styly se na tento selector narazilo později.
A když jsou styly z různých zdrojů? Pokud se bude jednat o externí soubory, přidané do naší html stránky, tak se berou v pořadí, v jakém byly přidány.
Existuje však více zdrojů, ze kterých stránky berou styly. Zde je pořadí od nejnižší priority:
- Styly předdefinované prohlížečem
- Další styly prohlížeče s přívlastkem
!important - Běžné styly definované uživatelem v souboru/hlavčce stránky
- Styly definované přímo nad prvkem - in-line zápis
- Běžné styly definované uživatelem v souboru/hlavčce stránky s přívlastkem
!important - Styly definované přímo nad prvkem - in-line zápis s přívlastkem
!important - Styly definované návštěvníkem pomocí prohlížeče
- Styly definované návštěvníkem pomocí prohlížeče s přívlastkem
!important
Co to znamená !important již brzy zjistíme.
Dědění stylů
Dědění stylů je po kaskádování druhá důležitá vlastnost. Ukážeme si to opět na příkladu:
body {color:navy;}
.dedeniPriklad {color:deeppink;}
<body>
<h1>Článek o tučňácích</h1>
<div class="dedeniPriklad">
<p>První odstavec textu článku.</p>
<p>Druhý odstavec.</p>
</div>
<p>Třetí odstavec, který ale již není součástí divu.</p>
</body>
Článek o tučňácích
První odstavec textu článku.
Druhý odstavec.
Třetí odstavec, který ale již není součástí divu.
Jak můžete vidět, ačkoli pro první a druhý odstavec není definována žádná třída, podědili barvu definovanou pro třídu nadřazeného divu. Díky tomu je možné stylovat více prvků pouze pomocí jejich obálky, a není potřeba na každý takový element dávat třídu.
Ne všechny vlastnosti CSS se dědí, protože by to znesnadnilo stylování více vnořených prvků. Pojďme se tedy podívat na ty, které se dědí, a které nikoli.
Vlastnosti, které se dědí:
colorfont-familyfont-sizefont-stylefont-weighttext-align
Vlastnosti, které se nedědí:
backgroundbordermarginpaddingwidhtheight