Textdekoration

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

In CSS wird die Eigenschaft text-decoration verwendet, um Text innerhalb eines HTML-Elements zu dekorieren oder die Dekoration zu entfernen. Mit dieser Eigenschaft kannst du Text unterstreichen, überstreichen oder durchstreichen, um eine visuelle Hervorhebung zu erzielen oder bestimmte Zustände anzuzeigen.

Zu den häufig verwendeten Werten für text-decoration gehören:

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 (Durchstreichung).

Zum Beispiel:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

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

Aufgabe

Einfach

Du erhältst ein HTML-Dokument mit einem Absatz (<p>), der ein Ankerelement (<a>) enthält, sowie einem Bereich (<div>). Deine Aufgabe besteht darin, die Eigenschaft text-decoration zu verwenden, um diese Elemente zu formatieren. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel, die auf alle <a>-Elemente abzielt. Setze text-decoration auf none, um die standardmäßige Unterstreichung zu entfernen.
Füge dem Element class ein <p>-Attribut mit dem Wert "underline" hinzu.
Schreibe eine CSS-Regel, die auf alle Elemente mit der Klasse underline abzielt. Setze text-decoration auf underline.
Füge dem Element class ein <div>-Attribut mit dem Wert "strike" hinzu.
Schreibe eine CSS-Regel, die auf alle Elemente mit der Klasse strike abzielt. Setze text-decoration auf 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>