Maison  >  Article  >  interface Web  >  Comment changer la couleur du lien hypertexte en CSS

Comment changer la couleur du lien hypertexte en CSS

藏色散人
藏色散人original
2021-04-13 09:48:089552parcourir

Comment modifier la couleur du lien hypertexte en utilisant CSS : 1. Modifiez la couleur du lien hypertexte via "a:link" ; 2. Changez la couleur via "a:visited" ; 3. Changez la couleur via "a:hover" ; " ; 4. Modifiez la couleur via "a:active".

Comment changer la couleur du lien hypertexte en CSS

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Css pour modifier la couleur du lien hypertexte :

Tout le monde devrait être familier avec le lien hypertexte a balise Cet article parle principalement du paramètre de style CSS de base de la balise a. Voyons comment modifier la couleur des hyperliens en utilisant CSS.

css peut utiliser les pseudo-classes suivantes pour définir des hyperliens :

a:link : c'est un style non visité. Vous pouvez y ajouter beaucoup de choses, comme supprimer les soulignements et changer les couleurs. D'autres fonctions peuvent être implémentées ici ;

a:visité : C'est le style après avoir cliqué dessus. Vous pouvez également y ajouter de nombreux éléments, et vous pouvez souligner, changer les couleurs, zoomer et d'autres fonctions

a:hover : Il s'agit du style de survol de la souris. Nous en verrons des exemples plus tard. Voyons d'abord que vous pouvez définir la couleur pour qu'elle change lorsque la souris est garée à la position du lien hypertexte ; 🎜>

a : actif : On dit qu'il s'agit d'un style activé. Pour faire simple, lorsque vous cliquez sur la souris, le style apparaîtra instantanément. Ce style est disponible sur de nombreux sites Web ; le style suivant. Couleur du lien hypertexte modifiable :

a:link{color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

Exemple :

<html>  
<head>   
<style type="text/css">
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
<title>test css</title>  
</head>  
<body>  
<a href="#">PHP中文网</a>
</body>   
</html>

[Apprentissage recommandé :

tutoriel vidéo CSS

]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn