CSS - color 屬性

CSS 的color屬性設定元素內文字的顏色。除非子元素有自己定義的color屬性，否則該顏色也會應用於元素內所有子元素的文字。

語法

color: color | initial | inherit;

屬性值

值	描述
color	它指定文字的顏色。可以使用不同的顏色格式（顏色名稱、十六進位制值、RGB 值、HSL 值）。
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承屬性。

CSS 顏色屬性示例

以下示例使用不同的值解釋了color屬性。

使用顏色名稱的顏色屬性

要設定文字的顏色，我們可以使用顏色名稱（紅色、藍色、綠色等）。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: red;
      }

      p {
         color: blue;
      }

      div {
         background-color: lightgreen;
         width: 50%;
         padding: 20px;
         color: purple;
      }
   </style>
</head>

<body>
   <h2>
      CSS color property
   </h2>
   <h3>
      This h3 tag has red color text.
   </h3>
   <p>
      This p tag has blue color text.
   </p>
   <div>
      This div has purple color text.
   </div>
</body>

</html>

使用十六進位制值的顏色屬性

要設定文字的顏色，我們可以使用十六進位制值（#ff0000、#ffffff 等）。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: #666699;
      }

      p {
         color: #cc0000;
      }

      div {
         background-color: lightgreen;
         width: 50%;
         padding: 20px;
         color: #cc6600;
      }
   </style>
</head>

<body>
   <h2>
      CSS color property
   </h2>
   <h3>
      This h3 tag has '#666699' color text.
   </h3>
   <p>
      This p tag has '#cc0000' color text.
   </p>
   <div>
      This div has '#cc6600' color text.
   </div>
</body>

</html>

使用 RGB 值的顏色屬性

要設定文字的顏色，我們可以使用 RGB 值（rgb(255, 0, 0)、rgb(255, 255, 0) 等）。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: rgb(255, 153, 0);
      }

      p {
         color: rgb(255, 0, 102);
      }

      div {
         background-color: lightgreen;
         width: 50%;
         padding: 20px;
         color: rgb(198, 26, 255);
      }
   </style>
</head>

<body>
   <h2>
      CSS color property
   </h2>
   <h3>
      This h3 tag has 'rgb(255, 153, 0)' color text.
   </h3>
   <p>
      This p tag has 'rgb(255, 0, 102)' color text.
   </p>
   <div>
      This div has 'rgb(198, 26, 255)' color text.
   </div>
</body>

</html>

使用 HSL 值的顏色屬性

要設定文字的顏色，我們可以使用 HSL 值（hsl(300, 100%, 90%)、hsl(0, 100%, 50%) 等）。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: hsl(210, 50%, 40%);
      }

      p {
         color: hsl(240, 100%, 20%);
      }

      div {
         background-color: lightgreen;
         width: 50%;
         padding: 20px;
         color: hsl(120, 100%, 20%);
      }
   </style>
</head>

<body>
   <h2>
      CSS color property
   </h2>
   <h3>
      This h3 tag has 'hsl(210, 50%, 40%)' color text.
   </h3>
   <p>
      This p tag has 'hsl(240, 100%, 20%)' color text.
   </p>
   <div>
      This div has 'hsl(120, 100%, 20%)' color text.
   </div>
</body>

</html>

使用不透明度的顏色屬性

要設定文字的顏色並新增不透明度，我們可以使用 rgba 或 hsla 值（rgba(201, 76, 76, 0.6)、hsla(89, 43%, 51%, 0.6) 等）。這些格式中的第四個值指定不透明度。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: rgba(201, 76, 76, 0.6);
      }

      h4 {
         color: hsla(89, 43%, 51%, 0.4);
      }
   </style>
</head>

<body>
   <h2>
      CSS color property
   </h2>
   <h3>
      This h3 tag has 'rgba(201, 76, 76, 0.6)'
      color text with opacity.
   </h3>
   <h4>
      This h4 tag has 'hsla(89, 43%, 51%, 0.4)'
      color text with opacity.
   </h4>

</body>

</html>

支援的瀏覽器

屬性
color	1.0	3.0	1.0	1.0	3.5

css_properties_reference.htm

列印頁面