CSS color 属性

CSS 的 color 属性用于定义 HTML 元素的颜色。颜色可以用预定义的颜色名称、十六进制、RGB、RGBA 和 HSL 值来表示。

语法

color: value;

其中，value 可以是以下之一：

• 预定义颜色名称：例如 red、green、blue、yellow 等。
• 十六进制值：例如 #000000（黑色）、#FFFFFF（白色）、#FF0000（红色）等。可以用 3、6 或 8 个字符来表示。
• RGB 值：例如 rgb(255, 0, 0)（红色）、rgb(0, 255, 0)（绿色）等。每个颜色值可以是 0~255 之间的整数。
• RGBA 值：可以在 RGB 值基础上增加 alpha 通道，用于表示不透明度。例如 rgba(255, 0, 0, 0.5)（半透明红色）。
• HSL 值：采用色相（hue）、饱和度（saturation）和亮度（lightness）三个值来表示。例如 hsl(0, 100%, 50%)（红色）。

示例

body {
  background-color: #f2f2f2;
  color: rgb(0, 0, 139);
}

h1 {
  color: red;
}

p {
  color: rgba(0, 255, 0, 0.5);
}

div {
  background-color: hsl(240, 100%, 50%);
  color: hsl(0, 0%, 100%);
}

注意事项

• 在 HTML 中，可以使用颜色名称或十六进制值直接设置元素的颜色。例如 <p style="color: red;">红色文字</p>。
• 如果需要多个元素共用同一个颜色，最好将颜色定义为 CSS 变量（Custom Properties），以便统一管理。例如 :root { --main-color: #FF6347; }。