CSS: Passen Sie farbenfrohe Web-Link-Unterstreichungen an_CSS/HTML

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 Unterstreichungsgrafik groß ist, muss die Texthöhe entsprechend erhöht werden, damit zwischen dem unteren Rand einer Textzeile und dem oberen Rand der nächsten Textzeile ein größerer Abstand verbleibt, z als p { Zeilenhöhe: 1,5 } .

Beispiel für die Unterstreichung eines benutzerdefinierten Links

Drittens muss die Standardunterstreichung ausgeblendet sein, um eine benutzerdefinierte Unterstreichung anzuzeigen, d. h. eine {text-decoration: none };

Viertens: Legen Sie die Unterstreichungsgrafik für das Linkelement fest und erstellen Sie eine benutzerdefinierte Unterstreichung. Unter der Annahme, dass es sich bei der Unterstreichungsgrafik um underline.gif handelt, lautet der CSS-Code zum Festlegen der Unterstreichungsgrafik a {background-image: url(underline.gif});

Fünftens müssen wir dafür sorgen, dass die Unterstreichungsgrafik wiederholt in horizontaler Richtung erscheint, 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: Um Platz für benutzerdefinierte Grafiken unter dem Linktext zu lassen, muss entsprechender Leerraum hinzugefügt werden. 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 nicht unterbrochen wird (wenn der Link mehrere Zeilen umfassen darf, wird nur der Linktext in der folgenden Zeile angezeigt). eine benutzerdefinierte Unterstreichung). Verwenden Sie das White-Space-Attribut von CSS, um zu verhindern, dass Linktext umbrochen wird, d. h. ein {white-space: nowrap}.

Zusammenfassend lautet ein vollständiges Beispiel für die Definition von CSS-Stilattributen für Linkelemente wie folgt:

　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 das CSS-Hintergrundattribut, das ursprünglich direkt auf dem Link-Element festgelegt wurde, 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 (Wellenlinie) 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-Unterstreichung

Der Quellcode der Webseite lautet wie folgt:

​ Hinweis: diagonal.gif und flower.gif wurden in dasselbe Verzeichnis kopiert, in dem sich die Webseite befindet.

　
​

​

　
​

　

　

Beispiel:

​

statische Ripple-Unterstreichung,
​ Die Wellenlinie, die erscheint, wenn sich die Maus darüber befindet.

​

statische Blumenunterstreichung,
​ Blumenunterstreichung, die angezeigt wird, wenn sich die Maus darüber befindet.

　
​