Unterstrichen - dies ist eine der klassischen Methoden, um einen Link auf einer Webseite hervorzuheben. Dies kann nützlich sein, um dem Linktext einen visuellen Akzent hinzuzufügen und Benutzern bei der Navigation zu helfen.
In CSS gibt es mehrere Möglichkeiten, einem Link einen Unterstrich hinzuzufügen. Eine Möglichkeit besteht darin, die text-decoration-Eigenschaft mit dem Wert underline zu verwenden.
Wenn Sie beispielsweise einem Link einen Unterstrich hinzufügen möchten, geben Sie den folgenden Code ein:
Dieser Code wird auf alle Links auf der Seite angewendet und ihnen einen Unterstrich hinzugefügt.
Wenn Sie nur für einige Links auf der Seite einen Unterstrich hinzufügen möchten, können Sie einen Klassen- oder ID-Selektor verwenden. Zum Beispiel:
In diesem Fall können Sie die Underline-Klasse auf bestimmte Referenzen anwenden, um nur für sie einen Unterstrich hinzuzufügen.
Beachten Sie, dass diese Methoden zum Hinzufügen eines Unterstrichs zu einem Link nicht für Links funktionieren, die mit einem Hintergrundbild oder CSS-Pseudoelementen formatiert sind. In diesem Fall können Sie andere Methoden verwenden, z. B. die Verwendung des Pseudoelements ::after, um einen Unterstreichungseffekt zu erzeugen.
Wie füge ich einen Unterstrich für eine Referenz in CSS hinzu?
Sie können die text-decoration-Eigenschaft verwenden und den Wert underline festlegen, um einem Link in CSS einen Unterstrich hinzuzufügen.
Hier ist ein einfaches Beispiel für CSS-Code, der Links einen Unterstrich hinzufügt:
| Selektor | Eigenschaft | Bedeutung |
|---|---|---|
| a | text-decoration | underline |
Jetzt werden alle Links auf Ihrer Website unterstrichen.
Sie können den Unterstrich auch ändern, indem Sie beispielsweise andere Werte für die Text-decoration-Eigenschaft festlegen, z. B. dotted (gestrichelt), dashed (intermittierend), double (doppelt) usw. Sie können die Unterstreichungsfarbe auch mit der color-Eigenschaft ändern.
Ich hoffe, dieser einfache Leitfaden hilft Ihnen, Links mit CSS einen Unterstrich hinzuzufügen!
Unterstrichener Link: text-decoration-Eigenschaft
In CSS gibt es eine Text-decoration-Eigenschaft, mit der Sie verschiedene Stile festlegen können, um den Text zu unterstreichen. Sie müssen den Underline-Wert für diese Eigenschaft verwenden, um einen Unterstrich für einen Verweis zu erstellen.
- a < text-decoration: underline; >- wendet einen Unterstrich auf alle Links auf der Seite an.
- .link < text-decoration: underline; >- wendet den Unterstrich nur auf Links mit der Klasse "link" an.
Neben dem underline-Wert kann die text-decoration-Eigenschaft auch andere Werte annehmen, z. B.:
- none - Entfernt alle dekorativen Stile, einschließlich der Unterstreichung.
- line-through - Wendet einen Durchstrich auf den Text an.
- overline - Wendet eine Linie über dem Text an.
- blink - erzeugt einen blinkenden Texteffekt.
Neben dem Festlegen von Stilen zum Unterstreichen von Links können Sie die Farbe, Dicke und den Linientyp auch über andere CSS-Eigenschaften wie color , border-bottom-width und border-bottom-style ändern.
Verwenden der text-decoration-Eigenschaft: underline In Kombination mit anderen Stilen können Sie spektakuläre und stilvolle Links auf einer Webseite erstellen.
Ändern des Unterstreichungsstils: border-bottom-Eigenschaft
Mit der border-bottom-Eigenschaft können Sie den Stil, die Breite und die Farbe des unteren Randes eines Elements festlegen. Im Falle eines Links können Sie diese Eigenschaft verwenden, um den Stil und die Farbe des Unterstrichs zu ändern.
Sie können beispielsweise den folgenden CSS-Code verwenden, um den Unterstrich für einen Link vollständig zu entfernen:
In diesem Fall entfernt die text-decoration-Eigenschaft mit dem Wert none den Standardunterstrich für den Verweis. Und die border-bottom-Eigenschaft mit dem Wert none entfernt den unteren Rand des Elements.
Wenn Sie den Unterstreichungsstil eines Links ändern möchten, können Sie die border-bottom-Eigenschaft mit den gewünschten Werten verwenden. Zum Beispiel:
In diesem Fall wird der Link ohne Unterstrich angezeigt, jedoch mit zwei Pixeln des roten unteren Randes. Sie können die Breite, Farbe, den Stil und andere Einstellungen ändern, um den gewünschten Effekt zu erzielen.
Daher ermöglicht die Verwendung der border-bottom-Eigenschaft, den Unterstrichstil eines Links in CSS flexibel zu ändern.
Andere Möglichkeiten, Links in CSS zu dekorieren
Farbe: Sie können die Textfarbe des Links mit der Eigenschaft ändern color. Um beispielsweise eine rote Farbe für Links festzulegen, können Sie den folgenden Code verwenden:
Fetthaltiger Text: Wenn Sie den Linktext fett machen möchten, können Sie die Eigenschaft anwenden font-weight. Um beispielsweise den Linktext fett zu machen, können Sie den folgenden Code verwenden:
Unterstrichener Text: Sie können dem Linktext auch einen Unterstrich hinzufügen, indem Sie die Eigenschaft verwenden text-decoration. Um beispielsweise dem Linktext einen Unterstrich hinzuzufügen, können Sie den folgenden Code verwenden:
Hintergrund ändern: Sie können auch den Hintergrund eines Links ändern, um es heller und attraktiver zu gestalten. Dazu können Sie die Eigenschaft verwenden background. Um beispielsweise eine Hintergrundfarbe für eine Referenz festzulegen, können Sie den folgenden Code verwenden:
Ändern der Schriftgröße und des Schrifttyps: Um die Größe und den Schrifttyp eines Links zu ändern, können Sie die Eigenschaften verwenden font-size und font-family. Um beispielsweise die Schriftgröße auf 18 Pixel festzulegen und die Schriftart Arial für Referenzen zu verwenden, können Sie den folgenden Code verwenden:
Dies sind nur einige Beispiele dafür, wie Sie Links mit CSS verschönern können. Sie können mit anderen Eigenschaften und Stilen experimentieren, um Ihr eigenes einzigartiges Design für Links auf Ihrer Website zu erstellen.
