Elenco CSS

Elenco non ordinato:

  • Caffè
  • Tè
  • Coca Cola
  • Caffè
  • Tè
  • Coca Cola

Elenco ordinato:

  1. Caffè
  2. Tè
  3. Coca Cola
  1. Caffè
  2. Tè
  3. Coca Cola

Liste HTML e proprietà CSS

In HTML, ci sono principalmente due tipi di liste:

  • Elenco non ordinato (ul) - Gli elementi della lista sono seguiti da un punto elenco
  • Elenco ordinato (ol) - Gli elementi della lista sono numerati o letterati

Le proprietà della lista CSS ti permettono di:

  • Impostare segni di spunta diversi per le liste ordinate
  • Impostare segni di spunta diversi per le liste non ordinate
  • Impostare l'immagine come segno di spunta dell'elemento elencato
  • Aggiungere un colore di sfondo alle liste e agli elementi elencati

Diversi segni di spunta per gli elementi elencati

list-style-type L'attributo specifica il tipo del segno di spunta dell'elemento elencato.

L'esempio seguente mostra alcuni segni di spunta disponibili per gli elementi elencati:

Esempio

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;
}

Prova tu stesso

Nota:Alcuni valori sono utilizzati per le liste non ordinate, mentre altri valori sono utilizzati per le liste ordinate.

L'immagine come segno di spunta dell'elemento elencato

list-style-image L'attributo specifica l'immagine come segno di spunta dell'elemento elencato:

Esempio

ul {
  list-style-image: url('sqpurple.gif');
}

Prova tu stesso

Posizionare il segno di spunta dell'elemento elencato

list-style-position L'attributo specifica la posizione del segno di spunta dell'elemento elencato (punto della lista).

"list-style-position: outside;" indica che il punto della lista sarà al di fuori dell'elemento elencato. L'inizio di ogni riga dell'elemento elencato sarà allineato verticalmente. Questo è il valore predefinito:

  • Caffè - Bevanda in sciolta fatta con chicchi di caffè tostati
  • Tè
  • Coca-cola

"list-style-position: inside;" Rappresenta che il segno di elenco sarà all'interno dell'elemento dell'elenco. Poiché fa parte dell'elemento dell'elenco, diventerà parte del testo e verrà spostato all'inizio del testo:

  • Caffè - Bevanda in sciolta fatta con chicchi di caffè tostati
  • Tè
  • Coca-cola

Esempio

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

Prova tu stesso

Rimuovere le impostazioni predefinite

list-style-type:none Questi attributi possono anche essere utilizzati per rimuovere il segno di elenco/segno di elenco. Nota che l'elenco ha anche margini e padding predefiniti. Per rimuovere questo contenuto, aggiungi in <ul> o <ol>: margin:0 e padding:0 :

Esempio

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

Prova tu stesso

Elenco - Attributo abbreviato

list-style L'attributo è un attributo abbreviato. Serve per impostare tutti gli attributi dell'elenco in una sola dichiarazione:

Esempio

ul {
  list-style: square inside url("sqpurple.gif");
}

Prova tu stesso

Quando si utilizzano attributi abbreviati, l'ordine dei valori degli attributi è:

  • list-style-type(Se è stato specificato list-style-image e l'immagine non può essere visualizzata per qualche motivo, verrà visualizzato il valore di questa proprietà)
  • list-style-position(Specificare se l'etichetta dell'elemento dell'elenco deve essere visualizzata all'interno o all'esterno del flusso del contenuto)
  • list-style-image(Specificare l'immagine come etichetta dell'elemento dell'elenco)

Se manca uno dei valori degli attributi elencati sopra, verrà inserito il valore predefinito mancante (se presente).

Impostare lo stile di colore dell'elenco

Possiamo anche utilizzare le impostazioni di colore per impostare lo stile dell'elenco, rendendolo più interessante.

Ogni stile aggiunto a <ol> o <ul> influenzerà l'intero elenco, mentre le proprietà aggiunte a <li> influenzeranno ogni elemento dell'elenco:

Esempio

ol {
  background: #ff9999;
  padding: 20px;
}
ul {
  background: #3399ff;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}

Risultato:

  1. Caffè
  2. Tè
  3. Coca Cola
  • Caffè
  • Tè
  • Coca Cola

Prova tu stesso

Più esempi

Elenco personalizzato con bordo sinistro rosso
Questo esempio dimostra come creare un elenco con bordo sinistro rosso.
Elenco di bordi di larghezza piena schermo
Questo esempio dimostra come creare una lista con margine senza elenco di punti.
Tutti i diversi tipi di marchi elenco della lista
Questo esempio dimostra tutti i diversi tipi di marchi elenco in CSS.

Tutte le proprietà di elenco CSS

Proprietà Descrizione
list-style Proprietà abbreviate. Imposta tutte le proprietà della lista in una dichiarazione.
list-style-image Specificare un'immagine come marchio elenco.
list-style-position Definire la posizione del marchio elenco (puntini).
list-style-type Definire il tipo di marchio elenco.