Webové technológie

Poznámky:

4. Zoznamy

Vlastnosti:

list-style-type - Zmena typu odrážok

• V neusporiadanom zozname:
  • disc - disk
  • circle - kolečko
  • square - štvorček
  • none - bez odrážky


• V usporiadanom zozname:
  • decimal - arabské číslice (defaultná hodnota)
  • lower-roman - malé rímske číslice
  • upper-roman - veľké rímske číslice
  • lower-alpha - malé písmena
  • upper-alpha - veľké písmena
  • none - bez radenia

list-style-image - obrázok namiesto odrážky

list-style-position - zmena pozície odrážky

• outside - označenie položky zoznamu sa zobrazí vo vonkajšej časti položky (defaultná hodnota)
• inside - označenie položky zoznamu sa zobrazí vo vnútri položky

Ako na vlastné označovanie položiek neusporiadaného zoznamu:

CSS ponúka túto možnosť pomocou kombinácie pseudoelementu before a vlastnosti content (táto vlastnosť je určená pre generovanie obsahu na WWW stránke rovno zo šablóny CSS).

Tu je kód:

ul { margin-left: 15px; padding: 0; list-style: none; } ul li:before { content: ">> "; }

Ako na vlastné riadenie položiek usporiadaného zoznamu:

Tento prípad je podobný tomu predošlému, ale naviac budeme využívať vlastnosť counter-increment, ktorý vytvorí v pameti počítača premennú ako v prípade progamovacích jazykov a pri každom volaní tejto vlastnosti, premennej pripočíta hodnotu.

Tu je ukážkový kód:

ol { margin-left: 25px; padding: 0; list-style: none; } ol li { counter-increment: cislo; } ol li:before { content: "Položka " counter(cislo) ": "; }