CSS Tutoriál III. – Pravidla kaskádování
V třetím díle se podíváme na to, jakými pravidly se CSS řídí, což se nám později hodí při rozhodování, jak zapsat vlastnost co nejjednodušeji.
Jako všechno, i kaskádování v CSS má svá určitá pravidla, kterými se řídí. Jsou velmi logická a dají se snadno odvodit. Takže spíše pro připomenutí :
1. To, co nezměníme, zůstane default. Pokud ve stylu změníme například pouze barvu písma a ne jeho velikost, zůstane tam původní styl html dokumentu.
2. Dědičnost. Pokud nastavíme například toto –
body {font-weight: bold;}
– bude všechen text na stránce napsán tučně. Ať už bude totiž napsán v <p> nebo čemkoli jiném, nastavení se zdědí. U některých prohlížečů je ovšem s dědičností občas problém. Další věcí je, že ne všechny vlastnosti se dědí.
3. Pozdější zápis platí. Jakákoliv vlastnost, která je zapsána ve stylu později, má větší platnost. Pokud je potřeba něco změnit a nechce se složitě hledat, je možností zapsat novou vlastnost přímo u tagu a bude mít větší váhu než ta, která je daleko.
<html>
<head>
<style type="text/css">
p {color:red;}
</style>
</head>
<body>
<p>červený text</p>
<p style="color:green">tento text bude ale zelený</p>
</body>
</html>
Někdy toto pravidlo ale neplatí. Pokud je totiž vlastnost zapsána konkrétněji, ani pozdější obecný zápis jí neovlivní. Pouze zápis přímo u tagu. Od nejvíce ovlivňujícího zápisu můžeme seřadit takto: identifikátor, třída, název tagu. Proto v dalším zápisu nebude mít na odstavec účinek obcená vlastnost – modrý text ve všech odstavcích, ani vlastnost třídy .zeleny_odstavec, protože největší váhu má identifikátor #cerveny_odstavec.
<html>
<head>
<style type="text/css">
.zeleny_odstavec {color:green;}
#cerveny_odstavec {color:red;}
p {color:blue;}
</style>
</head>
<body>
<p id="cerveny_odstavec" class="zeleny_odstavec">červený text</p>
</body>
</html>
Pokud chceme ovšem něco změnit za každou cenu, můžeme přidat za vlastnost !important a nestarat se o pořadí. Vlastnost s označením !important bude mít vždy přednost. Není ale radno to příliš používat, protože když se zapomene, kde bylo important použito, špatně se upravují dlouhé stylopisy a vytváří se zmatek.
Základní pravidla máme tedy za sebou a jako další se podíváme na jednu z nejdůležitějších částí zápisu – třídy a identifikátory.