dnes je 4.7.2022

Input:

WWW stránky prakticky - 15. část

29.8.2007, , Zdroj: Verlag Dashöfer

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ě

Nahrávám...
Nahrávám...