Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 42 di 58
  • livello principiante
Indice lezioni

Impaginare a livelli con i CSS

Sfruttare i fogli di stile CSS per l'impaginazione, significa assegnare regole di visualizzazione a tag che definiscono blocchi nella pagina
Sfruttare i fogli di stile CSS per l'impaginazione, significa assegnare regole di visualizzazione a tag che definiscono blocchi nella pagina
Link copiato negli appunti

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;
   ;
   ;
   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" >
  <img src="logo1.gif" alt="HTML.it" title="HTML.it" >
</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.


Ti consigliamo anche