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 Text innerhalb eines HTML-Elements mit decoration zu versehen oder diese zu entfernen. Mit dieser Eigenschaft kannst du Text underline, overline oder strike, um eine visuelle Hervorhebung zu bieten 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

Dir wird ein HTML-Dokument mit einem Absatz (<p>) gegeben, der ein Ankerelement (<a>) enthält, sowie eine division (<div>). Deine Aufgabe ist es, die Eigenschaft text-decoration zu verwenden, um diese Elemente zu gestalten. Befolge die folgenden Schritte:

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