CREARE SITI WEB in HTML e CSS > Impostare il colore di sfondo della pagina
Un'altra utilissima proprietà che hai già avuto modo di vedere è la proprietà background-color che ti permette di impostare il colore dello sfondo.
Per colorare lo sfondo di un'intera pagina web,
1 - all'interno del Foglio Stile, ovvero all'interno del codice
<style type="text/css"> ... </style>
2 - inserisci il seguente codice:
body { background-color: pink; }
dove potrai sostituire il valore "pink" (rosa) con qualsiasi altro colore a scelta.Esercitati ad inserire il codice con HTML-Kit:
1 - posiziona il cursore all'interno del codice
<style type="text/css"> ... </style>
(dopo una parentesi grafa chiusa o prima di una parentesi grafa aperta)
2 - clicca sulla scheda "Style"
3 - clicca sulla seconda icona "CSS Selectors"
4 - clicca sulla voce "BODY"
5 - clicca sull'icona "CSS Properties"
6 - clicca sulla voce "background-color"
7 - clicca sulla scheda "Tools"
8 - clicca sul comando/icona "Colors"
9 - clicca sul colore desiderato.
Non preoccuparti se viene inserito un codice numerico anzichè il nome del colore; il risultato viene garantito comunque !
Nella finestra di dialogo "Pick Color" (vedi immagine precedente) hai la possibilità di scegliere qualsiasi sfumatura di colore.
Trascina la piccola manopola a destra della voce "Sort Mode" per scegliere altri colori.
Clicca sulle schede "Custom Colors" e "Named Colors" per scegliere il colore con sistemi diversi.
10 - salva le modifiche, apri il browser e aggiornalo per verificare il risultato.
| codice HTML | risultato pagina web |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Le città nel mondo</title> <style type="text/css"> <!-- body { background-color: pink; } h1 { font-size: 14pt; color: red; text-align: center; } h2 { background-color: yellow ; border: 5px solid green; font-size: 12pt; } h3 { font-weight: bold; font-style: italic; } --> </style> </head> <body> <h1>Le città nel mondo</h1> <h2>Europa</h2> <h3>Italia</h3> Roma, Milano, Venezia <h3>Francia</h3> Parigi, Lione, Grenoble <h3>Spagna</h3> Madrid, Barcelona, Valencia <h3>Germania</h3> Berlino, Bonn, Freiburg ... </body> </html> |
|