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?