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

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

CSS text-decorationプロパティは、選択した要素のテキストに装飾を適用するために使用されます。値として、ラインスルー、オーバーライン、アンダーラインなどを追加できます。これは、text-decoration-line、text-decoration-color、およびtext-decoration-styleの省略形です。

構文

text-decorationプロパティの構文は次のとおりです-

Selector {
   text-decoration: /*value*/
}

例

次の例は、CSSのテキスト装飾プロパティ-

を示しています。 
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2)::before {
   content: " We will reach the destination ";
   background-color: lightgreen;
   text-decoration: overline blue;
   font-size: 1.2em;
}
</style>
</head>
<body>
<p>I'm not the only traveller</p>
<p>
before night.
</p>
</body>
</html>

出力

これにより、次の出力が得られます-

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

例

<!DOCTYPE html>
<html>
<head>
<style>
span {
   background: rgb(204,22,50);
   text-decoration: blue line-through;
   font-style: italic;
   color: white;
}
p {
   text-decoration: underline;
}
</style>
</head>
<body>
<h2>Department Details</h2>
<p>
The employees of Department Marketing, Operations, Finance,
<span>IT</span>
are requested to email their original documents.<span> Delay in submission will lead to delayed verification.</span>
</p>
</body>
</html>

出力

これにより、次の出力が得られます-

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


  1. CSSを使用して要素をZ-Indexとオーバーラップさせる

    CSS Z-Indexプロパティの開発者は、要素を相互にスタックできます。 Z-Indexには、正の値または負の値を指定できます。 注 −重複する要素にz-indexが指定されていない場合、その要素はドキュメントの最後に記載されている要素として表示されます。 例 z-indexプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p {    margin: 0;    position: absolute;    to

  2. CSSを使用して要素のテキストの色を設定する

    CSSのcolorプロパティは、要素のテキストの色を変更するために使用されます。値は、標準の色名、rgb（）、rgba（）、hsl（）、hsla（）、および16進値として指定できます。 構文 CSScolorプロパティの構文は次のとおりです- Selector {    color: /*value*/ } 次の例は、CSSカラープロパティ-を示しています。 例 <!DOCTYPE html> <html> <head> <style> div {    height: 50px;   &nb