HTML+CSS学習メモ(14)

WBOY
リリース: 2016-06-24 11:24:08
オリジナル
1081 人が閲覧しました

色の値

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コード

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート