Impaginare a livelli con i CSS

17 marzo 2006

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.

Tutte le lezioni

1 ... 41 42 43 ... 58

Se vuoi aggiornamenti su Impaginare a livelli con i CSS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Impaginare a livelli con i CSS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy