262
Maîtrise des CSS
La.première.partie.du.sélecteur..home.ou..routes.vérifie.que.nous.sommes.sur.cette.page..
La.mise.en.forme.n’est.appliquée.que.si.l’élément.ul#navigation_pri.est.un.enfant.de.
.home.ou.de..routes..Si.une.correspondance.est.trouvée,.l’action.est.réalisée..Ce.style.crée.
l’arrière-plan.gris.clair.qui.remplit.toute.la.zone.de.l’onglet.dans.la.barre.de.navigation..
Ensuite,.on.peut.définir.des.styles.pour.le.comportement.du.lien,.à.nouveau.en.regroupant.
les.règles.identiques.pour..home.et..routes :
.home ul#navigation_pri li.nav_home a,
.routes ul#navigation_pri li.nav_routes a {
color:#278dab;
background:#f5f5f5 0 center no-repeat;
padding:0 0 0 20px;
}
.home ul#navigation_pri li.nav_home a:hover,
.home ul#navigation_pri li.nav_home a:focus,
.routes ul#navigation_pri li.nav_routes a:hover,
.routes ul#navigation_pri li.nav_routes a:focus {
text-decoration:none;
color:#000;
}
Nous.obtenons.ainsi.les.liens.texte.bleus.dont.nous.avons.besoin..Pour.finir,.on.peut.ajouter.
une.décoration.au.lien.de.la.page.d’accueil.uniquement..Lorsque.la.page.d’accueil.est.affichée,.nous.affichons.une.petite.icône.de.maison.à.gauche.du.lien.Home :
.home ul#navigation_pri li.nav_home a {
background-image:url(../images/site/nav_back.gif);
}
La.Figure 11.7.montre.le.résultat.quand.on.affiche.la.page.d’accueil..
Figure 11.7
Le lien Home
sélectionné.
La.Figure 11.8.présente.la.page.Routes.
Figure 11.8
Le lien Routes
sélectionné.