14. Gli stili generali

Passiamo quindi ad esaminare gli stili generali che daremo al nostro layout.

  1. /* Dichiarazioni generali */
  2. body {
  3. margin: 0;
  4. padding: 0;
  5. font: 100.01%/1.5 Helvetica, Arial, sans-serif;
  6. background: #fff url("img/col-dx.gif") repeat-y 70% 0;
  7. color: #000;
  8. }
  9. a:link, a:visited {
  10. color: #00c;
  11. background: transparent;
  12. }
  13. a:hover {
  14. color: #c00;
  15. background: transparent;
  16. }
  17. acronym {
  18. border-bottom: 1px dashed #333;
  19. cursor: help;
  20. }
  21. code {
  22. font: 1em Courier, monospace;
  23. }

Soffermiamoci sulle dichiarazioni date all'elemento body:

A questo punto occorre evidenziare un'importante differenza esistente tra il nostro documento servito come application/xhtml+xml e lo stesso documento servito come text/html. La differenza viene riassunta nelle due immagini che seguono.

L'immagine di sfondo in HTML L'immagine di sfondo in XHTML Figure 2-3: L'immagine di sfondo in HTML (a sinistra) e in XHTML (a destra) [D]

Nella prima figura abbiamo il documento servito come text/html. In questo caso l'elemento body viene trattato in modo speciale dai browser, nel senso che questo elemento copre interamente lo sfondo dell'elemento html, ossia dell'elemento radice. In altre parole, body "ruba" lo sfondo dell'elemento radice.

Nella seconda figura abbiamo il documento servito come application/xhtml+xml. In questo caso lo spazio bianco è giustificato dal fatto che ora body viene considerato come un elemento qualsiasi, ed il "furto" dello sfondo non ha più luogo. Poichè l'elemento h1 ha dei margini verticali, i browser ritengono che si venga a creare dello spazio tra l'elemento radice e body. Tale spazio viene mostrato.

Come ovviare al problema? La soluzione più semplice è quella di specificare l'immagine di sfondo anche per l'elemento html, usando la stessa dichiarazione usata per l'elemento body. Nel nostro caso questa soluzione non è necessaria, perché quello spazio sarà colmato dall'intestazione del nostro layout.

Possiamo osservare il lavoro svolto sinora nel nostro documento XHTML e nel nostro documento HTML.