Elenco CSS

Le proprietà di elenco CSS ti permettono di posizionare, modificare il simbolo dell'elemento di elenco o utilizzare un'immagine come simbolo dell'elemento di elenco.

Elenco CSS

In un certo senso, qualsiasi contenuto non descrittivo può essere considerato un elenco. censimento, sistema solare, albero genealogico, menù di visita, persino tutti i tuoi amici possono essere rappresentati come un elenco o una lista di liste.

Poiché gli elenchi sono così vari, questo li rende molto importanti, quindi, il fatto che lo stile degli elenchi in CSS non sia così ricco è davvero un peccato.

Tipo di elenco

Per influenzare lo stile dell'elenco, il metodo più semplice (e che supporta meglio) è cambiare il tipo di simbolo.

Ad esempio, in un elenco non ordinato, il simbolo dell'elemento di elenco (marker) è apparso accanto a ciascun elemento di elenco. In un elenco ordinato, il simbolo potrebbe essere una lettera, un numero o un simbolo di un sistema di numerazione diverso.

Per modificare il tipo di simbolo utilizzato per l'elemento di elenco, puoi utilizzare l'attributo list-style-type:

ul {list-style-type : square}

La dichiarazione sopra imposta il simbolo di elenco dell'elemento di elenco non ordinato come quadrato.

Immagine dell'elemento di elenco

A volte, i simboli regolari non sono sufficienti. Potresti voler utilizzare un'immagine per ogni simbolo, che può essere fatto utilizzando: list-style-image Per fare questo, l'attributo:

ul li {list-style-image : url(xxx.gif)}

Basta utilizzare semplicemente un valore url() per utilizzare un'immagine come simbolo.

Posizione del simbolo di elenco

CSS2.1 può determinare se il simbolo appare al di fuori o al di dentro del contenuto dell'elemento di elenco. Questo è possibile grazie a: list-style-position Fatto.

Stile di elenco abbreviato

Per semplificare, possiamo combinare le tre proprietà di stile di elenco in una proprietà comoda:list-styleEcco come:

li {list-style : url(example.gif) square inside}

I valori di list-style possono essere elencati in qualsiasi ordine e possono essere ignorati. Basta fornire un valore, gli altri verranno riempiti con i valori predefiniti.

Esempio di elenco CSS:

Le etichette degli elementi di elenco di tipo diverso in una lista non ordinata
Questo esempio dimostra tutti i tipi diversi di segni di elenco nel CSS.
Le etichette degli elementi di elenco di tipo diverso in una lista ordinata
Questo esempio dimostra tutti i tipi diversi di segni di elenco nel CSS.
Tutti i tipi di stili di elenco
Questo esempio dimostra tutti i tipi diversi di segni di elenco nel CSS.
Utilizzare l'immagine come segno di elenco
Questo esempio dimostra come utilizzare l'immagine come segno di elenco.
Posizionare il segno di elenco
Questo esempio dimostra dove posizionare il segno di elenco.
Definire tutte le proprietà dell'elenco in una dichiarazione
Questo esempio dimostra come impostare tutte le proprietà relative all'elenco in una proprietà abbreviata.

Proprietà elenco CSS (list)

Proprietà Descrizione
list-style Proprietà abbreviate. Utilizzata per impostare tutte le proprietà relative all'elenco in una dichiarazione.
list-style-image Impostare l'immagine come etichetta dell'elenco.
list-style-position Impostare la posizione dell'etichetta dell'elenco nel elenco.
list-style-type Impostare il tipo di etichetta dell'elenco.
marker-offset