![Porte Aperte sul Web [logo]. Link alla home page](../../img/logopab.gif)
sei in home - tutorial - home page con xhtml strict - lezione 8
Scarica il file menu.css e leggi il codice corrispondente.
#menu {
color: #000033;
border: 1px solid #0066CC;
background-image: url(images/quadrb.gif);
background-repeat: repeat;
}
Il testo è definito per essere di colore blu scuro su sfondo immagine quadrettato bianco (quadrb.gif). Il box avrà il bordo continuo di larghezza 1 pixel e di colore blu. Per lo sfondo è definita un’immagine di quadrettato bianco (quadrb.gif), ripetuta.
Passiamo ora a definire le caratteristiche stilistiche dei link, dei link visitati e lo stato dei link quando il mouse passa sopra di essi.
A tal fine si utilizzano gli pseudoselettori a:link, a:visited, a:hover (da scrivere rigorosamente in quest'ordine, per evitare errate interpretazioni di alcuni browser).
#menu a:link{
color: #000000;
text-decoration: none;
background-image: url(images/quadrb.gif);
font-weight: bold;
padding-right: 5px;
padding-left: 5px;
}
#menu a:visited{
color: #000000;
text-decoration: none;
background-image: url(images/quadrb.gif);
font-weight: bold;
padding-right: 5px;
padding-left: 5px;
}
Importante:con questa parte di codice vengono definiti gli effetti sui link solo per quelli all’interno del box #menu.
Gli pseudoselettori infatti sono stati scritti dopo l'indicazione del box #menu, proprio per indicare che gli stili assegnati agiranno solo sui link che si trovano all'interno del menu principale (#menu).
In caso contrario, cioè inserendo nel foglio di stile a:link, a:visited, a:hover genericamente, le caratteristiche in essi definite, andranno ad applicarsi a tutti i link della pagina collegata.
Tra tutte le caratteristiche di stile definite, si noti che con
text-decoration:none
si toglie la sottolineatura del link, mentre con i valori inseriti negli attributi padding si lascia un po' di spazio a sinistra e a destra, in modo da creare maggiore distanza tra i link.
#menu a:hover{
color: #FFFFFF;
text-decoration: none;
background-image: url(images/quadrblu.gif);
font-weight: bold;
padding-right: 5px;
padding-left: 5px;
}
Con a:hover si ottiene l'effetto roll-over, un tempo ottenuto con l'impiego di immagini e di inutile codice javascript. E’ infatti lo pseudoselettrore che definisce come viene visualizzato il link quando il puntatore del mouse ci passa sopra.
In questo caso viene stabilito:
il colore del testo bianco, grassetto, su sfondo immagine quadrblu.gif.
Il colore del testo diventa bianco su sfondo immagine quadrblu.gif.
Un'ultima considerazione. E' possibile risparmiare diverse righe di codice compattando tutti gli elementi comuni ai pseudoselettori nello pseudoselettore #menu a, senza ripeterli per gli altri.
In questo caso, il codice (menu2.css) sarà:
#menu a {
color: #000000;
text-decoration: none;
background-image: url(images/quadrb.gif);
font-weight: bold;
padding-right: 5px;
padding-left: 5px;
}
#menu a:hover{
color: #FFFFFF;
background-image: url(images/quadrblu.gif);
}
