CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのテキストで使用される装飾の種類を設定します

テキストに使用する装飾の種類を設定するには、text-decoration-lineプロパティを使用します。 CSSでは、テキスト装飾用に次のオプションがあります-

text-decoration-line: none|underline|overline|line-through|initial|inherit;

例

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
   text-decoration-color: blue;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力

CSSのテキストで使用される装飾の種類を設定します

例

別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
span {
   text-decoration: line-through;
   text-decoration-color: blue;
}
.demo2 {
   text-decoration: underline;
   text-decoration-color: yellow;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near <span>XYZ College</span> ABC College.</p>
<p class="demo2">Exam begins at 11AM.</p>
</body>
</html>

出力

CSSのテキストで使用される装飾の種類を設定します


  1. CSSのテキスト装飾

    CSSでのテキスト装飾の場合、text-decorationプロパティを次のプロパティの省略形プロパティとして使用します- text-decoration-line text-decoration-color text-decoration-style 例 CSSでのテキスト装飾の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> .demo {    text-decoration: overline underline; } </style> </head&

  2. CSSを使用したテキスト装飾

    CSS text-decorationプロパティは、選択した要素のテキストに装飾を適用するために使用されます。値として、ラインスルー、オーバーライン、アンダーラインなどを追加できます。これは、text-decoration-line、text-decoration-color、およびtext-decoration-styleの省略形です。 構文 text-decorationプロパティの構文は次のとおりです- Selector {    text-decoration: /*value*/ } 例 次の例は、CSSのテキスト装飾プロパティ-を示しています。 <!D