CSS 颜色教程_CSS 颜色免费在线学习_CSS 教程_CSS

CSS 颜色是用于设置元素文本、背景、边框等颜色的属性。CSS 提供了多种方式来表示颜色，以下是常见的颜色表示方法及其用法：

1. 颜色表示方法

1.1 颜色名称

CSS 支持 140 多种预定义的颜色名称，如 red、blue、green 等。

示例：

.text {
  color: red; /* 红色文本 */
}
.background {
  background-color: blue; /* 蓝色背景 */
}

1.2 十六进制颜色（Hex）

使用 # 开头的 6 位或 3 位十六进制数表示颜色。
6 位格式：#RRGGBB，如 #ff0000 表示红色。
3 位格式：#RGB，如 #f00 是 #ff0000 的简写。

示例：

.text {
  color: #ff0000; /* 红色 */
}
.background {
  background-color: #00ff00; /* 绿色 */
}

1.3 RGB 和 RGBA

RGB：rgb(red, green, blue)，每个值的范围是 0 到 255。
RGBA：rgba(red, green, blue, alpha)，alpha 表示透明度，范围是 0（完全透明）到 1（完全不透明）。

示例：

.text {
  color: rgb(255, 0, 0); /* 红色 */
}
.background {
  background-color: rgba(0, 255, 0, 0.5); /* 半透明绿色 */
}

1.4 HSL 和 HSLA

HSL：hsl(hue, saturation, lightness)。
hue：色相，范围是 0 到 360。
saturation：饱和度，范围是 0% 到 100%。
lightness：亮度，范围是 0% 到 100%。
HSLA：hsla(hue, saturation, lightness, alpha)，alpha 表示透明度。

示例：

.text {
  color: hsl(120, 100%, 50%); /* 纯绿色 */
}
.background {
  background-color: hsla(240, 100%, 50%, 0.5); /* 半透明蓝色 */
}

1.5 透明度（Opacity）

使用 opacity 属性设置元素的透明度，范围是 0（完全透明）到 1（完全不透明）。
注意：opacity 会影响整个元素（包括内容），而 rgba 和 hsla 只影响颜色。

示例：

.element {
  opacity: 0.5; /* 半透明 */
}

2. 颜色属性

2.1 文本颜色（`color`）

设置文本的颜色。

示例：

.text {
  color: #333; /* 深灰色文本 */
}

2.2 背景颜色（`background-color`）

设置元素的背景颜色。

示例：

.background {
  background-color: #f0f0f0; /* 浅灰色背景 */
}

2.3 边框颜色（`border-color`）

设置元素的边框颜色。

示例：

.border {
  border: 2px solid #ff0000; /* 红色边框 */
}

2.4 阴影颜色（`box-shadow` 和 `text-shadow`）

box-shadow：设置元素的阴影颜色。
text-shadow：设置文本的阴影颜色。

示例：

.box {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 灰色阴影 */
}
.text {
  text-shadow: 1px 1px 2px rgba(255, 0, 0, 0.5); /* 红色文本阴影 */
}

3. 颜色函数

3.1 `currentColor`

表示当前元素的 color 属性值。
常用于使其他属性（如边框、背景）与文本颜色一致。

示例：

.element {
  color: blue;
  border: 2px solid currentColor; /* 边框颜色与文本颜色一致 */
}

3.2 `transparent`

表示完全透明的颜色。

示例：

.background {
  background-color: transparent; /* 透明背景 */
}

4. 颜色工具

在线调色工具：如 Color Picker。
CSS 预处理器：如 Sass、Less，支持颜色计算和函数。

5. 示例代码

5.1 文本和背景颜色

.zz123_text {
  color: #ffffff; /* 白色文本 */
  background-color: #3498db; /* 蓝色背景 */
}

5.2 边框和阴影颜色

.zz123_box {
  border: 2px solid rgba(0, 0, 0, 0.5); /* 半透明黑色边框 */
  box-shadow: 3px 3px 10px hsla(0, 0%, 0%, 0.2); /* 灰色阴影 */
}

5.3 透明度

.zz123_transparent {
  background-color: rgba(255, 0, 0, 0.3); /* 半透明红色背景 */
  opacity: 0.8; /* 元素整体透明度 */
}

总结

CSS 提供了多种颜色表示方法，包括颜色名称、十六进制、RGB/RGBA、HSL/HSLA 等。通过合理使用这些方法，可以为网页设计出丰富的视觉效果。如果需要进一步调整或扩展功能，请随时告诉我！

CSS

CSS 教程

CSS 颜色