Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 45 di 49
  • livello principiante
Indice lezioni

Personalizzare l'aspetto dei marcatori di lista

Sostituire il classico cerchietto pieno di un item di lista con altri simboli o con immagini
Sostituire il classico cerchietto pieno di un item di lista con altri simboli o con immagini
Link copiato negli appunti

Sono molti gli aspetti che possono essere personalizzati in una lista, uno di questi è la possibilità di scegliere lo stile dei marcatori.

Se non si assegna uno stile particolare agli elementi di una lista, essi verranno visualizzati con un cerchietto pieno (disc). &Egarve; possibile personalizzare il simbolo da utilizzare come marcatore attraverso la proprietà list-style-type.

La proprietà list-style-type può assumere uno dei seguenti valori:

Valore Descrizione
armenian Numeri armeni
circle Cerchietto senza riempimento
cjk-ideographic Numeri ideografici (non supportato da Internet Explorer)
decimal Numeri decimali (simboli di default per le <ol>)
decimal-leading-zero Numeri decimali con zero (01, 02, 03, …)
disc Cerchietto pieno (default per le <ul>)
georgian Numeri georgiani
hebrew Numeri ebraici
hiragana Numer giapponesi in Hiragana
hiragana-iroha Numeri giapponesi in Hiragana-iroha
inherit Valore ereditato dal genitore
katakana Numeri giapponesi in Katakana
katakana-iroha Numeri giapponesi in Katakana-iroha
lower-alpha Caratteri ASCII minuscoli (a ,b ,c ,d , …)
lower-greek Lettere greche minuscole
lower-latin Lettere latine minuscole
lower-roman Numeri romani in minuscolo (i, ii, iii, iv, …)
none Nessun marcatore
square Quadrato pieno
upper-alpha Caratteri ASCII in maiuscolo (A, B, C, D, …)
upper-latin Lettere latine maiuscole
upper-roman Numeri romani in maiuscolo (I, II, III, IV, …)

Possiamo utilizzare la proprietà nella seguente maniera:

ul {
    list-style-type: square;
}

per applicare un quadratino pieno come marcatore della lista.

Possiamo vedere alcuni esempi nella prima demo.

Utilizzare immagini come marcatori

È anche possibile personalizzare i marcatori sostituendoli con delle immagini di nostra scelta. Anziché utilizzare le proprietà standard di list-style-type, quindi, possiamo utilizzare la proprietà list-style-image per definire un’immagine da utilizzare come marcatore.

Il suo funzionamento è molto semplice. La proprietà prende in ingresso un parametro url che indica il percorso (path) dell’immagine che vogliamo utilizzare. Ad esempio:

ul {
    list-style-image: url(‘bullet.png’);
}

utilizzerà l’immagine bullet.png come marcatore della lista. Ecco l'esempio.

Ti consigliamo anche