Wenn Du Deine Webseite gestaltest, kannst Du – gerade mithilfe von CSS – eine Vielzahl von Optionen nutzen, die das optische Erscheinungsbild der jeweiligen Seite verändern können: von CSS gradient über CSS font bis hin zu CSS underline. Um Letzteres soll es sich in diesem Beitrag drehen: Was ist CSS underline? Wie und wo kann man es nutzen? Was verändert sich durch den Gebrauch dieses Eingabebefehls?
Inhalt
CSS underline: Worum handelt es sich dabei?
Die Bezeichnung lässt es bereits vermuten: CSS underline ist ein Tool, das Verwendung findet, um Text in einer Webseite unterstreichen zu lassen. Daher nimmt es einen wichtigen Bestandteil des Cascading Style Sheets ein, einer Standardmethode, die Webdesignern dabei hilft, die Formatierung von Webseiten zu kontrollieren – egal, ob am Laptop oder am PC.
Dieser Eingabebefehl ist eine der grundlegenden Textformatierungsoptionen in CSS. Mit dieser Funktion kann man einen Text unterstreichen, um ihn hervorzuheben oder hervorzuhebende Elemente wie Links, wichtige Schlagwörter oder stilistische Elemente wie Zitate hervorzuheben. Da es zum Aufwerten der Optik und zum Gestalten und Dekorieren von Texten eingesetzt wird, kommt es nachfolgend und zusammen mit dem Eingabebefehl „text-decoration: underline“ vor.
Hierbei wichtig zu wissen: „text-decoration“ ist die Kurzschrift von:
- text-decoration-line (Textlinienart)
- text-decoration-style (Textstil)
- text-decoration-color (Textfarbe)
- sowie text-decoration-thickness (Textbreite).
Im Umkehrschluss heißt das: Alle Eigenschaften, die man innerhalb eines Textes ändern kann – hier: Farbe, Linienart und Breite – kann man auch auf den Eingabebefehl „text-decoration: underline“ anwenden. Demnach kann man die Farbe, die Art und Weise sowie die Breite der unter dem Text gesetzten Linie entsprechend verändern bzw. anpassen.
Welche Befehle gelten dafür?
Formen von CSS underline
Im Allgemeinen gilt: Den Befehl „text-decoration: underline“ verwendet man, um eine unterstrichene Linie unter Text zu erstellen. Durch die Eingabe dieser Anweisung in Deinem CSS-Code kannst Du festlegen, wo und wie eine Unterstreichung auf Deiner Seite angezeigt werden soll.
Erste kleine Randnotiz: Es gibt auch andere Möglichkeiten, einen Text unterstreichen zu lassen, wie zum Beispiel durch „border-bottom“. Allerdings ist diese Option oftmals aufwendiger. Nichtsdestotrotz ermöglicht sie es ebenfalls, eine einzige unterstrichene Linie zu erstellen, die in der Breite des Elements angepasst werden kann.
Zweite kleine Randnotiz: Als mögliche Variante des „text-decoration: line“-Befehls gibt es weiterhin die Möglichkeit, Deinen Text auch durchzustreichen (line-through) sowie eine Linie über dem Text zu gestalten (overline). Diese Art der Linienführung ist in der Regel einmalig. Das bedeutet, man kann eine durchgängige Linie unter bzw. durch bzw. über den Text zeichnen.
Stil der Linie
Willst Du nun zum Beispiel keine durchgängige Linie erstellen, kannst Du den Stil der Linie ändern. Das geht zum Beispiel, indem Du …
- die Linie gewellt darstellst (wavy)
- eine gestrichelte Linie erzeugst (dashed)
- die Linie gepunktet darstellst (dotted)
- eine doppelte Linie zeichnest (double)
… und Ähnliches. Hierbei können im Prinzip dieselben Werte zugeschrieben werden wie bei CSS border.
Um eine gewellte Unterlinie zu erschaffen, würdest Du also den folgenden Befehl im CSS-Code einfügen:
text-decoration: underline wavy; Farbe der Linie
Weiterhin kannst Du die Farbe der Linie anpassen. Achte hierbei darauf, dass die entsprechenden Farben nur unter bestimmten Voraussetzungen eingefügt werden können. Das meint, als HEX-Wert, unter der direkten Bezeichnung, als RGB oder als HSL.
Um an das vorangegangene Beispiel anzuknöpfen: Willst Du nun eine rote gewellte Unterlinie erzeugen, lautet der entsprechende Befehl:
text-decoration: underline wavy red;Breite der Linie
Schlussendlich kannst Du noch die Linienbreite einstellen. Das funktioniert auf verschiedene Weise:
- Zum einen kannst Du die Linienbreite automatisch einstellen lassen (auto). In diesem Fall wird die optimale Linienbreite selbstständig für die angezeigte Webseite gewählt.
- Zum anderen ist es möglich, die Linienbreite eigens einzustellen. Ähnlich wie bei der Farbwahl kannst Du das über verschiedene Formate tun, darunter zum Beispiel: Pixel (px), Prozent (%) und „from-font“. Gibst Du Letzteres an, werden die Informationen zur Linienbreite aus der Stelle im Code zu CSS font gezogen.
Angegeben wird eine rote gewellte Linie, deren Linienbreite im CSS font festgelegt wurde, daher wie folgt:
text-decoration: underline wavy red from-font;Auf einen Blick
Die Eigenschaft „underline“ kann beim Programmieren im CSS-Code genutzt werden, um Texte mitzugestalten – in diesem Fall durch das Unterstreichen des jeweiligen Textes. Das kann man zum Beispiel nutzen, wenn man Hervorhebungen machen möchte – bei Links, bestimmten Schlüsselbegriffen und Ähnliches. Die Unterlinie eines Textes kann zusätzlich angepasst werden – in der Art und Weise der Linie, der Farbe und der Breite. Insgesamt stellt CSS underline ein Hilfsmittel dar, um eine Webseite optisch aufzuwerten.
FAQ zu CSS underline
Mithilfe dieses Eingabebefehls kann man die Gestaltung eines Textes verändern und anpassen. Dazu gehört unter anderem der Textstil, die Farbe und Breite des Textes sowie Art und Weise der Linien, wenn man welche verwendet.
Du markierst den gesamten Link im Schreibprogramm. Dann gehst Du auf das Icon, das für das Unterstreichen im Schreibprogramm steht (meist ein unterstrichenes U) und klickst darauf. Dadurch entfernst Du die Linie unter dem Text.
Das EM wird meistens im Rahmen eines sich öffnenden und sich schließenden Tags verwendet, also <em>hierstehteinText</em>. Fügst Du diesen Tag ein, wird der davon eingeschlossenen auf der Webseite als kursiv geschrieben angezeigt.