Lien CSS

Liens CSS

Différents liens peuvent avoir des styles différents.

Style de lien

Le style de lien peut utiliser n'importe quelle propriété CSS (telle que la couleur, la police, l'arrière-plan, etc.).

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

Les quatre statuts des liens sont :

a:lien - lien normal, non visité

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

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

a:active - au moment où le lien est cliqué

<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;}    /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}  /* 正在被点击的链接 */
</style>
</head>
<body>
<p><b><a href="#" 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>

Lorsqu'il est défini sur des styles pour plusieurs états de lien, il existe également des règles de séquence :

a:hover doit suivre a:link et a:visited

a:active doit suivre a:hover

Styles de liens courants

En vous basant sur l'exemple du changement de couleur du lien ci-dessus, voyez dans quel état il se trouve.

Passons maintenant à lier les styles par d'autres moyens courants :

Text-decoration

text-decoration Attribut principal Utilisé pour supprimer les traits de soulignement des liens :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
a:link {background-color:#B2FF99;}    /* unvisited link */
a:visited {background-color:#FFFF85;} /* visited link */
a:hover {background-color:#FF704D;}   /* mouse over link */
a:active {background-color:#FF704D;}  /* selected link */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">点击链接</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <style> a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被点击的链接 */ </style> </head> <body> <a href="#" target="_blank">这是一个链接</a> 注释：为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！ 注释：为了使定义生效，a:active 必须位于 a:hover 之后！！ </body> </html>

soumettre Réinitialiser le code

Opération automatique

Lien CSS

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]