Personalizzare l’aspetto dei marcatori di lista

31 maggio 2011

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:

ValoreDescrizione
armenianNumeri armeni
circleCerchietto senza riempimento
cjk-ideographicNumeri ideografici (non supportato da Internet Explorer)
decimalNumeri decimali (simboli di default per le <ol>)
decimal-leading-zeroNumeri decimali con zero (01, 02, 03, …)
discCerchietto pieno (default per le <ul>)
georgianNumeri georgiani
hebrewNumeri ebraici
hiraganaNumer giapponesi in Hiragana
hiragana-irohaNumeri giapponesi in Hiragana-iroha
inheritValore ereditato dal genitore
katakanaNumeri giapponesi in Katakana
katakana-irohaNumeri giapponesi in Katakana-iroha
lower-alphaCaratteri ASCII minuscoli (a ,b ,c ,d , …)
lower-greekLettere greche minuscole
lower-latinLettere latine minuscole
lower-romanNumeri romani in minuscolo (i, ii, iii, iv, …)
noneNessun marcatore
squareQuadrato pieno
upper-alphaCaratteri ASCII in maiuscolo (A, B, C, D, …)
upper-latinLettere latine maiuscole
upper-romanNumeri 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.

Tutte le lezioni

1 ... 43 44 45 ... 49

Se vuoi aggiornamenti su Personalizzare l'aspetto dei marcatori di lista inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Personalizzare l'aspetto dei marcatori di lista

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy