Úloha 3 – Kaskádování a specifikace stylů v CSS

Úvod k úloze

Samotné psaní CSS pravidel je jen začátek. Skutečná síla (a někdy i záludnost) CSS spočívá v tom, že styly se kaskádují – tedy vrství a kombinují podle určité logiky. Pokud dva různé selektory určují pro stejný prvek rozdílný vzhled, musí prohlížeč rozhodnout, který z nich má přednost. Tento proces se nazývá kaskádování a specifikace stylu. Správné porozumění těmto pravidlům je klíčové, jinak se snadno ocitnete v situaci, kdy „styly nefungují“ – přitom fungují, jen jinak, než čekáte.

Teorie a principy

1. Kaskádování (cascading)

   • Pokud má prvek více stylů, uplatní se poslední platné pravidlo (pokud není ovlivněno specifitou nebo !important).

   • Pořadí načítání souborů a zápisu v kódu má tedy význam.

2. Specifita (specificity)

   • Určuje „sílu“ selektoru. Čím konkrétnější selektor, tím má vyšší váhu.

   • Zjednodušené pořadí síly:

     • inline styly (nejvyšší, např. style="color:red")

     • ID selektory (#id)

     • třídní, atributové a pseudotřídy (.class, [type=text], :hover)

     • elementy a pseudoelementy (p, h1, ::before)

     • univerzální selektor * (nejnižší)

3. Pravidlo !important

   • Přepíše všechny ostatní styly, bez ohledu na pořadí a specifitu.

   • Používat jen výjimečně – jinak vzniká chaos.

   • Příklad:

Praktické příklady kódu

Konflikt stylů podle pořadí

Výsledná barva: zelená (poslední pravidlo má přednost).

Konflikt stylů podle specificity

Výsledná barva: červená (ID má vyšší váhu než třída i element).

Použití !important

Výsledná barva: zelená (přetlačilo !important).

Typické chyby / záludnosti

• Přehnané používání !important – vede k nepřehlednému a těžko udržovatelnému kódu.

• Nerozpoznání vlivu specificity – studenti si často myslí, že poslední pravidlo vždy vyhraje, ale ID či inline styl může mít přednost.

• Zapomenuté pořadí načítání souborů – pokud načtete reset.css po svém style.css, může vám přepsat vlastní styly.

• Stejná specifita → rozhoduje pořadí v kódu.

Shrnutí

• Kaskádování = vrstvení pravidel podle pořadí, specificity a !important.

• Specifita určuje sílu selektoru: inline > ID > class/pseudotřídy > elementy > univerzální selektor.

• !important přebíjí všechno ostatní, ale má se používat jen výjimečně.

• Konflikty stylů se řeší pochopením této hierarchie, ne chaotickým přidáváním !important.

Úloha

Zadání (kontext úlohy)

Otestuj, jak funguje kaskádování v CSS:

• Definuj pro jeden prvek více stylů (např. barvu písma v <p>) přes selektor p, .class i #id.

• Porovnej, který styl se nakonec použije.

• Vyzkoušej také použití !important.

Cíl úlohy

Porozumíš pravidlům kaskádování a specifikace v CSS a naučíš se určovat, který styl má při konfliktu přednost.

Vstupní podmínky

• Máš k dispozici HTML dokument, který obsahuje alespoň jeden prvek (např. <p>), jenž má:

  • přiřazený atribut id,

  • přiřazenou class,

  • a je přístupný také jako prostý elementový selektor (např. p).

• Pracuješ se souborem styles.css, do kterého budeš zapisovat různá pravidla pro tento prvek.

Požadovaný výstup

• Popíšeš, který styl má přednost a proč.

• Demonstruješ vliv direktivy !important na výsledný vzhled.

Soubory

Odkaz na css soubor
Odkaz na html soubor

Řešní úlohy

Co je zde splněno:

• Bez !important → text je červený, protože #special (ID) má vyšší specifikaci než .highlight (třída) i p (element).

• S !important → text je fialový, protože !important přepíše všechny ostatní styly bez ohledu na specifikaci.