CSS テキスト設定の主なプロパティは何ですか?

CSS テキスト設定の主な属性は、font-famil、font-size、color、text-align、text-decoration、border、text-shadow、Word-warp、Word-break、direction などです。 。

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

cssテキスト各種属性集

1.フォント属性

• font-family: 'Microsoft Yahei' フォント Css 属性を指定してスタイルを設定します。

• font-size: フォント サイズを設定します。

• font-weight: テキストの太さを設定します

• font-style: フォントの傾きを設定します 可能な属性は、normal、italic、および斜め;

• line-height: フォントの行間隔を設定します;

• color フォントの色

## 2. テキスト属性

• text-align: テキストの配置を制御します

• text-indent:テキストの最初の行を制御します インデントは px または % です;

• white-space: ドキュメント内の空白スペース
  属性値:
  • noraml: デフォルトでは、複数のスペースは無視され、1 つのスペースのみが出力されます。

  ##nowrap: 改行を強制しない
  pre: スペース/インデント / 行の折り返しは保持されます
  pre-line: 空のテーブルをマージします (複数のスペースは 1 つのスペースのみを出力します)
  pre-warp: 空白/インデントを維持し、通常の行折り返し;

letter-spacing: 文字間の距離を制御;
text-overflow: テキストが含まれている要素からオーバーフローした場合の動作;

• プロパティ値:
  clip テキストをトリミングします。
  ellipsis トリミングされたテキストを表す省略記号を表示します。
  string 指定された文字列を使用して、トリミングされたテキストを表します。

word-spacing: 単語間のスペースの距離を制御し、スペースを使用して単語を区別します。中国語と英語の両方が可能です。

3. Underline 属性

text-decoration: テキストに下線を付けるかどうかを制御します。可能な値は

none です。下線なし
overline テキスト上の線を定義します。
line-through は、テキストの下を通過する線を定義します。
underline テキストの下に線を定義します。
#4. 大文字と小文字を変換する

text-transform:

Attribute value:

none (デフォルト) 変換なし;

• capitalize: 各単語の最初の文字が大文字になります;

• upercase: 大文字に変換します;

• 小文字: 小文字に;

• [推奨チュートリアル:
CSS ビデオ チュートリアル

]

5. ボーダー属性

属性説明ボーダー省略された属性。1 つのステートメントで 4 つの側面の属性を設定するために使用されます。 border-style は、要素のすべての境界線のスタイルを設定するか、各辺の境界線スタイルを個別に設定するために使用されます。 border-width要素のすべての境界線の幅を設定するか、各境界線の幅を個別に設定するために使用される短縮属性。 border-color省略形の属性。要素のすべての境界線の表示部分の色を設定するか、4 つの辺のそれぞれの色を設定します。 border-bottom 略語属性。下枠のすべての属性を 1 つのステートメントに設定するために使用されます。 border-bottom-color要素の下枠の色を設定します。 border-bottom-style 要素の下枠のスタイルを設定します。 border-bottom-width要素の下枠の幅を設定します。 border-left 左ボーダーのすべてのプロパティを 1 つのステートメントに設定するために使用される省略形プロパティ。 border-left-color要素の左境界線の色を設定します。 border-left-style 要素の左境界線のスタイルを設定します。 border-left-width要素の左境界線の幅を設定します。 border-right 右ボーダーのすべてのプロパティを 1 つのステートメントに設定するために使用される略語プロパティ。 border-right-color要素の右枠の色を設定します。 border-right-style 要素の右枠のスタイルを設定します。 border-right-width要素の右側の境界線の幅を設定します。 border-top 省略形属性。上部境界線のすべての属性を 1 つのステートメントに設定するために使用されます。 border-top-color要素の上端の境界線の色を設定します。 border-top-style 要素の上端の境界線のスタイルを設定します。 border-top-width要素の上枠の幅を設定します。

6. Box-shadow

##box-shadow: Box-shadow;

には 5 つの値を指定できます( h-shadow 水平シャドウ位置、v-shadow 垂直シャドウ位置、ブラーブラー距離、スプレッドシャドウサイズ、カラー、インセット/アウトセットの内側および外側シャドウ)

eg:

box-shadow: 10px 5px 10px red inset;

7. テキストが改行を超えています

#ワードワープ: 長い単語を次の行に変換できるようにします
Word-break :単語内での改行を許可します (自動行折り返し)

#8. テキストの配置形式

direction

: テキストの配置 配置方向属性値:

ltl:左から右へ
#rtl:from right to left

9. テキストが行折り返しを超えています

ワードワープ: 許可長い単語は次の行に変換されます
単語区切り: 単語内での改行を許可します (自動行折り返し)

10. テキストシャドウ

#text-shadow: 参照ボックスのシャドウ

11. 1 行のテキストが表示省略記号を超えています

{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

12. 複数行のテキストが制限を超えている場合は、省略記号で置き換えます

{
  overflow:hidden;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*限制在一个块元素显示的文本的行数*/
  -webkit-box-orient: vertical;
  text-overflow:ellipsis;
}

プログラミングの詳細については、-関連知識については、
プログラミング ビデオ

をご覧ください。 ！

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