Come sostituire proiettili con un'immagine in CSS

February 8

Come sostituire proiettili con un'immagine in CSS


Quando si creano liste non ordinate per il tuo sito, il browser visualizza automaticamente proiettili, che sembrano occhiaie o quadrati, accanto a ogni voce dell'elenco. Hai la possibilità di sostituire questi proiettili con le proprie immagini utilizzando Cascading Style Sheets (CSS). La regola di stile CSS consente di specificare l'immagine particolare che si desidera utilizzare al posto del proiettile in modo da poter creare elenchi personalizzati che meglio supportano il layout del tuo sito web.

istruzione

1 Accedi al tuo account host Web che gestisce il vostro sito web. Carica l'immagine che sostituisce il proiettile nella stessa cartella dove i file del sito web risiedono e prendere nota del percorso URL.

2 Portate il vostro programma di editor di testo e aprire la pagina Web contenente i proiettili da sostituire.

3 Inserire "<style type =" text / css "> </ style>" prima della chiusura </ head> tag nella parte superiore del documento. Questo codice crea la sezione interna foglio di stile in cui si inserisce le regole CSS.

4 Posizionare il cursore tra i tag di stile e digitare "ul" per creare una regola che controlla la vostra lista. Seguite la vostra voce con un paio di parentesi graffe in questo modo:

ul {}

5 Inserire "list-style-image: URL ( '');" tra le staffe e digitare l'URL dell'immagine sostituire i proiettili tra parentesi. Il codice di stile completo ora appare come il seguente esempio:

<Style type = "text / css">

ul {list-style-image: URL ( 'http://www.site.com/bullet.gif'); }

</ Style>

La parte "ul" della regola di stile sostituisce automaticamente i proiettili di tutte le liste non ordinate sulla tua pagina.

6 Salvare il file e caricarlo di nuovo al vostro Web host per pubblicare le nuove immagini della lista.