<font>周辺知識_html/css_WEB-ITnose-htmlチュートリアル-php.cn

周辺知識_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:50:22

オリジナル

1248 人が閲覧しました

1em = 要素自体によって設定された、または親要素によって継承されたフォントサイズの値

1 <h1>left margin = <small>24px</small></h1>2 <h2>left margin = <small>18px</small></h2>3 <p>left margin = <small>12px</small></p>

ログイン後にコピー

1 h1{font-size:24px;}2 h2{font-size:18px;}3 p{font-size:12px;}4 h1,h2,p{margin-left:1em;}

ログイン後にコピー

font-weight

値 100 ～ 900 は固定の太字ではなく、通常、400 は標準、700 は太字に対応し、その他はキーワードに依存します。

タイムの仮説太字指定

フォント	キーワードを指定	数値を指定
Times Regular	normal	100,200,300,400
TimesBold	太字	500,600,700,800,900

bolder 親要素に応じて太字にする

rrree

font-size

数値の指定なし、初期値は中です。 Larger は、Bolder と似ており、親要素に基づいて倍率で上に移動しますが、絶対サイズ範囲 (900) の制限はありません。

パーセンテージも親要素から継承したサイズに基づいて計算されます。

これらの継承はレベルごとに行われ、入れ子が深くなるほど蓄積されます。

pxを使用するとフォントに固定値が与えられるため、IE6以前ではユーザーがテキストサイズを調整できないという潜在的な危険性があるため、フォントサイズにはキーワードとパーセンテージを使用する方が良いでしょう。

text-indent

Text-indentも継承されます。

1 p{font-weight:normal;}/*400，更粗是bold对应700，其中最小值为700*/2 p em{font-weight:bolder;}/*700*/3 4 h1{font-weight:bold;}/*700，更粗假设没有关键字，则设置为下一个更大的数字，最大为900*/5 h1 b{font-weight:bolder;}/*800*/

ログイン後にコピー

1 <style type="text/css">2     #demo{text-indent:3%;}3 </style>

ログイン後にコピー

line-height

1 <div id="demo">2     This is the first line.3     <p>This is the second line while this will also <br>get the text indent style.</p>4 </div>

ログイン後にコピー

 1 <style type="text/css"> 2     body{font-size:10px;line-height:10px;} 3     /*由于大多数浏览器默认font-size最小值为12px,所以此处body设置的字体大小其实为12px*/ 4     5     .paragraphA{line-height:1em;}/*继承字体大小为12px，line-height为12*1=12px*/ 6     .paragraphA p{font-size:18px;}/*line-height为继承的12px*/ 7  8     .paragraphB{line-height:1;}/*使用缩放因子，运用于该元素和所有子元素，各元素根据自己字体大小值计算line-height为12*1=12px*/ 9     .paragraphB p{font-size:14px;}/*自身大小值*缩放因子：line-height为14*1=14px*/10 11     .paragraphC p{font-size:12px;line-height:150%;}/*根据自身指定字体大小计算line-height为12*150%=18px*/12 </style>

ログイン後にコピー

vertical-align

デフォルト値はベースラインで、テキストのベースライン（「g」などの文字）に合わせて配置されています。、ベースラインの下にある小さな尾）。

text-bottom: テキストの一番下の線（テキストの「下の接線」、小さな尾の一番下の接線）に揃えます。

下：行ボックスの下端を揃えます（行の高さがフォントサイズより大きい場合、行の高さが占めるスペースの下部の小さな尾の下に一定の距離があります）。

パーセンテージは、親要素のベースライン（行の高さ）に対して、指定した量を増減します。

px: 正の値は上昇を意味し、負の値は下降を意味します。

vertical-align はインライン要素またはテーブルセル要素にのみ使用できることに注意してください。

参考文献

『CSS決定版ガイド』第4章~6