16. L'intestazione
Passiamo quindi ad assegnare le regole di stile all'intestazione del nostro documento:
- /* Intestazione */
- #header {
- background: #fff url("img/header.jpg") no-repeat 0 0;
- width: 100%;
- margin: 0;
- border-bottom: 1px solid #bccad9;
- }
- #header h1 {
- font: 3em/normal "Arial Black", Arial, sans-serif;
- padding: 0.2em 0;
- text-indent: 0.2em;
- text-transform: uppercase;
- margin: 0;
- background: transparent url("img/logo.gif") no-repeat 100% 50%;
- }
Passiamo in rassegna i nostri stili:
- 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
- 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.