5.Díl: Kaskádovitost
Pokročilá kaskádovitost
Abyste plně využili možností CSS, je třeba znát pravidla, podle kterých se zobrazení prvků dokumentu řídí. Pokusím se vám to teď osvětlit, ale pro plné pochopení je taky třeba trochu experimentovat a dostat věc pořádně do ruky. takže se nebojte a zkoušejte všechno možné, co se dá.
Pravidla:
1. dědičnost
asi jste si při práci s kaskádovými styly všimli, jak obsah některých elementů dědí vlastnosti elementů nadřazených:
<html>
<head>
<style>
body {
color: blue;
}
</style>
</head>
<body>
<span>tento text bude modrý</span>
<p>tento také</p>
</body>
</html>
v této ukázce zdědily tagy span a p vlastnost color od svého nadřazeného elementu body.
Některé vlastnosti se se ale nedědí, ono by to ani nebylo moc příjemné, kdyby každý podřazený element zdědil vlastnost position: absolute.
Když ale definujeme hodnotu vlastnosti elementu, kterou dědí od svého nadřazeného elementu, aplikuje se hodnota určená přímo, ne ta zděděná.
<html>
<head>
<style>
body {
color: blue;
}
span {
color: red;
}
</style>
</head>
<body>
<span>tento text bude červený</span>
<p>tento ale modrý</p>
</body>
</html>
2. pozdější určení má přednost
pokud nějakou hodnotu vlastnosti definujeme dvakrát, aplikuje se ta pozdější hodnota.
<html>
<head>
<style>
body {
color: blue;
}
body {
color: green;
}
</style>
</head>
<body>
<span>tento text bude zelený</span>
<p>tento také zelený</p>
</body>
<html>
Tento příklad je sice trochu nemotorný, protože takto nemá smysl CSS používat, ale ilustruje pravidlo, že pozdější definice má přednost. Asi se vám tohle pravidlo zdá teď zbytečné, ale v praxi se vám jeho znalost bude určitě hodit.
Toto pravidlo se také vztahuje na následující příklad:
<html>
<head>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div style='color: green'>obsah tohoto elementu bude zelený</div
<div>obsah tohoto elementu bude červený</div>
</body>
<html>
Pozdější určení má opět přednost.
3. Vlastnost !important
Pokud chceme vlastnosti nějakého elementu zaručit, že bude aplikována za každou cenu a nebude přepsána nějakou jinou pozdější definicí, můžeme vlastnosti přidělit hodnotu !important. V praxi se to dělá nějak takhle:
<html>
<head>
<style>
span {
color: green !important;
}
span {
color: blue;
}
</style>
</head>
<body>
<span>tento text bude zelený, i když byla snaha přepsat vlastnost color na blue</span>
</body>
<html>
Pokud za nějakou vlastnost zapíšeme !important, dostane vlastnost největší prioritu. Žádná pozdější definice potom nemůže ovlivnit její hodnotu. Zpravidla se ale doporučuje používat !important pouze ve výjimečných případech, protože některé prohlížeče ji ignorují, a také, pokud máte dlouhý stylopis, budete v tom mít za chvíli pěkný nepořádek, když každá druhá vlastnost bude mít přídavek !important. Takže: radši se používání !important co nejvíc zdržte.
To by bylo tak všechno k pokročilé kaskádovitosti. Nebojte se s tím experimentovat, abyste získali všechny potřebné poznatky ke správnému využití kaskádových stylů.