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

CSSでテキストインデントを使用する方法

text-indentプロパティとして知られるCSSインデントプロパティは、学校で書いたエッセイや論文のすべての段落の最初の行にある標準のインデントに似ています。紙を書くときに段落の最初の行をインデントするのと同じように、テキストのすべてのブロックの最初の行をインデントします。

以下のコードエディタは、ピクセル（px）でテキストインデントを作成する方法を示しています。 

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Text Indent CSS</title>
   </head>
   <style>
       .example {
           text-indent: 25px;
       }
   </style>
   <body>
       <p class="example">
           Cat ipsum dolor sit amet, american bobtail. Scottish fold ragdoll, and savannah but thai. Bombay. Lion. British shorthair maine coon. Tom. Leopard cheetah abyssinian and ocicat or american shorthair, but birman donskoy. Ocelot. Devonshire rex cougar for kitten. American shorthair lion. Lynx. Balinese persian so norwegian forest sphynx malkin. Devonshire rex kitten panther. Leopard manx tom donskoy but russian blue, ocicat tabby.
       </p>
         
          
       <p class="example"> 
           Tomcat malkin, and ocelot. Puma. Balinese . Panther lynx or american bobtail and turkish angora, manx cougar. Malkin scottish fold but sphynx russian blue, maine coon balinese . Ocicat sphynx devonshire rex, mouser bobcat. Kitty maine coon american bobtail havana brown.
 
       </p>
       <p class="example">
           Birman sphynx ragdoll tabby so british shorthair. Persian bombay thai for birman. Kitty havana brown maine coon tomcat and himalayan, but donskoy. Tom american bobtail birman, and ragdoll or panther or leopard yet american bobtail. Devonshire rex ocicat and munchkin. Lion lynx norwegian forest munchkin, tiger yet cheetah. American bobtail persian. Cornish rex. Leopard. Havana brown savannah puma yet tabby american shorthair, puma but tom. Egyptian mau kitten and lynx, havana brown tom, and siberian munchkin. Ocelot siberian so cheetah. American bobtail tiger, and lion. Kitten russian blue yet ocicat mouser thai and lynx norwegian forest. Panther. Mouser thai egyptian mau but devonshire rex. Lion panther for kitten. Ocelot savannah yet leopard or sphynx. Ocicat savannah puma ragdoll thai for panther siamese.
          
       </p>
   </body>
</html>

この例は、ピクセル（px）と呼ばれる絶対長の単位を示しています 。 em のように、インデントを相対/レスポンシブ長さの単位で表すこともできます。 、 rem 、次に％ 全体的な要素/段落の幅の。 ems、rems、％のピクセルサイズを入れ替えて、何が起こるかを確認してください。


  1. HTMLで内部CSS（スタイルシート）を使用するにはどうすればよいですか？

    CSSは、HTMLでさまざまな方法で使用できます。それらの1つは、内部CSSを使用すること、つまりタグを使用することです。 タグは、…タグで使用されます。単一ページのCSSスタイルを定義します。 例 次のコードを実行して、HTMLで内部CSSを使用することができます- <!DOCTYPE html> <html>    <head>       <style>          h1 {color: red;}     &

  2. HTMLでインラインCSS（スタイルシート）を使用するにはどうすればよいですか？

    HTMLにインラインCSSを追加するには、style属性を使用します。 style属性は、要素のインラインスタイルを指定します。この属性は、font-family、font-style、text-decoration、directionなどのCSSプロパティで使用されます。 スタイル属性の使用は、グローバルに設定されたスタイルを上書きすることに注意してください。 HTMLのタグまたは外部スタイルシートに設定されているスタイルを上書きします。 例 次のコードを試して、HTMLでインラインCSSを使用できます。ここでは、インラインCSSを使用して見出しにフォントサイズを追加しています &