Heim >Web-Frontend >CSS-Tutorial >So richten Sie dynamische Hyperlinks mit CSS ein (Code im Anhang)
So richten Sie dynamische Hyperlinks mit CSS ein (Code im Anhang)
- yuliaOriginal
- 2018-09-26 15:46:143567Durchsuche
Dieser Artikel führt Sie hauptsächlich in die Methode zum Festlegen dynamischer Hyperlinks mit CSS ein. Er enthält eine relativ leicht verständliche Code- und Textbeschreibung. Ich hoffe, dass er für Sie hilfreich ist.
In HTML werden Hyperlinks durch die Markierung 3499910bf9dac5ae3c52d5ede7383485 implementiert, und die spezifische Adresse verwendet das href-Attribut der Markierung 3499910bf9dac5ae3c52d5ede7383485.
2027a75694c4961b064ca4941c50a15aali's Blog5db79b134e9f6b82c0b36e0489ee08ed
Standardmäßig sind Hyperlinks beim Durchsuchen einheitlich, blau und unterstrichen. und der angeklickte Hyperlink ist lila und ebenfalls unterstrichen.
CSS kann verschiedene Attribute von Hyperlinks festlegen, wie Schriftarten, Farben, Hintergründe usw., und durch Pseudokategorien viele dynamische Effekte erzeugen.
Entfernen Sie zunächst die Unterstreichung des Hyperlinks:
a{ text-decoration:none; }Zu diesem Zeitpunkt werden sowohl der Hyperlink selbst als auch die Unterstreichung des angeklickten Hyperlinks entfernt.
CSS-Pseudokategorie – Pseudo-Klassen verankern, Pseudokategorie verwenden, um dynamische Downloads zu erstellen. Die spezifischen Attribute sind wie folgt:
A:link – der normale Hyperlink-Stil in normalen Browsern Stil.
A:visited – der Stil des angeklickten Hyperlinks.
A:hover – der Stil, wenn der Mauszeiger über einen Hyperlink fährt.
A:active – Der Stil des Hyperlinks, wenn darauf geklickt wird, d. h. wenn er gerade aktiv ist.
<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>Wie Sie sehen können, werden die Hyperlinks selbst dunkelblau ohne Unterstreichungen. Wenn Sie mit dem Mauszeiger darüber fahren, werden sie gelb und unterstrichen.
Darüber hinaus können verschiedenen Pseudoattributen des Hyperlinks verschiedene Hintergrund-, Rahmen- und Typografieeffekte hinzugefügt werden. Der aktuelle Aktivierungsstatus ist a:aktiv, was im Allgemeinen in sehr wenigen Fällen angezeigt wird und selten verwendet wird.
Wenn der Benutzer auf einen Hyperlink klickt, verschiebt sich der Fokus leicht auf andere Stellen, z. B. ein neu geöffnetes Fenster usw. Zu diesem Zeitpunkt ist der Hyperlink derzeit nicht mehr aktiv.
Das obige ist der detaillierte Inhalt vonSo richten Sie dynamische Hyperlinks mit CSS ein (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!