Le liste raccolgono gli elementi all'interno delle pagine web. Ad esempio, i vantaggi di un abbonamento premium:
Scopri i vantaggi esclusivi dell'abbonamento Premium:
In questa lezione, vediamo come utilizzare le proprietà CSS per stilizzare le liste (se non le hai ancora viste, vai alla lezione delle liste HTML), ovvero list-style-type, list-style-position, list-style-image e list-style.
La proprietà list-style-type determina il tipo di simbolo dell'elenco utilizzato per gli elementi della lista. I valori che puoi utilizzare sono i seguenti:
| Valore | Descrizione |
disc | Specifica un elenco con pallini (•). È il valore predefinito. |
circle | Specifica un elenco con cerchi (○). |
square | Specifica un elenco con quadrati (▪). |
decimal | Specifica un elenco numerato (1, 2, 3, ...). |
decimal-leading-zero | Specifica un elenco numerato con zeri iniziali (01, 02, 03, ...). |
lower-roman | Specifica un elenco numerato con numeri romani minuscoli (i, ii, iii, ...). |
upper-roman | Specifica un elenco numerato con numeri romani maiuscoli (I, II, III, ...). |
lower-greek | Specifica un elenco con lettere greche minuscole (α, β, γ, ...). |
lower-latin | Specifica un elenco con lettere latine minuscole (a, b, c, ...). |
upper-latin | Specifica un elenco con lettere latine maiuscole (A, B, C, ...). |
lower-alpha | Specifica un elenco con lettere latine minuscole (a, b, c, ...). |
upper-alpha | Specifica un elenco con lettere latine maiuscole (A, B, C, ...). |
none | Non inserisce simboli davanti agli elementi dell'elenco. |
Ad esempio, voglio numerare la lista con lettere dell'alfabeto minuscole:
<ul>
<li>Mele</li><li>Pere</li><li>Carote</li>
</ul>
<style>
ul {
list-style-type: lower-latin;
}
</style>Possiamo anche scegliere di usare un simbolo o una stringa (parola o frase) che ci interessa. Per farlo, basta inserirla tra le virgolette. Ad esempio:
ul {
list-style-type: "⇒";
}La proprietà list-style-position determina la posizione dei simboli rispetto agli elementi della lista.
La proprietà list-style-position accetta due valori:
outside (predefinito): il simbolo è fuori dall'elemento della lista.inside: il simbolo è dentro l'elemento della lista.Una lista, di default (list-style-position:outside), è in questo modo:
Per far sì che il simbolo (in questo caso il pallino) sia all'interno degli elementi della lista, usiamo list-style-position:inside e la lista appare così:
Vediamo un esempio di come inserire il simbolo all'interno dell'elemento:
ul {
list-style-position: inside;
}La proprietà list-style-image permette di utilizzare un'immagine personalizzata come simbolo per gli elementi della lista. La sintassi è:
list-style-image: url('immagine.png');
Vediamo un esempio con un'immagine:
ul {
list-style-image: url("immagine.png");
}Come abbiamo visto nell'esempio della lista dei vantaggi di un abbonamento premium all'inizio di questa lezione, non ci sono simboli davanti agli elementi, né margini o padding (che abbiamo visto nelle lezioni precedenti).
Per fare ciò, dobbiamo impostarli manualmente:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}La proprietà list-style è un'abbreviazione che unisce tutte le proprietà che abbiamo visto finora. La sintassi è:
list-style: list-style-type list-style-position list-style-image
Il valore di list-style-type, se specificato insieme a list-style-image, viene visualizzato soltanto se l'immagine non è disponibile.
Se uno dei valori non viene indicato, verrà utilizzato il suo valore predefinito, se esiste.
ul {
list-style: square inside url('immagine.png');
}Possiamo anche inserire soltanto un valore:
ul {
list-style: square;
}