2.47
Usare le regole CSS per dare delle posizioni assolute
Abbiamo precedentemente esaminato due metodi di impaginazione: l’utilizzo di tabelle e frame. È importante notare, come già accennato nel corso, l’esistenza di una terza opzione: l’impaginazione mediante fogli di stile, noti come “CSS” (Cascading Style Sheets), ovvero “fogli di stile a cascata”.
La sintassi dei CSS non rientra nell’ambito del presente corso, ma è fondamentale comprendere il concetto che un elemento può essere posizionato all’interno della pagina specificando le sue coordinate o indicando come deve muoversi rispetto agli elementi circostanti.
Nel contesto dell’impaginazione tramite fogli di stile, si utilizzano principalmente i tag <span> e <div>, che possono essere posizionati e visualizzati con precisione mediante specifiche come:
- Larghezza
- Altezza
- Distanza dall’alto
- Distanza da sinistra
- Colore o immagine di sfondo
- Colore, tipo e dimensione dei bordi
- Distanza tra il contenuto e il bordo (padding) e tra il bordo e l’esterno (margin)
In HTML, il concetto di “livello” o “layer” si riferisce a un <div> posizionato tramite i CSS all’interno della pagina.
La sintassi dei CSS è notevolmente diversa da quella dell’HTML tradizionale. Ad esempio, per posizionare la testata di HTML.it a 50 pixel dall’alto della pagina e 200 pixel da sinistra, con uno sfondo a righe, bordo nero e dimensioni di 600 x 80 pixel, è necessario utilizzare la seguente sintassi:
Nella sezione <head>:
<style type="text/css"> #logo { position: absolute; left: 200px; top: 50px; width: 600px; height: 80px; background-image: url(sfondo.gif); border: 1px solid #000000;
} </style> Nel corpo del documento <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> Il vantaggio di questa approccio è la creazione di una pagina pulita, in quanto il file HTML contiene principalmente i <div> (o span) con i contenuti, mentre lo stile di visualizzazione è affidato ai fogli di stile, spesso espressi in un file separato.