ホームページ  >  記事  >  ウェブフロントエンド  >  テキストCSSスタイルとは何ですか?

テキストCSSスタイルとは何ですか?

青灯夜游
青灯夜游オリジナル
2021-12-09 11:13:524955ブラウズ

テキスト CSS スタイルには、テキストの色 "color"、テキストの方向 "direction"、文字間隔 "letter-spacing"、テキストの水平方向の配置 "text-align"、テキストの装飾 "text-decoration"、ヘッダー行が含まれます。インデント「text-indent」など

テキストCSSスタイルとは何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

#テキスト CSS スタイル

属性説明## 色direction#letter-spacing文字間隔の設定line-height行の高さの設定text-alignテキストの水平方向の配置text-decorationテキストに装飾を追加するtext-indent要素内のテキストの最初の行をインデントしますtext-shadowテキストシャドウtext-transform要素内の文字を制御しますunicode-bidiテキストが書き換えられたかどうかを設定または返します。 テキストの垂直方向の配置要素内の空白の処理方法を設定します単語の間隔を設定します次はいくつかのCSSテキストスタイルを紹介します。
テキストの色の設定
テキストの方向を設定します。
#vertical-align
white-space
word-spacing

text-indent最初の行のインデント

最初の行のインデントは、段落の最初の行をインデントすることであり、一般的に使用されるテキストの書式設定効果です。一般的に中国語で文章を書く場合、これと同じように最初に空白が2つ入ります。 この属性の値は負の値にすることができます。

構文:

text-indent:<length> | <percentage> | inherit

tip: 初期値は 0;

適用対象: ブロック レベル要素 (ブロックおよびインライン ブロックを含む)

継承 : はい

パーセンテージ: 含まれるブロックの幅に対する相対値

ケース: 最初の文字の沈み込み

div {
    width: 200px;
    border: 1px solid black;
    text - indent: 0.5em;
}
div: first - letter {
    font - size: 30px;
    float: left;
}

text-align 水平方向の配置

水平方向の配置は、要素内のテキストの水平方向の配置に影響します。 構文:

text-align: left | center | right | justify | inherit

初期値: left

適用対象: ブロックレベルの要素 (block および inline-block を含む)

継承: Yes

IE7 ブラウザの場合、text-align を使用すると、テキストの水平方向の配置が変更されるだけでなく、子孫のブロック レベル要素の水平方向の配置も変更されます

word -spacing word spacing

Word spacing は単語間隔を指し、テキストまたは単語間の間隔を設定するために使用されます。実際、「単語」は、ある種の空白文字で囲まれた空白文字以外の文字列を表します。 注: 単語はスペースで区切られます。単語間の間隔 = 単語間のスペース サイズ

注: 単語の間隔は負の値になる可能性があります

構文:

word-spacing: <length> | normal | inherit

初期値: 通常 (デフォルトは 0)

適用対象: すべての要素

継承: あり

letter-spacing 文字間隔

文字間隔は文字間隔を指します 注: 文字間隔は負の値になる可能性があります

letter-spacing:<length> | normal | inherit

初期値: 通常 (デフォルトは 0) )

適用対象: すべての要素

継承: has

text-transformText-transform

テキスト変換は、英語の大文字と小文字の変換を処理するために使用されます。 構文:

text-transform:uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

初期値: none

適用対象: すべての要素

継承: はい

#text-decorationテキスト装飾

テキスト装飾は、テキストに装飾線を提供するために使用されます。 注: テキスト変更行の色はテキストの色と同じです。

構文:

text-decoration:none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

初期値: none

適用対象: すべての要素

継承: none

(学習ビデオ共有:

CSSビデオチュートリアル

)

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。