CSS/Liste

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

list-style-type

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

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

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

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>;