📢 Nuovo Corso Laravel API disponibile!

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.