Dnes je Přidat k oblíbeným
Dědičnost a kaskáda vlastností
Výchozí hodnoty
Každý prvek, který používáme v HTML má přednastavené výchozí hodnoty některých vlastností. Ty se použijí vždycky, pokud je ve stylopisu nezměníme. Díky tomu nemusíme znovu a znovu definovat pro každý prvek všechny vlastnosti.
Tam, kde nám na způsobu vykreslení nějakého prvku opravdu záleží, doporučuji ve stylopisu jeho parametry nadefinovat. Jinak byste si museli otestovat alespoň v těch nejpoužívanějších prohlížečích a navíc v různých rozlišeních, že to vypadá opravdu tak, jak chcete.
Dědičnost
Dříve, než se pro prvek použijí jeho předdefinované hodnoty, tak se pokusí je "zdědit" od svého rodičovského prvku. Ne všechny vlastnosti jsou ale dědičné. Obecně jsou dědičné jenom vlastnosti, které popisují styl obsahu (barvu, typ a velikost písma, výšku řádku...). Vlastnosti, které popisují styl bloků (pozadí, okraje, rámečky) dědičné nejsou.
Prakticky to při vykreslování prvku vypadá tak, že pokud nemá ve stylopisu nadefinovanou nějakou dědičnou vlastnost, podívá se na hodnotu téhle vlastnosti u svého rodiče (prvku, ve kterém je umístěn). Pokud ji nemá nadefinovanou ani rodič, tak ji převezme od svého rodiče a takhle to jde dál, až se dostaneme až k prvku <body>. Pokud ani ten nemá tuto vlastnost určenou, teprve pak se použije výchozí hodnota. Jestliže ovšem vlastnost dědičná není a my ji ve stylopisu nedefinujeme, použije se výchozí hodnota ihned, bez jakéhokoliv dotazování se rodičovských prvků.p {color: red; border-top: 2px solid green}
CSS:
<p>Odstavec, do kterého umístíme <b>vnořený prvek</b></p>
Vysvětlení:
Pro odstavec jsme nadefinovali barvu textu (color) a rámeček nahoře. Pro tučné písmo jsme žádné vlastnosti neurčili. Vlastnost color je dědičná, proto bude tučné písmo zobrazeno červeně (zděděné od odstavce). Vlastnost border ale dědičná není, proto bude rámeček jen okolo odstavce. Tučné písmo (prvek <b>) bude bez rámečku, neboť se použije výchozí hodnota (ta pro <b> zní border: none= žádný rámeček). Všechny ostatní vlastnosti, potřebné k vykreslení tučného písma (velikost, typ, pozadí, efekty písma, prokládání znaků - je jich přes 50) hodnotu buď zdědí, a pokud nejsou dědičné, použijí svou výchozí hodnotu.
Kaskáda
Každý prvek může mít nadefinovanou jednu vlastnost víckrát. Buď k dokumentu tagem <link> připojíme několik stylopisů nebo současně se stylopisem nadefinujeme styl v hlavičce mezi tagy <style> a </style> nebo třeba současně s oběma způsoby jednomu prvku nadefinujeme nějaké jiné vlastnosti přímo atributem style u konkrétního tagu. V rámci jednoho stylopisu můžeme navíc zadat několik pravidel pro jeden prvek a v každém pravidle budou vlastnosti s jinými hodnotami. Co se potom použije?
V CSS existují jasná a přesná pravidla, jak vícenásobné definice stylu pro jeden prvek zpracovat- která mají přednost a jak se mohou případně doplňovat. Zde nastíním jen ta základní.
Pokud více pravidel definuje nějakou vlastnost pro stejný prvek, nejprve se porovná konkrétnost selekce (selektoru u každého pravidla). Přednost má to pravidlo, které prvek popisuje nejkonkrétněji. Nejobecněji prvek popisuje samotný název HTML tagu (h1, p, b...)- pokud jsou v selektoru, pak v počítání konkrétnosti se za něj přičte jeden bod. Konkrétnější jsou pak třídy a pseudotřídy- za ně se přičítá 10 bodů. Nejlépe vystihují prvek identifikátory- za ně je bodů 100. Přednost potom má definice s vyšší hodnotou.
b {color: red} /*1 bod*/
p b {color: blue}/*1 + 1 = 2 body*/
b.zelene {color: green}/*1 + 10 = 11 bodů*/
p.prvni b {color: yellow}/*1 + 10 + 1 = 12 bodů*/
#necitelne {color: white}/* 100 bodů*/
HTML:
<p> Běžný černý text <b> tučný modrý text (p b je konkrétnější než b)</b> běžný černý text. </p>
<p> Běžný černý text <b class="zelene">tučný zelený text</b> běžný černý text. </p>
<p class="prvni"> Běžný černý text <b class="zelene"> tučný žlutý text (p.prvni b je konkrétnější než b.zelene- a tento text vyhovuje oběma definicím)</b> běžný černý text. </p>
<p class="prvni"> Běžný černý text <b id="necitelne">tučný bílý text</b> běžný černý text. </p>
Pokud máme několik pravidel se stejnou (nejvyšší) hodnotou, použije se to, které je definováno jako poslední. Pravidla jsou řazena systémem: externí stylopisy, připojené tagem <link> (následují za sebou v pořadí jak jsou připojené) --> stylopisy v hlavičce mezi <style> a </style>. Absolutní přednost mají ale pravidla, která jsou definována přímo u prvku v atributu style=. Takto definované vlastnosti jsou jakoby za 1000 bodů.
Využití v praxi
Když už víme, co dědičnost a kaskáda znamenají, ještě se je musíme naučit používat. Dědičnost nám může ušetřit spoustu psaní zbytečného kódu. Pokud chci, nastavit všemu na stránce jednotný typ písma, bez dědičnosti bych musel napsat něco takového:/
h1 {font-family: Verdana, sans-serif; font-size: 95%; color: #222; line-height: 120%}
h2 {font-family: Verdana, sans-serif; font-size: 95%; color: #222; line-height: 120%}
h3 {font-family: Verdana, sans-serif; font-size: 95%; color: #222; line-height: 120%}
b {font-family: Verdana, sans-serif; font-size: 95%; color: #222; line-height: 120%}
em {font-family: Verdana, sans-serif; font-size: 95%; color: #222; line-height: 120%}
atd.
atd.
atd.
S využitím dědičnosti si to mohu významně zkrátit a neriskuji, že opominu nějaký prvek. Všechny tyto vlastnosti jsou totiž dědičné, a tak když je nadefinujeme pro tag <body>, všechny prvky obsažené mezi <body> a </body> je zdědí (pokud to potom pro nějaký konkrétní prvek neupravíme jinak).
Stejně tak je zbytečné i definování přednastavených hodnot pro jednotlivé prvky. Pro nadpis <h1> můžu klidně napsat
h1 {
font-size: 200%;
font-weight: bold;
font-style: normal;
width: auto;
height: auto;
padding: 0;
border: none;
text-decoration: none;
}
ale je to naprosto zbytečné, protože většinu těchto vlastností si CSS definuje samo. Smysl má pouze definovat font-size: 200%; font-weight: bold; a font-style: normal;, protože tyto vlastnosti si určuje sám prohlížeč a proto budou trochu jinak vypadat ve Firefoxu a jinak v Opeře. Ostatní hodnoty vlastností jsou totožné s nastavením CSS, a proto je výsledek stejný, ať je zapíšete nebo ne.
Když už umíme využít dědičnost a výchozí hodnoty, tak se ještě podívejme na využití kaskády. To už je trochu složitější problematika, ale do budoucna Vám může ušetřit hodně práce. Můžeme třeba několika různým prvkům definovat jejich stejné vlastnosti a teprve potom určíme jejich odlišnosti. Využijeme tak toho, že přednost má pozdější pravidlo.
#box1, #box2, #box3 {
font-family: Verdana, sans-serif;
font-size: 85%;
color: yellow;
background-color: black;
margin: 10px;
padding: 2em;
border: 2px solid blue;
}
#blok2 {border-size: 3px}
#blok3 {border-size: 1px}
Všechny tři boxy budou tedy vypadat stejně, jenom první bude mít rámeček 2px široký, druhý 3px a třetí 1px (díky pravidlu o přednosti pozdějšího zápisu).
Podobný způsob použijeme i pokud chceme jednomu prvku nadefinovat současně několik vlastností. Využijeme tzv. zkratek, které najednou definují více vlastností a přepsáním v kaskádě si ulehčíme práci.
#blok {
border-top: 2px solid blue;
border-right: 2px solid blue;
border-bottom: none;
border-left: 2px solid blue;
}
anebo si můžeme ušetřit práci a využít kaskádu:
#blok {
border: 2px solid blue;
border-bottom: none;
}
Zápis je kratší a napříště se nám bude mnohem lépe upravovat. Třeba při změně šířky nebo barvy upravíme místo tří vlastností jenom jednu. U složitějších vlastností (font) se to vyplatí ještě víc.
Využít se dá i pravidlo o přednosti konkrétnější selekce. Vlastnosti všech nadpisů h1 nadefinujeme na jedno místo a některé konkrétní nadpisy potom trošku pozměníme.
width: 200px;
margin: 10px 200px 0 200px;
padding: 5px;
background: green;
color: yellow;
font-size: 150%;
}
h1.vyznamne {color: red;}
#hlavicka h1 {font-size: 200%;}
#hlavicka h1.vyznamne {font-weight: bold; text-decoration: underline;}
Všechny nadpisy h1 tak budou mít šířku 200px, margin, padding a pozadí nadefinované v prvním pravidle. Významné nadpisy nebudou žluté, ale červené, nadpisy v hlavičce budou ještě o třetinu větší než ty normální (a budou žluté) a významné nadpisy v hlavičce budou tučné a podtržené, velikost 200% a červené. Společné vlastnosti jsou opět definovány na jednom místě a jediným zásahem se opět mohou změnit.