Kaskádování
vyhodnocování konfliktů CSS deklarací
Pravidla kaskádování - Přednastavený vzhled - Dědičnost - Pozdější vyhrává - Priorita vnitřního elementu - Vlastní nastavení
Dlouho jsem nemohl pochopit, proč se kaskádové styly jmenují kaskádové. Ne že bych to teď úplně chápal, ale pokusím se alespoň naznačit.
CSS vznikalo v době, kdy v HTML jazyce panoval strašlivý zmatek. Objevovaly se nové tagy, které měly za cíl jenom formátovat text určitým způsobem, nebyl v tom žádný systém. Byla potřeba vytvořit univerzální systém, který by deklaroval formátování jak malých kousků textu (obdoba tagu font), tak celých bloků textu (obdoba např. tagu basefont) nebo dokonce soustav dokumentů.
Složitý systém je náchylný k chybám. Známou nevýhodou HTML jazyka bylo, že neměl mechanismus na řešení konfliktních a neúplných deklarací. CSS s něčím takovým počítá už od začátku a dokonce to má ve jméně (CSS = Cascading Style Sheets).
Pravidla kaskádování
Je to naštěstí velmi logické:
- Zvyk je železná košile.
- Jablko nepadá daleko od stromu (dědičnost).
- Kdo se směje naposled, ten se směje nejlíp.
- Bližší košile než kabát.
- Proti gustu žádnej dišputát.
Přednastavený vzhled
Zvyk je železná košile znamená, že kaskádové styly respektují původní vzhled html elementů. Pokud styly něco nemění, tak to zůstane. Například když u tagu H2 změním barvu
h2 {color: green}
tak se sice změní barva, ale zůstane původní velikost písma. Prostě co styly výslovně neupravují, to zůstává.
Dědičnost
Podřízený element přejímá formátování nadřazeného elementu. Například když se nastaví barva písma těla dokumentu na červenou,
body {color: red}
tak budou červené i všechny odstavce, prostě všechno.
Některé vlastnosti se nedědí (například border). Ve specifikaci je to u každé vlastnosti napsáno.
Některé prohlížeče v dědičnosti chybují (např. obsah tabulky nedědí nastavení body).
Pozdější vyhrává
Pokud se zapisuje vlastnost nějakého elementu vícekrát za sebou (a třeba různě), tak platí ten zápis, který je uveden nejpozději. To se stává hlavně tak, že něco deklaruji ve stylopisu stránky a pak to potřebuji na určitém místě změnit.
<style>
p {color: red; font-style: italic}
</style>
<body>
<p style="color: blue">modrý odstavec kurzívou</p>
<p>normální červený odstavec kurzívou</p>
</body>
Vlastnosti, které nejsou měněny, zůstávají v platnosti (v příkladu ta kurzíva -- font-style: italic nebyla přepsána) Platí poslední zadání (barva color: byla přepsána). Takže kdo se směje naposled, ten se směje nejlíp.
Podrobnější selektor
Pravidlo pozdější vyhrává neplatí v případě, když je nějaký zápis uveden podrobnějším selektorem. Podrobnost selektoru se počítá takto:
- sto bodů priority za každý zápis identifikátoru (zápisů začínajících #)
- deset bodů priority za každý zápis třídy (začínajících tečkou)
- jeden bod priority za název tagu
- půl bodu za pseudotřídu (u odkazů)
Následující (poněkud umělý) příklad zápis stylu je seřazen tak, že nejvyšší řádky vyhrají, i když jsou v zápisu první:
h1 #logo {color: blue;}/* 101 bodů priority*/
div.hlavni h1 {color: red;} /* 12 bodů priority*/
div h1 {color: black;} /* 2 body priority */
h1 {color: green;} /* 1 bod priority */
(Důvtipnější čtenáři jistě chápou, že ty body jsou symbolické. I kdybyste použili jedenáctkrát tag za jeden bod, nepřebijete tím deset bodů za třídu. Je to prostě jenom taková pomůcka předpokládající, že selektory nemají víc než jedenáct prvků.)
!important
Dá se nastavit, aby vlastnost nebyla později přepsána. Dělá se to klauzulí !important za zápisem CSS vlastnosti. Např.
h1 {color: red !important}
h1 {color: blue}
<h1>Nadpisy budou červené</h1>, i když byla snaha je zamodřit. Při používání !important je nutné být opatrný, protože když se na to zapomene, tak se pak děsně blbě ladí dlouhé stylopisy.
Priorita vnitřního elementu
Bližší košile než kabát znamená, že v případě konfliktu vyhrává ten element, který je "vnitřnější", je blíže formátovanému obsahu. Když mám třeba zápis
<span style="color: red"><span style="color: green">obsah</span></span>,
tak obsah bude zelený, nikoliv červený. Přebíjí to i dědičnost (s výjimkou vlastnosti display: none).
Vlastní nastavení
Moderní prohlížeče dovolují uživateli používat při čtení stránek vlastní předlohu se styly. Například v Internet Exploreru se to dělá v Nástrojích > Možnosti Internetu > karta Obecné > Usnadnění > Formátovat dokumenty pomocí vlastních předloh se styly. Sem si každý může zadat svůj *.css soubor a všechny prohlížené stránky jím budou ovlivněny.
Používá to málokdo, časté je to pouze u slabozrakých. Pár známých to používá pro eliminaci nesnesitelných barevných efektů čtených stránek.
Pokud je takový soubor dobře napsán, dovoluje dost změnit vizáž stránek. Uvedená pravidla mají totiž nejvyšší prioritu (dá se to chápat i tak, že jsou uvedena nakonec), nezmění ale to, co má nastaveno !important. I to je důvod, proč raději moc nepoužívat !important.
Reklama
