HTML+CSS学習メモ(14)

色の値

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

1、英語のコマンドカラー

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

p{color:red;}

2. RGB カラー

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

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

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

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

3. 16 進数のカラー

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

p{color:#00ffff;}

カラーテーブル:

長さの値

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

1.

ピクセル

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

2,

em は、この要素の指定されたフォントのフォント サイズの値です。要素のフォント サイズが 14 ピクセルの場合は 1em = 14 ピクセル、フォント サイズが 18 ピクセルの場合は 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.2 ピクセル (14 * 0.8 = 11.2 ピクセル) です。

3,

パーセンテージ

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

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

---

私の公式アカウントのQRコード