3ième S.I. Systèmes, Technologies et Internet 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; } a:visited { color: green; } a:hover { color: hotpink; } a:active { color: blue; } /* /* /* /* a.classe1:hover{font-size:20px; } /* marche aussi sans le "a" */ • HTML : <a href="#">Lien1</a> <br /> <a href="#" class="classe1">Lien2</a> 1 lien non visité */ lien visité */ survol de lien */ lien cliqué */ 3ième S.I. Systèmes, Technologies et Internet 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. 2