Maison >interface Web >tutoriel CSS >Résumé des connaissances communes sur la mise en page CSS (style lien hypertexte)
Résumé des connaissances communes sur la mise en page CSS (style lien hypertexte)
- yuliaoriginal
- 2018-09-20 16:09:563145parcourir
Il y a beaucoup de connaissances en CSS, et il nous est impossible de tout retenir. Pendant mon temps libre, j'ai compilé quelques connaissances communes sur la mise en page CSS. Cet article partagera avec vous les connaissances communes sur les styles de liens hypertexte CSS. Les amis dans le besoin peuvent s'y référer, j'espère que cela pourra vous aider.
Lors de la conception de pages Web, nous pouvons contrôler le style des liens via des pseudo-classes, guider les utilisateurs dans la navigation des pages Web et ajouter de riches éléments interactifs.
1. Attributs des liens
L'étiquette d'un lien hypertexte est 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed. Les hyperliens sur les pages Web sont généralement utilisés pour créer des liens vers du texte ou des liens. des photos. Les hyperliens ont 4 pseudo-classes, qui représentent différents états du lien.
a : lien (le style avant la visite du lien hypertexte)
a : visité (le style après l'adresse du lien est visité)
a : survol (la souris est style de survol)
a : actif (style entre le clic de la souris et le relâchement)
2. Ordre de configuration des liens et héritage
Ordre de configuration
Les paramètres des quatre pseudo-classes doivent être dans un ordre fixe, sinon vous n'obtiendrez pas l'effet souhaité. L'ordre est : a : lien, a : visité, a : survol, a : actif.
Héritage
Nous savons que la modification du texte n'est pas héritable une fois le texte défini pour un élément. Style, le style ne peut pas être annulé dans ses éléments enfants. Mais lorsque vous utilisez des pseudo-classes pour définir des hyperliens, en modifiant le texte, les sous-éléments peuvent remplacer le style de lien d'origine.
3. Un exemple
<html>
<head>
<style type="text/css">
a:link{color:red;}
a:visited{color:green;}
a:hover{color:yellow;}
a:active{color:orange;}
</style>
</head>
<body>
<a href="https://www.baidu.com"> 超链接 </a>
</body>
</html>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!