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 all’apposita guida
sui fogli di stile e alla sezione PRO
di HTML.it che approfondisce questo argomento.