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

  1. první položka
  2. druhá položka
  3. 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.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Žádný příspěvek v diskuzi

Odpovědět