HTMLのカラースタイル-htmlチュートリアル-php.cn

HTMLのカラースタイル

PHPz

リリース： 2023-09-14 12:25:05

転載

853 人が閲覧しました

カラーは、Web サイトに優れた外観と雰囲気を与えるために非常に重要です。

16 進コード (16 進カラー表現)

16 進コードは、6 ビットのカラー表現です。最初の 2 桁 (RR) は赤色の値を表し、次の 2 桁は緑色の値 (GG)、最後の桁は青色の値 (BB) を表します。

Adobe Photoshop などのソフトウェアは、あらゆるグラフィックスから 16 進値を取得できます。各 16 進コードの前にはハッシュ記号またはポンド記号 # が付きます。以下は、16 進表記を使用したいくつかの色のリストです。ここに 16 進数の色の例をいくつか示します -

HTMLのカラースタイル

# 色を表現するために HTML に 16 進数のスタイルを実装する例を見てみましょう -

Example

ライブデモ

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 2px solid black;
   }
</style>
</head>
<body>
<h2>Result</h2>
<table>
   <colgroup>
      <col span = "3" style = "background-color:#00FF00;">
      <col style = "background-color:#00FFFF;">
   </colgroup>
   <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Percentage</th>
      <th>Rank</th>
   </tr>
   <tr>
      <td>009</td>
      <td>Tom</td>
      <td>98</td>
      <td>1</td>
   </tr>
   <tr>
      <td>011</td>
      <td>Kieron</td>
      <td>97</td>
      <td>2</td>
   </tr>
   <tr>
      <td>039</td>
      <td>Gayle</td>
      <td>95</td>
      <td>3</td>
   </tr>
   <tr>
      <td>017</td>
      <td>Shaun</td>
      <td>92</td>
      <td>4</td>
   </tr>
   <tr>
      <td>009</td>
      <td>Kane</td>
      <td>91</td>
      <td>5</td>
   </tr>
   <tr>
      <td>025</td>
      <td>Steve</td>
      <td>87</td>
      <td>6</td>
   </tr>
   <tr>
      <td>013</td>
      <td>Jack</td>
      <td>85</td>
      <td>7</td>
   </tr>
   <tr>
      <td>023</td>
      <td>Tim</td>
      <td>84</td>
      <td>8</td>
   </tr>
</table>
</body>
</html>

ログイン後にコピー

出力

HTMLのカラースタイル ##RGB カラー値

RGB カラー値は、指定された rgb() 属性を使用しています。このプロパティは、赤、緑、青に 1 つずつ、合計 3 つの値を取ります。値には、0 ～ 255 の整数またはパーセンテージを指定できます。

ここでは、RGB-

HTMLのカラースタイル HSL カラー値で表されるいくつかの色を示します

HTML を使用して、HUE を設定することもできます。「H」は色相、「S」は彩度、「L」は明度を表します。

色を表現するために HTML に HSL スタイルを実装する例を見てみましょう -

Example

ライブデモンストレーション

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 2px solid black;
   }
</style>
</head>
<body>
<h2>Result</h2>
<table>
   <colgroup>
      <col span = "3" style = "background-color: hsl(300, 75%, 85%); ">
      <col style = "background-color: hsl(200, 30%, 40%);">
   </colgroup>
   <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Percentage</th>
      <th>Rank</th>
   </tr>
   <tr>
      <td>009</td>
      <td>Tom</td>
      <td>98</td>
      <td>1</td>
   </tr>
   <tr>
      <td>011</td>
      <td>Kieron</td>
      <td>97</td>
      <td>2</td>
   </tr>
   <tr>
      <td>039</td>
      <td>Gayle</td>
      <td>95</td>
      <td>3</td>
   </tr>
   <tr>
      <td>017</td>
      <td>Shaun</td>
      <td>92</td>
      <td>4</td>
   </tr>
   <tr>
      <td>009</td>
      <td>Kane</td>
      <td>91</td>
      <td>5</td>
   </tr>
   <tr>
      <td>025</td>
      <td>Steve</td>
      <td>87</td>
      <td>6</td>
   </tr>
   <tr>
      <td>013</td>
      <td>Jack</td>
      <td>85</td>
      <td>7</td>
   </tr>
   <tr>
      <td>023</td>
      <td>Tim</td>
      <td>84</td>
      <td>8</td>
   </tr>
</table>
</body>
</html>

ログイン後にコピー

これにより、次の出力が生成されます - # ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

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