Lien CSS

Styliser les liens avec CSS

Les liens ou hyperliens sont une partie essentielle d'un site Web. Il permet aux visiteurs de naviguer sur le site. Par conséquent, le style des liens est un aspect important de la création d'un site Web convivial.

Consultez le tutoriel sur les liens HTML pour en savoir plus sur les liens et comment les créer.

Un lien a quatre états différents : link, visited, active et hover . Ces quatre états d'un lien peuvent être stylisés différemment en utilisant les sélecteurs de pseudo-classe d'ancre suivants.

• a:link — définit les styles pour les liens normaux ou non visités.
• a:visited — définit les styles des liens que l'utilisateur a déjà visités.
• a:hover — définit les styles d'un lien lorsque l'utilisateur place le pointeur de la souris dessus.
• a:active — définit les styles des liens lorsqu'ils sont cliqués.

Vous pouvez spécifier n'importe quelle propriété CSS que vous souhaitez, par exemple color, font, background, border, etc. à chacun de ces sélecteurs pour personnaliser le style des liens, comme vous le feriez avec le texte normal.

a:link {    /* lien non visité */
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
}
a:visited {    /* lien visité */
    color: #ff00ff;
}
a:hover {    /* quand la souris passe au dessus */
    color: #00ff00;
    border-bottom: none;
}
a:active {    /* lien actif */
    color: #00ffff;
}

L'ordre dans lequel vous définissez le style pour les différents états des liens est important, car ce qui est définit le dernier a plus de priorité sur les règles de style définies précédemment.

Remarque : En général, l'ordre des pseudo-classes doit être le suivant — :link, :visited, :hover, :active, :focus pour qu'elles fonctionnent correctement.

 

Modification des styles de lien standard

Dans tous les principaux navigateurs Web tels que Chrome, Firefox, Safari, etc., les liens sur les pages Web sont soulignés et utilisent les couleurs de lien par défaut du navigateur, si vous ne définissez pas les styles exclusivement pour eux.

Par défaut, les liens texte apparaîtront comme suit dans la plupart des navigateurs :

• Un lien non visité sous forme de texte bleu souligné.
• Un lien visité sous forme de texte violet souligné.
• Un lien actif sous forme de texte rouge souligné.

Cependant, il n'y a aucun changement dans l'apparence du lien en cas d'état de survol. Il reste bleu, violet ou rouge selon l'état (c'est-à-dire non visité, visité ou actif) dans lequel ils se trouvent.

Voyons maintenant comment personnaliser les liens en remplaçant son style par défaut.

Définition de la couleur personnalisée des liens

Utilisez simplement la propriété CSS color pour définir la couleur de votre choix pour les différents états d'un lien. Mais lors du choix des couleurs, assurez-vous que l'utilisateur peut clairement différencier le texte normal des liens.

Essayons l'exemple suivant pour comprendre comment cela fonctionne :

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

Suppression du soulignement par défaut des liens

Si vous n'aimez pas le soulignement par défaut sur les liens, vous pouvez simplement utiliser lapropriété CSS  text-decoration  pour vous en débarrasser. Alternativement, vous pouvez appliquer d'autres styles sur les liens comme la couleur d'arrière-plan, la bordure inférieure, la police en gras, etc. pour le faire ressortir un peu mieux du texte normal.

L'exemple suivant montre comment supprimer ou définir le soulignement pour différents états d'un lien.

a:link, a:visited {
    text-decoration: none; 
}
a:hover, a:active {
    text-decoration: underline;
}

Faire en sorte que les liens textuels ressemblent à des boutons

Vous pouvez également faire en sorte que vos liens de texte ordinaires ressemblent à des boutons en utilisant CSS. Pour ce faire, nous devons utiliser quelques propriétés CSS supplémentaires telles que background-color, border, display, padding, etc. Vous découvrirez ces propriétés en détail dans les chapitres à venir.

Examinons l'exemple suivant et voyons comment cela fonctionne vraiment :

 

a:link, a:visited {
    color: white;    
    background-color: #1ebba3;    
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #099983;
    text-decoration: none;
    text-align: center;
    font: 14px Arial, sans-serif;  
}
a:hover, a:active {
    background-color: #9c6ae1;
    border-color: #7443b6;
}