CSS list-style
La proprietà CSS list-style definisce lo stile dei marcatori di elenco (CSS3)
La proprietà list-style in CSS3 è uno shorthand che permette di impostare rapidamente tipo, posizione e immagine del marcatore di una lista. È utile per personalizzare elenchi puntati o numerati in modo compatto e stilisticamente coerente.
Sintassi
Significato dei valori principali:
-
list-style-type: Definisce il tipo di marcatore, come
disc,circle,square,decimal, ecc. -
list-style-position: Può essere
inside(il marcatore è dentro il box del contenuto) ooutside(fuori dal box del contenuto). -
list-style-image: Consente di usare un’immagine personalizzata come marcatore (es.
url('img/bullet.png')). -
none: Rimuove i marcatori dalla lista.
-
inherit / initial / unset: Valori globali per ereditare, inizializzare o annullare il valore.
Esempio proprietà: list-style
Codice Esempio: list-style
.list-style-disc {
list-style: disc outside;
font-size: 18px;
}.list-style-circle-inside {
list-style: circle inside;
font-size: 18px;
color: #4078f2;
}.list-style-none {
list-style: none;
font-size: 18px;
color: #e06c75;
}
Contenuto Esempio: list-style
Esempio di utilizzo della proprietà list-style
In questo esempio vengono mostrati diversi stili applicati agli elenchi non ordinati:
- Elemento con bullet disc (default)
- Secondo elemento
- Elemento con bullet circle (inside)
- Secondo elemento
- Elemento senza bullet
- Secondo elemento
CSS e HTML per l'esempio con list-style:
<style>
.list-style-disc {
list-style: disc outside;
font-size: 18px;
}
.list-style-circle-inside {
list-style: circle inside;
font-size: 18px;
color: #4078f2;
}
.list-style-none {
list-style: none;
font-size: 18px;
color: #e06c75;
}
</style>
<ul class="list-style-disc">
<li>Elemento con bullet disc (default)</li>
<li>Secondo elemento</li>
</ul>
<ul class="list-style-circle-inside">
<li>Elemento con bullet circle (inside)</li>
<li>Secondo elemento</li>
</ul>
<ul class="list-style-none">
<li>Elemento senza bullet</li>
<li>Secondo elemento</li>
</ul>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
