Le Liste | Guida CSS

Le=20 Liste

Grazie ai CSS possiamo definire in vari modi l'aspetto = delle=20 liste (X)HTML. In realt=E0 tutte le propriet=E0 che = andremo ad=20 esaminare si riferiscono non ai canonici tag usati per = inserire una=20 lista ordinata (<OL>) o non ordinata=20 (<UL>), ma ai singoli elementi che le = compongono,=20 ovvero l'elemento <LI>. In effetti, =E8 solo = questo che=20 trova una rappresentazione effettiva sulla pagina, mentre = OL=20 e UL sono semplici dichiarazioni del tipo di = lista=20 usato.

Le propriet=E0 dedicate alla formattazione delle liste = sono=20 quattro. Tre definiscono singoli aspetti, l'ultima,=20 list-style, =E8 una propriet=E0 a sintassi = abbreviata.

list-style-image

Definisce l'URL di un'immagine da usare come marcatore di = un=20 list-item. Propriet=E0 ereditata. Si applica agli elementi = LI e=20 a quelli per i quali si imposti la propriet=E0 display = sul=20 valore list-item.

Sintassi

<selettore> {list-style-image:=20 url(<url_immagine>);}

Nella definizione della sintassi per tutte queste = propriet=E0 avete=20 a disposizione diverse strade. La prima e pi=F9 semplice =E8 = quella di=20 definire lo stile a livello degli elementi lista o = list-item:

ul {list-style-image: = url(immagine.gif);}
ol=20 {list-style-image: url(immagine.gif);}
li = {list-style-image:=20 url(immagine.gif);}

Pi=F9 correttamente e per un fatto di rigore strutturale = (lo stile=20 si applica ai list-item), =E8 preferibile, usando UL = o=20 OL, affidarsi ad un selettore del discendente = (descendant=20 selector):

ul li {list-style-image: = url(immagine.gif);}

La soluzione =E8 ottimale se prevedete di usare sempre = uno stesso=20 stile per tutte le liste. Se invece pensate di usare stili = diversi,=20 affidatevi alla potenza delle classi, che applicherete di = volta in=20 volta secondo le necessit=E0. La sintassi consigliata =E8 = questa:

ul.nome_della_classe li {list-style-image: = url(immagine.gif);}

Valori

un URL assoluto o relativo che punti ad = un'immagine.=20
none. Non viene usata nessuna immagine. =

Esempi

Per tutte le propriet=E0 abbiamo preparato il consueto documento con codice ed esempi.

Una considerazione "estetica" di cui tenere conto =E8 la = dimensione=20 delle immagini. Devono essere sempre adeguate alla = dimensione del=20 testo.

list-style-position

Imposta la posizione del marcatore rispetto al testo del=20 list-item. Propriet=E0 ereditata. Si applica agli elementi = LI e=20 a quelli per i quali si imposti la propriet=E0 display = sul=20 valore list-item.

Sintassi

<selettore> {list-style-position:=20 <valore>;}

Valori

outside. Valore di default. E' il comportamento = standard: il marcatore =E8 piazzato all'esterno del testo. =
inside. Il marcatore diventa parte integrante = del testo=20 e ne rappresenta in un certo senso il primo carattere. Se = il testo=20 va a capo il marcatore apparir=E0 all'interno del box. =

Esempi

ul li {list-style-position: = inside;}
#lista li=20 {list-style-position: outside;}

list-style-type

Definisce l'aspetto del marcatore. Propriet=E0 ereditata. = Si=20 applica agli elementi LI e a quelli per i quali si = imposti la=20 propriet=E0 display sul valore list-item.

Sintassi

<selettore> {list-style-type:=20 <valore>;}

Valori

La scelta dei valori possibili =E8 lunghissima. Definiamo = nei=20 dettagli solo i pi=F9 importanti, limitandoci a citare = quelle che=20 fanno riferimento a sistemi di scrittura non occidentali. = Tali=20 valori sono stati inseriti per venire incontro alle esigenze = di=20 numerazione di lingue come l'ebraico o il giapponese, che = usano=20 sistemi diversi dal nostro.

disc: un cerchietto pieno colorato. Il colore = pu=F2=20 essere modificato per tutti i tipi con la propriet=E0 = color.=20
circle: un cerchietto vuoto.=20
square: un quadratino=20
decimal: sistema di conteggio decimale 1, 2, 3, = ....=20
decimal-leading-zero: sistema di conteggio = decimale ma=20 con la prima cifra preceduta da 0. 01, 02, 03, ....=20
lower-roman: cifre romane in minuscolo. i, ii, = iii, iv,=20 .......=20
upper-roman: cifre romane in maiuscolo. I, II, = III, IV,=20 ....=20
lower-alpha: lettere ASCII minuscole. a, b, c, = ......=20
upper-alpha: lettere ASCII maiuscole. A, B, C, = .....=20
lower-latin: simile a lower-alpha=20
upper-latin: simile a upper-alpha=20
lower-greek: lettere minuscole dell'alfabeto = greco=20 antico.

Si riferiscono a sistemi di conteggio internazionali i = seguenti=20 valori:

I diversi tipi di marcatori si riferiscono ciascuno, = logicamente,=20 a liste ordinate o non ordinate. Useremmo, ad esempio,=20 square, per un UL e decimal per un = OL.=20 In realt=E0, se si imposta l'aspetto del marcatore con i = CSS,=20 l'impostazione definita in (X)HTML viene ignorata. Pertanto, = posso=20 avere una lista non ordinata con list-item decimali, come = mostra=20 chiaramente l'esempio. Il consiglio =E8, comunque, = di attenervi=20 al buon senso e di rispettare la logica degli elementi.

list-style

Propriet=E0 a sintassi abbreviata con cui si definiscono = tutti gli=20 aspetti e gli stili di un list-item. Propriet=E0 = ereditata.

Sintassi

<selettore> {list-style: <valore = tipo>=20 <valore posizione> <valore immagine>;}

Valori

I valori possibili sono quelli visti in precedenza per le = propriet=E0 singole. A rigor di logica solo due delle tre = propriet=E0=20 singole dovrebebro trovare posto in questa dichiarazione = abbreviata:=20 per definire l'aspetto del marcatore, infatti, o decido di = usare=20 un'immagine o propendo per un marcatore a carattere. Se si=20 inseriscono indicazioni per tipo e immagine, prevale = l'immagine e il=20 tipo =E8 ignorato.

Esempi

ul li {list-style: square = inside;}
ul.lista1 li=20 {list-style: outside url(imamgine.gif);}

Links

Le impostazioni di base delle liste sono queste e la = lezione =E8 al=20 riguardo esaustiva. Se volete capire come esse interagiscono = con=20 altri aspetti dei CSS non potete non leggere questo = straordinario=20 articolo di Mark Newhouse:

CSS Design: Taming Lists su A List = Apart.=20 Rimarrete stupiti di fronte a tanta maestria e agli usi = inaspettati=20 di questo elemento. Buona lettura.

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =