HTML 颜色代码 - CSS

HTML 颜色代码用于定义网页中的颜色，CSS 则提供了更多的控制方式来使用这些颜色。

HTML 颜色代码

颜色代码可以使用十六进制、RGB 或者颜色名称来定义。以下是示例代码：

<!-- 使用十六进制颜色代码定义颜色 -->
<p style="color: #ff0000;">红色</p>

<!-- 使用 RGB 颜色代码定义颜色 -->
<p style="color: rgb(0, 255, 0);">绿色</p>

<!-- 使用颜色名称定义颜色 -->
<p style="color: blue;">蓝色</p>

CSS 颜色属性

CSS 提供了更多的颜色属性，可以更加灵活地控制颜色。

color

使用 color 属性设置文本颜色，语法如下：

color: value;

其中的 value 可以是颜色名称、十六进制、RGB 或者 RGBA。

p {
  color: blue;
}

p {
  color: #ff0000;
}

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

p {
  color: rgba(255, 0, 0, 0.5); /* 带 alpha 值的 RGBA */
}

background-color

使用 background-color 属性设置元素背景颜色，语法如下：

background-color: value;

其中的 value 可以是颜色名称、十六进制、RGB 或者 RGBA。

body {
  background-color: #f0f0f0;
}

button {
  background-color: rgb(255, 255, 0);
}

div {
  background-color: rgba(0, 0, 255, 0.5); /* 带 alpha 值的 RGBA */
}

border-color

使用 border-color 属性设置边框颜色，语法如下：

border-color: value;

其中的 value 可以是颜色名称、十六进制、RGB 或者 RGBA。如果元素有多个边框，可以使用 border-top-color、border-right-color、border-bottom-color、border-left-color 分别指定每个边框颜色。

div {
  border: 1px solid #000;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

总结

HTML 颜色代码可以使用十六进制、RGB 或者颜色名称来定义颜色。CSS 可以更加灵活地控制颜色，提供了 color、background-color、border-color 等属性来设置不同元素的颜色属性。