Comment Changer les Couleurs des Liens en HTML

Vous pouvez styler les liens de plusieurs manières en utilisant les propriétés CSS . Les propriétés, qui sont couramment utilisées pour styler les liens, sont color, font-family et background-color.

Il existe 2 manières de changer le couleurs des liens: en ligne et externe.

Méthode En Ligne (Inline Method)

Ajoutez l'attribut style diréctement au code de hyperlien et insérez la propriété color à l'attribut style , ensuite, donnez lui la valeur color .

Exemple

<!DOCTYPE html>
<html>
  <body>
    <p>Visitez notre <a href="https://www.w3docs.com/" style="color: #8ebf42">site Web</a>.</p>
  </body>
</html>

Méthode Externe (External Method)

En utilisant les feuilles de style externe, vous pouvez contrôler tous les hyperliens sur votre site Web. Avec les feuilles de style externe, on peut avoir plusieurs effets des hyperliens attrayants pour développer l'apparence de votre site Web.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      a {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <p>Visiter notre <a href="https://www.w3docs.com/">site Web</a>.</p>
  </body>
</html>

De plus, il y a quatre états des liens, et les liens peuvent être stylés en fonction de l'état, dans lequel ils se trouvent:

  • a:link - un lien normal, non visité
  • a:visited - un lien, que l'utilisateur a visité
  • a:hover - un lien lors que l'utilisateur emporte le souris autour de lui
  • a:active - le moment le lien est cliqué

En définissant le style pour plusieurs états de lien, suivez ces règles d'ordre:

  • a:hover DOIT venir après a:link et a:visited
  • a:active DOIT venir après a:hover

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* lien non visité */
      a:link {
        color: #ccc;
      }
      /* lien visité */
      a:visited {
        color: #095484;
      }
      /* souris sur le lien */
      a:hover {
        color: #8ebf42;
      }
      /* lien sélécté */
      a:active {
        color: #800000;
      }
    </style>
  </head>
  <body>
    <p>Visitez notre <a href="https://www.w3docs.com/">site Web</a>.</p>
  </body>
</html>

Comment Changer le Couleur de Soulignement de Hyperlien et le Couleur de Texte d'Ancrage

Pour changer le couleur de soulignement, premièrement, vous devez le rétirer avec la propriété text-decoration et définir la valeur none, ensuite ajoutez la propriété border-bottom avec width (dans ce cas, utilisé comme la largeur de soulignement des hyperliens), border-style (solid, dotted, ou dashed) et pour le couleur de texte d'ancrage, utilisez la propriété color (pour définir le couleur de code).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      a {
        text-decoration: none;
      }
      a:link {
        color: #000;
        border-bottom: 1px solid #ff0000;
      }
      a:visited {
        color: #e600e6;
        border-bottom: 1px solid #b3b3b3;
      }
      a:hover {
        color: #2d8653;
        border-bottom: 1px solid #000099;
      }
    </style>
  </head>
  <body>
    <p>Visitez notre <a href="https://www.w3docs.com/">site Web</a>.</p>
  </body>
</html>

Pour un image complèt, voyons un exemple avec tous les façons mentionnés:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      a.one:link {
        color: #ccc;
      }
      a.one:visited {
        color: #095484;
      }
      a.one:hover {
        color: #8ebf42;
      }
      a.two:link {
        color: #ccc;
      }
      a.two:visited {
        color: #095484;
      }
      a.two:hover {
        font-size: 150%;
      }
      a.three:link {
        color: #ccc;
      }
      a.three:visited {
        color: #095484;
      }
      a.three:hover {
        background: #8ebf42;
      }
      a.four:link {
        color: #ccc;
      }
      a.four:visited {
        color: #095484;
      }
      a.four:hover {
        font-family: monospace;
      }
      a.five:link {
        color: #095484;
        text-decoration: none;
      }
      a.five:visited {
        color: #095484;
        text-decoration: none;
      }
      a.five:hover {
        text-decoration: overline underline;
      }
    </style>
  </head>
  <body>
    <p>Placez le souris autour des liens et voyez comment ils changent:</p>
    <p>
      <b><a class="one" href="#">Ce lien change le couleur</a></b>
    </p>
    <p>
      <b><a class="two" href="#">Ce lien change la taille de police font-size</a></b>
    </p>
    <p>
      <b><a class="three" href="#">Ce lien change le couleur de fond</a></b>
    </p>
    <p>
      <b><a class="four" href="#">Ce lien change font-family</a></b>
    </p>
    <p>
      <b><a class="five" href="#">Ce lien change la décoration de text text-decoration</a></b>
    </p>
  </body>
</html>

Apprenez plus sur Les liens CSS.