CSS – gramatika

Komentáře

Komentáře prohlížeč nebude vyhodnocovat jako kód ke zpracování a bude je ignorovat.

/* sem patří komentář */

p {color: red;}  /* odstavec má červenou barvu */
cite {font-size: 80%;       /* kurzíva pro citace */
         font-style: italic;
         color: blue;}

Komentář se může vyskytovat kdekoliv v kódu.

Pořadí stylů

V situaci, kdy se definují styly pro jednotlivé elementy, může dojít k tomu, že bude třeba rozhodnout, kterou deklaraci, styl nebo zdroj stylů použít. V takovém případě použije CSS jeden nebo více mechanismů, které se nazývají:

specificita selektoru – rozhodování podle váhy selektoru,
dědičnost – poloha elementu ve stromové struktuře dokumentu rozhoduje o použití stylu na daný dokument
kaskáda – v případě, kdy existuje více zdrojů stylů.

Výpočet specificity selektoru

nejsilnější je řádkový styl, např. <div style=“font-style: cursive;“>
slabší je selektor s identifikátorem #, např. div#obsah
dále je slabší třída, pseudotřída nebo selektor parametru, např. h1.silny nebo a[href]
ještě slabší je typový selektor nebo pseudoelement, např. h1 nebo :first-line
nejmenší váhu má univerzální selektor nebo jeho kombinace, např. *

Výpočet specificity selektoru probíhá kumulativně, tzn. že se jednotlivé úrovně sčítají a vyhrává selektor s nejvyšší specificitou.

Dědičnost

Elementy v dokumentu jsou seřazeny ve stromové struktuře a mohou dědit hodnoty vlastností od svého nadřazeného elementu, a to po více generačí.

V dokumentu HTML je nejvyšší element html, dále head, body a tak dále. Elementy v nižší úrovni stromové struktury jsou následníky svého předchůdce. V případě přímého příbuzenství se jedná o vztah rodiče a potomka.

Dědičnost v CSS je způsob, jakým se dostávají hodnoty vlastností od rodičovských elementů k potomkům.

Dědičnost umožňuje skvělou věc, kterou si už často ani zkušenější mezi námi neuvědomují – nemusíme totiž v každé deklaraci uvádět všechny vlastnosti, které mají element stylovat.

<p>
  Hello <span>inheritance</span>!
</p>

Chci, aby byl celý text zelený, včetně obsahu prvku <span>. Stačí uvést:

p {
  color: green;
}

Obsah prvku <span> prostě podědí obsah vlastnosti color definované na rodiči.

V praxi tzn., že pokud je pro element body deklarován typ písma pomocí dědičné vlastnosti font-style, zdědí hodnotu této vlastnosti všechny elementy obsažené v elementu body.

Vlastnosti, které dědí: styly textu, rámečků, seznamů a viditelnost

Jsou to snad všechny vlastnosti textu, některé vlastnosti rámečků, některé vlastnosti odrážkových seznamů, vlastnosti pro zvukové vyjádření obsahu (jako volume) také viditelnost (visibility).

Následuje kompletní seznam, ze kterého jsou vyloučené vlastnosti pro zvukové vyjádření obsahu, které jsou méně používané.

border-collapse
border-spacing
caption-side
color
cursor
direction
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font-size-adjust
font-stretch
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
orphans
quotes
tab-size
text-align
text-align-last
text-decoration-color
text-indent
text-justify
text-shadow
text-transform
visibility
white-space
widows
word-break
word-spacing
word-wrap

Kaskáda

V případě, že dojde ke konfliktu mezi styly, obsahuje CSS mechanismus tzv. kaskády, pomocí něhož se určí styl, který se použije. V jednom okamžiku totiž může existovat více zdrojů stylů stejné důležitosti. V takovém případě prohlížeč rozhodne, který styl použije podle jeho umístění.

Následující výčet uvádí jednotlivé umístění stylů podle jejich důležitosti od nejsilnějšího po nejslabší.

Nejsilnější je řádkový styl přímo v dokumentu.
Slabší je kaskádový styl autora dokumentu uvedený v hlavičce dokumentu.
Ještě slabší je externí kaskádový styl autora dokumentu.
Mnohem slabší je uživatelský kaskádový styl, který může definovat uživatel prohlížeče v jeho nastavení.
Nejslabší je výchozí styl webového prohlížeče.

V případě, že se střetnou dvě pravidla v jednom zdroji stylů, vyhrává to, které je v dokumentu zobrazeno později.

Pravidlo !important

CSS umožňuje dodatečně určit, která deklarace vlastnosti dostane přednost před jinou deklarací v případě konfliktu. V takové situaci vždy vyhraje deklarace obsahující pravidlo !important.

em {font-style: italic !important;}

Tato deklarace vlastnosti font-style dostane přednost před jinými deklaracemi.

Pro pořadí stylů se tedy v CSS definují tři pravidla:

pořadí rozhoduje a poslední vyhrává
selektor s vyšší váhou (specificitou) vyhrává
pravidlo označené jako důležité (!important) vyhrává

A teď to důležité – pokud je možné se k hodnotě dopočítat kaskádou, vždy dostane přednost před dědičností.

Cvičení

Zdroje:

https://www.vzhurudolu.cz/prirucka/css-dedicnost