Elenchi CSS
Liste non ordinate:
- Caffè
- Tè
- Coca Cola
- Caffè
- Tè
- Coca Cola
Elenchi ordinati:
- Caffè
- Tè
- Coca Cola
- Caffè
- Tè
- Coca Cola
Elenchi HTML e proprietà dell'elenco CSS
In HTML, ci sono due tipi principali di elenchi:
- elenchi non ordinati (<ul>) - gli elementi dell'elenco sono contrassegnati da punti elenco
- elenchi ordinati (<ol>) - gli elementi dell'elenco sono contrassegnati da numeri o lettere
Le proprietà dell'elenco CSS consentono di:
- Impostare diversi indicatori di voci di elenco per gli elenchi ordinati
- Impostare diversi indicatori di voci di elenco per gli elenchi non ordinati
- Imposta un'immagine come indicatore della voce dell'elenco
- Aggiungi colori di sfondo agli elenchi e agli elementi dell'elenco
Marcatori di voci di elenco diversi
La list-style-typeproprietà specifica il tipo di indicatore di elemento dell'elenco.
L'esempio seguente mostra alcuni degli indicatori 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;
}
Nota: alcuni valori sono per elenchi non ordinati e altri per elenchi ordinati.
Un'immagine come indicatore della voce di elenco
La list-style-imageproprietà specifica un'immagine come indicatore dell'elemento dell'elenco:
Esempio
ul
{
list-style-image: url('sqpurple.gif');
}
Posiziona i marcatori delle voci dell'elenco
La list-style-positionproprietà specifica la posizione degli indicatori delle voci dell'elenco (punti elenco).
"posizione-stile-elenco: esterna;" significa che i punti elenco saranno al di fuori dell'elemento dell'elenco. L'inizio di ogni riga di un elemento dell'elenco verrà allineato verticalmente. Questa è l'impostazione predefinita:
- Caffè - Una bevanda preparata con chicchi di caffè tostati...
- Tè
- Coca Cola
"list-style-position: inside;" significa che i punti elenco saranno all'interno dell'elemento dell'elenco. Poiché fa parte dell'elemento dell'elenco, farà parte del testo e spingerà il testo all'inizio:
- Caffè - Una bevanda preparata con chicchi di caffè tostati...
- Tè
- Coca Cola
Esempio
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Rimuovi le impostazioni predefinite
La list-style-type:noneproprietà può essere utilizzata anche per rimuovere i segnalini/pallottole. Si noti che l'elenco ha anche margini e spazi interni predefiniti. Per rimuoverlo, aggiungi margin:0e padding:0a <ul> o <ol>:
Esempio
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Elenco - Proprietà abbreviata
La list-styleproprietà è una proprietà abbreviata. Viene utilizzato per impostare tutte le proprietà dell'elenco in una dichiarazione:
Esempio
ul
{
list-style: square inside url("sqpurple.gif");
}
Quando si utilizza la proprietà shorthand, l'ordine dei valori della proprietà è:
list-style-type(se viene specificata un'immagine in stile elenco, il valore di questa proprietà verrà visualizzato se l'immagine per qualche motivo non può essere visualizzata)list-style-position(specifica se gli indicatori delle voci di elenco devono essere visualizzati all'interno o all'esterno del flusso di contenuto)list-style-image(specifica un'immagine come indicatore della voce dell'elenco)
Se manca uno dei valori della proprietà sopra, verrà inserito il valore predefinito per la proprietà mancante, se presente.
Lista di stile con i colori
Possiamo anche stilizzare le liste con i colori, per farle sembrare un po' più interessanti.
Qualsiasi elemento aggiunto al tag <ol> o <ul> influirà sull'intero elenco, mentre le proprietà aggiunte al tag <li> influiranno sui singoli elementi 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:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Altri esempi
Questo esempio mostra come creare un elenco con bordo sinistro rosso.
Questo esempio mostra come creare un elenco con bordi senza punti elenco.
Questo esempio mostra tutti i diversi indicatori di voci di elenco nei CSS.
Tutte le proprietà dell'elenco CSS
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies the position of the list-item markers (bullet points) |
| list-style-type | Specifies the type of list-item marker |