CSS krátký kurz
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 aplikováno, které selektory (p ve výše uvedeném příkladu) mají nejvyšší prioritu a které pořadí se objeví v dokumentu.
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 selektory označené! 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.class je specifičtější než p.class, který je specifičtější než p.
- Konečně, pokud se na stejný prvek použijí dvě pravidla a mají stejnou přednost, použije se ten, který byl naposledy načten. 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ýše uvedený příklad měl být napsán modře, protože p {color: blue; } naposledy 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? .