Indice del libro

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