Couleur de Lien CSS

Son facile pour pimenter votre site Web avec des liens colorés; Dans ce tutoriel, nous allons vous montrer comment utiliser les codes de couleur Hex et la propriété de couleur CSS pour donner à vos balises d'ancrage de la pop bien nécessaire. Et en bonus, nous allons même vous montrer comment utiliser les CSS pour changer la couleur de lien sur le vol stationnaire. Commençons, dirons-nous?

CSS couleur de lien en utilisant une balise HTML

En ce qui concerne la couleur de CSS est concerné, les liens ou balises <a> se comportent de la même manière que le texte régulier. Cela signifie pour changer la couleur d'un lien tout ce que vous devez faire est d'utiliser la propriété de couleur CSS dans la balise d'ancrage avec la couleur que vous voulez Hex, dans l'exemple ci-dessous, nous utilisons rouge. 

HTML

<head>
  <style>
    a { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a href="http://example.com/">A Red Link</a>
</body>
Démo sur Codepen

Pour les exemples de ce tutoriel, nous allons utiliser un code de couleur Hex, mais rappelez-vous, il ya beaucoup d'autres valeurs possibles de couleurs CSS; consultez notre autre guide CSS pour un aperçu de toutes les différentes façons d'utiliser la couleur dans vos feuilles de style.

CSS couleur de lien en utilisant un ID

ID sont une autre façon de coiffer une balise <a> utilisant le CSS. Vous avez probablement vu avant, les ID sont préfixés par un «#» signe en CSS et sont généralement destinés à être utilisés qu'une seule fois sur une page Web donnée. 

HTML

<head>
  <style>
    #link { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a id="link" href="http://example.com/">A Red Link</a>
</body>
Démo sur Codepen

CSS couleur de lien en utilisant une classe

Classes d'autre part, sont destinés à être réutilisés dans toute une page Web, et sont beaucoup plus fréquentes que les IDs. Classes CSS sont préfixées par un '.' et plusieurs classes peuvent même être attachés au même élément HTML. Ici, nous utilisons une classe avec le même Hex rouge code de couleur. 

HTML

<head>
  <style>
    .link { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a class="link" href="http://example.com/one">A Red Link</a>
  <a class="link" href="http://example.com/two">Another Red Link</a>
</body>
Démo sur Codepen

Changer la couleur des liens sur le vol stationnaire en utilisant le CSS

Vous avez probablement liens changent de couleur lorsque vous placez votre curseur sur eux, un effet élégant et un qui est très facile à mettre en œuvre en utilisant le CSS remarqué. Pour changer la couleur de votre lien sur le vol stationnaire, utilisez la propriété hover pseudo sur la classe du lien et de lui donner une couleur différente. 

CSS

.link { color: #FF0000; } /* CSS link color (red) */
.link:hover { color: #00FF00; } /* CSS link hover (green) */
Démo sur Codepen

La propriété de vol stationnaire peut même être utilisé sur les deux ID et des éléments eux-mêmes comme l'a démontré plus tôt dans le tutoriel. La couleur est juste une des nombreuses propriétés que vous pouvez modifier à l'aide hover, essayez d'expérimenter avec des soulignements, des couleurs de frontière et d'horizons pour le plaisir.