Comment utiliser CSS pour styliser des hyperliens sur des pages Web

Mai 14, 2024

Si vous connaissez le HTML, vous savez que vous pouvez contrôler la couleur du texte et des hyperliens sur une page Web. Mais avec les feuilles de style en cascade, vous pouvez faire beaucoup plus. Certaines balises telles que la balise d'ancrage de lien hypertexte ont ce qu'on appelle des pseudo-classes associées aux différents états de la balise. Par exemple, la balise de lien hypertexte a quatre états; lien, visité, plané et actif.

Lorsqu'un lien n'est pas utilisé (non sélectionné), c'est le lien pseudo-classe ou état. le a visité est après que le lien a été utilisé. le flotter état est lorsque la souris passe sur le lien et le actif l'état est lorsque vous cliquez sur le lien. La magie du CSS est que chaque état du lien est contrôlé indépendamment via des pseudo-classes. Vous pouvez donc définir différentes propriétés pour chaque état. Vous pouvez utiliser n'importe quelle propriété associée à la balise d'ancrage de lien hypertexte en CSS.

Dans l'exemple ci-dessous, nous allons définir l'état du lien sur rouge, l'état visité sur violet (# 400040), le survol et les états actifs sur rouge, souligné et italique.

Remarque--La flèche

indique que le code est encapsulé sur une deuxième ligne et devrait vraiment être tout sur une seule ligne.

Comme vous pouvez le voir, nous avons défini la propriété color sur rouge pour tous les états, à l'exception de l'état visité, que nous avons défini sur violet. Étant donné que nous voulons uniquement que le lien hypertexte soit souligné pour les états de survol et actif, nous avons défini la propriété text-decoration sur none pour les deux autres états. Enfin, nous avons défini le style de police en italique pour le survol et les états actifs, ce qui fera que le texte deviendra italique lorsque vous passerez ou cliquez sur le lien, et nous avons redéfini la décoration du texte pour la souligner. Ce n'est qu'un exemple simple. Vous pouvez rendre vos styles aussi simples ou aussi fantaisistes que vous le souhaitez. Cependant, il y a quelques points à retenir.

Les navigateurs Web diffèrent dans la façon dont ils gèrent cela. Habituellement, si vous définissez une propriété sur une certaine valeur, elle sera héritée par (transmise à) tous les états répertoriés après celle-ci. Dans notre exemple ci-dessus, le premier état répertorié dans notre code était l'état du lien et nous avons défini la propriété color sur rouge. La plupart du temps, cela serait transmis aux trois autres États, sauf si nous le modifions avec le code, comme nous l'avons fait pour l'État visité. De plus, si nous n'avions pas remis la décoration de texte en surbrillance, le texte des états de survol et actifs n'aurait pas été souligné car nous l'avons désactivé dans le premier état. Mais vous ne pouvez pas compter sur tous les navigateurs pour ce faire. Par conséquent, il est préférable de définir individuellement toutes les propriétés de chaque état.

Lorsque vous créez des liens fantaisistes, n'effectuez pas de grands changements entre les états, par exemple en augmentant considérablement la taille du texte. Cela entraînera le navigateur Web pour recharger la page et vos visiteurs seront très en colère contre vous.

L'ordre dans lequel vous répertoriez le code de ces pseudo-classes est influencé par l'ordre en cascade. Nous discuterons de l'ordre en cascade dans un tutoriel ultérieur. Pour l'instant, rappelez-vous simplement que pour éviter les conflits, codez les états dans l'ordre que nous avons utilisé ci-dessus; lien, visité, plané et actif.

Instructions Vidéo: 9 - HTML & CSS - Appliquer un style CSS (Mai 2024).

Comment utiliser CSS pour styliser les hyperliens Sur les pages Web, HTML, pseudo-classes associées aux différents états de la balise, pseudo-classe, hyperlien, codage des hyperliens en CSS, pseudo-classe CSS, états CSS, état d'une balise, liens fantaisie sur une page Web avec CSS, des liens fantaisistes

Article Précédent

Article Suivant

Articles Connexes

des ordinateurs

Magnetica - Zuma pour la DS

Mai 2024

Je suis vraiment surpris qu'ils n'aient pas seulement nommé ce jeu Zuma. Il est EXACTEMENT comme le jeu de marbre magnétique gratuit sur MSN Games - également disponible sur la liste de...

des ordinateurs

Tribes 2 est un multijoueur génial

Mai 2024

Des jeux comme Day of Defeat ont poussé l'enveloppe multijoueur de l'équipe, mais Tribes 2 brille vraiment comme l'un des meilleurs dans le domaine. Les développeurs ont travaillé dur pour créer...