Lien CSS (lien)


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 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

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="http://www.php.cn/css/css-css_tutorial.html" 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écuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" Afficher en ligne Instance

Lorsqu'elle est définie sur le style de plusieurs états de lien, il existe également quelques règles d'ordre :

  • a:hover doit être suivi d'un:link et a:visited

  • a:active doit être suivi de a:hover

Styles de liens courants

Basé sur l'exemple de changement de couleur lié ci-dessus, voyez dans quel état il se trouve.

Passons au style des liens avec d'autres méthodes courantes :

Décoration de texte

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

Instance

<!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="http://www.php.cn/css/css-css_tutorial.html" 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écuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Couleur d'arrière-plan

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

Instance

<!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="http://www.php.cn/css/css-css_tutorial.html" 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>

Instance en cours d'exécution»

Cliquez sur le bouton « Exécuter l'instance » pour afficher des exemples en ligne

Plus d'exemples

Exemples : ajoutez 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="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes text-decoration</a></b></p>
</body>

</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Ceci L'exemple montre comment ajouter un lien hypertexte Autres styles.

Instance : Avancé - 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="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This is a link</a>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Cet exemple montre un exemple plus avancé où nous combinons plusieurs propriétés CSS pour afficher une boîte.