 |
vyhodnocování konfliktů CSS deklarací
Pravidla kaskádování - Přednastavený vzhled - Dědičnost - Priorita vnitřního elementu - Pozdější vyhrává - 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).
Je to naštěstí velmi logické:
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á.
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).
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).
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).
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. Pokud si dobře pamatuji, Netscape !important nebere a ignoruje. 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.
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.
Odfláknutý příklad: příklad konfliktních deklarací
|
Hledání
Jak psát web:
http://dusan.pc-slany.cz/internet/
Píše Yuhů: autorova stránka,
mail: dusan@pc-slany.cz
Poslední aktualizace 19.05.2002