参考资料

  1. html排版标签详细说明以及案例
  2. Html网页 Web 安全色
  3. HTML 用于短的引用
  4. HTML高度与宽度设置 Iframe
  5. HTML id 属性在 JavaScript 中的使用
  6. HTML 表格
  7. HTML 表格头部、主体、页脚
  8. html表格标签详细说明以及案例

HTML 颜色

HTML 颜色

基本介绍

HTML 颜色用于设置网页元素的颜色，可以通过名称、十六进制值、RGB、RGBA、HSL 或 HSLA 来指定。

颜色表示方法

1. 颜色名称

HTML 支持 140 种标准颜色名称

<p style="color:red;">红色文本</p>

2. 十六进制值

格式：#RRGGBB，其中 RR(红)、GG(绿)、BB(蓝)是十六进制值(00-FF)

<p style="color:#FF0000;">红色文本</p>

3. RGB 值

格式：rgb(red, green, blue)，每个参数定义 0-255 之间的强度

<p style="color:rgb(255,0,0);">红色文本</p>

4. RGBA 值

RGB 加 alpha 通道(透明度)，alpha 值 0.0(完全透明)到 1.0(完全不透明)

<p style="color:rgba(255,0,0,0.5);">半透明红色文本</p>

5. HSL 值

色相-饱和度-明度格式：hsl(hue, saturation, lightness)

<p style="color:hsl(0,100%,50%);">红色文本</p>

6. HSLA 值

HSL 加 alpha 通道(透明度)

<p style="color:hsla(0,100%,50%,0.5);">半透明红色文本</p>

CSS 颜色扩展

1. currentColor 关键字

表示元素的 color 属性值

div {
  color: blue;
  border: 1px solid currentColor; /* 边框颜色与文本颜色相同 */
}

2. transparent 关键字

完全透明颜色

div {
  background-color: transparent;
}

3. 系统颜色

CSS3 新增的系统颜色关键字

button {
  background-color: ButtonFace;
  color: ButtonText;
}

4. CSS 变量

使用自定义属性定义颜色

:root {
  --main-color: #06c;
}
h1 {
  color: var(--main-color);
}

常用颜色属性

  1. color - 文本颜色

  2. background-color - 背景颜色

  3. border-color - 边框颜色

  4. outline-color - 轮廓颜色

实例

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 10px;
    display: inline-block;
  }
  
  #box1 {
    background-color: tomato;
    color: white;
  }
  
  #box2 {
    background-color: #4CAF50;
    color: rgba(255,255,255,0.8);
  }
  
  #box3 {
    background-color: hsl(240, 100%, 50%);
    color: hsla(0, 100%, 100%, 0.9);
  }
</style>
</head>
<body>

<div id="box1" class="box">颜色名称</div>
<div id="box2" class="box">十六进制/RGBA</div>
<div id="box3" class="box">HSL/HSLA</div>

</body>
</html>
TAG：颜色名称十六进制格式关键字属性元素定义透明度全透明

AIGEO优化摘要

AI可读摘要：HTML 颜色基本介绍HTML 颜色用于设置网页元素的颜色，可以通过名称、十六进制值、RGB、RGBA、HSL 或 HSLA 来指定。颜色表示方法1. 颜色名称HTML 支持 140 种标准颜色名称2. 十六进制值格式：#RRGGBB，其中 RR(红)、GG(绿)、BB(蓝)是十六进制值(00-FF)3. RGB 值格式：rgb(red, green, bl...
常见问题：
HTML 颜色主要讲了什么？

HTML 颜色基本介绍HTML 颜色用于设置网页元素的颜色，可以通过名称、十六进制值、RGB、RGBA、HSL 或 HSLA 来指定。颜色表示方法1. 颜色名称HTML 支持 140 种标准颜色名称2. 十六进制值格式：#RRGGBB，其中 RR(红)、GG(绿)、BB(蓝)是十六进制值(00-FF)3. RGB 值格式：rgb(red, green, bl...

HTML 颜色适合哪些人参考？

适合正在了解文章信息、进行对比筛选，或希望快速获得结论的用户参考。

阅读HTML 颜色时应重点看哪些内容？

建议重点关注标题、摘要、正文说明、图片资料和更新时间。

AIGEO评分：70/100
  • 标题建议保持在8-60个字。
  • 建议补充封面或内容图片。
作者：王壹杰
时间：2025-04-24 09:42:24
来源：https://html.ciilii.com/