In CSS steckt viel Wissen, und es ist für uns unmöglich, uns alles zu merken. In meiner Freizeit habe ich einige allgemeine Kenntnisse über das CSS-Seitenlayout zusammengestellt. Dieser Artikel wird Ihnen das allgemeine Wissen über CSS-Hyperlink-Stile vermitteln. Freunde in Not können darauf verweisen, ich hoffe, es kann Ihnen helfen.
Beim Entwerfen von Webseiten können wir den Stil von Links über Pseudoklassen steuern, Benutzer zum Durchsuchen von Webseiten führen und umfangreiche interaktive Elemente hinzufügen.
1. Attribute von Links
Die Bezeichnung eines Hyperlinks lautet Bilder. Hyperlinks haben 4 Pseudoklassen, die unterschiedliche Zustände des Links darstellen.
a: Link (der Stil, bevor der Hyperlink besucht wird)
a: besucht (der Stil, nachdem die Linkadresse besucht wird)
a: Hover (die Maus ist schwebender Stil)
a: aktiv (Stil zwischen Mausklick und Loslassen)
2. Link-Einstellungsreihenfolge und Vererbung
Einstellungsreihenfolge
Die Einstellungen der vier Pseudoklassen müssen in einer festen Reihenfolge erfolgen, sonst erhalten Sie nicht den gewünschten Effekt. Die Reihenfolge ist: a: Link, a: besucht, a: Hover, a: aktiv.
Vererbung
Wir wissen, dass Textänderungen nicht vererbbar sind, sobald der Text für ein Element definiert ist Stil, der Stil kann in seinen untergeordneten Elementen nicht gelöscht werden. Wenn jedoch Pseudoklassen zum Definieren von Hyperlinks verwendet werden und Textmodifikationen verwendet werden, können Unterelemente den ursprünglichen Linkstil überschreiben.
3. Ein Beispiel
<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>Das obige ist der detaillierte Inhalt vonZusammenfassung des allgemeinen Wissens über das CSS-Seitenlayout (Hyperlink-Stil). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
