Dnes si vysvětlíme problematiku vnořování stylů. Nadefinované vlastnosti určité se tedy budou aplikovat pouze tehdy, bude-li tato značka vnořena do konkrétní jiné značky.
Problematiku vnořování stylů si vysvětlíme na příkladu nabidka.html, se kterým jsme pracovali i minule. Otevřeme si jej pomocí HTML editoru Yugie.
Zároveň si otevřeme soubor styly.css pomocí programu TopStyle Lite. V souboru styly.css nadefinujeme nyní vlastnosti pro značku <li>. Jak jsme si již minule řekli, tato značka vymezující položky seznamu je stejná jak u neuspořádaných tak i u uspořádaných seznamů. Pokud tedy nadefinujeme-li nějakou vlastnost pro značku <li>, projeví se to u obou typů seznamů. Zkusme tedy do souboru styly.css doplnit např. tuto vlastnost:
Soubor uložíme a v HTML editoru Yugie spustíme prohlížeč (klávesa F3) - můžeme vidět, že veškerý text obou seznamů je nyní skutečně zeleným písmem. Pokud bychom chtěli tedy vlastnost položky definovat např. pouze pro neuspořádaný seznam, museli bychom ji zapsat takto:
Toto spíše však můžeme považovat za „učebnicový příklad", protože musíme mít na paměti, že potom by byly zelené veškeré seznamy s odrážkami, které bychom kdekoli na našem webu použili.
Poznatek však můžeme zobecnit: Jestliže potřebujeme, aby nějaká HTML značka měla určitou vlastnost pouze tehdy, pokud se nachází uvnitř určité značky, zapisujeme do kaskádového stylu nejprve hlavní značku a potom další - tzv. vnořenou značku. Potom teprve definujeme vlastnost, která však platí pouze v případě vnoření značky.
Tento příklad můžeme rozšířit třeba ještě…
