Kaskádové styly nebo CSS jsou nastaveny tak, abyste měli mnoho vlastností, které mají vliv na stejný prvek. Některé z těchto vlastností mohou být navzájem v rozporu. Můžete například nastavit červenou barvu písma na značku odstavce a poté později nastavit barvu písma modré. Jak prohlížeč zjistí, jaká barva vytváří odstavce? O tom rozhoduje kaskáda.
Typy stylových listů
Existují tři různé typy stylových listů:
- Listy stylů autorů
- Jedná se o styly vytvořené autorem webové stránky. Oni jsou to, o čem si většina lidí myslí, když si myslí na styly stylů CSS.
- Uživatelské styly
- Uživatelské stránky stylů jsou nastaveny uživatelem webové stránky. Umožňují uživateli mít větší kontrolu nad zobrazením stránek.
- Uživatelské styly agentů
- Jedná se o styly, které webový prohlížeč aplikuje na stránku pro zobrazení této stránky. Například v XHTML většina vizuálních uživatelských agentů zobrazí značku jako kurzívu. To je definováno v listu stylů uživatelů.
Vlastnosti, které jsou definovány v každém z výše uvedených stylů, mají váhu. Ve výchozím nastavení má list stylu autorů největší váhu, následovaný uživatelským stylem a nakonec seznamem stylů uživatelů. Jedinou výjimkou je důležité pravidlo v uživatelském stylu. To má větší váhu než autorský stylový list.
Kaskádovitá objednávka
Chcete-li vyřešit konflikty, webové prohlížeče použijí následující pořadí řazení k určení, který styl má přednost a bude použit:
- Nejprve vyhledejte všechny deklarace, které se vztahují k danému prvku, a pro přiřazený typ média.
- Pak se podívejte na to, z čeho pochází stylový list. Stejně jako výše jsou listy pro styly autorů první, pak uživatel, pak uživatelský agent. S důležitými styly uživatelů s vyšší prioritou než autory! Důležité styly.
- Čím je selektor specifičtější, tím více má přednost. Například styl na "div.co p" bude mít vyšší prioritu než jeden na "p" tagu.
- Nakonec zoradíte pravidla podle pořadí, které byly definovány. Pravidla definovaná později ve stromu dokumentů mají vyšší prioritu než pravidla definovaná dříve. A před pravidly přímo v listu stylů se zvažují pravidla z importovaného stylu.