参考资料

  1. HTML 属性
  2. HTML 表单详解
  3. HTML id 属性在 JavaScript 中的使用
  4. Html转PHP代码有哪些
  5. HTML 音频(Audio)
  6. html内嵌框架标签详细说明以及案例
  7. HTML 文本对齐方式
  8. 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：颜色名称十六进制格式关键字属性元素定义透明度全透明

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。