CSS取り消し線CSS

CSS 取り消し線 (CSS Strikethrough)

Web デザインでは、取り消し線は、テキストの特定の段落が有効でなくなったか、変更されたことを示すためによく使用されます。 CSS にはテキストに取り消し線を追加する方法が複数ありますが、この記事ではそのうちの 2 つ、text-decoration と text-decoration-line を紹介します。

text-decoration 属性

text-decoration 属性は、テキストに装飾線を追加するために使用される CSS のプロパティで、テキストの下線、上線、取り消し線などを制御できます。 text-decoration 属性の構文は次のとおりです。

text-decoration: [line] [style] [color];

このうち、line パラメータは装飾線の種類を設定するために使用され、style パラメータは装飾線のスタイルを設定するために使用され、 color パラメータは装飾線の色を設定するために使用されます。

テキストに取り消し線を追加するには、line パラメーターを line-through に設定するだけで済みます。スタイルはデフォルトでは設定できず、必要に応じて色を設定できます。以下に例を示します。

p {
    text-decoration: line-through;
    color: red;
}

この例では、p 要素に取り消し線を追加します。スタイルは設定されておらず、色は赤に設定されています。

text-decoration-line 属性

text-decoration-line 属性は CSS3 の新しい属性で、装飾線の種類を制御するために使用されます。 text-decoration 属性とは異なり、text-decoration-line は 1 種類を設定するだけで済みます。 text-decoration-line 属性の構文は次のとおりです。

text-decoration-line: [line];

テキストに取り消し線を追加するには、line パラメーターを line-through に設定するだけです。以下に例を示します。

p {
    text-decoration-line: line-through;
    color: blue;
}

この例では、p 要素に取り消し線を追加し、色を青に設定します。 text-decoration-line プロパティは線の種類のみを制御するため、色は color プロパティを通じて設定する必要があります。

概要

上記の 2 つの方法により、CSS のテキストに取り消し線を追加できます。 text-decoration 属性は複数の装飾線を同時に制御でき、text-decoration-line 属性は取り消し線を設定するだけで済み、より簡潔になります。実際の開発プロセスでは、ニーズに基づいて取り消し線効果を実現する適切な方法を選択する必要があります。

以上がCSS取り消し線CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。