Abbiamo già visto due stili di impaginazione: le tabelle e i frame. Come accennato più volte all’interno del corso esiste una terza via: l’impaginazione tramite i fogli di stile (ovvero "CSS", cioè "Cascading Style Sheets", che significa "fogli di stile a cascata").
La sintassi dei CSS esula dall’argomento del corso presente, è importante tuttavia afferrare il concetto che un elemento può essere disposto all’interno della pagina, semplicemente specificando le sue coordinate, o indicando il modo in cui deve essere spostato rispetto agli elementi che lo circondano.
Nel caso dell’impaginazione tramite i fogli di stile abbiamo per lo più a che fare con i tag <span> e <div>, che possono essere accuratamente posizionati e visualizzati specificando ad esempio:
- larghezza
- altezza
- distanza dall’alto
- distanza da sinistra
- colore o immagine di sfondo
- colore, tipo e grandezza dei bordi
- distanza tra il contenuto e il bordo (padding) e tra il bordo e l’esterno (margin)
Per “livello" (o “layer") in HTML si intende appunto un <div> posizionato tramite i CSS all’interno della pagina.
La sintassi dei CSS è molto diversa da quella dell’HTML solito.
Ad esempio per posizionare la testata di HTML.it a 50 pixel dall’alto della pagina e 200 pixel da sinistra, con lo sfondo a righe, bordo nero, e una dimensione di 600 x 80 pixel di è necessario utilizzare questa sintassi.
Nella <head>:
<style type="text/css">
#logo {
position:absolute;
left:200;
top:50;
width:600px;
height:80px;
background-image: url(sfondo.gif);
border: 1px solid #000000;
}
</style>
nel <body>:
<div id="logo">
<img src="logo.gif" alt="HTML.it" title="HTML.it" width="224" height="69">
<img src="logo1.gif" alt="HTML.it" title="HTML.it" width="59" height="70">
</div>
L’esempio completo si trova a questo indirizzo.
Il vantaggio di questa impostazione è quella di avere una pagina molto pulita: infatti il file HTML è composto soltanto dai <div> (o dagli span) con i contenuti, mentre lo stile di visualizzazione dei contenuti è affidato ai fogli di stile (per lo più espressi in un file separato).
Per gli approfondimenti vi rimandiamo alla guida sui fogli di stile di HTML.it che approfondisce questo argomento.