HTMLの色の設定

WBOY
リリース: 2023-05-27 12:13:08
オリジナル
863 人が閲覧しました

HTML カラー設定とは、Web ページ内のテキスト、背景、境界線などの要素の色を設定することを指します。 HTML マークアップでは、色名、16 進値、RGB 値、および HSL (色相、彩度、明度) 値を使用して色を設定できます。

具体的な設定方法は次のとおりです。

  1. カラー名

HTMLでは、赤(レッド)、黄色(レッド)など、多くのプリセットカラー名がサポートされています。黄(イエロー)、青(ブルー)など。タグでは、これらの色の名前を使用して、要素の色を対応する色に設定できます。たとえば、テキストを赤色にするには、次のコードを使用します。

<p style="color: red;">这段文本的颜色为红色</p>
ログイン後にコピー
  1. 16 進値
#HTML では、16 進数のカラー コードを使用して要素の色を設定することもできます。 。 16 進数のカラー コードは 6 文字で構成され、最初の 2 文字は赤のコンポーネントを表し、中央の 2 文字は緑のコンポーネントを表し、最後の 2 文字は青のコンポーネントを表します。各コンポーネントは 00 ~ FF の範囲の値を持ち、A ~ F の文字だけでなく数字でも表すことができます。

たとえば、次のコードはテキストの色を濃い灰色に設定します:

<p style="color: #333333;">这段文本的颜色为深灰色</p>
ログイン後にコピー

    RGB 値
は 16 進数のカラー コードに似ています。だけでなく、RGB 値を使用して要素の色を設定することもできます。 RGB 値は、赤、緑、青の成分の値を表す 3 つの数値で構成されます。各コンポーネントの値は 0 ~ 255 の範囲です。

たとえば、次のコードはテキストの色を明るい緑色に設定します:

<p style="color: rgb(144, 238, 144);">这段文本的颜色为浅绿色</p>
ログイン後にコピー

    HSL 値
RGB 値に加えて、HTML も要素の色を設定するための HSL (色相、彩度、明度) 値の使用をサポートします。 HSL 値は、色相、彩度、明度の 3 つの属性の値を表す 3 つの数値で構成されます。このうち、色相の値の範囲は色の色相角を示す 0 ~ 360、彩度の値の範囲は色の彩度を示す 0% ~ 100%、明度の値の範囲も 0% ~ 100% です。 100%、色の明るさを表します。

たとえば、次のコードはテキストの色を明るい青に設定します:

<p style="color: hsl(210, 100%, 50%);">这段文本的颜色为亮蓝色</p>
ログイン後にコピー
テキスト設定で色を使用するだけでなく、HTML では背景や境界線などの要素でも色を使用できます。これらの要素の色の設定はテキストの色の設定と似ており、対応する属性をラベルに追加するだけです。

要約すると、HTML では、色の名前、16 進値、RGB 値から HSL 値まで、要素の色を設定するさまざまな方法が提供されます。テキスト、背景、枠線、その他の要素のいずれであっても、上記の方法で色を設定して、Web ページによりカラフルな視覚効果を与えることができます。

以上がHTMLの色の設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!