Programmazione Web » Css » Personalizzare gli elenchi puntati con i Css
Personalizzare gli elenchi puntati con i Css
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1391 volte
L'argomento che oggi vedremo in dettaglio non è altro che la gestione degli elenchi puntati, partendo dai vari tipi di punti di elenco, fino ad arrivare all'utilizzo di un'immagine personalizzata per la rappresentazione degli stessi!
E' inutile dire che ci serviremo dei Css per realizzare questo effetto; la proprietà che andremo ad utilizzare è la list-style-type, appartenente alle proprietà del body:
<style>
body {
list-style-type: disc;
}
</style>
Al fine di personalizzare l'elenco è possibile una vasta scelta di elenchi. Basterà solo cambiare la proprietà disc nel Css visto sopra, con una delle seguenti:
disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.
Come abbiamo anticipato, grazie alla proprietà list-style-image, sarà anche possibile personalizzare un elenco creando un'immagine e inserendola nel Css in questo modo:
<style>
body {
list-style-image: url(puntino.jpg);
}
</style>
Ovviamente sarà necessario creare l'elenco puntato:
<ul>
<li>Primo punto </li>
<li>Secondo punto </li>
<li>Terzo punto </li>
</ul>
Semplicissimo!
Aggiungi questo tutorial ai preferiti
