テキストの装飾

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部。レッスン 22/76。

CSSでは、text-decorationプロパティを使用して、HTML要素内のテキストに装飾を追加したり削除したりします。このプロパティを使うと、テキストに下線、上線、または取り消し線を付けることができ、視覚的な強調や特定の状態を示せます。

text-decorationの一般的な値には、次のようなものがあります：

none: テキストの装飾をすべて削除します。これがデフォルト値です。

underline：テキストに下線を追加します。

overline: テキストの上に上線を追加します。

line-through：テキストの中央に線を追加します（取り消し線）。

例：

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

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

チャレンジ

簡単

アンカー（<a>）要素を含む段落（<p>）と、division（<div>）を含む HTML ドキュメントが与えられています。あなたの課題は、text-decorationプロパティを使用してこれらの要素をスタイルすることです。以下の手順に従ってください。

すべての<a>要素を対象とする CSS ルールを記述します。デフォルトの下線を削除するため、text-decorationをnoneに設定します。
<p>要素に、値が "underline" のclass属性を追加します。
underlineクラスを持つすべての要素を対象とする CSS ルールを記述します。text-decorationをunderlineに設定します。
<div>要素に、値が "strike" のclass属性を追加します。
strikeクラスを持つすべての要素を対象とする CSS ルールを記述します。text-decorationをline-throughに設定します。

必須の出力形式： [翻訳した内容]

自分で試してみよう

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