SUPPLEMENTS DE COURS

3ième S.I. Systèmes, Technologies et Internet
1
SUPPLEMENTS DE COURS
1. Le sélecteur de lien :hover
C’est une pseudo-classe qui permet de spécifier l'apparence d'un élément au moment où
l'utilisateur le survole avec le pointeur, sans nécessairement l'activer. Il s’agit en fait d’une mise
en forme ciblée.
Exp. :
• CSS :
a:hover{background-color:gold;}
p:hover{color:red;}
• HTML :
<a href="#"> Le fond de ce lien devient doré lorsqu'il est
survolé par le pointeur.</a>
<p> Ce paragraphe devient écrit en rouge.</p>
En outre, les liens peuvent être stylés différemment en fonction de leur état.
Les quatre états des liens sont :
- a:link - un lien normal et non visité
- a:visited - un lien que l'utilisateur a visité
- a:hover - un lien lorsque l'utilisateur passe la souris dessus
- a:active - un lien au moment où il est cliqué
Exp. :
• CSS :
a:link { color: red; } /* lien non visité */
a:visited { color: green; } /* lien visité */
a:hover { color: hotpink; } /* survol de lien */
a:active { color: blue; } /* lien cliqué */
a.classe1:hover{font-size:20px; } /* marche aussi sans le "a" */
• HTML :
<a href="#">Lien1</a>
<br />
<a href="#" class="classe1">Lien2</a>

3ième S.I. Systèmes, Technologies et Internet
2
Rque:
Pour éviter des effets de bord problématiques, on placera la règle :hover après les
règles :link et :visited mais avant la règle :active (l'ordre est :link — :visited — :hover — :active –
un moyen mnémotechnique est de se souvenir des initiales LVHA).
2. Mise en page des différents périphériques d’affichage : meta name= "viewport"
La balise <meta name="viewport" permet de définir les dimensions d'une page web. La balise
permet de définir la largeur de la page, la hauteur et même le zoom sur cette page. Cette balise
est utile pour l'affichage d'une page sur mobile (exemple : iPhone, iPod ...).
Le Viewport désigne schématiquement la surface de la fenêtre du navigateur.