Stile Liste in CSS

In HTML, ci sono due tipi principali di liste:

• liste non ordinate (<ul>) - gli elementi della lista sono contrassegnati da punti
• liste ordinate (<ol>) - gli elementi della lista sono contrassegnati con numeri o lettere

Le proprietà CSS delle liste ti consentono di:

• Impostare marcatori diversi per gli elementi delle liste ordinate
• Impostare marcatori diversi per gli elementi delle liste non ordinate
• Usare un’immagine come marcatore per gli elementi della lista
• Aggiungere colori di sfondo alle liste e agli elementi della lista

Diversi Tipi di Marcatori

La proprietà list-style-type specifica il tipo di marcatore per gli elementi della lista.

Nell’esempio seguente sono mostrati alcuni dei marcatori disponibili per gli elementi della lista:

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

Immagine come Marcatore

La proprietà list-style-image specifica un’immagine come marcatore per gli elementi della lista:

ul {
  list-style-image: url("immagine.png");
}

Posizione dei Marcatori

La proprietà list-style-position specifica la posizione dei marcatori degli elementi della lista (punti elenco).

• list-style-position: outside - significa che i punti elenco saranno al di fuori dell’elemento della lista. L’inizio di ogni riga di un elemento della lista verrà allineato verticalmente.
• list-style-position: inside - significa che i punti elenco saranno all’interno dell’elemento della lista. Poiché fanno parte dell’elemento della lista, faranno parte del testo e spingeranno il testo all’inizio.

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

Rimuovere le Impostazioni Predefinite

La proprietà list-style-type: none può essere utilizzata anche per rimuovere i marcatori/punti elenco. Nota che la lista ha anche un margine e un padding predefiniti. Per rimuoverli, aggiungi margin: 0 e padding: 0 a <ul> o <ol>:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Proprietà di Lista - Shorthand

La proprietà list-style è una proprietà shorthand. Viene utilizzata per impostare tutte le proprietà delle liste in una sola dichiarazione:

ul {
  list-style: square inside url("immagine.png");
}

Quando si utilizza la proprietà shorthand, l’ordine dei valori delle proprietà è:

• list-style-type (se è specificata un’immagine list-style-image, il valore di questa proprietà verrà visualizzato se l’immagine per qualche motivo non può essere visualizzata)
• list-style-position (specifica se i marcatori degli elementi della lista devono apparire all’interno o all’esterno del flusso di contenuto)
• list-style-image (specifica un’immagine come marcatore per gli elementi della lista)

Se uno dei valori delle proprietà sopra è mancante, verrà inserito il valore predefinito per la proprietà mancante, se presente.