4.10.4 Vnořené seznamy Jak již název napovídá, budeme vnořovat několik seznamů do sebe. Ukážeme si vnořování těch nejzákladnějších seznamů. Nebudeme vnořovat definiční, ani číslované seznamy. Stačí omezit se na obyčejné seznamy. Nastavíme si je potom i pomocí stylů CSS. K čemu se takové vnořené seznamy používají? Například pro mapu webu. Mějme tento kód XHTML: <ul> <!-- hlavní menu (HM) --> <li> <!-- položka HM (PHM) --> Hlavní kategorie <ul> <!-- vnořený seznam v PHM (VS v PHM) --> <li> Podkategorie <!-- vnořený seznam ve VS v PHM (VS ve VS v PHM) --> <ul> <li>Podpodkategorie</li> <li>Podpodkategorie</li> </ul> <!-- konec VS ve VS v PHM --> </li> <li> Podkategorie </li> <li> Podkategorie </li> <li> Podkategorie </li> </ul> <!-- konec VS v PHM --> </li> <!-- konec PHM --> <li> Hlavní kategorie </li> <li> <!-- PHM --> Hlavní kategorie <ul> <!-- vnořený seznam v PHM (VS v PHM) --> <li> Podkategorie <!-- vnořený seznam ve VS v PHM (VS ve VS v PHM) --> <ul> <li>Podpodkategorie</li> <li>Podpodkategorie</li> <li>Podpodkategorie</li> </ul> <!-- konec VS ve VS v PHM --> </li> <li> Podkategorie </li> </ul> <!-- konec VS v PHM --> </li> <!-- konec PHM --> </ul> <!-- konec HM -->
98 CSS a XHTML – tvorba dokonalých WWW stránek krok za krokem
Ukázka elektronické knihy, UID: KOS180661
Obrázek 4.21: Vnořený seznam bez formátování
Když si daný kód dobře prohlédneme, zjistíme, že celý element je tvořen jedním seznamem (párová značka <ul>), v jehož položkách (párová značka <li>) se někde, kde chceme, nacházejí další seznamy (párová značka <ul>), v jejichž položkách (párová značka <li>) jsou znovu další seznamy. To jsou vnořené seznamy. Styly CSS nám dávají do rukou mocný nástroj, kterým toto složení XHTML značek ovládneme. Zde nejlépe uvidíme, jak silným nástrojem je dědičnost ve stylech CSS. Napišme nejdříve: * { }
margin: 0; padding: 0;
Abychom měli všechno na nule a viděli, jak se další definice chovají, nastavíme vnější okraj na nulu – margin: 0 a také vnitřní okraj na nulu – padding: 0, a to zároveň pro všechny prvky, pomocí * (hvězdičky) ve struktuře kódu XHTML. A můžeme začít skládat naše vnořené seznamy. Nejprve ten „nejvyšší“, ten nejvíce nadřazený. /* první, hlavní menu */ ul { margin: 0 0 0 20px; } ul li { color: #955F00; font-weight: bold; } Zde seznam, jako takový (párová značka <ul>), posuneme o 20 pixelů od levého okraje – margin: 0 0 0 20px. Jeho položky (párová značka <li>) nastavíme v textu na barvu blízkou hnědé – color: #955F00 a mohutnost písma nastavíme na tučné – font-weight: bold. Všimněme si, co to udělalo s naším velkým seznamem. Každý vnořený seznam se posunul o 20 pixelů vpravo, vybarvil se a ztučněl. Pro vzdálenost každého ze seznamů (pokud je optimální) zde využijeme dědičnost, takže danou vlastnost nemusíme znovu nastavovat. Proto další definice budou:
Kompletní průvodce XHTML tagy a formuláři 99
Ukázka elektronické knihy, UID: KOS180661
/* druhé vnořené menu do hlavního menu */ ul ul { list-style-type: square; } ul ul li { color: #bd0000; font-weight: normal; } Vidíme zde, že seznam, vnořený do svého nadřazeného seznamu, má odrážky nastaveny na čtverečky – list-style-type: square. Jeho položky budou v barvě červené – color: #bd0000 a mohutnost jeho písma bude normální – font-weight: normal. Všimněme si, co to udělalo nyní. Nadřazený seznam zůstal v barvě hnědé, ale každý další seznam, v něm vnořený, se změnil podle posledních definic. Ještě musíme odlišit poslední seznam, kterému nastavíme: /* třetí vnořené menu do vnořeného menu v hlavním menu */ ul ul ul { list-style-type: circle; } ul ul ul li { color: #000088; font-weight: normal; } Odrážky tohoto seznamu mají vzhled nastaven na prázdný kroužek – list-style-type: circle, barva písma v jeho položkách je v odstínech modré – color: #000088 a jeho mohutnost písma je normální – font-weight: normal. Ukázali jsme si ty nejjednodušší typy seznamů a také kódy CSS pro jejich sestavení. Většinou obsahují ještě odkazy (párová značka <a>) a jiné prvky. Je čas pokročit na další kapitolu, která je také velmi důležitá.
Obrázek 4.22: Vnořený seznam s CSS stylováním
100 CSS a XHTML – tvorba dokonalých WWW stránek krok za krokem
Ukázka elektronické knihy, UID: KOS180661