Comment styliser les liens à l'aide de CSS : un didacticiel détaillé pour débutant

Publié: 2022-09-02

Dans ce didacticiel, nous expliquerons comment styliser les liens Web via CSS. Les liens sont un élément central de tout site Web. Ils vous permettent de déplacer les visiteurs vers d'autres parties de celui-ci, de vous référer à des sources pour souligner les points que vous soulevez, d'aider les lecteurs à découvrir des articles de blog plus pertinents, et plus encore.

Apprendre à modifier leur conception vous permet de vous assurer qu'ils sont reconnaissables en tant que liens et qu'ils s'adaptent au reste de votre site Web. CSS offre de nombreuses manières et propriétés différentes pour cela, alors examinons-les une par une.

Normes de lien et style de lien par défaut

Avant d'aborder la façon d'apporter des modifications à la conception de vos liens, commençons par comprendre leur composition. Voici à quoi ressemble un élément de lien en HTML :

 <a href="https://torquemag.io/">TorqueMag</a>

Comme vous pouvez le voir, il se compose de plusieurs parties :

  • <a> – Il s'agit de l'opérateur de création d'un élément de lien. Pourquoi a ? Parce qu'en HTML, les liens sont aussi appelés balises d'ancrage .
  • href="" - Tout ce qui se trouve entre guillemets doubles est l'endroit vers lequel ce lien pointe. C'est l'adresse sur laquelle quelqu'un qui clique dessus atterrira.
  • TorqueMag – C'est le texte du lien qui apparaît sur la page, par exemple comme ceci (ne cliquez pas dessus, ce lien ne mène nulle part).
  • </a> - Les parties qui ferment l'élément de lien et indiquent au navigateur que le texte du lien se termine ici.

Jusqu'ici, si facile.

À quoi ressemble le lien par défaut

Là où ça devient intéressant, c'est quand on regarde à quoi ressemble ce type de lien sur la page. Vous l'avez probablement déjà vu.

exemple de style par défaut du lien

Si vous déclarez un ancien lien dans un document HTML et ne fournissez aucune information de style, il adoptera le style par défaut :

  1. Le texte du lien est bleu et le lien lui-même est souligné.
  2. Lorsque vous le survolez avec votre souris, le curseur se transforme en une petite icône de main.
  3. Lorsque vous cliquez dessus, il devient rouge pendant une seconde.
  4. Une fois que vous avez visité le lien, sa couleur deviendra violette.
  5. Lorsque vous naviguez vers le lien via la touche de tabulation de votre clavier, il sera entouré d'un contour bleu.

Ces normes ont été établies au début d'Internet et n'ont pas beaucoup changé depuis les années 90. Ce qui est drôle, c'est que même si vous n'y avez jamais pensé consciemment, à un certain niveau, vous étiez probablement au courant de la plupart de ce qui précède simplement en surfant sur le Web.

En savoir plus sur les états des liens

Ce qui ressort également de ce qui précède est que les liens ont des états différents qui influencent leur apparence. Vous pouvez les cibler avec différentes pseudo-classes CSS qui vous permettent d'influencer leur style individuel. Ceux-ci sont:

  • a - Il s'agit de la balise d'ancrage susmentionnée. Il cible tous les liens à toutes les étapes.
  • a:link – Pour le lien normal non visité. En termes techniques, :link cible toutes les balises d'ancrage qui ont un attribut href . En réalité, il n'est pas beaucoup utilisé. Beaucoup de gens utilisent simplement a , car les balises d'ancrage sans attribut href sont plutôt rares, il n'y a donc souvent pas besoin de ce type de différenciation.
  • a:visited - Décrit un lien que l'utilisateur actuel a déjà visité, ce qui signifie qu'il existe dans l'historique du navigateur.
  • a:hover - Style des cibles qui s'affiche lorsqu'un utilisateur place le curseur de sa souris sur un lien.
  • a:active - Style brièvement visible au moment d'un clic sur un lien.
  • a:focus – Un lien ciblé, par exemple vers lequel un utilisateur a navigué à l'aide de la touche de tabulation. le hover et la mise au focus sont souvent coiffés ensemble.

Il est important de noter que, lorsque vous modifiez le style de plusieurs états de lien à la fois, vous devez le faire dans l'ordre suivant.

  1. a
  2. a:link
  3. a:visited
  4. a:focus
  5. a:hover
  6. a:active

Le style des états de liens se construit les uns sur les autres et descend en cascade. Par conséquent, l'ordre est important pour s'assurer qu'ils fonctionnent comme prévu.

Répondre aux attentes des utilisateurs

Le dernier aparté avant d'aborder la façon dont vous pouvez apporter des modifications au style de lien via CSS, est de parler des attentes des utilisateurs. La raison pour laquelle vous avez probablement reconnu facilement les liens par défaut en tant que liens est que certains défauts sont ancrés en nous en tant qu'utilisateurs depuis très longtemps.

En conséquence, nous - et tout le monde - avons des attentes très claires quant à l'apparence des liens. Des attentes qui, si elles ne sont pas satisfaites, peuvent empêcher les gens de reconnaître les liens pour ce qu'ils sont. Pour cette raison, lorsque vous travaillez sur la conception de votre site Web, vous feriez bien de rester proche de ces attentes.

Concrètement cela signifie :

  • Assurez-vous que les liens sont mis en évidence d'une manière ou d'une autre. Les couleurs ou le soulignement sont tous acceptables tant que vous faites ressortir les liens sur la page. Évitez les choses comme les italiques ou les caractères gras .
  • Fournissez des commentaires en faisant en sorte que les liens changent lorsqu'ils sont survolés et, dans une moindre mesure, cliqués ( a:active , vous vous souvenez ?). Vous ne devez pas non plus jouer avec le curseur qui se transforme en symbole de main pour signifier un élément interactif.

Dans ce qui suit, nous vous expliquerons comment modifier tout ce qui précède. Cependant, gardez à l'esprit que vous devez le faire avec modération pour éviter de frustrer vos utilisateurs.

Comment changer le style de votre texte de lien via CSS

Parlons d'abord de la façon de modifier la partie texte du lien, car c'est ce qui en constitue la substance.

Modification de la couleur du texte du lien

Les choses que nous couvrons dans cette section sont relativement similaires à notre article sur la façon de déclarer des couleurs via CSS. Donc, si vous voulez vraiment entrer dans les détails, je vous conseille également de jeter un œil à cet article.

Vous pouvez changer la couleur du texte du lien de plusieurs manières différentes : mots de couleur et différents systèmes de notation de couleur comme le code HEX, rgb() / rgba() , hsl() / hsla() , etc.

 #link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb(61, 76, 128); }

Voici à quoi ressemble ce qui précède sur la page :

changer la couleur du lien via des exemples CSS

Le plus souvent, vous utiliserez quelque chose comme HEX ou rgb() . L'utilisation de noms de couleurs est extrêmement rare en dehors de cas de test simples.

Le système de couleurs que vous utilisez dépend de différents facteurs tels que la compatibilité du navigateur ou si vous avez besoin ou non de transparence. Cependant, comme vous pouvez le constater, l'attribution de couleurs aux liens est assez simple via la propriété color et cela fonctionne de la même manière pour tous les autres états de lien. Par conséquent, vous pouvez également facilement changer la couleur du texte pour :hover ou :focus .

Ajuster la couleur d'arrière-plan

En plus de changer la couleur du texte, vous pouvez également modifier la couleur de fond de vos liens et leurs différents états. C'est aussi simple que d'utiliser la propriété background-color .

couleur d'arrière-plan du lien de style via un exemple css

Voici le balisage pour l'exemple ci-dessus :

 #link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { background-color: rgb(61, 76, 128); color: #fff; }

Autres options de style de texte

Puisque les liens ne sont rien d'autre que du texte, toutes les autres façons de styliser le texte en CSS s'appliquent également à eux. Cela signifie que vous pouvez attribuer d'autres propriétés aux liens et à leurs différents états et leur faire modifier la taille de la police, les familles de polices ou d'autres éléments lorsque les utilisateurs les survolent.

style css de lien alternatif

Cela peut avoir du sens pour certaines conceptions, cependant, ce sont des moyens moins courants de styliser les liens via CSS.

Voici le balisage pour obtenir les effets ci-dessus :

 #link-one { background-color: #fadbd8; color: red; font-family: Arial; } #link-two { color: #3af278; font-weight: 600; text-transform: uppercase; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { font-size: 36px; }

Travailler avec le soulignement

Comme nous l'avons appris au début, les liens sont soulignés par défaut. Si vous voulez vous débarrasser de cela, vous pouvez utiliser text-decoration: none; (qui est l'utilisation la plus courante de la propriété text-decoration ).

 a { text-decoration: none; }

Certaines personnes préfèrent également ajouter un soulignement uniquement au survol, mais pas pour le lien normal. C'est aussi facile à faire.

 a { text-decoration: none; } a:hover { text-decoration: underline; }

De plus, vous pouvez utiliser border: bottom; au lieu de text-decoration: underline; pour ajouter une ligne sous vos liens. Les gens avaient l'habitude de l'employer parce qu'il offrait de meilleures options de style. Cependant, ces jours-ci, nous avons de nouvelles propriétés pour la méthode de underline standard qui permettent davantage de personnalisations.

Par exemple, text-underline-offset vous permet de contrôler la distance entre le texte et la ligne en dessous lors de l'utilisation text-decoration . text-decoration-thickness vous permet de définir une largeur de ligne personnalisée. Ainsi, emprunter la route de la border n'est plus aussi nécessaire qu'avant.

En dehors de cela, il existe de nombreuses façons de travailler avec la ligne sous les liens, y compris l'animation. Vous pourriez probablement écrire un autre article à ce sujet.

Changer le style du curseur au survol

Comme nous en avons déjà parlé, lorsque vous survolez un lien, le curseur de la souris passe d'une petite flèche à une petite main qui pointe.

le curseur se transforme en pointeur au survol 10

À présent, c'est le signe universel que vous avez affaire à un élément HTML cliquable. Cependant, vous ne savez peut-être pas que vous pouvez également changer le curseur pour d'autres choses, d'un réticule sur des flèches de redimensionnement à un indicateur de chargement.

 a { cursor: crosshair; } a { cursor: move; } a { cursor: wait; } a { cursor: n-resize; } a { cursor: grab; }

Si vous êtes curieux, essayez ce qui précède dans un environnement de développement local pour voir leur effet. Il y a beaucoup plus d'options, que vous pouvez trouver ici.

Cependant, comme le pointeur est si universel, c'est certainement ce à quoi les utilisateurs s'attendent et vous devriez généralement vous en tenir à cela. Si, pour une raison quelconque, cela ne fonctionne pas pour vos liens, vous pouvez le corriger avec le morceau de code suivant :

 a { cursor: pointer; }

Il est même possible d'utiliser des images personnalisées si vous souhaitez utiliser vos propres curseurs sur votre site Web. Par exemple, une boutique en ligne allemande de produits musicaux utilise son propre curseur à thème.

exemple de curseur de survol personnalisé

Si vous examinez comment ils le font via les outils de développement de votre navigateur, vous trouverez le morceau de code suivant :

 a { cursor: url(../images/hand.cur),pointer; }

Comme vous pouvez le voir, vous pouvez simplement utiliser un curseur personnalisé en fournissant l'adresse d'un fichier image.

Apporter des modifications à a:focus

Le style de mise au focus est une aide à l'accessibilité importante, alors assurez-vous qu'il reste là. Par défaut, la surbrillance se produit via la propriété outline , qui fait apparaître une boîte autour d'elle.

exemple de plan de lien par défaut

Pourquoi outline et non border demandez-vous ?

Parce que le outline ne prend pas de place sur la page. Il se trouve au-dessus de l'arrière-plan de l'élément à la place. De cette façon, la mise au point d'un lien ne modifie pas les sauts de mise en page ou similaires.

Alors, quelles autres options de style avez-vous pour un lien ciblé ?

Beaucoup d'entre eux. Il prend tout, de background-color à color , font-size , box-shadow , etc.

lien de mise au point de style via des exemples CSS

Voici comment réaliser ce qui précède :

 #link-one:focus { color: red; } #link-two:focus { box-shadow: 0 0 14px 0px; } #link-three:focus { font-size: 36px; }

En utilisant a:focus , vous pouvez faire pratiquement tout ce que vous voulez. L'une des applications les plus intéressantes, cependant, pourrait être que vous pouvez également personnaliser simplement la valeur par défaut du navigateur à l'aide de la propriété outline .

 a:focus { outline: 3px dotted green; }

Voici à quoi ressemble ce qui précède sur la page :

aperçu du lien de mise au point de style via un exemple css

Lier les boutons et les boîtes

Bien entendu, les liens ne sont pas que des liens textuels. À certains endroits, ils apparaissent souvent sous forme de boîtes, telles que des menus de navigation, des parties de formulaires ou des appels à l'action.

lien comme exemple de bouton

Ce n'est pas trop difficile à réaliser. Fondamentalement, il vous suffit de trouver des moyens d'ajouter de l'espace autour du texte du lien et de fournir un arrière-plan ou une bordure/contour afin de le faire apparaître sous forme de bouton ou de boîte. En dehors de cela, ils sont toujours le même élément de lien que nous utilisions auparavant.

Il existe plusieurs façons d'y parvenir, du simple ajout de rembourrage à des systèmes tels que flexbox ou grid. Vous trouverez ci-dessous un exemple de la façon dont vous pouvez le faire, il existe de nombreuses autres options.

 a { background-color: #1a0dab; color: #fff; padding: 1.5rem; }

Dans ce cas, le CSS contient à la fois le style du lien ainsi que le conteneur dans lequel il réside. Bien sûr, vous pouvez utiliser les mêmes états de lien qu'avant pour inclure un comportement différent pour différents scénarios.

Inclure des icônes dans vos liens

Une chose rapide qui mérite une explication est que vous avez également la possibilité d'inclure des icônes dans vos liens. C'est ce que certaines personnes font pour qu'il soit encore plus clair que quelque chose est un lien sortant qui éloignera les utilisateurs de la page actuelle.

ajouter une icône à un lien externe via un exemple CSS
Source des icônes : Icons8

Voici comment procéder. D'abord le HTML :

 <a id=link-one href="#">Link Text</a> <a id=link-two href="#">Link Text</a> <a id=link-three href="https://wikipedia.org/">Link Text</a>

Ensuite, le CSS :

 a[href^="http"] { background: url('external-link-icon.png') no-repeat right center; background-size: 16px 16px; padding-right: 15px; }

Le a[href^="http"] cible uniquement les balises d'ancrage dont l'adresse commence par http dans href="" . À ceux-ci, le balisage ajoute une image d'arrière-plan, qui est l'icône, la définit comme non répétée, la déplace complètement vers la droite et la centre verticalement. Le reste du balisage définit la taille de l'icône et crée un peu d'espace entre celle-ci et le texte.

Réflexions finales : style CSS pour les liens

Changer le style des liens via CSS n'est pas si difficile une fois que vous maîtrisez les bases. La partie la plus importante est de comprendre qu'ils prennent différents états ciblés par différents opérateurs et pseudo-classes. Après cela, il s'agit simplement d'utiliser les propriétés CSS courantes pour modifier leur conception en tout ce que vous voulez. Vous avez maintenant toutes les informations dont vous avez besoin pour commencer.

Quelle est votre façon préférée de styliser les liens via CSS ? D'autres astuces à partager ? Merci de le faire dans les commentaires !