logo

Wie unterstreiche ich Text in CSS?

CSS-Textdekorationseigenschaft: -

Unterstreichungen können verwendet werden, um wichtigen Text hervorzuheben. Das U-Element und die CSS-Textdekorationseigenschaft sind die beiden am häufigsten verwendeten Techniken zum Unterstreichen von Text auf Webseiten.

Beide sind einfach zu verwenden, aber das U-Element verleiht der Bedeutung einen semantischen Wert. Eine weitere kann bei Bedarf angezeigt werden, wodurch es einfach ist, den Unterstreichungsstatus zu ändern, indem einfach CSS-Klassen zum Text hinzugefügt werden.

Ob Unterstreichungen nützlich sind, um Bedeutung oder Zugänglichkeit auszudrücken, ist umstritten. Unterstreichungen sind ein natürlicher Ansatz, um dem Benutzer einen Mehrwert zu bieten, wenn Farbe allein nicht ausreicht, um eine Bedeutung auszudrücken.

Das text-decoration-Attribut bietet eine alternative Möglichkeit, Text zu unterstreichen. Der Hyperlink-Text kann auch verwendet werden, um Unterstreichungen durch Überstreichungen zu ersetzen.

Eine Überstreichung ist das Gegenteil einer Unterstreichung. Am oberen Rand des Textes wird eine Zeile hinzugefügt.

Wir können alle Unterstreichungs- und Überstreichungswerte für dieselbe Klassendefinition verwenden. Die Eigenschaft text-decoration regelt auf verschiedene Weise, wie der Text dargestellt wird. Wenn text-decoration auf underline eingestellt ist, wird der Text innerhalb der Komponente unterstrichen.

CSS-Eigenschaften für die Textdekoration eignen sich hervorragend für Text, können jedoch hinsichtlich des Designs eingeschränkt werden und sind nicht auf Nicht-Text-Inhaltstypen anwendbar. Unterstreichungen können auch mit CSS-Rahmenattributen erstellt werden.

Linux-Host

Das text-decoration-Attribut ist die einfachste Möglichkeit, Text zu unterstreichen. Der größte Nachteil der Textdekoration besteht darin, dass sie nicht konfigurierbar ist.

Die Eigenschaft text-decoration verwendet Unterstreichungen, Überstreichungen, Durchstriche oder eine Kombination von Linien, um ausgewählten Text hervorzuheben.

Der Inhalt wird mit dem Attribut text-decoration-line unterstrichen. Überstreichen, Unterstreichen und Durchgestrichen sind die drei Optionen für dieses Attribut. In CSS wird das Attribut „underline“ verwendet, um den Text hervorzuheben. Mit diesem Wert wird die Unterstreichung unterhalb des Inline-Textes gezeichnet.

Über die nachfolgenden Textelemente hinweg werden Textdekorationen gezeichnet. Das bedeutet, dass, wenn ein Element eine Textdekoration definiert, die Dekoration nicht durch ein untergeordnetes Element entfernt werden kann.

bool zum Stringen von Java

Es wird keine Linie gezeichnet und alle vorhandenen Dekorationen werden gelöscht.

Unterstreichen: Über die Grundlinie des Textes wird eine 1-Pixel-Linie gezogen.

Line-Through: Fügt am „mittleren“ Punkt des Textes eine 1-Pixel-Linie darüber ein.

Überstrich: Fügt eine 1-Pixel-Linie direkt über dem oberen Punkt des Textes hinzu.

Erben: erbt die Dekoration des Elternteils.

Die Textdekoration wird über die Eigenschaft text-decoration angegeben, die eine Abkürzung für Folgendes ist:

  • text-decoration-line (erforderlich)
  • Textdekorationsfarbe
  • Textdekorationsstil
  • Textdekorationsdicke

overline, underline, underline-overline, line-through fallen unter text-decoration-line.

Voll, gepunktet, gestrichelt, gewellt und doppelt fallen unter den Textdekorationsstil.

Farbe im Dezimalwert, Hexadezimalwert oder geerbt fällt unter text-decoration-color.

Die Eigenschaft „border-bottom“ ist eine Alternative zur Textdekoration. Wir können border-bottom auch zum Füllen verwenden.

Syntax: -

 text-decoration: text-decoration-line | text-decoration-color | text-decoration-style | text-decoration-thickness 

Suchen wir nun nach einem Beispiel und verstehen die Verwendung der Eigenschaft text-decoration.

if else-Anweisung in Java

Textdekoration: Unterstreichen, Überstreichen

Beispiel: -

 h1 { text-decoration: underline overline dotted purple; } h3 { text-decoration: underline wavy cyan 10px;} <h2>This is an example of text decoration property color using underline overline. </h2> <h3>This is an example of text decoration property color using line-through. </h3> 

Ausgabe:

Wie unterstreiche ich Text in CSS?