CSS

Web o webu

Dědičnost stylů

Priority

Různé způsoby definice stylů (html elementy, třídy, identifikátory) mají různou váhu (prioritu) a vytvářejí tak následující kaskádu (vrsvy):

  1. inline styl – nejvyšší váha
  2. styl identifikátoru
  3. třída stylu
  4. styl html elementu
  5. styl html elementu předdefinovaný prohlížečem – nejnižší váha

Příklad

1. Nenastavíme-li žádný styl pro <h1>, bude i tak nadpis velkým a tučným písmem. Styl je určen prohlížečem.

2. Nastavíme-li styl pro h1 {font: Arial 20px brown;}, bude mít nadpis dané písmo a hnědou barvu, a protože jsme neměnili vlastnost font-weight, zůstane tučné písmo definované prohlížečem.

3. Definujeme-li třídu .hlavni {color:red; font-style:italic;}, pak nadpisy s touto třídou <h1 class="hlavni"> budou kurzívou, červené barvy a dále budou mít ostatní vlastnosti elementu h1 (písmo Arial 20px) a zbylé vlastnosti předefinované prohlížečem (tučné písmo).

4. Definujeme-li styl pro identifikátor #prvni {color:orange;} bude mít nadpis
<h1 id="prvni" class="hlavni"> oranžovou barvu a kurzívu (identifikátor má vyšší prioritu než třída stylu), dále pak ostatní vlastnosti elementu h1 (písmo Arial 20px) a zbylé vlastnosti předefinované prohlížečem (tučné písmo).

Při kontextuální definici dochází ke skládání priorit.

Příklad

Definujeme-li styl odkazů uvnitř bloku id="menu" #menu a {color:brown;} , pak tato definice má vyšší prioritu než samotná třída .hlavni {color:red;} a odkazy <a class="hlavni"> budou mít stále hnědou barvu.
V tomto případě musíme i třídu definovat v kontextu s id, tedy #menu .hlavni {color:red;}.