CSS/Liste

Wikibooks, manuali e libri di testo liberi.
< CSS

In questo modulo verrà trattata la formattazione delle liste che rispetto a quella fornita dall'HTML è sicuramente più gestibile.

list-style-type[modifica]

Questa proprietà permette di stabilire, analogamente all'attributo type delle liste HTML, il simbolo usato come punto elenco, sia di una lista ordinata sia di una non ordinata. Può assumere i seguenti valori:

  • liste ordinate:
    • decimal: numeri decimali, partendo da 1
    • decimal-leading-zero: numeri decimali con zeri aggiuntivi (01...99)
    • lower-roman e upper-roman: numeri romani minuscoli (i, ii, iii, iv, v, ...) e maiuscoli (I, II, III, IV, V, ...)
    • lower-latin/lower-alpha e upper-latin/upper-alpha: lettere dell'alfabeto latino minuscole (a, b, c, ... z) e maiuscole (A, B, C, ... Z)
    • lower-greek: lettere dell'alfabeto greco minuscole (α, β, γ, ...)
    • georgian: numerazione Georgiana (an, ban, gan, ...)
    • armenian: numerazione Armena
  • liste non ordinate: sono disponibili i normali valori disc, square e circle, che funzionano come l'attributo type delle liste HTML

Impostando la proprietà al valore none la lista apparrà, se non viene specificata un'immagine, senza punto elenco.

list-style-image[modifica]

CSS permette di definire come punto elenco un'immagine; nel caso sia stato impostato un valore sia per list-style-type sia per questa proprietà, viene mostrata solo l'immagine (se è valida).

Sintassi:

 list-style-image: url(<percorso>);

<percorso> è quindi un percorso che identifica un'immagine.

list-style-position[modifica]

Questa proprietà permette di impostare la posizione del punto elenco di ogni elemento li. Può assumere i seguenti valori:

  • outside: il punto elenco risulterà esterno al blocco del testo dell'elemento
  • inside: il punto elenco risulterà interno al blocco del testo dell'elemento

Il concetto risulta forse più chiaro con un esempio:

  • La proprietà è settata qui su
    inside
  • Anche qui
  • La proprietà è invece settata qui su
    outside
  • Anche qui

list-style[modifica]

Esiste inoltre la proprietà riassuntiva list-style che riassume la formattazione delle liste. La sintassi è:

list-style: <list-style-type> <list-style-position> <list-style-image>;