communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

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 :

QQ截图20161208104329.png

Voici la couleur du lien lorsque la souris est déplacée :

QQ截图20161208104336.png

Voici la couleur du lien étant cliqué :

QQ截图20161208104343.png

Voici la couleur après avoir cliqué :

QQ截图20161208104348.png

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 :

QQ截图20161208104515.png

.
Formation continue
||
<!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>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492800 joue