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> |
|
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> |
|
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> |
|
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> |
|
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> |
|