Guida ai fogli di stile CSS - Corso base - Capitolo 5: le liste

Capitolo 5: Le liste.

Tramite i CSS possiamo modificare l'aspetto dei tag LI (list item) delle liste html.

Possiamo impostare le seguenti proprietà:

• list-style-image: url('/[path file immagine]')

Permette di utilizzare, come marker (marcatore, simbolo) di un elemento della lista un'immagine, reperibile all'url specificato come argomento di url([path]).

 

• list-style-position: inside | outside

Consente di definire la posizione del marker dell'elemento della lista in relazione al testo di tale elemento.

I valori possono essere:

• inside --- il marker fa parte del testo, appartiene al suo "box", verrà visualizzato all'interno del testo in caso di visualizzazione dello stesso su più righe.
• outside --- il marker si trova al di fuori del "box" del testo (più precisamente, alla sua sinistra). E' il comportamento di default.

 

• list-style-type: [varie opzioni, vd. elenco nella descrizione]

Definisce l'aspetto del marker di un elemento della lista.

Possibili valori:

disc	Un cerchio pieno. Il colore di riempimento può essere impostato mediante una regola color per il contenitore della lista.
circle	Un cerchio vuoto.
square	Un quadrato.
decimal	Numeri interi: 1, 2, 3, 4...
decimal-leading-zero	Numeri interi con uno 0 posto davanti a ciascun numero: 01, 02, 03, ...
lower-roman	Numeri romani in minuscolo: i, ii, iii, iv, v, ...
upper-roman	Numeri romani in maiuscolo: I, II, III, IV, V, ...
lower-alpha	Lettere dell'alfabeto in minuscolo: a, b, c, d, ...
upper-alpha	Lettere dell'alfabeto in maiuscolo: A, B, C, D, ...
lower-latin	Come lower-alpha.
upper-latin	Come upper-alpha.
lower-greek	Lettere dell'alfabeto greco in minuscolo.