三剑客实战之Css入门基础知识[css控制颜色]
css中，控制指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值，在 CSS 中，可以使用颜色名称来指定颜色，CSS/HTML 支持 140 种标准颜色名。
CSS 文本颜色
下面是简单设置文本的颜色。代码演示：（关键词：color:）
<!DOCTYPE html> <html> <body> <h3 style="color:Tomato;">Hello World</h3> <p style="color:DodgerBlue;">welcome to www.uuucd.cn!</p> <p style="color:MediumSeaGreen;">这是一段带颜色的字体.</p> </body> </html>
结果显示为：
Hello World
welcome to www.uuucd.cn!
这是一段带颜色的字体.
CSS 背景色
下面是为 HTML 元素设置背景色。代码演示：（关键词：background-color:）
<!DOCTYPE html> <html> <body> <h1 style="background-color:Orange;">Hello World，欢迎您！</h1> <p style="background-color:Tomato;"> 这里是一段有背景颜色的字体哦…… </p> </body> </html>
结果显示为
CSS 颜色名
在 CSS 中，可以使用颜色名称来指定颜色,比如：Tomato， Orange， DodgerBlue， MediumSeaGreen， Gray， SlateBlue， Violet， LightGray。分别的颜色 如下：
CSS 边框颜色
下面是设置边框的颜色：（关键词：border: solid）
<!DOCTYPE html> <html> <body> <h1 style="border: 2px solid Tomato;">Hello 这里是一个标题</h1> <h1 style="border: 2px solid DodgerBlue;">Hello 我的边框是有颜色的</h1> <h1 style="border: 2px solid Violet;">Hello 我的边框颜色是粉红的哦</h1> </body> </html>
结果显示为：
RGBA 值
关键词：background-color:rgba
演示代码：
<!DOCTYPE html> <html> <body> <h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1> <h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1> <p>您可通过使用 RGBA 颜色值来生成透明色。</p> </body> </html>
RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度。
RGBA 颜色值指定为：
rgba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：
请通过混合以下 RGBA 值来进行实验，如图所示：
CSS RGB 颜色
RGB 值
关键词：background-color:rgb(0, 0, 0);
代码演示：
<!DOCTYPE html> <html> <body> <h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1> <h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1> <h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1> <h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1> <h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1> <h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1> <p>在 HTML 中，您可使用 RGB 值规定颜色。</p> </body> </html>
在 CSS 中，可以使用下面的公式将颜色指定为 RGB 值：
rgb(red, green, blue)
每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。
例如，rgb(255, 0, 0) 显示为红色，因为红色设置为最大值（255），其他设置为 0。
要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。
要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。
CSS HEX 颜色
HEX 值
关键词：background-color:
代码演示：
<!DOCTYPE html> <html> <body> <h1 style="background-color:#ff0000;">#ff0000</h1> <h1 style="background-color:#0000ff;">#0000ff</h1> <h1 style="background-color:#3cb371;">#3cb371</h1> <h1 style="background-color:#ee82ee;">#ee82ee</h1> <h1 style="background-color:#ffa500;">#ffa500</h1> <h1 style="background-color:#6a5acd;">#6a5acd</h1> <p>在 HTML 中，您可以使用十六进制值规定颜色。</p> </body> </html>
在 CSS 中，可以使用以下格式的十六进制值指定颜色：
#rrggbb
其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。
例如，#ff0000 显示为红色，因为红色设置为最大值（ff），其他设置为最小值（00）。
通常为所有 3 个光源使用相等的值来定义灰色阴影。
CSS HSL 颜色
HSL 值
关键词：background-color:hsl
代码演示：
<!DOCTYPE html> <html> <body> <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> <h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1> <h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1> <h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1> <h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1> <h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1> <p>在 HTML 中，您可以使用 HSL 值来设置颜色。</p> </body> </html>
在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下：
hsla(hue, saturation, lightness)
色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。
饱和度
0％ 是完全灰色，您无法再看到颜色。
50％ 是 50％ 灰色，但是您仍然可以看到颜色。
100％ 是纯色，没有灰色阴影
饱和度可以描述为颜色的强度。
亮度
颜色的明暗度可以描述为要赋予颜色多少光，其中 0％ 表示不亮（黑色），50％ 表示 50％ 亮（既不暗也不亮），100％ 表示全明（白）。
通常通过将色调和饱和度设置为 0 来定义灰色阴影，并将亮度从 0％ 到 100％ 进行调整可以得到更深/更浅的阴影。
HSLA 值
关键词：background-color:hsla
代码演示：
<!DOCTYPE html> <html> <body> <h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1> <p>您可使用 HSLA 颜色值生成透明色。</p> </body> </html>
HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度。
HSLA 颜色值指定为：
hsla(hue, saturation, lightness, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：
![三剑客实战之Css入门基础知识一[语法基础之选择器]](https://www.uuucd.cn/zb_users/cache/thumbs/d4665633f15e9a9b6e8cfa1ac7fbdabc-120-84-1.jpg)
![三剑客实战之Css入门基础知识[CSS 背景属性定义]](https://www.uuucd.cn/zb_users/upload/2022/01/202201071641552668424278.webp)
![三剑客实战之Css入门基础知识[css边框属性教程一]](https://www.uuucd.cn/zb_users/upload/2022/01/202201071641552752282471.webp)
![三剑客实战之Css入门基础知识[css边框属性教程二]](https://www.uuucd.cn/zb_users/theme/tpure/include/thumb/6.jpg)
![三剑客实战之Css入门基础知识[框模型及轮廓颜色一]](https://www.uuucd.cn/zb_users/cache/thumbs/f8d25bbfa49bc4e35c05b523187dffc8-120-84-1.jpg)
