16. L'intestazione

Passiamo quindi ad assegnare le regole di stile all'intestazione del nostro documento:

  1. /* Intestazione */
  2. #header {
  3. background: #fff url("img/header.jpg") no-repeat 0 0;
  4. width: 100%;
  5. margin: 0;
  6. border-bottom: 1px solid #bccad9;
  7. }
  8. #header h1 {
  9. font: 3em/normal "Arial Black", Arial, sans-serif;
  10. padding: 0.2em 0;
  11. text-indent: 0.2em;
  12. text-transform: uppercase;
  13. margin: 0;
  14. background: transparent url("img/logo.gif") no-repeat 100% 50%;
  15. }

Passiamo in rassegna i nostri stili:

  1. Righe 2-7: Applichiamo un colore ed un'immagine di sfondo all'elemento principale della nostra intestazione. Il colore di sfondo fa in modo che nella versione XHTML scompaia lo spazio bianco creatosi tra l'elemento radice e l'elemento body. L'immagine di sfondo è allineata in alto a sinistra (coordinate 0, 0) e non viene ripetuta. La larghezza dell'elemento #header coincide con quella della finestra di visualizzazione. Abbiamo applicato anche un bordo inferiore
  2. Righe 8-15: Diamo quindi gli stili al titolo di primo livello all'interno dell'intestazione. Impostiamo una grandezza del font pari a tre volte quella dell'elemento genitore, normalizziamo l'interlinea e scegliamo un tipo di font abbastanza comune (Arial Black), dando comunque una scelta di ripiego (famiglia generica sans-serif). Quindi impostiamo un padding verticale ed un indentazione del testo pari a 0.2em. Questo valore viene calcolato a partire dai 3em dell'elemento h1. Azzeriamo i margini dell'elemento e gli assegniamo un'immagine di sfondo posta alla sua destra e centrata in verticale (coordinate 100%, 50%). Il colore di sfondo del titolo è trasparente, in modo da non coprire lo sfondo del suo genitore.

Possiamo osservare i nostri progressi nel nostro documento XHTML e nel nostro documento HTML.