参考资料

  1. HTML 删除字符效果和插入字符效果
  2. CSS 实现购物按钮
  3. html链接标签详细说明以及案例
  4. HTML/UBB互转有哪些
  5. HTML 表格的嵌套
  6. HTML 属性
  7. HTML格式化/压缩有哪些
  8. cache-control 浏览器缓存行为

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：颜色名称十六进制格式关键字属性元素定义透明度全透明