Proprietà per le liste

 

Proprietà

Valori

list-style

list-style-type 
list-style-position 
list-style-image

list-style-image

none 
url

list-style-position

inside 
outside

list-style-type

none 
disc 
circle 
square 
decimal 
decimal-leading-zero 
lower-roman 
upper-roman 
lower-alpha 
upper-alpha 
lower-greek 
lower-latin 
upper-latin 

Esempi dimostrativi delle funzionalità di alcune proprietà per le liste:

· Esempio 1: uso della proprietà list-style-type

list-style

La proprietà list-style è una proprietà a sintassi abbreviata con cui si può definire sinteticamente e con una sola dichiarazione tutti i valori per un'elenco listato.

ul{

list-style: disc outside;

}

In questo esempio i valori della proprietà list-style assegnano all'elementoul un punto elenco caratterizzato da un cerchietto (disc) che si colloca alla sinistra del testo (outside).

torna alla tabella

list-style-image

La proprietà list-style-image sostituisce al punto elenco un'immagine. 
La proprietà 
list-style-image assume i seguenti valori:

· none (non sarà visualizzata nessuna immagine);

· url (indica il percorso dell'immaginme da associare all'elenco).

ol{

list-style-image: url(img.gif);

 

}

In questo esempio l'url associerà all'elenco un'immagine.

torna alla tabella

list-style-position

La proprietà list-style-position definisce la posizione del punto elenco.
La proprietà 
list-style-position assume i seguenti valori:

· inside (indenta il punto elenco e il testo);

· outside (mantiene il punto elenco alla sinistra del testo).

ol{

list-style-position: inside;

}

In questo esempio il valore assegnato alla proprietà list-style-positionindenta il punto elenco e il testo.

torna alla tabella

list-style-type

La proprietà list-style-type imposta il tipo di punto elenco. 
La proprietà 
list-style-type assume i seguenti valori:

· none (nessun punto elenco);

· disc (cerchietto ripieno);

· circle (cerchietto);

· square (quadrato);

· decimal (numero);

· decimal-leading-zero (numero che inizia con la doppia cifra - 01, 02);

· lower-roman (numero romano piccolo - i, ii, iii, iv, v, etc.);

· upper-roman (numero romano grande - I, II, III, IV, V, etc.);

· lower-alpha (carattere minuscolo - a, b, c, d, e, etc.);

· upper-alpha (carattere maiuscolo - (A, B, C, D, E, etc.);

ul{

list-style-type: upper-roman;

}

In questo esempio il valore della proprietà list-style-type assegna all'elemento ul un punto elenco caratterizzato da numeri romani grandi.

torna alla tabella