Stilizzare gli elenchi
Attraverso i CSS abbiamo due differenti sistemi per la formattazione delle liste: attraverso apposite proprietà in base list ed attraverso il box model che esamineremo nelle prossime lezioni.
Esaminiamo le principali proprietà dedite alla formattazione delle liste:
- list-style-image - permette di utilizzare un'immagine al posto del puntatore tradizionale;
- list-style-type - definisce il puntatore da utilizzare per la lista tra quelli di default dell'HTML.
Dato il seguente elenco:
<ul> <li class="LISTA">Pippo</li> <li class="LISTA">Pluto</li> <li class="LISTA">Paperino</li> </ul>applichiamo un'immagine come puntatore alla lista:
li.LISTA
{
list-style-image: url(puntatore.gif);
}
utilizzando il comando url per definire il nome ed il percorso dell'immagine.
Applichiamo adesso un puntatore HTML alla lista:
li.LISTA
{
list-style-type: disc; /* VALORE DI DEFAULT */
}
Ecco i principali possibili valori da associare a questa proprietà:
none disc circle square decimal lower-roman upper-roman lower-alpha upper-alphaLi si provi per verificarne l'effetto.
