September 13
L'aggiunta di sottili tocchi di colore per gli elementi della pagina Web non richiede la modifica delle immagini o conoscenze di programmazione. titolari di siti web mettono frequentemente confini HTML colorate intorno articoli sulle loro pagine Web utilizzando fogli di stile CSS. CSS definisce il modo in cui gli elementi della pagina Web appaiono in un browser. Con l'aggiunta di riferimenti CSS alle immagini e paragrafi, è possibile circondare con bordi HTML che visualizzano tutti i colori che si sceglie.
1 Aprire uno dei documenti pagina web utilizzando Blocco note o un editor HTML.
2 Aggiungere un paragrafo, un pulsante e un'immagine alla sezione "body" del documento, come mostrato nel seguente codice HTML:
<P> Questo è un paragrafo </ p>
<Class input = "buttonBorder" type = valore "pulsante" = "My Button" />
<Img class = "imageBorder" />
Sostituire "Image_Name.jpg" con il nome di un'immagine sul disco rigido. È inoltre possibile sostituire tale nome con un URL che punta a un'immagine sul Web. Si noti che i tag di immagine e dei pulsanti contengono proprietà "di classe". L'immagine fa riferimento a una classe CSS chiamato "imageBorder", mentre il pulsante di riferimento della classe "buttonBorder".
3 Aggiungere il seguente codice CSS per la sezione del documento "<style>":
.imageBorder {border-color: Blu; border-style: solido; border-width: 4px; }
Il crea una classe CSS chiamato "imageBorder." La classe definisce le proprietà del bordo per ogni elemento della pagina che fa riferimento a esso. In questo esempio, il valore border-color della classe è "Blue". L'immagine definita nel "corpo" riferimenti sezione questa classe in modo da visualizzare un bordo blu quando vengono visualizzati in un browser.
4 Aggiungere questo codice CSS sotto il codice descritto nel passaggio precedente:
.buttonBorder {border-color: red; border-style: dotted; border-width: 2px;}
Questa classe CSS, "buttonBorder," imposta le proprietà del bordo del tasto della pagina perché il tag riferimenti pulsante questa classe. In questo caso, il valore di colore del bordo è "Rosso". Le proprietà border-style e border-width creano un bordo punteggiato la cui larghezza è di 2 pixel. Altre proprietà border-style è possibile scegliere includere "solido" - come indicato nella precedente classe "imageBorder" - ". Tratteggiata" e
5 Posizionare la seguente riga di CSS dopo il codice mostrato nel passaggio precedente:
p {border-color: verde; border-style: doppio; border-width: 1px;}
Questo codice è diverso da quello indicato per l'immagine e il pulsante perché questo CSS utilizza un selettore "p" per definire le proprietà. Il selettore "p" imposta lo stile per tutti i paragrafi sulla pagina. valore border-color del selettore è "verde" in questo esempio.
6 Salvare il documento e visualizzarlo nel browser. L'immagine, paragrafo e il pulsante visualizzerà i confini definiti nel CSS.