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.