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://m.miracleart.cn">php</a> </body> </html>
Voici le contenu du fichier CSS?:
a:link {color:#FF0000;} /* 未被訪問的鏈接 */
a:visited {color:#00FF00;} /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標(biāo)指針移動到鏈接上 */
a:active {color:#0000FF;} /* 正在被點(diǎn)擊的鏈接 */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?:
