参考资料

  1. HTML 块引用格式化
  2. HTML 删除字符效果和插入字符效果
  3. Html转PHP代码有哪些
  4. HTML 引文、引用和定义元素
  5. HTML 自定义列表
  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：颜色名称十六进制格式关键字属性元素定义透明度全透明