CSS - color 属性

CSS 的color属性设置元素内文本的颜色。除非子元素有自己定义的color属性，否则该颜色也会应用于元素内所有子元素的文本。

语法

color: color | initial | inherit;

属性值

值	描述
color	它指定文本的颜色。可以使用不同的颜色格式（颜色名称、十六进制值、RGB 值、HSL 值）。
initial	它将属性设置为其默认值。
inherit	它从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 颜色属性示例

以下示例使用不同的值解释了color属性。

使用颜色名称的颜色属性

要设置文本的颜色，我们可以使用颜色名称（红色、蓝色、绿色等）。以下示例显示了这一点。

示例

Open Compiler

<!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 等）。以下示例显示了这一点。

示例

Open Compiler

<!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) 等）。以下示例显示了这一点。

示例

Open Compiler

<!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%) 等）。以下示例显示了这一点。

示例

Open Compiler

<!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) 等）。这些格式中的第四个值指定不透明度。以下示例显示了这一点。

示例

Open Compiler

<!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

打印页面