Textdekoration

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 22 von 76.

In CSS wird die Eigenschaft text-decoration verwendet, um Dekorationen zu Text innerhalb eines HTML-Elements hinzuzufügen oder zu entfernen. Diese Eigenschaft ermöglicht es Ihnen, Text zu unterstreichen, zu überstreichen oder durchzustreichen, was für visuelle Hervorhebung sorgt oder spezifische Zustände anzeigt.

Häufige Werte für text-decoration sind:

none: Entfernt jegliche Textdekoration. Dies ist der Standardwert.

underline: Fügt dem Text eine Unterstreichung hinzu.

overline: Fügt eine Überstreichung über dem Text hinzu.

line-through: Fügt eine Linie durch die Mitte des Textes hinzu (Durchstreichen).

Zum Beispiel:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit einem Absatz (<p>), der ein Anker-Element (<a>) enthält, und einem Bereich (<div>). Ihre Aufgabe ist es, die Eigenschaft text-decoration zu verwenden, um diese Elemente zu gestalten. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die alle <a>-Elemente anspricht. Setzen Sie text-decoration auf none, um die standardmäßige Unterstreichung zu entfernen.
Fügen Sie dem <p>-Element ein class-Attribut mit dem Wert "underline" hinzu.
Schreiben Sie eine CSS-Regel, die alle Elemente mit der Klasse underline anspricht. Setzen Sie text-decoration auf underline.
Fügen Sie dem <div>-Element ein class-Attribut mit dem Wert "strike" hinzu.
Schreiben Sie eine CSS-Regel, die alle Elemente mit der Klasse strike anspricht. Setzen Sie text-decoration auf line-through.

Spickzettel

Die Eigenschaft text-decoration fügt Dekorationen zu Text innerhalb von HTML-Elementen hinzu oder entfernt diese.

Häufige Werte:

none: Entfernt jegliche Textdekoration (Standard)
underline: Fügt dem Text eine Unterstreichung hinzu
overline: Fügt eine Linie über dem Text hinzu
line-through: Fügt eine Durchstreichung hinzu

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

Probier es selbst

<html>
<head>
    <title>Text Decoration</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <div>This is a division.</div>
</body>
</html>