[CSS Note 9] 単位と値

1. 色の値
Web ページの色の設定は、フォントの色 (color)、背景の色 (background-color)、境界線の色 (border) などを含めて非常に重要です。色を設定する方法もたくさんあります:

1英語のコマンド color

この設定方法は前のセクションでよく使用されます:

p{color:red;}

2. RGB カラー

これは、R(赤)、G(緑)、B で構成される Photoshop の RGB カラーと一致します。 （ブルー）比率を合わせた3色。

p{color:rgb(133,45,200);}

各項目の値は、0 ～ 255 の整数、または 0% ～ 100% の割合です。例:

p{color:rgb(20%,33%,25%);}

3. 16 進数のカラー

このカラー設定方法は実際には RGB 設定ですが、各項目の値は 0-255 までに変更されています。 。

p{color:#00ffff;}

2. 長さの値
長さの単位をまとめると、px (ピクセル)、em、% が一般的に使用されますが、これら 3 つの単位は実際には相対的な単位であることに注意してください。

1. ピクセル

なぜピクセルは相対単位なのですか?ピクセルはディスプレイ上の小さなドットを指すためです (CSS 仕様では「90 ピクセル = 1 インチ」と想定されています)。実際の状況では、ブラウザーはディスプレイの実際のピクセル値を使用します。現在、ほとんどのデザイナーはピクセル (px) を単位として使用する傾向があります。

2. em

は、この要素の指定されたフォントのフォント サイズの値です。要素のフォント サイズが 14 ピクセルの場合、1em = 18 ピクセルです。以下のコード:

p{font-size:12px;text-indent:2em;}

上記のコードは、段落の最初の行のインデントを 24px (つまり、2 つのフォント サイズ間の距離) で実現できます。

以下の特殊なケースに注意してください:

ただし、font-size の単位を em に設定する場合、このときの計算基準は p の親要素の font-size に基づきます。次のコード:

html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px} span{font-size:0.8em;}

結果のフォント「例」のスパンのフォント サイズは 11.2px (14 * 0.8 = 11.2px) です。

3. パーセント

p{font-size:12px;line-height:130%}

行の高さ (行間隔) をフォントの 130% (12 * 1.3 = 15.6px) に設定します。

上記は [CSS Note 9] の単位と値の内容です。さらに関連する内容については、PHP 中国語 Web サイト (m.sbmmt.com) をご覧ください。