CSSカラーの使い方は？

色は、CSS でさまざまな方法で適用できます (事前定義された色名、rgb、rgba、16 進数の色値の使用など)。以下の CSS は、事前定義された色名を使用すると、背景色が「紫」に設定されることを示しています。

background-color: Purple;

CSS には多くの事前定義された色があり、上記のように事前定義された名前だけを使用して色を適用できます。以下は定義済みの色のリストです。これがすべての定義済みの色ではありません。これらの名前は大文字と小文字が区別されないため、すべて大文字または小文字で記述できます。

ブラック、ホワイト、グレー(またはグレー)、シルバー

ブルー、アクア、シアン)

クリムゾン(ダークレッド)、レッド(赤)

グリーン(緑)、ダークグリーン(深緑)、ライム(ライム)

ゴールド(金色)、イエロー(黄色)

ピンク(ピンク)、ホットピンク(ホットピンク)、マゼンタ(マゼンタ）

ブラウン（茶色）、マルーン（あずき色）

パープル（紫）、バイオレット（紫）

レッド（赤）、グリーン（緑）、ブルー（ blue) または rgb は、CSS で色を設定するもう 1 つの方法です。 rgb 関数は、それぞれ赤、緑、青を表す 3 つのパラメーターを受け取ります。各色コンポーネントの値は 0 ～ 255 の任意の整数です。0 は最小値で、色が適用されないことを意味します。以下のコードの青コンポーネントの値は 0 であるため、青は色に追加されません。赤のコンポーネントを最も明るい値に設定し、緑のコンポーネントを半分 (125) に設定します。これでオレンジ色に設定されます。

background-color: rgb(255, 125, 0);

透明度は、CSS で色に適用できるもう 1 つの機能です。 rgba 関数を使用すると、追加のパラメーターを追加して透明度を設定できます。 alpha は透明度のレベルを設定します。その値は 0 から 1 までの 10 進数なので、0.5 は半分の透明度を表します。以下のコードも色をオレンジに設定しますが、不透明度を半分に設定して、やや透明にします。

background-color: rgba(255, 125, 0, 0.5);

CSS で色を設定する最後の方法は、16 進値を使用することです。 16 進値の範囲は 0 から F で、各色コンポーネントに 2 つの部分があり、先頭にテーマ記号「#」が付けられます。 16 進法の A から F までのアルファベット部分は、10 から 15 の数字に対応します。以下の CSS コードはオレンジの 16 進数です。赤の部分は「FF」、緑の部分は「76」、青の部分は「00」で表されます。緑のコンポーネントは数字の 76 ではなく、数字の 7 と数字 6 の 2 つの部分です。

background-color: #FF7600;

16 進値は基数 16、10 進値は基数 10 であるため、16 進値を一般的に使用される 10 進値に変換するのは複雑です。 16 進数の色を通常の 10 進数に変換するには、各数値に 16 の累乗を掛ける必要があります。以下は、16 進数値が通常の 10 進数値に変換される様子を示しています。

FF = (15 16^0)^ (15 16^1)^ = 15 1 15 16 = 15 140 = 255

76 = ( 7 16^0)^ ( 6 16 ^1)^ = 7 1 6 16 = 7 96 = 103

00 = ( 0 16^0)^ ( 0 16^1)^ = 0 1 0 16 = 0 0 = 0

計算を簡略化するために、16 進法の最初の数値を取得し、2 番目の数値に 16 を掛けます。これを、上記と同じ番号を使用して以下に示します。これは、数値の 0 乗は数値 1 に等しく、16 の 1 乗は数値 16 に等しいためです。

FF = 15 (15 16) = 255

76 = 7 (6 16) = 103

00 = 0 (0 * 16) = 0

推奨チュートリアル: 「CSS チュートリアル 」

以上がCSSカラーの使い方は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。