Kaskádou je to, co dělá stylové listy CSS tak užitečné. Stručně řečeno, kaskáda určuje pořadí priority, jak by měly být použity konfliktní styly. Jinými slovy, pokud máte dva styly:
p {barva: červená; }}p {barva: modrá; }}
Kaskáda určuje, jaká barva by měla být odstavce, i když v listu stylů se uvádí, že by měly být červené i modré. Nakonec lze na odstavce použít pouze jednu barvu, takže musí být objednávka. A toto pořadí je použito, které výběry ( str ve výše uvedeném příkladu) mají nejvyšší prioritu a v jakém pořadí se v dokumentu vyskytují.
Následující seznam je zjednodušení toho, jak váš prohlížeč rozhoduje o přednosti stylu:
- Podívejte se do listu stylů pro volič, který odpovídá prvku. Pokud neexistují žádné definované styly, použijte výchozí pravidla v prohlížeči
- Podívejte se do listu stylů pro označené voliče
!Důležitéa aplikujte je na příslušné prvky. - Veškeré styly v listu stylů přepsají výchozí styly prohlížeče (s výjimkou listů stylů uživatelů).
- Čím více selektoru stylů je, tím vyšší je jeho priorita. Například,
div> p.classje přesnější nežp.classcož je přesnější nežstr. - Konečně, pokud se na stejný prvek použijí dvě pravidla a mají stejnou přednost, je ten, který byl načten poslední budou použity. Jinými slovy, list stylu se přečte od shora dolů a styly se nanášejí nad sebou.
Na základě těchto pravidel by v tomto příkladu byly odstavce napsány modře, protože p {barva: modrá; }} je poslední v listu stylů.
Toto je velmi zjednodušené vysvětlení kaskády. Pokud máte zájem dozvědět se více o tom, jak kaskáda funguje, měli byste si přečíst Co znamená "Cascade" v kaskádním stylu?
