Maison > interface Web > tutoriel HTML > le corps du texte

HTML définit la couleur de la police du lien hypertexte et la couleur de la police après le clic

巴扎黑
Libérer: 2017-06-03 13:53:57
original
8097 Les gens l'ont consulté

CSS prépare des outils spécifiques pour certains effets spéciaux, que nous appelons « pseudo-classes ». Il y en a plusieurs que nous utilisons souvent. Ci-dessous, nous présenterons en détail les quatre pseudo-classes qui sont souvent utilisées pour définir les styles de liens. Définir les styles de liens
CSS fournit des outils spécifiques pour certains effets spéciaux, que nous appelons « pseudo-classes ». Il y en a plusieurs que nous utilisons souvent. Ci-dessous, nous présenterons en détail les quatre pseudo-classes qui sont souvent utilisées pour définir les styles de liens. Ce sont :
:link
:visited
:hover :active
Puisque nous voulons définir le style du lien, la balise d'ancrage dans le lien hypertexte - a est essentielle. La méthode d'écriture de la balise d'ancrage et du lien pseudo-classe est la méthode de base pour définir le style du lien. la méthode d'écriture est la suivante :
a:link, définit le style des liens normaux ;
a:visited, définit le style des liens visités
a:hover, définit le style lorsque la souris survole ; le lien ;
a:active, définit le style lorsque la souris clique sur le lien.
Exemple :
Le code est le suivant :

a:link { 
color:#FF0000; 
text-decoration:underline; 
} 
a:visited { 
color:#00FF00; 
text-decoration:none; 
} 
a:hover { 
color:#000000; 
text-decoration:none; 
} 
a:active { 
color:#FFFFFF; 
text-decoration:none; 
}
Copier après la connexion
La couleur du lien définie dans l'exemple ci-dessus est rouge, le lien visité est vert, lorsque la souris survole le lien, il est noir et la couleur lorsque vous cliquez dessus est blanche.

Si le lien normal et le lien visité ont le même style, et que les styles de survol et de clic de la souris sont les mêmes, ils peuvent également être combinés et définis :

Le code est le suivant :

a:link, 
a:visited { 
color:#FF0000; 
text-decoration:underline; 
} 
a:hover, 
a:active { 
color:#000000; 
text-decoration:none; 
}
Copier après la connexion
L'ordre des définitions de liens

Il n'y a pas de règles sans règles. Bien que la définition de lien soit écrite, elle a aussi des règles. Si l'ordre d'écriture de ces quatre éléments est légèrement erroné, l'effet est obtenu. du lien peut être perdu, donc chaque fois que vous définissez les styles de lien pour la première fois, assurez-vous de confirmer l'ordre de définition, lien--visité--survol-actif, ce que nous appelons souvent le principe LoVe HAte (le majuscule les lettres sont leurs premières lettres).
Définir le style de lien local
Écrire une définition comme a:link{} en CSS changera le style de lien de la page entière, mais certains liens locaux doivent être spécialisés. Ce problème n'est pas difficile à résoudre, tant que cela est nécessaire. comme lien Ajoutez simplement l'identifiant ou la classe spécifié devant la définition de style.
Exemple :

Le code est le suivant :

#sidebar a:link, 
#sidebar a:visited { 
color:#FF0000; 
text-decoration:none; 
} 
#sidebar a:hover, 
#sidebar a:active { 
color:#000000; 
text-decoration:underline; 
}
Copier après la connexion
Méthode d'appel :


La méthode de définition de la classe est la même que celle de l'identifiant, remplacez simplement #sidebar par . sidebar. , et une autre méthode consiste à définir directement le style de lien, qui est plus direct, mais il est plus difficile à appeler et vous devez ajouter du code défini à chaque lien spécifique.
Exemple :
Le code est le suivant :

 a.redlink a:link, 
a.redlink a:visited { 
color:#FF0000; 
text-decoration:none; 
} 
a.redlink a:hover, 
a.redlink a:active { 
color:#000000; 
text-decoration:underline; 
background:#FFFFFF; 
}
Copier après la connexion
Méthode d'appel :

Lien vers Script House 1


La définition d'un lien a principalement trois attributs, la couleur (color), la décoration du texte (text- décoration) et fond

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!