CSS/Liste
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>;