Gli ultimi tutorial di sviluppo web
 

CSS lista

❮ Precedente Prossimo capitolo ❯
  1. Caffè
  2. Tè
  3. Coca Cola
  • Caffè
  • Tè
  • Coca Cola

Le liste HTML e CSS Proprietà elenco

In HTML, ci sono due tipi principali di liste:

  • liste non ordinate (<ul>) - le voci della lista sono contrassegnati con proiettili
  • liste ordinate (<ol>) - le voci della lista sono contrassegnati da numeri o lettere

Le proprietà di elenco CSS consentono di:

  • Impostare diversi marcatori di voci di elenco per gli elenchi ordinati
  • Impostare diversi marcatori di voci di elenco per le liste non ordinate
  • Impostare un'immagine come marcatore voce di elenco
  • Aggiungere i colori di sfondo alle liste e voci di elenco

Diversi marcatori List Item

Il list-style-type proprietà specifica il tipo di marcatore voce dell'elenco.

L'esempio seguente mostra alcuni dei marcatori di voci di elenco disponibili:

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 dei valori sono per liste non ordinate, e un po 'per gli elenchi ordinati.

L'immagine come marcatore di lista Articolo

Il list-style-image proprietà specifica un'immagine come marcatore elemento della lista:

Esempio

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

Posizionare i marcatori lista Articolo

Il list-style-position proprietà specifica se i marcatori lista-elemento deve apparire all'interno o all'esterno del flusso di contenuti:

Esempio

ul {
    list-style-position: inside;
}
Prova tu stesso "

Lista - proprietà abbreviata

Il list-style proprietà è una proprietà scorciatoia. Viene utilizzato per impostare tutte le proprietà di elenco in una dichiarazione:

Esempio

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

Quando si utilizza la proprietà abbreviata, l'ordine dei valori delle proprietà sono:

  • list-style-type (se viene specificato un list-style-image, verrà visualizzato il valore di questa proprietà, se non è possibile visualizzare l'immagine per qualche motivo)
  • list-style-position (specifica se i marcatori lista-elemento deve apparire all'interno o all'esterno del flusso di contenuti)
  • list-style-image (specifica un'immagine come marcatore voce di elenco)

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

Styling lista con i colori

Possiamo anche liste di stile con i colori, per farle sembrare un po 'più interessante.

Tutto ciò aggiunto alla <ol> o <ul> tag, colpisce l'intero elenco, mentre le proprietà aggiunte al <li> tag influenzerà le singole voci di 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. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola
Prova tu stesso "
Esempi

Altri esempi

Full-width elenco delimitato
Questo esempio dimostra come creare un elenco delimitato, senza proiettili.

Tutti i diversi marcatori lista-voce per gli elenchi
Questo esempio dimostra tutti i diversi marcatori elenco-item in CSS.

Mettiti alla prova con esercizi!

Esercizio 1 » Esercizio 2» Esercizio 3 »

Tutte le Proprietà elenco CSS

Proprietà Descrizione
list-style Imposta tutte le proprietà di una lista in una dichiarazione
list-style-image Specifica un'immagine come marcatore di lista
list-style-position Specifica se i marcatori lista-elemento deve apparire all'interno o all'esterno del flusso di contenuti
list-style-type Specifica il tipo di marcatore di lista

❮ Precedente Prossimo capitolo ❯