css整理-03テキスト

2609 ワード

インデントと水平位置合わせ


テキストのインデント:text-indent

  • は、負の値
  • に設定することができる.
  • は、すべてのブロックレベルの要素に適用できますが、行内の要素、画像などの置換要素には適用できません.

  • 水平位置揃え:text-align

  • left,center,right,justify
  • はブロックレベル要素
  • にのみ適用される.

    垂直位置揃え


    行の高さ:line-height

  • は、フォントのサイズではなく、テキスト行のベースライン間の距離を指す.各要素ボックスの高さを
  • に増減するかどうかを決定します.
  • line-height値とフォントサイズの差は行間隔
  • です.

    テキスト行

  • テキスト行の各要素は、フォントのサイズによって決定されるコンテンツ領域を生成する.
  • このコンテンツ領域は行内ボックスを生成し、行間距離は行内ボックスの高さ
  • に影響します.
  • 行間隔は負であってもよく、行間隔+コンテンツ領域=行内枠
  • 垂直位置揃えテキスト:vertical-align

  • 値:baseline, sub, super, bottom, text-bottom, middle, top, text-top
  • は、行内の要素と置換要素にのみ適用されます.ブロックレベル要素のコンテンツの位置合わせには影響しませんが、フォーム要素の要素の垂直位置合わせには影響します.
  • ベースライン整列:baseline:サブエレメントのベースラインと親エレメントのベースライン整列;
  • 上付きと下付き:sub,super,ベースラインに対して明確な定義はありません.距離はユーザエージェント
  • に依存する.
  • 下端揃え:bottom、要素行内枠の下端と行枠の下端を揃えます.text-bottom:行内テキストの下端を指す.
  • 先端揃え:top,text-top
  • 中央揃え:middle、画像
  • に適用されることが多い
  • パーセント:親要素のベースラインに対する要素のベースラインが
  • 上昇または減少する.
  • 長さ揃え:同上ですが、具体的な高さ
  • です.

    文字間隔と文字間隔


    ワード間隔:word-spacing


    文字間隔:letter-spacing


    間隔と配置

  • テキスト設定の両端が揃う、letter-spacingが設定されていない場合、またはnormalに設定されている場合、アルファベットとワードの距離は
  • に調整される.
  • letter-spacingが設けるとtext-alignの影響を受けない
  • .

    テキスト変換、text-transform

  • uppercase, lowercase, capitalize

  • テキスト装飾、text-decoration

  • underline,overline,line-through, blink,none
  • は継承されないが、「通り抜ける」現象がある可能性がある
  • .

    テキストシャドウ

  • text-shadow: color offset-x offset-y [blur-radius]
  • colorは、最も前または最後の
  • に置くことができる.
  • を繰り返すことができる.

    空白文字の処理:white-space

  • nowrap:br要素
  • を使用しない限り、自動改行は許可されません.
  • pre:スペースと改行を保持し、自動改行は許可されません
  • pre-wrap:余分なスペースと改行を保持し、自動改行は許可されません.
  • pre-line:改行を保留し、余分な空白を保留せず、自動改行を許可する
  • テキスト方向:direction

  • 値:ltr,rtl
  • は、ブロックレベル要素のテキストの書く方向、表中の列のレイアウトの方向、内容がその要素ボックスを水平に埋める方向、および両端が要素の最後の行に整列する位置
  • に影響する.
  • 行内要素については、unicode-bidi属性がembedまたはbidi-overrideに設定されている場合にのみ、direction属性が適用されます.