Kaskádové styly – útok na seznamy

5. května 2000

•

Velmi zajímavou kapitolou je působení kaskádových stylů CSS na různé seznamy v HTML stránce. Zde jsou seznamem míněny zejména nejčastější značky typu „ul“, případně „ol“. Méně častěji se používajítaké značky „dl“, „dir“ a „menu“, které rovněž představují druhy seznamů.

Pro pochopení následujícího textu je potřeba znát význam značek <ul> a <ol> v HTML stránce. Obě značky představují seznamy, přičemž první z nich položky seznamu nečísluje, zatímco druhá ano. Zde si ukažme příklad obou seznamů:

Nečíslovaný seznam

první položka
druhá položka
třetí položka

Číslovaný seznam

první položka
druhá položka
třetí položka

Kaskádové styly mají sadu vlastností, které jsou určeny právě pro seznamy. A těmi se dnes budeme zabývat. První takovou vlastností je list-style-type. Ta určuje způsob číslování seznamu:

ol { list-style-type: decimal; }

Vlastnost list-style-type umožňuje nastavit tyto druhy číslování:

disc – položky budou uvozeny plným kolečkem
circle – položky budou uvozeny kolečkem bez středu
square – položky budou uvozeny plným čtverečkem
decimal – položky budou očíslovány stylem 1, 2, 3, 4
lower-roman – položky budou očíslovány malými římskými písmeny i, ii, iii, iv
upper-roman – položky budou očíslovány velkými řeckými písmeny I, II, III, IV
lower-alpha – položky budou číslovány malými písmeny a, b, c, d, e
upper-alpha – položky budou číslovány malými písmeny A, B, C, D, E
none – položky nebudou ničím uvozeny

Při použití vlastnosti list-style-type se naprosto setře jakýkoli rozdíl mezi značkami <ul> a <ol>. Značka <ul> představuje v HTML nečíslovaný seznam, zatímco <ol> představuje číslovaný seznam. Pokud použijete kaskádové styly CSS, můžete ale význam těchto značek přehazovat. Třeba následující zápis vám ze značky <ul> udělá číslovaný seznam ve stylu a,b,c, a ze značky <ol> číslovaný seznam ve stylu 1,2,3:

ul { list-style-type: lower-alpha; }
ol { list-style-type: decimal; }

Takže nyní jsme se setkali se zajímavou vlastností kaskádových stylů CSS, a to schopnost změnit význam značek HTML. Styly vám opravdu dovolují, byť jenom mírně a ne ve všech případech, posunout významy některých značek HTML. Naplno se těchto možností využívá v XML, který je mnohem pružnější, než HTML.

Takže pro ilustraci přehodíme původní význam značek <ul> a <ol>. Poslouží to třeba ke zmatení těch, kdo by chtěli luštit naší HTML stránku:

ul { list-style-type: decimal; }
ol { list-style-type: circle; }

Někdy můžete chtít uvozovat seznam něčím jiným, než jenom tím, co vám dovoluje vlastnost list-style-type. Potom raději využijete vlastnost list-style-image, která určuje obrázek na začátku každé položky seznamu:

ul.linux { list-style-image: url(„linux_logo.png“); }

Za tuto vlastnost buď můžete použít slovo url, za které v závorkách vložíte jméno souboru s obrázkem. Prohlížeč pak tento obrázek vloží na začátek každé položky seznamu. Někdy se také může hodit zrušení obrázku před položkami pomocí zápisu listy-style-image:none;

Pokud byste chtěli přelstít prohlížeč, a použijete obě zmíněné vlastnosti, pak vězte, že list-style-image je silnější, než list-style-type. Tedy, je-li definován obrázek, potom vlastnost list-style-type se ignoruje.

Další zajímavou vlastností je vlastnost list-style-position. Za tuto vlastnost můžete napsat buď inside, nebo outside. Určuje, jestli úvodní obrázek či číslo před každou položkou bude předsazeno.

A jako vždy, když je u kaskádových stylů definována sada vlastností sloužících k podobnému účelu, existuje také zkratka. Zkratka, jak napsat všechny zde uvedené vlastnosti najednou:

td ul { list-style: circle outside; }

V zásadě je požívání zkratky jednoduché. Za slovo list-style píšete v tomto pořadí: Nejdříve slova, která byste zapsali za list-style-type. Potom slovo za list-style-position, a nakonec list-style-image. Můžete samozřejmě libovolně vynechávat. Pokud určíte obrázek pomocí list-style-image, nemá už smysl určovat typ pomocí list-style-type, protože se stejně neuplatní.

A to je pro dnešek opravdu všechno.