CSS権威ガイド読書ノート-テキスト属性

2394 ワード

インデントと水平位置合わせ
テキストのインデント
Webページの前の段落の最初の行をtext-indentでインデントtext-indent||inherit}
その値は負であるもよく、負の値は吊り下げインデントの効果を実現することができる.パーセンテージを使用して、親要素に対するインデント幅(たとえば、10%が親要素の幅にインデントされた10%など)を継承できます.
水平位置揃えtext-align属性値left|center|right|justify|inherit justifyを含む2段揃え
垂直位置揃え
行高line-height
line-height値とフォントサイズの差は、行間隔line-heightのプロパティが、p{line-height:1}などのスケール係数として指定できる数を継承することです.
数を指定すると、スケール係数は計算値ではなく継承値になります.この数はその要素とすべてのサブ要素に適用されるので、各サブ要素は自分のfont-sizeに基づいてline-heightを計算します.
テキストの縦揃えvertical-align:baceline|sub|super|top|text-top|middle|bottom|text-bottom|||inherit
  • bacelineベースラインは、1つの要素のベースラインを親要素に位置合わせし、ブラウザのデフォルトのベースラインは
  • に位置合わせします.
    *画像やフォームの入力要素、または他の置換要素などの要素にベースラインがない場合、その要素の下端は親要素のベースラインに整列します*
  • 上付きおよび下付きvertical-align:subは、親要素ベースラインに対して減少する要素を下付きにすると宣言します.superは逆に、この属性は文字サイズを変更しません.finet-sizeを使用して
  • を調整する必要があります.
  • 下端揃えvertical-align:bottom要素行内ボックスの下端を行ボックスの下端に揃えます.text-bottomの場合はテキストのみで、置換要素に対しては
  • が無効です.
  • 最上位揃えvertical-align:top text-top行の最上位揃えとテキストの最上位揃え
  • 中央揃え
  • middleは画像によく適用され、行内の要素ボックスの中点を親要素ベースラインの上0.5 exの点に位置合わせし、
  • パーセンテージ親要素に対する要素ベースラインの上昇または減少をパーセンテージで指定する量は、line-heightに対して設定された
  • である.
  • 長さ整列vertical-align:5 pxは、要素を5 px上昇させ、逆に下降させる垂直整列要素のすべてが行の高さに影響します.行枠の説明によると、その高さは、最高行内枠の先端と最低行内枠の下端
  • を含む必要があります.
    文字間隔と文字間隔
    ワード間隔word-spacing:normal||inherit
    *定義:文字は空白以外の文字からなる列であり、ある空白文字で囲まれています.そのため、像型文字やローマ以外のフォントでは字間隔を指定できません.
    アルファベット間隔letter-spacing
    letter-spacingに幅値を指定するとtext-alignの影響を受けず、normalの場合text-align間隔が変更される可能性があります.
    テキスト変換text-transform:uppercase|lowercase|capitalize|none|inherit
  • uppercaseとlowercaseは、テキストを大文字または小文字に変換します.
  • capitalize単語の頭文字を大文字
  • テキスト装飾text-decoration:none|underline|overline|line-though|blink|inherit
  • underlineテキスト下線
  • overlineテキストに線を引く-line-throughテキストに線を引く-blink点滅text-decorationは
  • を継承できません.
    テキストシャドウtext-shadow:color||||||
    text-shadow:green 5 px 0.5 emシャドウカラーシャドウとテキストのオフセット距離2つのlength(右下)ブラー半径length(オプション)
    空白文字の処理white-space:normal|nowrap|pre|pre_wrap|pre-line|
  • pre:空白文字は無視されません
  • nowrap:-pre-wrap:空白シーケンスを保持し、通常の改行を保持しない限り、テキストの改行を防止-pre-wrap:空白シーケンスを結合し、改行を保持
  • .
    テキストの方向
    Direction:ltr|rtl|inheritデフォルトltr左から右