Tvorba WWW – CSS

  Home » Školení » Tvorba WWW – CSS » Dědičnost a kaskádování

Dědičnost a kaskádování

Téměř každý element na stránce má vždycky nějaké CSS vlastnosti, i když bychom to třeba nečekali.

Dědičnost

Pokud danému elementu nadefinujeme vlastnost, tak ji samozřejmě má, pokud mu ale nic nedáme do vínku, odkud ji bere?

<div style=“font-family:verdana;“> nějaký text <b>tlustý text</b> další text </div>

Na tomto příkladu nás nic nepřekvapí. Veškerý text v odstavci bude verdanou. Zamyslíme-li se ale nad tím, tak tagu B jsme výslovně neříkali, jakým bude písmem. Proč je tedy také verdanou? Tag B totiž zdědil vlastnost font-family:verdana od nadřazeného divu.

V případě, že ani nadřazený ani jakýkoliv nadřazený element nebude mít font-family definovaný, použije se výchozí systémová hodnota. Prakticky každý tag má nastavené své vychozí CSS vlastnosti. Např. A a U mají automaticky nastavenou vlastnost text-decoration:underline. Vezmeme-li to do důsledků, tak tagy jako B, U, I, SPAN a podobné jsou ve své podstatě naprosto totožné, liší se jen výchozím nastavením CSS vlastností.

Kaskáda

V předchozích dílech jsme si ukázali, že danému prvku můžeme přidělit vlastnosti několika způsoby najednou. Je ale potřeba si udělat jasno v tom, podle jakých pravidel se vybírá výsledná použitá vlastnost. Hlavní vliv na to má váha použitého stylu:

  • Nejmenší váhu má ten předdefinovaný prohlížečem.
  • Za ním následuje obecná definice pro daný tag, pak použití třídy.
  • Nejvyšší váhu mají styly k danému ID a vlastnosti uvedené ve style=““. Ty mají stejnou váhu. V takovém případě, kdy jsou dva použité styly na stejné úrovni, se použije pravidlo uvedené nejpozději. A protože se style=““ zapisuje přímo do uvedeného tagu, bude mít také poslední slovo o vzhledu prvku.

Ukážeme si to na tagu B. Ten má automaticky přiřazenou vlastnost font-weight: bold. Zajímá-li vás, jak jsou na tom ostatní tagy, můžete se kouknout do této tabulky stylů pro HTML4.

<style type=“text/css“>
B {font-weight: normal;} /* v tuto chvíli je text normální, vypnuli jsme vlastnost bold */
B.tlusty {font-weight: bold;} /* přebili jsme předchozí definici a text bude zpátky tlustý */
B.tenky {font-weight: normal;} /* tento styl má sice stejnou váhu, ale je uveden později, proto se text zobrazí normálně */
B#text { font-weight: bold;} /* ID má větší váhu než třída, proto text bude tlustě */
</style>

<b class=“tlusty tenky“ id=“text“ style=“font-weight: normal;“
V tuto chvíli by byl text tenký. Použití style má sice stejnou váhu jako ID, je ale uvedeno jako poslední.
</b>

Pokud chceme tento způsob obejít, stačí k dané vlastnosti přidat již zmíněné !important, čímž danému stylu nastavíme maximální prioritu a na zbytek nebude brán ohled.

Kaskády trochu jinak

Existuje ještě jeden způsob zápisu selectorů, o kterém jsme se zatím nezmiňovali. S oficiálním „kaskádováním“ nemá nic společného, přesto ho svojí podobou připomíná.

DIV A {color:green;}

Uvedeme-li selektor tímto způsobem, znamená to, že všechny odkazy uzavřené v odstavci (mohou být kdekoliv, libovolně hluboko) jsou automaticky zelené. Dá se to samozřejmě kombinovat s třídami.

.cervene A {color:red;}

Všechny odkazy zařazené do elementu se třídou cervenou budou automaticky červené. Následující příklad ukazuje další možnost.

A.cervene, .cervene A {color:red;}
<a href=““ class=“cervene“>červený odkaz</a>
<a href=““>modrý odkaz</a>
<div class=“cervene“>
<a href=““>červený odkaz</a>
</div>

Nemusíme se omezovat pouze na dvě úrovně, lze jich použít libovolně mnoho.

DIV#telo DIV DIV.cervene A {color:red;}
<div id=“telo“>
<div>
<div class=“cervene“>
<a href=““>červený odkaz</a>
</div>
</div>
</div>

Odkaz kdekoliv jinde by se zobrazil modrý.

Vrátíme-li se na začátek článku, kde jsme probírali váhu jednotlivých definicí, tak toto…

UL LI {font-size:1.1em;}

…má větší váhu než toto…

LI {font-size:0.9em;}

…protože se jedná o specifičtější zápis.

Tento způsob zápisu nám také umožňuje omezit použití tříd. Proto je potřeba při stylování stránky přemýšlet a nerozhazovat hned na všechny strany class, class, class… Budete tak dělat čistší a lépe editovatelné dokumenty.