Maison > Article > interface Web > Comment changer la couleur des liens en CSS ?

Comment changer la couleur des liens en CSS ?

WBOYavant: 2023-09-10 08:17:04737parcourir

Les liens font référence à des éléments d'ancrage HTML, représentés par la balise . Cet élément est utilisé pour créer des hyperliens permettant aux utilisateurs de naviguer entre les pages Web et d'autres ressources.

CSS (Cascading Style Sheets) est un langage puissant utilisé pour contrôler la présentation visuelle des pages Web. L'une des choses les plus importantes que nous pouvons faire avec CSS est de changer la couleur des liens sur la page Web. différentes façons de changer la couleur des liens en CSS

En utilisant le sélecteur "a"

C'est la méthode de base pour changer la couleur des liens en CSS. Ce sélecteur cible tous les liens d'une page Web. La propriété color est utilisée pour changer la couleur du texte du lien −

a{
   color:blue;
}

La traduction chinoise de

Exemple

est :

Exemple

Voici un exemple pour changer la couleur du lien à l'aide du sélecteur « a » en CSS

<html>
<head>
   <title>Change link color in CSS</title>
   <style>
      body{
         text-align:center;
      }
      a{
         color:blue;
      }
   </style>
</head>
<body>
   <h2>Change the link color in CSS</h2>
   <a href = "https://www.tutorialspoint.com/">  link to tutorialspoint </a>
</body>
</html>

En utilisant les sélecteurs "id" et "class"

Si nous voulons changer la couleur d'un lien spécifique, nous pouvons utiliser le sélecteur de classe ou le sélecteur d'ID. Par exemple, si nous avons une classe appelée "special-link" sur certains liens, nous utiliserons le code suivant pour changer la couleur de ces liens −

.special-link{
   color:blue; (By using class seletor)
}
#special-link{
   color:blue; (By using id seletor)
}

La traduction chinoise de

Exemple

est :

Exemple

Voici un exemple de changement de couleur de lien en CSS à l'aide des sélecteurs "ID" et "Class".

<html>
<head>
   <title>Change link color in CSS</title>
   <style>
      body{
         text-align:center;
      }
      #special-link {
         color: red;
      }
      .special-link {
         color: green;
      }
   </style>
</head>
<body>
   <h2>Change link color in CSS</h2>
   <a id="special-link" href = "https://www.tutorialspoint.com/"> Change the link color with ID Selector in CSS </a>
   <p></p>
   <a class="special-link" href = "https://www.tutorialspoint.com/"> Change the link color with CLASS Selector in CSS </a>
</body>
</html>

En utilisant la pseudo-classe « :hover »

Pour changer la couleur d'un lien lorsqu'il est survolé, on utilise la pseudo-classe ":hover" Par exemple

a:hover {
   color: red;
}

Ce CSS changera la couleur du lien en rouge lorsque la souris le survolera.

La traduction chinoise de

Exemple

est :

Exemple

Ceci est un exemple d'utilisation de la pseudo-classe « .hover » en CSS pour changer la couleur d'un lien.

<html>
<head>
   <title>Change link color in CSS</title>
   <style>
      body{
         text-align:center;
      }
      a {
         color: blue;
      }
      a:hover {
         color: red;
      } 
   </style>
</head>
<body>
   <h2>Change link color in CSS</h2>
   <a id="special-link" href = "https://www.tutorialspoint.com/"> Change the link color with Mouse-hover in CSS </a>
</body>
</html>

Conclusion

Changer la couleur d'un lien en CSS est un moyen simple et efficace d'améliorer les visuels de votre site internet. En utilisant des sélecteurs, des pseudo-classes et des attributs, nous pouvons cibler des liens ou des états de lien spécifiques et modifier leur couleur pour qu'elle corresponde à la conception.

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!

css html for using class Property this 选择器伪类

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment utiliser les propriétés CSS3 pour implémenter la mise en page multi-colonnes des pages Web ?Article suivant：Comment utiliser les propriétés CSS3 pour implémenter la mise en page multi-colonnes des pages Web ?

Articles Liés

Voir plus