ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3で色の値を表現する方法にはどのようなものがありますか

CSS3で色の値を表現する方法にはどのようなものがありますか

WBOY
WBOYオリジナル
2022-03-25 16:17:162363ブラウズ

方法: 1. 色を表すには英単語を使用します。たとえば、赤を表すには「red」を使用します。2. 色を表すには RGB を使用します。構文は「rgb (赤の値、緑の値、青の値)」です。 "; 3. 色を表現するには 16 進数を使用し、構文は「#RRGGBB」です。 4. 色を表現するには HSL を使用し、構文は「hsl (色相、彩度、明度)」です。

CSS3で色の値を表現する方法にはどのようなものがありますか

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3の色の値を表現する方法は何ですか

1. 色を表現する英単語

最も直接的で簡単な方法は次のとおりです。色の英語の単語を使用して単語を表現します。たとえば、「red」と書きます。「color: red」と書くことができます。

欠点: 色は何千もあり、すべての色に対応する英単語があるわけではなく、使用には制限があります。

2. 色の 16 進数表現

16 進数の色の構成要素は次のとおりです: #RRGGBB (RR (赤)、GG (緑)、BB (青)、すべての値は 0 から FF の間である必要があります。平たく言えば、16 進数の本質は rgb であり、2 桁ごとに色を表します。各2桁の値が同じ場合は省略可能で、例えばcolor:#ffcc00をcolor:#fc0と省略できます。

すべての主要なブラウザは 16 進カラー値をサポートしており、推奨されます。

3. RGB は色を表します

RGB では、R は赤、G は緑、B は青を表します。

RGB 書き込み方式: rgb (0,0,0)。値の範囲は 0 ~ 255 で、値が大きいほど色が暗くなります。 RGB では、数値を使用するだけでなく、0% から 100% までの値のパーセンテージを使用することもできます。例: RGB (0,0,255) と RGB (0%, 0%, 100%) は同じ色を表します。

一般的な色の RGB 表現。赤: rgb(255,0,0); 白: rgb(255,255,255); 黒: rgb(0,0,0)

すべての主要なブラウザは RGB カラー値をサポートしています。

4. HSL は色を表します

HSL の色の値は色相、彩度、明度を表します。

色相は、カラー ホイール (0 から 360) の度合いです。0 (または 360) は赤、120 は緑、240 は青です。彩度はパーセント値であり、0% はグレーの色合いを意味し、100% はフルカラーを意味します。明るさもパーセンテージで表され、0% は黒、100% は白です。

注: IE9、Firefox、Chrome、Safari、Opera10。HSL カラー値をサポートします。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSS3で色の値を表現する方法にはどのようなものがありますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。