Dekoracja tekstu

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 22 z 76.

W CSS właściwość text-decoration służy do dodawania lub usuwania dekoracji tekstu w elemencie HTML. Ta właściwość umożliwia podkreślanie tekstu, dodawanie nad nim linii lub przekreślanie go, co pozwala wizualnie go wyróżnić lub wskazać określone stany.

Typowe wartości dla text-decoration to:

none: Usuwa wszelkie dekoracje tekstu. To wartość domyślna.

underline: Dodaje podkreślenie do tekstu.

overline: Dodaje nadkreślenie nad tekstem.

line-through: Dodaje linię przez środek tekstu (przekreślenie).

Na przykład:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

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

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z akapitem (<p>) zawierającym element kotwicy (<a>) oraz elementem <div>. Twoim zadaniem jest użycie właściwości text-decoration do stylizacji tych elementów. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera wszystkie elementy <a>. Ustaw text-decoration na none, aby usunąć domyślne podkreślenie.
Dodaj do elementu <p> atrybut class o wartości "underline".
Napisz regułę CSS, która wybiera wszystkie elementy z klasą underline. Ustaw text-decoration na underline.
Dodaj do elementu <div> atrybut class o wartości "strike".
Napisz regułę CSS, która wybiera wszystkie elementy z klasą strike. Ustaw text-decoration na line-through.

Spróbuj swoich sił

<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>