简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  CSS テキスト設定の主なプロパティは何ですか?

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

青灯夜游
青灯夜游オリジナル
2021-03-22 17:48:486191ブラウズ

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

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

このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。

html5 css css3 String break 字符串 overflow border transform word
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSでボタンに影を設定する方法次の記事：CSSでボタンに影を設定する方法

関連記事

続きを見る