Proseguiamo con questo post la serie di guide dedicate alla personalizzazione delle liste (o elenchi puntati) con i fogli di stile CSS. Nello specifico vedremo come sia possibile sostituire i segni predefiniti di un elenco puntato con una immagine qualsiasi attraverso l’uso della proprietà list-style-image.
La proprietà list-style-image in CSS
Come abbiamo visto parlando della personalizzazione delle liste non ordinate, la proprietà list-style-type consente di scegliere il simbolo grafico di ogni punto di elenco. Nello stesso contesto generale potremmo però voler sostituire pallini, cerchi e quadrati con un simbolo grafico più complesso o più personale. Possimo ottenere questo risultato attraverso la proprietà list-style-type associata al percorso dell’immagine che utilizzeremo per gli elementi dell’elenco puntato. Per comprendere come procedere osserviamo la seguente porzione di codice:
ul {list-style-image: url(img.png);}
Un foglio di stile che contiene questa istruzione indica al browser che ogni riga di una lista non ordinata (elemento <ul> di HTML) andrà identificata con l’immagine indicata attraverso il valore URL.
Elenchi puntati con immagine
La proprietà list-style-image nei CSS può assumere come valore un indirizzo URL che indichi la posizione assoluta o relativa dell’immagine da usare nell’elenco puntato. Nel nostro caso ‘img.png’ si trova nella stessa cartella che contiene anche il foglio di stile. Più in generale potremmo avere forme di questo tipo:
- Percorso relativo: url(/immagini/elenchi/img.png)
- Percorso assoluto: url(http://example.com/img.png)
Nell’immagine che accompagna questo post è possibile osservare il risultato prodotto dall’uso della proprietà list-style-image in abbinamento con una piccola immagine PNG quadrata di lato pari a 27 pixel.