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.