Comment utiliser les pseudo-classes aux liens de style pour la programmation HTML5 et CSS3

Une fois que vous avez du style dans vos pages Web HTML5 et CSS3, vous êtes peut-être un peu inquiet de la qualité des liens. Les styles de liens par défaut sont utiles, mais ils peuvent ne pas correspondre à votre modèle de couleurs.

Comment styliser un lien standard

Ajouter un style à un lien est facile. Après tout, (la balise qui définit les liens) est juste une balise HTML, et vous pouvez ajouter un style à n'importe quelle balise. Voici un exemple, où les liens sont noirs avec un fond jaune:

a {couleur: noir; background-color: yellow;}

Cela fonctionne bien, mais les liens sont un peu plus complexes que d'autres éléments. Les liens ont trois états :

• Normal: C'est l'état standard. En l'absence de CSS, la plupart des navigateurs affichent des liens non vus comme du texte souligné en bleu.

• Visité: Cet état est activé lorsque l'utilisateur visite un lien et revient à la page en cours. La plupart des navigateurs utilisent un style souligné en violet pour indiquer qu'un lien a été visité.

• Hover: L'état du survol est activé lorsque la souris de l'utilisateur reste sur l'élément. La plupart des navigateurs n'utilisent pas l'état Hover dans leurs paramètres par défaut.

Si vous appliquez un style aux étiquettes d'une page, le style est appliqué à tous les états de toutes les ancres.

Comment styliser les états de lien

Vous pouvez appliquer un style différent à chaque état. Dans cet exemple, les liens sont noirs sur fond blanc. Un lien visité est noir sur jaune; et, si la souris survole un lien, le lien est blanc avec un fond noir.

Regardez le code et voyez comment c'est fait:

linkStates. html a {couleur: noir; background-color: white;} a: visité {couleur: noir; background-color: # FFFF33;} a: hover {couleur: blanc; background-color: black;}

Pseudo-classes et liens
Ce lien est normal
Ce lien a été visité
La souris plane sur ce lien

Rien n'est spécial à propos des liens dans la partie HTML du code. Les liens changent d'état dynamiquement pendant que l'utilisateur interagit avec la page. La feuille de style détermine ce qui se passe dans les différents états. Voici comment vous pouvez rapprocher le code:

1. Déterminez d'abord le style de lien ordinaire en créant un style pour le tag.

   Si vous ne définissez aucune autre pseudo-classe, tous les liens suivront le style de lien ordinaire.

2. Crée un style pour les liens visités.

   Un lien utilisera ce style après la visite de ce site pendant la session de navigation en cours. Le sélecteur a: visited indique les liens qui ont été visités.

3. Crée un style pour les liens pointés.

   Le style a: hover est appliqué au lien uniquement lorsque la souris survole le lien. Dès que la souris quitte le lien, le style revient au style standard ou visité, selon le cas.

Meilleures pratiques de liaison

Les styles de lien ont des caractéristiques spéciales. Vous devez être un peu prudent lorsque vous appliquez des styles à des liens. Tenez compte des problèmes suivants lors de l'application de styles à des liens:

• La commande est importante. Veillez à définir l'ancre ordinaire en premier. Les pseudo-classes sont basées sur le style d'ancrage standard.

• Assurez-vous qu'ils ressemblent toujours à des liens. Il est important que les utilisateurs sachent que quelque chose est censé être un lien. Si vous supprimez le soulignement et la couleur qui indique normalement un lien, vos utilisateurs peuvent être confus. Généralement, vous pouvez changer de couleur sans problème, mais les liens doivent être soit du texte souligné soit quelque chose qui ressemble clairement à un bouton.

• Testez les liens visités. Le test des liens visités est un peu délicat car, après avoir consulté un lien, il reste affiché. La plupart des navigateurs vous permettent de supprimer l'historique du navigateur, ce qui devrait également effacer les états de liens pour qu'ils ne soient pas consultés.

• Ne modifiez pas la taille de la police dans un état stationnaire. Le survol modifie la page en temps réel. Un style de pointage avec une taille de police différente de celle du lien ordinaire peut entraîner des problèmes. La page est reformatée pour accepter la plus grande police, ce qui peut déplacer une grande quantité de texte sur l'écran rapidement. Il est plus sûr de changer les couleurs ou les bordures en survol, mais pas la famille de police ou la taille de la police.