Maison >interface Web >tutoriel HTML >HTML définit la couleur de la police du lien hypertexte et la couleur de la police après le clic
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; }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 :
a:link, a:visited { color:#FF0000; text-decoration:underline; } a:hover, a:active { color:#000000; text-decoration:none; }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 :
#sidebar a:link, #sidebar a:visited { color:#FF0000; text-decoration:none; } #sidebar a:hover, #sidebar a:active { color:#000000; text-decoration:underline; }Méthode d'appel :
8bd8f5f601bef3de2be1c11f4668a4f0a92b59c46ea1b4afbcfca3f148a49c19Lien vers Script Home3499910bf9dac5ae3c52d5ede738348594b3e26ee717c64999d7867364b1b4a3
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; }Méthode d'appel :
e388a4556c0f65e1904146cc1a846bee8437831b0cfec3078ae976566a18b189Lien vers Script House 13499910bf9dac5ae3c52d5ede738348594b3e26ee717c64999d7867364b1b4a3
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!