CSS Fogli di stile per il sito scolastico Bobby WorldWide Approved AAA

IL BOX MODEL

LE LISTE

Grazie ai CSS possiamo definire in vari modi l'aspetto delle liste (X)HTML. Le proprietà che esamineremo faranno riferimento diretto agli elementi che le compongono, ovvero l'elemento <LI>. In effetti, è solo questo che trova una rappresentazione effettiva sulla pagina, mentre UL sono semplici dichiarazioni del tipo di lista usato.

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

Per la maggior parte di proprietà fare riferimento al documento di esempio.

1) list-style-image

Definisce l'URL di un'immagine da usare al posto dei Proprietà ereditata. Si applica agli elementi LI.

Sintassi

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

Valori

 

2) list-style-position

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

Sintassi

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

Valori

Esempi

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

3) list-style-type

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

Sintassi

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

Valori

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

I diversi tipi di marcatori si riferiscono ciascuno, logicamente, a liste ordinate o non ordinate.

4) list-style

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

Sintassi

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

Valori

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

Esempi

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