Rychlá příručka - CSS - Seznamy

Kaskádové styly tagů <ol>, <ul> a <li>

Číslovaný seznam vytváří tag <ol>, nečíslovaný seznam tag <ul> a položku v libovolném seznamu tag <li>, to již zřejmě víme z HTML části této příručky. Víme z ní také, že máme různé způsoby nastavování odrážek pomocí parametrů v kódu jazyka HTML. Odrážky ale můžeme samozřejmě nastavovat kaskádovými styly, konkrétně kaskádovým stylem list-style-type. Pokud tento kaskádový styl použijeme na číslovaný seznam, za hodnotu může mít upper-alpha (pro velká písmena), lower-alpha (pro malá písmena), upper-roman (pro velké římské číslice) nebo lower-roman (pro malé římské číslice). Pokud kaskádový styl list-style-type použijeme na nečíslovaný seznam, může mít za hodnotu square (pro čtverce), circle (pro kružnice) nebo disc (pro kruhy). Pokud kaskádový styl list-style-type přiřadíme tagu pro seznam, bude platit pochopitelně pro celý seznam, pokud ho přiřadíme tagu pro položku (tagu <li>), bude platit jen pro tuto položku. Můžeme zde také pracovat se třídami a přiřadit kaskádový styl více položkám se stejnou třídou. Dalšími kaskádovými styly jsou width a height, které nastavují šířku a výšku. Poté můžeme pro položku, ve které máme text, použít také všechny kaskádové styly, které ten text upravují (např. font-weight, font-style, text-decoration, font-family, color a font-size). Každé položce můžeme také nastavit pozadí nebo rámeček pomocí kaskádových stylů background a border. Položky můžeme od sebe odsadit pomocí kaskádového stylu margin a velikost odsazení obsahu položky a ohraničení položky můžeme nastavit pomocí kaskádového stylu padding. Změnit pozici textu můžeme pomocí kaskádového stylu text-align.

Přetvoření seznamu v menu webu

Menu na různých webech je také v kódu jazyka HTML pouze seznam, to jste se již mohli dozvědět, ale jak se tedy takový seznam přetvoří, aby se z něj stalo menu celého webu? Odpověď najdete v následujících větách tohoto článku. Pro položky v seznamu použijeme kaskádový styl float s hodnotou left. Kaskádový styl float nastavuje obtékání položky dalším obsahem. Dále zrušíme pro všechny položky jejich odrážky pomocí kaskádového stylu list-style-type. Tento kaskádový styl bude mít v tomto případě hodnotu none. Tím bychom měli mít menu webu vytvořené. Položky samozřejmě musíme graficky upravit kaskádovými styly background, border, width, height, margin a padding. Text v jednotlivých položkách pak může být upraven pomocí kaskádových stylů font-family, color, font-size, font-weight, font-style, text-decoration a text-align. Položky v takovém seznamu jsou odkazy, protože je to menu celého webu, proto pak dále můžeme použít také kaskádové styly pro odkazy, o nichž se také dočtete v této příručce.

© 2013 Petr Lhotský - petrlhotsky@windowslive.com