Zoznamy

Nečíslované zoznamy sa využívajú predovšetkým ako odrážky, ale taktiež sa vo veľkom využívajú ako menu či už vertikálne alebo horizontálne. Častokrát je možné vidieť zoznam použitý aj ako stránkovanie kategórie článkov či navigáciu po stránke známu taktiež ako breadcrumbs.

Poznáme dva typy zaužívaných zoznamov:

  • radené (<ol>)
  • neradené (<ul>)

Radené aj neradené zoznamy sú definované svojim obalom a svojimi elementami – položkami, ktoré sú definované samostatnou značkou <li>.

<!-- neradený zoznam -->
<ul>
    <li>položka</li>
    <li>položka</li>
    <li>položka</li>
</ul>

<!-- radený zoznam -->
<ol>
    <li>položka</li>
    <li>položka</li>
    <li>položka</li>
</ol>

Taktiež je možné vytvoriť zoznamy druhej a nižšej úrovne až donekočna vnorením ďalšieho zoznamu do položky jeho nadradeného zoznamu, pričom typ zoznamu môže byť odlišný.

<ul>
    <li>položka</li>
    <li>
        <ol>
            <li>položka</li>
            <li>položka</li>
            <li>položka</li>
        </ol>
    </li>
    <li>položka</li>
</ul>

V prípade, že by sme chceli číslovanie radeného zoznamu posunúť, môžme tak spraviť pomocou atribútu „start“, ktorý nadobúda číselné hodnoty.

<ol start="15">
    <li>položka</li>
    <li>položka</li>
    <li>položka</li>
</ol>

Testové otázky

  • Aké typy zoznamov poznáme?
  • Ako zadefinujeme nový zoznam?
  • Koľko úrovní zoznamu môžeme maximálne použiť?
  • Na čo sa používajú zoznamy?

Zoznamy je možné naštýlovať pomocou rôznorodých techník. Používajú sa ako odrážkovaný zoznam alebo radený zoznam, no je možné ich vidieť aj pri tvorbe navigačných menu.

V CSS okrem iných nastavení, sú tu taktiež také, ktoré sú priamo špecifikované pre zoznamy:

  • list-style – je krátky zápis pre sériu pravidiel
  • list-style-image – namiesto znaku pred položkou zoznamu zobrazí vlastný obrázok
  • list-style-position – pojednáva o tom, kde sa bude znak pred položkou zoznamu nachádzať, či pred položkou alebo priamo v nej na jej začiatku
  • list-style-type – špecifikuje, aký znak sa bude nachádzať pred každou položkou zoznamu

list-style

je krátky zápis pre sériu pravidiel a to v poradí:

  1. list-style-type
  2. list-style-position
  3. list-style-image

Pokiaľ sa jedna či dve hodnoty vynechajú, nie je to problém a definované štýly sa aj napriek tomu aplikujú.

Bez zmeny kódu, predvolené štýly pre neradený zoznam sú nasledovné:

ul {
    list-style: disc outside none;
}

Prvá vlastnosť opisuje o aký typ zoznamu ide a jedná sa konkrétne o guličkový zoznam. Druhá vlastnosť hovorí, že sa guličky budú nachádzať mimo položky a posledná hovorí to, že nie je použitý žiadny vlastný obrázok namiesto guličiek.

list-style-image

namiesto znaku pred položkou zoznamu zobrazí vlastný obrázok, ktorého kód môže vyzerať aj takto:

ul {
    list-style-image: url('http://egara.net/fwd/wp-content/uploads/2018/09/star.png');
}

list-style-position

pojednáva o tom, kde sa bude znak pred položkou zoznamu nachádzať, či pred položkou alebo priamo v nej na jej začiatku.

/* neradený zoznam so znakom pred položkou mimo nej */
ul {
    list-style-position: outside;
}

/* radený zoznam so znakom pred položkou vrámci nej */
ol {
    list-style-position: inside;
}

list-style-type

špecifikuje, aký znak sa bude nachádzať pred každou položkou zoznamu. Hodnôt tejto vlastnosti je väčšie množstvo. V zásade sa delia na dva typy:


Testové otázky

  • Čo je a na čo slúži list-style?
  • Aká je predvolená hodnota list-style?
  • Aký zápis má list-style?
  • Čo je a na čo slúži list-style-type?
  • Čo je a na čo slúži list-style-position?
  • Čo je a na čo slúži list-style-image?