07-Diamo stile ai link del menu

HTML
Il mio primo sito web: Card 7
Diamo stile al menu dei link
Per dare uno stile come sopra ai link devi modificare il file HTML e il file CSS.
1) In ogni file HTML rimuovi dal menu il link che punta alla pagina stessa.
Per esempio, nel file della pagina about-me.html rimuoverai il link <a href="aboutme.html"> , nella pagina games.html rimuoverai il link <a href="games.html">
Nome file
aboutme.html
Codice del menu prima delle modifiche
<ul>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="games.html">My Favourite
Games</a></li>
<li><a href="family.html">My
Family</a></li>
<li><a href="pets.html">My
Pets</a></li>
</ul>
games.html
Codice del menu dopo le modifiche
<ul>
-> <li>About Me</li>
<li><a href="games.html">My Favourite
Games</a></li>
<li><a href="family.html">My
Family</a></li>
<li><a href="pets.html">My
Pets</a></li>
</ul>
<ul>
<li><a href="about-me.html">About
Me</a></li>
-> <li><a href="about-me.html">About
<li><a href="games.html">My
<li>My Favourite Games</li>
Favourite Games</a></li>
<li><a href="family.html">My
Family</a></li>
<li><a href="pets.html">My
Pets</a></li>
</ul>
<li><a href="family.html">My
Family</a></li>
<li><a href="pets.html">My
Pets</a></li>
</ul>
<ul>
Me</a></li>
This work is licensed under the Creative Commons Attribution 3.0 Unported License. To view a copy of this license, visit
http://creativecommons.org/licenses/by/3.0/ - Courtesy of Coderdojo Bray (www.coderdojobray.com)
Pagina 1
HTML
Il mio primo sito web: Card 7
Facciamo questo per tutti i tuoi file HTML (ad esempio family.html e pets.html).
Osserva come dopo le tue modifiche la voce del menu modificata non è più cliccabile.
2) Aggiungi all’elemento li un attributo di nome class con il valore uguale a
“selected”:
file
aboutme.html
games.html
Codice del menu prima delle modifiche
<ul>
Codice del menu dopo le modifiche
-> <ul>
<li>About Me</li>
<li class="selected">About Me</li>
<li><a href="games.html">My Favourite
Games</a></li>
<li><a href="family.html">My
Family</a></li>
<li><a href="pets.html">My
Pets</a></li>
<li><a href="games.html">My Favourite
Games</a></li>
<li><a href="family.html">My
Family</a></li>
<li><a href="pets.html">My
Pets</a></li>
</ul>
</ul>
<ul>
<li><a href="about-me.html">About
Me</a></li>
-> <ul>
<li><a href="about-me.html">About
Me</a></li>
<li>My Favourite Games</li>
<li class="selected">My Favourite
<li><a href="family.html">My
Family</a></li>
<li><a href="pets.html">My
Pets</a></li>
</ul>
Games</li>
<li><a href="family.html">My
Family</a></li>
<li><a href="pets.html">My
Pets</a></li>
</ul>
Queste modifiche da solo non servono (fai un refresh del browser e il menu apparirà
esattamente come prima). MA, l’aggiunta dell’attributo CLASSE ci consentirà di selezionare il
link nel file CSS e colorarlo di giallo.
Ecco come:
file
Codice del menu prima delle modifiche
simple.css
ul li a {
color: white;
}
Codice del menu dopo le modifiche
->
ul li a {
color: white;
}
ul li.selected {
color: yellow;
}
3) Ora fai un refresh sul browser e vedrai il link selezionato colorato di giallo. Quello che hai
fatto è stato aggiungere una nuova regola da applicare solo agli elementi li con un
attributo
class con valore selected. Osserva la sintassi nel file CSS — invece di
specificare una regola per li, hai specificata una regola per li.selected
4) Rimuovi la sottolineatura dai link del menu:
file
Codice del menu prima delle modifiche
simple.css
ul li a {
color: white;
}
Codice del menu dopo le modifiche
-> ul li a {
color: white;
text-decoration: none;
}
5) Facciamo diventare il link azzurro e sottolineato quando ci passi sopra con il mouse
This work is licensed under the Creative Commons Attribution 3.0 Unported License. To view a copy of this license, visit
http://creativecommons.org/licenses/by/3.0/ - Courtesy of Coderdojo Bray (www.coderdojobray.com)
Pagina 2
HTML
Il mio primo sito web: Card 7
aggiungendo una nuova regola al CSS. Questa regola definirà cosa succederà quando
sorvolerai con il mouse su un elemento <a>.
ul li a:hover {
color: #99DDFF;
text-decoration: underline;
}
Osserva: il codice #99DDFF corrisponde al colore azzurro.
This work is licensed under the Creative Commons Attribution 3.0 Unported License. To view a copy of this license, visit
http://creativecommons.org/licenses/by/3.0/ - Courtesy of Coderdojo Bray (www.coderdojobray.com)
Pagina 3