Proprietà CSS list-style
Proprietà shorthand per impostare list-style-type, list-style-position e list-style-image. Guarda esempi pratici.
La proprietà CSS list-style è una shorthand che consente di impostare tre proprietà del marcatore di lista in una singola dichiarazione:
list-style-type— la forma del marcatore o lo stile del contatore (disc,circle,square,decimal,lower-roman,none…).list-style-position— se il marcatore si trovaoutsiderispetto al box del contenuto (il valore predefinito) oppureinside.list-style-image— un'immagine da usare come marcatore al posto di quello basato sul tipo.
Questa pagina tratta la sintassi shorthand, come i suoi valori corrispondono alle tre proprietà longhand e gli usi più comuni nella pratica.
Come funziona la shorthand
Puoi elencare i valori in qualsiasi ordine, ma l'ordine convenzionale è type → position → image:
list-style: square inside url('marker.png');Non è necessario fornire tutti e tre i valori. Qualsiasi longhand omessa viene ripristinata al suo valore iniziale — quindi scrivere list-style: square equivale a list-style: square outside none. Questo ripristino è il motivo per cui una shorthand può silenziosamente annullare una list-style-position impostata in precedenza altrove; preferisci le longhand quando vuoi modificare una sola parte.
La proprietà può essere impostata su un elemento di lista, oppure sulla lista stessa (<ul> o <ol>), dove si propaga in cascata a ogni elemento della lista.
Quando fornisci sia un list-style-type che un list-style-image, il tipo funge da fallback: l'immagine viene mostrata se si carica correttamente, mentre il marcatore di tipo appare se l'immagine è assente o non si carica. Mantenere un valore di tipo è una buona rete di sicurezza.
Per nascondere i marcatori del tutto, usa list-style: none; — utile per i menu di navigazione costruiti con liste <ul>.
| Valore iniziale | disc outside none |
|---|---|
| Si applica a | Elementi di lista. |
| Ereditato | Sì. |
| Animabile | No. |
| Versione | CSS1 |
| Sintassi DOM | object.style.listStyle = "none"; |
Sintassi
list-style: list-style-type list-style-position list-style-image | initial | inherit;Esempio con i marcatori circle e square inside
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example1 {
list-style: circle;
}
.example2 {
list-style: square inside;
}
</style>
</head>
<body>
List 1
<ul class="example1">
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
</ul>
List 2
<ul class="example2">
<li>List Item A</li>
<li>List Item B</li>
<li>List Item C</li>
</ul>
</body>
</html>Risultato
Esempio di impostazione del tipo di marcatore (lower-greek e lower-latin)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul:nth-of-type(1) {
list-style: lower-greek;
}
ul:nth-of-type(2) {
list-style: lower-latin;
}
</style>
</head>
<body>
<h2>List-style property example</h2>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</body>
</html>Esempio di impostazione della posizione del marcatore (inside vs outside)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.inside {
list-style: inside;
}
.outside {
list-style: outside;
}
li {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>List-style property example</h2>
<h3>List-style is positioned "inside":</h3>
<ul class="inside">
<li>Chocolate</li>
<li>Candies</li>
<li>Lollipops</li>
</ul>
<h3>List-style is positioned "outside":</h3>
<ul class="outside">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
</body>
</html>Esempio con un'immagine come marcatore
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style: url('/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png');
}
</style>
</head>
<body>
<h2>List-style property example</h2>
<ul>
<li>Chocolate</li>
<li>Candies</li>
<li>Lollipops</li>
</ul>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| list-style-type | Utilizzato per definire il tipo di marcatore dell'elemento di lista. Ulteriori informazioni: Proprietà CSS list-style-type |
| list-style-position | Utilizzato per definire dove verrà posizionato il marcatore dell'elemento di lista. Ulteriori informazioni: Proprietà CSS list-style-position |
| list-style-image | Utilizzato per inserire un'immagine al posto del marcatore dell'elemento di lista. Ulteriori informazioni: Proprietà CSS list-style-image |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento padre. |