![Porte Aperte sul Web [logo]. Link alla home page](../../img/logopab.gif)
sei in home - tutorial - home page con xhtml strict - lezione 16
Scarica il file footer.css e leggi il codice corrispondente.
#footer {
font-size: 90%;
color: #990000;
background-image: url(images/quadrb.gif);
margin-top: 5px;
text-align: center;
border: 1px solid #0033CC;
}
#footer a {
color: #000066;
text-decoration: none;
background-color: #FFFFFF;
padding-right: 5px;
padding-left: 5px;
font-weight: bold;
}
#footer a:hover {
color: #FFFFFF;
background-color: #000066;
}
Il testo contenuto nel box #footer avrà dimensione pari al 90% rispetto a quella dichiarata nel body, sarà di colore rosso su sfondo quadrettato bianco ( quadrb.gif) e sarà allineato al centro.
Il box, che comparirà disegnato con un bordo di 1 pixel, continuo e di colore blu, sarà visualizzato 5 pixel sotto il bordo inferiore del box #centrale, che lo precede (margin-top: 5px).
Con i selettori a e a:hover vengono definiti gli effetti per i link presenti nel footer.
Nelle proprietà del selettore a inseriamo gli effetti comuni a tutti gli stati dei link. Tra questi, si segnalano l'assenza della sottolineatura (text-decoration: none), lo sfondo bianco, il grassetto (font-weight: bold) e soprattutto la presenza di uno spazio laterale, in modo da facilitare il puntamento del link con il mouse, attraverso l'estensione della parte cliccabile (padding-right: 5px; padding-left: 5px).
Con il pseudoselettore a:hover si modifica colore del testo e dello sfondo quando il mouse si posiziona sopra il link.
