Maison >interface Web >tutoriel CSS >Comment mettre en place des hyperliens dynamiques avec CSS (code ci-joint)
Comment mettre en place des hyperliens dynamiques avec CSS (code ci-joint)
- yuliaoriginal
- 2018-09-26 15:46:143567parcourir
Cet article vous présente principalement la méthode de définition de liens hypertextes dynamiques avec CSS. Il contient du code et une description textuelle, qui sont relativement faciles à comprendre. Les amis intéressés peuvent s'y référer.
En HTML, les hyperliens sont implémentés via la marque 3499910bf9dac5ae3c52d5ede7383485, et l'adresse spécifique utilise l'attribut href de la marque 3499910bf9dac5ae3c52d5ede7383485.
2027a75694c4961b064ca4941c50a15ale blog d'ali5db79b134e9f6b82c0b36e0489ee08ed
Par défaut, les hyperliens dans la navigation sont unifiés soit en bleu et soulignés, et le lien hypertexte cliqué est violet et également souligné.
CSS peut définir divers attributs des hyperliens, tels que les polices, les couleurs, les arrière-plans, etc., et peut créer de nombreux effets dynamiques via des pseudo-catégories.
Tout d'abord, supprimez le soulignement du lien hypertexte :
a{ text-decoration:none; }À ce stade, le lien hypertexte lui-même et le lien hypertexte cliqué sont soulignés.
Pseudo-catégorie CSS - Ancrer les pseudo-classes, utilisez une pseudo-catégorie pour créer des téléchargements dynamiques. Les attributs spécifiques sont les suivants :
A:link - le style normal de lien hypertexte, dans les navigateurs normaux. style.
A:visité - le style du lien hypertexte cliqué.
A:hover - le style lorsque le pointeur de la souris passe sur un lien hypertexte.
A:active - Le style du lien hypertexte lorsqu'on clique dessus, c'est-à-dire lorsqu'il est actuellement actif.
<html>
<head>
<title>
</title>
<style>
<!--
a:link{
color:#005799;
text-decoration:none;
}
a:visited{
color:#0000;
text-decoration:none;
}
a.hover{
color:#ffff00;
text-decoration:underline;
}
-->
</style>
</head>
<body>
<table width="600px"cellpadding="2" class="chara1" align="center">
<tr>
<td><a href="#">首页</a></td>
<td><a href="#">心情日记</a></td>
<td><ahref="#">Free</a></td>
<td><a href="#">一起走到</a></td>
<td><a href="#">从明天起</a></td>
<td><a href="#">纸飞机</a></td>
<td><a href="#">下一站</a></td>
</tr>
</table>
</body>
</html>Comme vous pouvez le voir, les hyperliens eux-mêmes sont bleu foncé sans soulignement. Après avoir cliqué, ils deviennent noirs et n'ont pas de soulignement. Lorsque le pointeur de la souris passe, le lien hypertexte devient jaune et est souligné. .
De plus, divers effets de fond, de bordure et de typographie peuvent être ajoutés à plusieurs pseudo-attributs de l'hyperlien. Le statut d'activation actuel est a:active, qui est généralement affiché dans très peu de cas et est rarement utilisé.
Lorsque l'utilisateur clique sur un lien hypertexte, le focus peut facilement être transféré vers d'autres endroits, comme une fenêtre nouvellement ouverte, etc. À ce stade, le lien hypertexte n'est plus actif.
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!