Par défaut, les navigateurs Web ont certains styles CSS qu’ils appliquent à des éléments HTML spécifiques. Si vous ne remplacez pas ces valeurs par défaut par les propres feuilles de style de votre site, les valeurs par défaut s'appliqueront. Pour les hyperliens, le style d'affichage par défaut est que tout texte lié est en bleu et souligné. Le navigateur le fait pour que les visiteurs d'un site puissent facilement voir quel texte est lié. Beaucoup de concepteurs de sites Web ne se soucient pas de ces styles par défaut, en particulier ceux soulignés. Heureusement, CSS facilite la modification de l'apparence de ces soulignés ou leur suppression complète.
Supprimer le soulignement sur les liens de texte
Le texte souligné peut être plus difficile à lire que le texte non souligné. En outre, de nombreux concepteurs ne s'intéressent tout simplement pas à l'aspect des liens de texte soulignés. Dans ces cas, vous voudrez probablement supprimer complètement ces soulignements.
Pour supprimer le soulignement des liens de texte, vous utiliserez la propriété CSS text-decoration. Voici le CSS que vous écririez pour faire ceci:
une {text-decoration: none; }
Avec cette ligne de CSS, vous supprimez le soulignement de tous les liens de texte. Même s'il s'agit d'un style très général (il utilise un sélecteur d'élément), il a toujours plus de spécificité que les styles de navigateur par défaut. Parce que ce sont ces styles par défaut qui créent le soulignement, c’est ce que vous devez écraser.
Une mise en garde sur la suppression des soulignés
Visuellement, la suppression des soulignements peut être exactement ce que vous voulez accomplir, mais vous devez également faire preuve de prudence lorsque vous procédez ainsi. Que vous aimiez l'apparence des liens soulignés ou non, vous ne pouvez pas prétendre qu'ils rendent évident le texte lié et le texte qui ne l'est pas. Si vous enlevez les soulignés ou modifiez la couleur de lien bleue par défaut, vous devez les remplacer par des styles permettant au texte lié de rester visible. Cela rendra l'expérience plus intuitive pour les visiteurs de votre site.
Ne pas souligner les non-liens
Une autre mise en garde sur les liens et les soulignés, ne soulignez pas le texte qui n'est pas un lien comme un moyen de le souligner. Les gens s'attendent maintenant à ce que le texte souligné devienne un lien. Par conséquent, si vous soulignez le contenu afin de le mettre en évidence (au lieu de le mettre en gras ou en italicisant), vous envoyez un message erroné et vous allez dérouter les utilisateurs du site.
Changer le soulignement en points ou en tirets
Si vous souhaitez conserver le soulignement de votre lien de texte, mais changer le style de ce soulignement de son aspect par défaut, à savoir la ligne "soldi", vous pouvez le faire également. Au lieu de cette ligne continue, vous pouvez utiliser des points pour souligner vos liens. Pour ce faire, vous supprimerez toujours le soulignement, mais vous le remplacerez par la propriété de style border-bottom:
une {text-decoration: none; bordure inférieure: 1px en pointillé; }
Puisque vous avez supprimé le soulignement standard, seul le pointillé apparaît.
Vous pouvez faire la même chose pour obtenir des tirets. Il suffit de changer le style border-bottom en dashed:
une {text-decoration: none; border-bottom: 1px en pointillé; }
Changer la couleur de soulignement
Une autre façon d'attirer l'attention sur vos liens consiste à changer la couleur du soulignement. Assurez-vous simplement que la couleur correspond à votre jeu de couleurs.
une {text-decoration: none; bord inférieur: 1px rouge uni; }
Double soulignement
Le truc pour utiliser le double soulignement est que vous devez modifier la largeur de la bordure. Si vous créez une bordure large de 1 px, vous obtenez un double soulignement qui ressemble à un soulignement simple.
une {text-decoration: none; bordure inférieure: 3px double; }
Vous pouvez également utiliser le soulignement existant pour créer un soulignement double avec d'autres fonctionnalités, telles que l'une des lignes pointillées:
un {border-bottom: 1px double; }
Ne pas oublier les états de lien
Vous pouvez ajouter le style border-bottom à vos liens à différents états, tels que: survol,: actif ou: visité. Cela peut créer une belle expérience de type "survol" pour les visiteurs lorsque vous utilisez cette pseudo-classe "survol". Pour faire apparaître un second soulignement en pointillé lorsque vous survolez le lien:
une {text-decoration: none; } a: hover {border-bottom: 1px en pointillé; }
Article original de Jennifer Krynin. Edité par Jeremy Girard
