html5のセットカラー-Golang-php.cn

html5のセットカラー

王林

リリース： 2023-05-09 11:39:37

オリジナル

1102 人が閲覧しました

HTML5 は Web コンテンツを作成するための言語です。カラー設定はWebデザインにとって非常に重要です。 HTML5 では、色名、RGB 値、16 進値、HSL 値の使用など、さまざまな方法で色を設定できます。

色名は最も単純な方法の 1 つであり、赤、緑、青などの事前定義された色の名前のセットです。 HTML5 で一般的に使用される色の名前をいくつか示します。

<font color="red">红色</font>
<font color="green">绿色</font>
<font color="blue">蓝色</font>
<font color="pink">粉色</font>
<font color="purple">紫色</font>

ログイン後にコピー

色を設定するもう 1 つの方法は、RGB 値を使用することです。 RGB 値は、赤、緑、青の値を表す 3 つの数値で構成されます。各値の範囲は 0 ～ 255 で、次のコードを使用して色を設定できます:

<font color="rgb(255, 0, 0)">红色</font>
<font color="rgb(0, 255, 0)">绿色</font>
<font color="rgb(0, 0, 255)">蓝色</font>
<font color="rgb(255, 192, 203)">粉色</font>
<font color="rgb(128, 0, 128)">紫色</font>

ログイン後にコピー

16 進値を使用することも、色を設定する一般的な方法です。 16 進値は 6 文字で構成され、最初の 2 文字は赤色の値を表し、中央の 2 文字は緑色の値を表し、最後の 2 文字は青色の値を表します。各文字は 0 から F までの値を持ちます。0 は最小値を表し、F は最大値を表します。以下は 16 進値を使用して色を設定する例です:

<font color="#FF0000">红色</font>
<font color="#00FF00">绿色</font>
<font color="#0000FF">蓝色</font>
<font color="#FFC0CB">粉色</font>
<font color="#800080">紫色</font>

ログイン後にコピー

HSL 値は色を設定する新しい方法であり、色は次のコードを使用して設定できます:

<font color="hsl(0, 100%, 50%)">红色</font>
<font color="hsl(120, 100%, 50%)">绿色</font>
<font color="hsl(240, 100%, 50%)">蓝色</font>
<font color="hsl(350, 100%, 88%)">粉色</font>
<font color="hsl(300, 100%, 25%)">紫色</font>

ログイン後にコピー

ここで、Hは色相、Sは彩度、Lは明度を表します。色相は0から360までの値を持ち、彩度と明度は0%から100%までの値を持ちます。

上記の方法に加えて、CSS スタイルシートを使用して色を設定することもできます。スタイルシートを使用すると、Web ページのすべての要素の色を一元的に簡単に定義でき、ページの管理と更新が容易になります。 CSS を使用して色を設定する例を次に示します。

<style>
.red {
  color: red;
}

.green {
  color: green;
}

.blue {
  color: blue;
}

.pink {
  color: pink;
}

.purple {
  color: purple;
}
</style>

<font class="red">红色</font>
<font class="green">绿色</font>
<font class="blue">蓝色</font>
<font class="pink">粉色</font>
<font class="purple">紫色</font>

ログイン後にコピー

上で述べたように、HTML5 では色を設定する方法が複数あります。どの方法を選択するかは、色のニーズと個人の好みによって異なります。どちらの方法を選択する場合でも、ページをより美しく、読みやすくするために、色の使用に注意してください。

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