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    >     DIV - Impostare colore, altezza e larghezza





L'elemento DIV in sè, senza nessuna impostazione è ininfluente.
Assegnagli qualche proprietà con i Fogli Stile.
Prima di tutto distinguilo con del colore di sfondo:
div { background-color: yellow; }

Il codice completo si presenta così:
codice HTML    risultato pagina web   
...
<html>
<head>
<title>Untitled</title>
<style type="text/css">

div { background-color: yellow; } </style>
</head>
<body>

<div>Zona numero uno</div>
</body>
</html>
01-div-background (6K)

Per impostare l'altezza usa la proprietà height:
height: 50px;

codice HTML    risultato pagina web   
...
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div {
background-color: yellow;

height: 50px;
}
</style>
</head>
<body>
<div>Zona numero uno</div>
</body>
</html>
02-div-header-px (11K)

Salva la pagina, nominala "creare-riquadri.html" e osservala sul tuo browser o dalla scheda "Preview" di HTML-Kit.
Esercitati a modificare la proprietà height con altri valori (80px, 100px, 300px).
Non lasciare spazi tra il valore e l'unità di misura.
Oltre all'unità di misura in pixel (px) può essere usata l'unità percentuale (%).
height: 50%;

Il valore percentuale assegnato è riferito al contenitore in cui è compreso l'elemento;
in questo caso all'intero corpo (body) della pagina.
Esercitati a modificare il valore percentuale della proprietà height sull'elemento DIV.
codice HTML    risultato pagina web   
...
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div {
background-color: yellow;

height: 50%;
}
</style>
</head>
<body>
<div>Zona numero uno</div>
</body>
</html>
03-div-header-perc (12K)

Per impostare la larghezza, usa la proprietà width:
width: 100px;

codice HTML    risultato pagina web   
...
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div {
background-color: yellow;

height: 50px;
width: 100px;

}
</style>
</head>
<body>
<div>Zona numero uno</div>
</body>
</html>
04-div-width (9K)

Esercitati a modificare anche questa proprietà e ad osservare i risultati sulla pagina web.
Anche per la proprietà width è possibile assegnare valori percentuali:
width: 75%;

codice HTML    risultato pagina web   
...
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div {
background-color: yellow;

height: 50px;
width: 75%;

}
</style>
</head>
<body>
<div>Zona numero uno</div>
</body>
</html>
05-div-width-perc (12K)







Link sponsorizzati