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

Comment définir le style des liens hypertexte avec CSS

王林
Libérer: 2021-06-21 09:16:16
original
5968 Les gens l'ont consulté

La façon de définir le style du lien hypertexte en CSS est d'ajouter des pseudo-classes au lien hypertexte, telles que [a:visited {color:#00FF00;}]. [a:visited] indique les liens que l'utilisateur a visités.

Comment définir le style des liens hypertexte avec CSS

L'environnement d'exploitation de cet article : système Windows 10, CSS 3, ordinateur thinkpad t480.

Si nous voulons définir le style d'un lien hypertexte, nous pouvons en fait utiliser n'importe quel attribut CSS, tel que la couleur, la police, l'arrière-plan, etc. Mais si vous souhaitez définir un style spécial, vous devez utiliser des pseudo-classes. Jetons un coup d'œil ensemble aux pseudo-classes.

Conseil : Les liens spéciaux peuvent avoir des styles différents, en fonction de leur statut.

Les quatre statuts du lien sont :

  • a:link - lien normal, non visité

  • a: visité - le lien que l'utilisateur a visité

  • a:hover - lorsque l'utilisateur passe la souris sur le lien

  • a:active - le lien est au moment où vous cliquez sur

Exemple de code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p>
<p><b>注意:</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>
Copier après la connexion

Jetons un coup d'œil à l'effet de course :

Comment définir le style des liens hypertexte avec CSS

Recommandations associées : Tutoriel vidéo CSS

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!

Étiquettes associées:
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