Comment styliser les liens à l'aide de CSS?

Les liens sont des entités qui indiquent de nouveaux emplacements. Ces hyperliens ou liens jouent un rôle essentiel dans les sites Web lorsque vous souhaitez que vos utilisateurs visitent d'autres contenus disponibles en ligne. Ceux-ci désignent le contenu disponible sur le même site Web ou le même contenu disponible sur d'autres sites Web. Maintenant, nous savons à quel point il est important de rendre votre site Web visuellement agréable, par conséquent, le style des hyperliens est aussi important que le style de tout autre élément de votre site Web. Vous devez réfléchir à la façon de faire cela. Eh bien, tenez-vous bien car ce post vous guidera sur les liens de style.

Comment styliser les liens?

Les liens ou les hyperliens sur un site Web peuvent être stylisés à l'aide de diverses propriétés CSS. Les liens de style peuvent inclure la modification de leur couleur, de leur taille de police, de leur famille de polices, etc.

Exemple
Supposons que vous vouliez qu'un hyperlien sur votre site Web ait un style audacieux et que sa couleur soit vert. Utilisez le morceau de code suivant.

Sortir

La couleur et le poids de la police du lien ont été modifiés avec succès.

Coiffage des liens selon les États

Les liens affichés sur un site Web ont des états différents et ils peuvent être stylés en fonction de leur état actuel. Les différents états qu'un lien peut avoir sont;

un lien (un lien qui n'a pas encore été visité par l'utilisateur)

R: Visité (un lien qui a été visité par l'utilisateur)

R: Rocher (l'état du lien lorsqu'un curseur de souris est déplacé sur le lien)

R: actif (l'état du lien lorsque l'utilisateur clique sur le lien)

Les liens de style en fonction de leurs États sont nécessaires car ils permettent à l'utilisateur de comprendre l'état d'un lien et d'empêcher l'utilisateur de faire face à toute confusion.

Exemple
Utilisez l'extrait de code suivant pour styliser des liens sur votre site Web en fonction de leur état.

Sortir

1. Lorsque le lien n'est pas encore visité par l'utilisateur.
   
2. Lorsque l'utilisateur visite le lien.
   
3. Lorsque l'utilisateur amène la souris sur le lien.
   
4. Lorsque l'utilisateur clique sur le lien.
   

Note: Lorsque vous stylisez plusieurs liens, maintenez l'ordre susmentionné afin que vos liens se comportent en conséquence. Supposons que vous soyez en train de planer d'abord au lieu de coiffure visitée, puis le style défini pour visiter le style de survol et c'est une situation à éviter.

Comment supprimer le soulignement par défaut de HperLinks

Par défaut, il y a un soulignement sur les liens dans un site Web qui peuvent parfois être indésirables. Vous pouvez vous débarrasser de la soulignement à partir des liens en utilisant la propriété textuelle de CSS. L'extrait de code suivant montre comment il peut être fait.

Dans l'exemple ci-dessus, le soulignement par défaut est en cours de suppression d'un lien non visité en définissant la valeur de la propriété textuelle-décoration à «Aucun». Vous pouvez utiliser l'extrait de code ci-dessus pour supprimer également un soulignement des autres états d'un lien.

Sortir

Le soulignement par défaut est supprimé avec succès du lien non visité.

Liens en tant que boutons

Parfois, les liens texte habituels apparaissant sur un site Web peuvent être ennuyeux, par conséquent, afin de les rendre plus attrayants, vous pouvez faire apparaître les liens en tant que boutons sur votre site Web. Faire des liens en tant que boutons utilise plusieurs propriétés CSS telles que le rembourrage, la bordure, la couleur d'arrière-plan, etc.

L'exemple ci-dessous illustre comment vous utilisez les liens comme boutons.

Dans l'extrait de code ci-dessus, un lien est affiché comme un bouton. Les états non visités et visités du bouton sont stylisés différemment de la survol et des états actifs du lien.

Sortir

1. Le lien à l'état du bouton non visité et visité.
   
2. Les états de survol et actifs du lien bouton.
   

Un lien dans tous ses états est conçu avec succès comme un bouton.

Conclusion

Les liens de styles ou les hyperliens sur un site Web sont tout aussi importants que le style de tout autre élément. Aux fins des liens de style, diverses propriétés CSS sont utilisées telles que la couleur, la couleur d'arrière-plan, la famille de la police, le style de police, etc. Les liens peuvent également être stylisés en fonction de leurs États qui ne sont pas visitées, visitées, oscillantes et actives en outre, pour améliorer l'apparence des liens apparaissant sur les sites Web, vous pouvez utiliser des liens comme boutons. Cet article explique comment styliser les liens en utilisant CSS en profondeur avec l'aide d'exemples appropriés.