CSS での text-indent の使用法-CSSチュートリアル-php.cn

CSS での text-indent の使用法

王林

リリース： 2024-02-20 09:02:35

オリジナル

1216 人が閲覧しました

CSS での text-indent の使用法

CSS で text-indent を使用するには、特定のコード例が必要です。

CSS は、HTML ドキュメント内の要素のスタイルとレイアウトを定義するために使用されるスタイルシート言語です。このうち text-indent は CSS のプロパティで、テキストブロックの最初の行のインデントを設定するために使用されます。この記事では、text-indent 属性の使用方法を紹介し、いくつかの具体的なコード例を示します。

1. text-indent 属性の基本的な使用法
text-indent 属性は、テキストブロックの最初の行のインデントを定義するために使用され、段落、リスト、タイトル、その他の要素に使用できます。。これは、ピクセル、パーセンテージ、または em 単位の負ではない整数値です。正の値は右へのインデントを示し、負の値は左へのインデントを示します。基本的な構文は次のとおりです。

selector {
  text-indent: value;
}

ログイン後にコピー

このうち、selector はスタイルを設定する要素のセレクター、value は最初の行のインデントされた値です。

2. ピクセル単位に基づく最初の行のインデント
テキストブロックの最初の行のインデントをピクセル単位で設定するには、正または負の値を直接指定できます。たとえば、段落の最初の行のインデントを 30 ピクセルに設定するには、次のコードを使用できます。

p {
  text-indent: 30px;
}

ログイン後にコピー

このようにして、すべての段落 (

) 要素の最初の行が右に 30 ピクセルインデントされます。

3. パーセント単位に基づく最初の行のインデント
text-indent 属性は、単位としてパーセントを使用することもサポートします。この場合、最初の行のインデントの値は、親要素の幅を基準にして計算されます。たとえば、段落の最初の行のインデントを親要素の幅の 50% に設定するには、次のコードを使用できます。

p {
  text-indent: 50%;
}

ログイン後にコピー

このようにして、すべての段落の最初の行 (

) 要素は、親要素の幅の右 50% にインデントされます。

4. em 単位に基づく最初の行のインデント
text-indent 属性は、単位として em を使用することもサポートします。 em 単位は要素のフォントサイズの倍数です。たとえば、段落の最初の行のインデントをフォントサイズの 2 倍に設定するには、次のコードを使用できます。

p {
  text-indent: 2em;
}

ログイン後にコピー

このようにして、すべての段落の最初の行 (

) 要素はフォントサイズの 2 倍で右にインデントされます。

5. 複数の段落の最初の行をインデントする効果

<!DOCTYPE html>
<html>
<head>
<style>
p.indent {
  text-indent: 30px;
}
</style>
</head>
<body>

<h2>多段落首行缩进示例</h2>

<p class="indent">这是一个缩进的段落。</p>
<p class="indent">这是另一个缩进的段落。</p>
<p>这是一个没有缩进的段落。</p>

</body>
</html>

ログイン後にコピー

上記のコードでは、クラス名 .indent を定義し、最初の行を必要とする段落要素にクラスを適用します。 line to be indented 。これにより、複数の段落の最初の行を適切にインデントできます。

6. 概要
text-indent は、テキストブロックの最初の行のインデントを設定するために使用される CSS のプロパティです。ピクセル、パーセンテージ、ems などの単位で設定できます。以上がtext-indent属性の基本的な使い方と具体的なコード例でしたので、ご参考になれば幸いです。

以上がCSS での text-indent の使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。