Comment changer la couleur des liens en CSS ?-tutoriel CSS-php.cn

Comment changer la couleur des liens en CSS ?

WBOY

Libérer： 2023-09-10 08:17:04

avant

750 Les gens l'ont consulté

Comment changer la couleur des liens en CSS ?

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;
}

Copier après la connexion

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>

Copier après la connexion

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)
}

Copier après la connexion

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>

Copier après la connexion

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;
}

Copier après la connexion

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>

Copier après la connexion

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!