CSSのtext-indentプロパティで最初の行をインデントするにはどうすればよいですか? 【詳しい説明】-htmlチュートリアル-php.cn

CSSのtext-indentプロパティで最初の行をインデントするにはどうすればよいですか? 【詳しい説明】

藏色散人

リリース： 2018-09-03 17:00:45

オリジナル

6800 人が閲覧しました

ウェブサイトの HTML 記事ページのスタイルをデザインするとき、記事の表示効果はサイト全体の美しさと品質に直接影響します。 Word 文書を作成するときは、明確な段落と明確な説明が必要であることは誰もが知っています。次に、Web サイトで公開する記事も、最も一般的な最初の行のインデントなど、段落ごとに明確に表示する必要があります。現時点では、CSS スタイルには強力な text-indent 属性 が欠かせません。この記事ではHTML cssの1行目をインデントする具体的な方法を詳しく紹介します。

以下では、最も簡単な例を使用して、css テキストの 1 行目のインデント、つまり text-indent 属性 の使用法と関連知識を紹介します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css首行缩进的代码使用示例</title>
    <style>
        p {text-indent:36px;}
     </style>
</head>
<body>
<p>
    这里是关于css文本缩进的一段文字。这里是关于css文字缩进的一段文字。这里是关于css首行缩进的一段文字。
    这里是关于css文本缩进的一段文字。这里是关于css文字缩进的一段文字。这里是关于css首行缩进的一段文字。
    这里是关于css文本缩进的一段文字。这里是关于css文字缩进的一段文字。这里是关于css首行缩进的一段文字。
</p>
</body>
</html>

ログイン後にコピー

ブラウザでアクセスしたときの上記のコードの効果は次のとおりです:

CSSのtext-indentプロパティで最初の行をインデントするにはどうすればよいですか? 【詳しい説明】

画像から、この HTML 段落が最初の行をインデントする効果を生み出していることがわかります。ここで、CSS のどのスタイル属性が機能しているかが明らかにわかりますよね?それは text-indent スタイル属性です。では、テキストインデントとは何を意味するのでしょうか?実際、この style 属性の機能は、HTML の最初の行を 2 文字インデントしたり、1 文字インデントしたりするなど、テキストの最初の行をインデントすることであることは明らかです。また、ここで、テキストが-indent style 属性には負の値を指定できます。値が負の場合、テキスト段落の最初の行が左にインデントされます。負の値は通常は使用されません。上記の紹介を通じて、CSS を使用してテキスト段落の最初の行のインデントを設定する方法をマスターできましたか?この記事は一定の参考価値があるので、困っている友人の役に立てば幸いです。

以上がCSSのtext-indentプロパティで最初の行をインデントするにはどうすればよいですか? 【詳しい説明】の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。