CSS selbst bietet nicht direkt die Funktion zum Ändern der Unterstreichung von HTML-Links, aber solange wir einige Techniken verwenden, können wir die monotone Unterstreichung von Weblinks dennoch bunt machen.
1. Grundprinzipien
Der erste Schritt zum Anpassen der Unterstreichung von HTML-Links besteht darin, eine Grafik zu erstellen. Wiederholen Sie diese Grafik in horizontaler Richtung, um einen Unterstreichungseffekt zu erzielen. Wenn Sie den Hintergrund der Webseite hinter der Unterstreichung anzeigen möchten, können Sie eine transparente GIF-Grafik verwenden.
Zweitens: Wenn die Höhe der unterstrichenen Grafik groß ist, muss die Texthöhe entsprechend erhöht werden, sodass zwischen dem unteren Rand einer Textzeile und dem oberen Rand der nächsten Textzeile ein größerer Abstand besteht, z. B. p { Zeilenhöhe: 1,5;
Beispiel für eine benutzerdefinierte Link-UnterstreichungDrittens muss zum Anzeigen einer benutzerdefinierten Unterstreichung die Standardunterstreichung ausgeblendet werden, d. h. ein { text-decoration: none };
Viertens legen Sie die Unterstreichungsgrafik für das Linkelement fest und erstellen eine benutzerdefinierte Unterstreichung. Unter der Annahme, dass die Unterstreichungsgrafik „underline.gif“ ist, ist der CSS-Code zum Festlegen der Unterstreichungsgrafik ein {background-image: url(underline.gif});
Fünftens müssen wir dafür sorgen, dass sich die Unterstreichungsgrafik in horizontaler Richtung wiederholt, jedoch nicht in vertikaler Richtung, da sie sonst hinter dem Text verborgen wird. Der Code, der erfordert, dass sich die Unterstreichung nur in horizontaler Richtung wiederholt, ist: a {background-repeat: repeat-x}.
Sechstens: Um sicherzustellen, dass die Grafik unter dem Linktext erscheint (unabhängig von der Schriftgröße), verwenden Sie das Attribut „background-position“, um die Grafik am unteren Rand des Linkelements zu platzieren. Bei unterstrichenen Grafiken wie Pfeilen sollten Sie möglicherweise auch die horizontale Ausrichtung der Grafiken berücksichtigen. Angenommen, Sie möchten die Unterstreichungsgrafik in der unteren rechten Ecke platzieren. Der CSS-Code lautet: a {background-position: 100% 100% }.
Siebtens muss entsprechender Leerraum hinzugefügt werden, um Platz für benutzerdefinierte Grafiken unter dem Linktext zu schaffen. Die spezifische Position der Unterstreichungsgrafik relativ zum Linktext hängt von der Größe des Textes ab, aber im Allgemeinen können Sie zunächst den unteren Rand auf die Höhe der Unterstreichungsgrafik einstellen und ihn dann bei Bedarf anpassen. Zum Beispiel: a { padding-bottom: 4px };
Achtens: Da die Unterstreichungsgrafik am unteren Rand des Linkelements platziert wird, muss sichergestellt werden, dass der Link die Zeile nicht unterbricht (wenn der Link sich über mehrere Zeilen erstrecken darf, wird nur der Linktext in der folgenden Zeile angezeigt). benutzerdefinierte Unterstreichung). Verwenden Sie das White-Space-Attribut von CSS, um zu verhindern, dass Linktext umbrochen wird, d. h. ein {white-space: nowrap}.
Zusammenfassend wäre ein vollständiges Beispiel für die Definition von CSS-Stileigenschaften für ein Link-Element:
A {
Textdekoration: keine;
Hintergrund: url(underline.gif) wiederholen-x 100 % 100 %;
Polsterung unten: 4px;
Leerraum: nowrap;
}
Wenn Sie möchten, dass die benutzerdefinierte Unterstreichung nur angezeigt wird, wenn die Maus darüber schwebt , ändern Sie einfach die ursprünglich direkt für das Link-Element festgelegte CSS-Hintergrundeigenschaft in:hover, zum Beispiel:
A {
Textdekoration: keine;
Polsterung unten: 4px;
Leerraum: nowrap;
}
a:hover {
Hintergrund: url(underline.gif) wiederholen-x 100 % 100 %;
}
2. Wertschätzung von Beispielen
Angenommen, es gibt zwei Unterstreichungsgrafiken diagonal.gif (gewellte Linie) und flower.gif (Blume). Die Höhe und Breite der ersteren betragen 3 und 9 und die Höhe und Breite der letzteren betragen 11 und 15. Hier ist ein vollständiges Beispiel für das Festlegen von zwei Arten von Unterstreichungen:
Beispiel für eine benutzerdefinierte Link-UnterstreichungDer Quellcode der Webseite lautet wie folgt:
Hinweis: diagonal.gif und flower.gif wurden in dasselbe Verzeichnis kopiert, in dem sich die Webseite befindet.
<html>
<Kopf>
<title>ex</title>
<style type=text/css>
a#example1a {
Textdekoration: keine;
Hintergrund: url(diagonal.gif) wiederholen-x 100 % 100 %;
Leerraum: nowrap;
Polsterung unten: 2px;
}
a#example1b {
Textdekoration: keine;
Leerraum: nowrap;
Polsterung unten: 2px;
}
a#example1b:hover {
Hintergrund: url(diagonal.gif) wiederholen-x 100 % 100 %;
}
a#example2a {
Textdekoration: keine;
Hintergrund: url(flower.gif) wiederholen-x 100 % 100 %;
Leerraum: nowrap;
Polsterung unten: 10px;
}
a#example2b {
Textdekoration: keine;
Leerraum: nowrap;
Polsterung unten: 10px;
}
a#example2b:hover {
Hintergrund: url(flower.gif) wiederholen-x 100 % 100 %;
}
->
</style>
</head>
<Körper>
<p>Beispiel:</p>
<p> <a href=# id=example1a>statische Ripple-Unterstreichung</a>,
<a href=# id=example1b>Die Wellenlinie, die erscheint, wenn sich die Maus darüber befindet</a>. </p>
<p> <a href=# id=example2a>Statische Blumenunterstreichung</a>,
<a href=# id=example2b>Die Blumenunterstreichung, die angezeigt wird, wenn sich die Maus darüber befindet</a>. </p>
</body>
</html>