Comment créer des styles de lien hypertexte avec les pseudo-classes dans des feuilles de style en cascade (CSS)

Un des usages les plus courants de styles composés de feuilles de style en cascade (CSS) est de créer des hyperliens avec les pseudo-classes, qui peuvent être utilisés pour modifier la couleur et les attributs de liens hypertextes par défaut.

Le style pseudo-classe composé de lien hypertexte peut être écrit comme un sélecteur à deux partie où la balise d'ancrage est séparée par une virgule suivie du nom de l'état de lien, comme dans un lien, a: visited, a: hover, et a: active.

L'apparition d'un lien hypertexte est déterminée par l'interactivité avec un visiteur dans un navigateur:

Liens normaux sont les liens non visités.
Les liens visités sont des liens que le visiteur a déjà cliqué.
Liens Hover changer leur apparence quand un visiteur passe le curseur sur eux.
Les liens actifs changer leur apparence seulement comme un visiteur clique directement sur un lien, avant de relâcher le bouton de la souris.

Comme vous le savez peut-être, tous les liens hypertextes par affichage par défaut soit dans le texte en bleu souligné (lien non visité) ou texte souligné violet (liens visités). Parce que ces couleurs ne sont pas susceptibles de faire correspondre les couleurs particulières dans la conception de votre site, vous pouvez remplacer les styles de lien par défaut en créant styles lien hypertexte personnalisé.

Encore mieux, en plus des états de lien hypertexte non visités et les plus visités, avec CSS, vous pouvez ajouter des styles pour les deux états de lien hypertexte supplémentaires, à savoir, l'état stationnaire, ce qui se produit quand un visiteur souris sur un lien, et l'état actif, qui apparaît lorsque un visiteur clique sur un lien.

Pour changer juste la couleur d'un lien hypertexte pour tous les quatre états de liens, ajouter les définitions de style suivantes à votre CSS, remplaçant les valeurs hexadécimaux dans cet exemple avec vos valeurs de couleur souhaitées pour chacun des styles de lien:

a: link {color: # CC0000-} a: visited {color: # 339933-} a: hover {color: # 000000-} a: active {color: # 99CC33-}

Pour rendre les choses intéressantes en outre, vous pouvez ajouter des déclarations de style supplémentaires pour tout ou tous les quatre Etats de liaison. Par exemple, vous voudrez peut-être supprimer le soulignement, ajouter une couleur de fond, ou appliquer une bordure en pointillés autour du lien hypertexte, comme démontré ici et ci-dessous:

a: link {color: # CC0000-} a: visited {color: # 339933-text-decoration: none;} a: hover {color: # 000000-background-color: # 0CC-} a: active {color: # ffffff-text-decoration: none; border: pointillé # CCC-background-color 2px: # 000-}

Lors de la création de ces styles de lien, vous devez prendre soin que chaque style est ajouté à la CSS dans le même ordre, il sera expérimenté sur un site Web par un visiteur du site: lien, visité, en vol stationnaire, active.

Si les styles sont ajoutés à la CSS de l'ordre, les styles de liaison peuvent ne pas fonctionner correctement lorsqu'il est affiché dans un navigateur. Par conséquent, prendre l'habitude de créer l'état de lien normal, puis ajouter l'état visité suivie par l'état stationnaire, et enfin l'état actif, comme le montre l'exemple précédent.

A propos Auteur

Comment créer un lien hypertexte vers une autre présentation PowerPoint 2013 ou site web

Hyperliens dans PowerPoint 2013 ne sont pas limités à diapositives de la présentation actuelle. Des liens hypertextes peuvent conduire à d'autres présentations. Lorsque vous utilisez ce type de lien hypertexte, une personne regardant le…

Comment créer un lien hypertexte vers une autre diapositive dans PowerPoint 2007

Un lien hypertexte de PowerPoint est texte ou un graphique que vous cliquez pour appeler une autre diapositive PowerPoint ou une présentation ou un document Word ou Excel. Votre PowerPoint lien hypertexte peut aussi conduire à une page sur le…

Comment créer un lien hypertexte Internet dans Word 2007

Vous pouvez configurer Word 2007 pour créer automatiquement des hyperliens Internet dans un document. Avec ce réglage auto-lien-création, Word recherche texte qui ressemble à une URL, puis souligne, les couleurs, et active le lien (en fait…

Connexion projets Microsoft avec des hyperliens

Dans Microsoft Project 2007, vous pouvez lier un projet à l'autre en utilisant un lien hypertexte. Un hyperlien vous permet de sauter du document actuellement affiché à un autre document sur votre disque dur, d'un réseau informatique ou…

Comment créer un lien hypertexte vers une autre présentation PowerPoint 2007

Création d'un lien hypertexte PowerPoint qui ouvre une autre présentation PowerPoint est un peu comme la création d'un lien hypertexte vers une autre diapositive de PowerPoint, mais avec des différences importantes de couple. Suivez ces étapes…

Comment insérer un lien hypertexte vers un site Web ou de fichiers dans Excel 2007

Vous pouvez insérer un lien hypertexte dans Excel 2007 que toute personne peut cliquer pour accéder à des sites Web ou d'autres fichiers ouverts. Le lien hypertexte peut apparaître dans une cellule de feuille de calcul, ou il peut être associé…

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…

Crystal Reports 10: ajout d'un lien hypertexte vers un rapport

Une des caractéristiques les plus précieuses de contenu Web est la capacité de se déplacer rapidement entre les pages à l'aide des liens hypertextes. En cliquant sur un lien hypertexte associé à un mot, une phrase, ou une image, vous pouvez…

Comment modifier des liens hypertexte dans iBooks Author

Il ya beaucoup de raisons d'ajouter des hyperliens à votre e-book. Vous voudrez peut-être un lien vers quelque chose en dehors de votre livre ou vous pouvez créer des références croisées au contenu à l'intérieur de votre e-book. Dans iBooks…

Comment faire pour coiffer les paragraphes, les titres, et les pieds avec CSS3

Lorsque vous êtes style paragraphes, titres, et pieds de page, la plupart des travaux peuvent être automatiquement accompli par la création de styles tag Redéfinir pour le tag et cependant de nombreuses balises de titre que vous souhaitez…

Comment faire pour coiffer listes et des tableaux avec CSS3

Listes de style et tables est un peu différent de coiffage contenu dans le corps de la page, parce que les deux listes et des tableaux ont des étiquettes spécifiques qui peuvent être redéfinis pour contrôler la façon dont le contenu se trouve…

Comment travailler avec les sélectionneurs de l'Etat dans CSS3

Il ya des situations dans lesquelles l'état dynamique d'un objet est important dans la mise en forme dans CSS3. En utilisant les sélecteurs de l'Etat peut aider un utilisateur à déterminer si les objectifs ont été atteints ou une…

Couleurs et les valeurs hexagonaux Nommé en html

Le tableau suivant contient une liste de noms de couleurs que vous pouvez utiliser en HTML et CSS code pour créer un site Web plus coloré. Les couleurs sont donnés avec leurs valeurs correspondantes de hexadécimal RVB et une nuance de couleur…

Comment insérer des liens hypertexte dans wordpress avec html

Vous voudrez probablement pour insérer un lien dans le corps d'un site WordPress - communément appelé un hyperlien, qui est une ligne de texte qui est ancré dans une adresse Web (URL) de sorte que le texte prend en cliquant sur un visiteur à un…

godiches.com » Internet & médias sociaux » Web design & développement » Pages web construction » Comment créer des styles de lien hypertexte avec les pseudo-classes dans des feuilles de style en cascade (CSS)