PCdaZERO.it - Guida facile per usare il computer

Acquista o scarica gratis, i libri di "PC da Zero"

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"
18-style-body
5 - clicca sull'icona "CSS Properties"
6 - clicca sulla voce "background-color"
19-background-color

7 - clicca sulla scheda "Tools"
8 - clicca sul comando/icona "Colors"
20-colors-pick
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>
21-pagina-web







Link sponsorizzati