HTML.itHTML.it


 Impaginare a livelli con i CSS


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.

    Torna a inizio pagina