CSS – Liens
Ce chapitre vous apprend à définir différentes propriétés d’un lien hypertexte à l’aide de CSS. Vous pouvez définir les propriétés suivantes d’un lien hypertexte –
Nous reviendrons sur les mêmes propriétés lorsque nous aborderons les pseudo-classes de CSS.
-
Le :lien signifie des hyperliens non visités.
-
Le :a visité signifie les hyperliens visités.
-
Le :flotter signifie un élément sur lequel le pointeur de la souris de l’utilisateur survole actuellement.
-
Le :actif désigne un élément sur lequel l’utilisateur est en train de cliquer.
Habituellement, toutes ces propriétés sont conservées dans la partie en-tête du document HTML.
N’oubliez pas que a:hover DOIT venir après a:link et a:visited dans la définition CSS pour être efficace. De plus, a:active DOIT venir après a:hover dans la définition CSS comme suit –
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
Nous allons maintenant voir comment utiliser ces propriétés pour donner différents effets aux hyperliens.
Définir la couleur des liens
L’exemple suivant montre comment définir la couleur du lien. Les valeurs possibles peuvent être n’importe quel nom de couleur dans n’importe quel format valide.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>
Il produira le lien noir suivant –
Définir la couleur des liens visités
L’exemple suivant montre comment définir la couleur des liens visités. Les valeurs possibles peuvent être n’importe quel nom de couleur dans n’importe quel format valide.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = ""> link</a>
</body>
</html>
Il produira le lien suivant. Une fois que vous aurez cliqué sur ce lien, il changera sa couleur en vert.
Changer la couleur des liens lorsque la souris est au-dessus
L’exemple suivant montre comment changer la couleur des liens lorsque nous amenons le pointeur de la souris sur ce lien. Les valeurs possibles peuvent être n’importe quel nom de couleur dans n’importe quel format valide.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>
Il produira le lien suivant. Maintenant, vous passez votre souris sur ce lien et vous verrez qu’il change de couleur en jaune.
Changer la couleur des liens actifs
L’exemple suivant montre comment modifier la couleur des liens actifs. Les valeurs possibles peuvent être n’importe quel nom de couleur dans n’importe quel format valide.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>
Il produira le lien suivant. Il changera sa couleur en rose lorsque l’utilisateur cliquera dessus.
#CSS #Liens