CSS pro začátečníky -- dědičnost a priorita (4. díl)

Další v pořadí 4 díl seriálu o CSS.

V dnešním díle seriálu se musím ze začátku omluvit za dočasnou absenci pokračování mého seriálu. A teď k tomu o čem bude dnešní díl. Název říká dva pojmy "dědičnost" a "priorita".

Priorita

Nejdříve přistoupíme k prioritě. Každý asi tento pojem zná, ale pro ty, co tento pojem neznají, zkusím formulovat nějakou definici.
Pod pojmem priorita si představuji nějakou váhu, důležitost, možná přednost něčeho co se dá takto ohodnotit.

A co jde ohodnotit při zápisu CSS vlastností? Vezmeme to popořadě. V druhém díle seriálu jsem nastínil možnosti zápisu CSS. Z toho víme, že jsou tři možnosti kam CSS zapisovat a to k danému elementu, do hlavičky dokumentu v prostoru vymezeném elementem "style" a nakonec do externího CSS souboru. Teď si představme situaci kdy máme v externím souboru definovaný nadpis h1 modrý, poté ho nadefinujeme na hlavní stránce v prostoru vymezeném elementem style jako červený a pak přiřadíme přímo černou barvu v jednom případě na stránce. A teď jak to bude ty barvy zjišťovat? To je otázka na kterou nalezneme odpověď, když budeme vědět jakou má daný způsob zapisování stylů prioritu a tu uvedu v jednoduchém přehledu.

zápis stylu v externím souboru
tento zápis má nejnižší prioritu, tzn. že platí u elementů, které jsou stylovány v externím souboru a nikde jinde
zápis v hlavičce dokumentu
tento zápis má střední prioritu, tzn. že pokud v externím souboru stylujeme element např. h1 modře a zde v hlavičce dokumentu červeně, pak bude platit barva červená. Pozor: musíme si uvědomit, že externí soubory nám většinou platí pro celý náš web, ale styl v hlavičce dokumentu platí pouze pro ten samý dokument, kde je uveden.
zápis přímo u elementu
tento zápis má prioritu nejvyšší, tzn. že pokud je prvek h1 stylován ve výše zmíněných možnostech a přímo u elementu je stylován černě, pak bude platit černá deklarace. Dále si musíme uvědomit, že takto můžeme nebo musíme stylovat každý element. To se pro nás může stát mnohdy výhodou.

Další možností kde využíváme prioritu je skládání více vlastností za sebe. Raději ukáži na příkladě: <span style="color: black"><span style="color: red"> text </span></span>

V tomto případě se bude brát v úvahu vlastnost bližší obsahu elementu, tzn. ze v tomto případě bude text červený.

Další věcí kde se můžeme setkat s prioritou je zápis stejné vlastnosti vícekrát. Opět uvedu raději na příkladě. h1 {
color: black;}
h1 {
color: red;}

Pokud budeme mít něco takto zapsáno, tak bude platit vždy až to pozdější, tzn. že v tomto případě budou nadpisy červenou barvou. Ale může se nám stát, že budeme mít tento případ a budeme chtít, aby platila první definice. To poté stačí přidat klauzuli !important, ale upřímně nevím, kdy by se tato situace mohla stát.

Dědičnost

Teď přistoupíme k dědičnosti. Každý z nás tento pojem zná, protože určitě mu někdo už někdy řekl, že něco podědil po tatínkovi nebo mamince, nemyslím zrovna dluhy (i když to se už také stává stále častěji), ale nějakou vlastnost. Tou vlastností myslím například plešatost (naštestí se mě netýká) a podobně to je i u definování CSS stylů. Možná si průběžně řeknete, že to je také vlastně nějaká priorita. Je pravda, že by se to tak dalo říci, ale v našich končinách se pro to vžil pojem dědičnost a myslím si, že je to i pojem lépe danou problematiku vystihující.
Dědičnost v CSS bych definoval jako vlastnost, kdy vnořený element přijímá vlastnost od nadřazeného. Ovšem ne každá vlastnost se dá dědit. Pokud chceme vědět jestli se daná vlastnost dědí, poté nám nezbývá nic jiného než se podívat na specifikaci CSS na W3C, kde pod položkou Inherited (dědičnost) je uvedeno yes/no.
Ovšem většina takových obecných nejvíce používaných vlastností jako je barva, font, velikost se dědí. Ostatně vše si je lepší vyzkoušet v praxi a pak teprve tuto dědičnost využívat. Dědičnosti jde také využít jako úsporného prostředku, kdy například stačí uvést jednou definici písma a pak už ji více nemusíme uvádět, pokud budeme dané písmo chtít využít.

A teď pár příkladů * {
color: black;
font-family: Verdana;}

Tento zápis naformátuje všechny elementy černě a budou vypisovány fontem Verdana. Není to přímá ukázka dědičnosti a tak uvedu rozsáhlejší příklad.

V CSS budu mít takovouto strukturu stránky body {
background-color:#33CCFF;
text-align: center;
font-family: Verdana;
font-size: 1em;
color: black;}

#hlavni {
width: 760px;
margin: 0 auto 0 auto;
border: 1px solid black;}

#telo {
margin-top: 20px;
margin-bottom: 20px;
text-align: left;
color: red;
border-top: 1px solid black;
border-bottom: 1px solid black;}

#pata {
font-weight: bold;}

A takto budeme mít rozvržen html dokument <body>
<div id="hlavni">
text v této části bude černý psaný fontem Verdana o velikosti 1em zarovnaný na střed
<div id="telo">
text v této části bude červený psaný fontem Verdana o velikosti 1em zarovnaný vlevo
</div>
<div id="pata">
text v této části bude černý psaný fontem Verdana o velikosti 1em zarovnaný na střed tučný
</div></div>
</body>

Ve výsledku to poté bude vypadat takto PŘÍKLAD1-CSS

Z uvedeného příkladu vidíme, že se dědí vlastnosti color, font-family, font-size a text-align. Nedědí se vlastnosti border, margin. Ostatně to by poté bylo daleko těžší, kdyby se tyto vlastnosti dědily.

Tak to by asi bylo pro dnešek vše. Už jsme si tímto nastínily, jak udělat layout (rozvržení) webu pomocí CSS bez tabulek a rámů. Příště si to ještě pořádně vysvětlíme, jak tyto techniky nahradit pohodlně pomocí CSS.