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

CSSの更新-テキストの装飾と下線をスタイリングするための新しいプロパティ

次のテキスト装飾プロパティの導入により、以前よりも多くの方法でテキストのスタイルを設定できるようになりました。 text-decorationは、text-decoration-thickness、text-decoration-color、text-decoration-line、およびtext-decoration-styleの省略形です。 text-decoration-skip、text-decoration-skip-ink、text-decoration、text-underline-offset、text-underline-positionを明示的に指定する必要があります。

構文

CSSテキスト装飾の構文は次のとおりです-

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

例

次の例は、CSSのテキスト装飾プロパティを示しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #one {
            text-decoration-style: double;
            text-decoration-skip-ink: auto;
         }
         p {
            padding: 2%;
            text-decoration-line: underline overline;
            text-decoration-style: wavy;
         }
         p:nth-of-type(even) {
            text-decoration: overline;
         }
         span {
            text-decoration: line-through;
         }
      </style>
   </head>
   <body>
      <p id="one">Random Demo abcdefghijklmnopqrstuvwxyz</p>
      <p>Random Demo Text</p>
      <p>Random <span>Demo</span> Text</p>
   </body>
</html>

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

CSSの更新-テキストの装飾と下線をスタイリングするための新しいプロパティ

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            margin: 3%;
            font-size: x-large;
            text-decoration-line: underline overline;
            text-decoration-style: dotted;
            text-decoration-skip-ink: none;
            text-decoration-thickness: 4px;
         }
      </style>
   </head>
   <body>
      <p>Super Demo abcdefghijklmnopqrstuvwxyz</p>
   </body>
</html>

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

CSSの更新-テキストの装飾と下線をスタイリングするための新しいプロパティ


  1. text-align＆text-justify CSSプロパティを使用してテキストを揃える方法は？

    CSS text-justify プロパティは、要素の位置合わせタイプを指定するのに役立ちます。 text-alignプロパティは、要素内のテキストの水平方向の配置を設定します。 例 次の例は、CSSのtext-justifyプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> article {    margin: 3%;    background-color: peachpuff;    text-align: justif

  2. フォーム入力フィールドのあまり知られていないCSSプロパティ

    CSSのcaret-color、pointer-events、およびtab-sizeは、フォーム入力フィールドのあまり知られていないプロパティの一部です。 caret-colorプロパティを使用すると、点滅するカレットの色を指定できますが、pointer-eventsを使用すると、ユーザーが要素を見つけられないようにすることができます。最後に、tab-sizeは、tabが使用する空白の量を設定します。 次の例は、これらのプロパティの一部を示しています。 例 <!DOCTYPE html> <html> <head> <style> body {