Lien CSS

Liens CSS

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

Style de lien

Style de lien, vous pouvez 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 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

Instance

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
</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>

Exécutez le programme et essayez-le

Lors de la définition des styles pour plusieurs états de lien, il existe également quelques règles d'ordre :

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

Styles de liens communs

Voir dans quel état il se trouve, d'après l'exemple de changement de couleur du lien ci-dessus.

Passons maintenant à lier les styles avec d'autres styles courants :

Décoration de texte

L'attribut text-decoration est principalement utilisé pour supprimer les soulignements dans les liens :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */
</style>
</head>

<body>
<p><b><a href="/css/" target="_blank">This is a link</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
</html>

Exécutez le programme pour voir

Couleur d'arrière-plan

L'attribut background color spécifie la couleur d'arrière-plan du lien :

     <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<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">This is a link</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
</html>

Exécutez le programme pour l'essayer

Plus d'exemples

Ajouter différents styles d'hyperliens

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        a.one:link {color:#ff0000;}
        a.one:visited {color:#0000ff;}
        a.one:hover {color:#ffcc00;}

        a.two:link {color:#ff0000;}
        a.two:visited {color:#0000ff;}
        a.two:hover {font-size:150%;}

        a.three:link {color:#ff0000;}
        a.three:visited {color:#0000ff;}
        a.three:hover {background:#66ff66;}

        a.four:link {color:#ff0000;}
        a.four:visited {color:#0000ff;}
        a.four:hover {font-family:monospace;}

        a.five:link {color:#ff0000;text-decoration:none;}
        a.five:visited {color:#0000ff;text-decoration:none;}
        a.five:hover {text-decoration:underline;}
    </style>
</head>

<body>
<p>将鼠标移至链接上改变样式.</p>

<p><b><a class="one" href="" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="" target="_blank">这个链接改变字体类型</a></b></p>
<p><b><a class="five" href="" target="_blank">这个链接改变文字修饰</a></b></p>
</body>

</html>

Exécutez le programme pour l'essayer

Exemple

Créer une boîte de liens

       <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a:link,a:visited
{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
}
a:hover,a:active
{
	background-color:#7A991A;
}
</style>
</head>

<body>
<a href="/css/" target="_blank">这是一个链接</a>
</body>
</html>

Exécutez le programme et essayez-le

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> a:link,a:visited { display:block; font-weight:bold; color:#FFFFFF; background-color: #64ce7a; width:120px; text-align:center; padding:4px; text-decoration:none; } a:hover,a:active { background-color: #c65355; } </style> </head> <body> <a href="" target="_blank">这是一个链接</a> </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]