ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSのテキスト属性とは何ですか?

CSSのテキスト属性とは何ですか?

王林
リリース: 2020-11-17 16:31:12
オリジナル
5280 人が閲覧しました

css テキスト属性には、1. 色属性 color、2. テキスト方向の方向、3. 行の高さ line-height、4. 文字間隔、5. テキストの影 text-shadow、6. テキストの方向 unicode が含まれます。 -ビディ。

CSSのテキスト属性とは何ですか?

css テキスト属性:

(学習ビデオ共有: Java ビデオ チュートリアル)

color    设置文本颜色    
direction    设置文本方向。    
line-height    设置行高。    
letter-spacing    设置字符间距。    
text-align    对齐元素中的文本。    
text-decoration    向文本添加修饰。    
text-indent    缩进元素中文本的首行。    
text-shadow    设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。    
text-transform    控制元素中的字母。    
unicode-bidi    设置文本方向。    
white-space    设置元素中空白的处理方式。    
word-spacing    设置字间距。
ログイン後にコピー

CSS テキスト プロパティは、テキストの外観を定義します。

テキストのプロパティを使用して、テキストの色、文字間隔、テキストの配置、テキストの装飾、テキストのインデントなどを変更できます。

1.テキストのインデント

CSS は、テキストのインデントを簡単に実装できる text-indent 属性を提供します。

text-indent 属性を使用すると、すべての要素の最初の行を指定された長さだけインデントできます。長さが負の値であってもかまいません。

この属性の最も一般的な使用法は、段落の最初の行をインデントすることです。次のルールにより、すべての段落の最初の行が 5 em ずつインデントされます:

p {text-indent: 5em;}
ログイン後にコピー

注: 一般に、 Text-indent はすべてのブロックレベル要素に適用できますが、この属性はインライン要素には適用できません。また、画像などの置換要素にも適用できません。ただし、ブロックレベルの要素 (段落など) の最初の行に画像がある場合、その行の残りのテキストと一緒に移動します。

ヒント: インライン要素の最初の行を「インデント」したい場合は、左のパディングまたはマージンを使用してこの効果を作成できます。

2. 水平方向の配置

text-align は、要素内のテキスト行の相互の配置に影響を与える基本的な属性です。最初の 3 つの値は非常に単純ですが、4 番目と 5 番目は少し複雑です。

値 left、right、center により、要素内のテキストがそれぞれ左揃え、右揃え、中央揃えになります。

ヒント: ブロック レベル要素または表要素の左右の余白を適切に設定して、これらの要素を中央に配置します。

3. 単語間隔

word-spacing 属性は、単語 (単語) 間の標準間隔を変更できます。デフォルト値の Normal は、値を 0 に設定するのと同じです。

単語間隔属性は、正または負の長さの値を受け入れます。正の長さの値を指定すると、単語間の間隔が広がります。 word-spacing に負の値を設定すると、より近い値になります:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>

<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
ログイン後にコピー

4. 文字間隔

letter-spacing 属性と word-spacing の違いは、文字間隔が文字を変更することです。文字間のスペース。

word-spacing 属性と同様に、letter-spacing 属性に指定できる値にはすべての長さが含まれます。デフォルトのキーワードは Normal (letter-spacing:0 と同じ) です。入力した長さの値により、指定した量だけ文字間のスペースが増減します:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

<h1>This is header 1</h1>
<h4>This is header 4</h4>
ログイン後にコピー

関連する推奨事項: CSS チュートリアル

以上がCSSのテキスト属性とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート