Comment utiliser les pseudo-classes à des liens de style pour HTML5 et CSS3 programmation

Une fois que vous avez un peu de style allant dans vos pages web HTML5 et CSS3, vous pouvez être un peu préoccupé par la façon dont les liens sont laides. Les styles de lien par défaut sont utiles, mais ils peuvent ne pas correspondre à votre schéma de couleurs.

Sommaire

  • Les pseudo-classes et liens
  • Comment faire pour coiffer un lien norme

    Ajout d'un style à un lien est facile. Après tout, (la balise qui définit liens) est juste une balise HTML, et vous pouvez ajouter un style à toute étiquette. Voici un exemple, où les liens sont en noir sur fond jaune:

    a {color: black-background-color: jaune}

    Cela fonctionne très bien, mais les liens sont un peu plus complexes que d'autres éléments. Liens ont fait trois déclare:

    • Normal: Ceci est l'état standard. En l'absence de CSS ajouté, la plupart des navigateurs affichent les liens non visités sous forme de texte bleu souligné.

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

    • Bougez: L'état stationnaire est activée lorsque la souris de l'utilisateur est longue sur l'élément. La plupart des navigateurs ne pas utiliser l'état stationnaire dans leurs paramètres par défaut.

    Si vous appliquez un style à la balises dans une page, le style est appliqué à tous les états de tous les ancres.

    Comment faire pour coiffer les Etats de liaison




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

    image0.jpg

    Jetez un oeil sur le code et voir comment il est fait:

    linkStates.html

    Les pseudo-classes et liens

    Ce lien est normal

    Ce lien a été visité

    La souris survole ce lien

    Rien de spécial au sujet des liens dans la partie HTML du code. Les liens changent leur état dynamique tandis que l'utilisateur interagit avec la page. La feuille de style détermine ce qui se passe dans les différents Etats. Voilà comment vous vous approchez de mettre le code ensemble:

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

      Si vous ne définissez pas d'autres pseudo-classes, tous les liens vont suivre le style de lien ordinaire.

    2. Faites un style pour les liens visités.

      Un lien sera utiliser ce style après ce site est visité lors de la session actuelle du navigateur. La a: visited sélecteur indique des liens qui ont été visités.

    3. Faites un style pour les liens survolés.

      La a: hover style est appliqué à la liaison uniquement lorsque la souris survole le lien. Dès que la souris quitte le lien, le style revient au style standard ou visité, le cas échéant.

    Les meilleures pratiques de liaison

    Lien styles ont des caractéristiques spéciales. Vous devez être un peu prudent lorsque vous appliquez des styles aux liens. Examiner les questions suivantes lors de l'application des styles aux liens:

    • L'ordre est important. Soyez sûrs de 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 savent que quelque chose est destinée à être un lien. Si vous enlevez le soulignement et la couleur qui indique normalement un lien, vos utilisateurs peuvent être confus. Généralement, vous pouvez changer les couleurs sans peine, mais les liens doivent être soit texte souligné ou quelque chose qui ressemble clairement à un bouton.

    • Test de liens visités. Test de liens visités est un peu délicat parce que, après avoir visité un lien, il reste visité. La plupart des navigateurs vous permettent d'effacer l'historique du navigateur, ce qui devrait également effacer les tats de liaison unvisited.

    • Ne pas changer la taille de police dans un état stationnaire. Hover modifie la page en temps réel. Un style de vol stationnaire avec une taille de police différente que le lien ordinaire peut causer des problèmes. La page est reformatée à accepter la police plus grande, qui peut se déplacer une grande quantité de texte à l'écran rapidement. Il est plus sûr de changer les couleurs ou les frontières sur le vol stationnaire, mais pas la taille de la famille de la police ou de la police.


    » » » » Comment utiliser les pseudo-classes à des liens de style pour HTML5 et CSS3 programmation