Lien CSS
1 Quatre statuts des liens CSS :
a:link - lien ordinaire, non visité a:visited - lien que l'utilisateur a visité a:hover - le pointeur de la souris est au-dessus du lien a:active - le moment où l'on clique sur le lien
Définissons les attributs de couleur de ces comportements correspondants : Toujours le même que le processus précédent, on crée d'abord un index.html, puis on le crée Un fichier test.css, lié à le HTML. Voici le contenu du fichier html :
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css test</title> <script src="app.js"></script> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body > <a href="http://www.php.cn">php</a> </body> </html>
Voici le contenu du fichier CSS :
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */Jetons d'abord un coup d'œil à l'effet : Il s'agit de la couleur non visitée :
Voici la couleur du lien lorsque la souris est déplacée :
Voici la couleur du lien étant cliqué :
Voici la couleur après avoir cliqué :
Ce à quoi nous devons faire attention ici, c'est la ordre dans lequel ces quatre attributs doivent être définis : a:hover doit être situé dans un After :link et a:visited, a:active doit être situé après a:hover
1.2 CSS Définition de la couleur d'arrière-plan du lien
C'est aussi simple que de modifier l'attribut background-color correspondant. Si nous voulons expérimenter, remplacez ou ajoutez simplement le fichier CSS tout de suite :
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}Vous pouvez expérimenter, je ne prendrai pas de captures d'écran une par une ici
1.3 Modifier le lien souligné
Nous n'avons pas toujours besoin du soulignement sous le lien, parfois cela affecte l'apparence. Nous devons donc ici ajouter l'attribut text-decoration à l'attribut link, et simplement changer le pointeur de passe en vide. Après modification, le résultat suivant sera :
