CSS初级教程【第一天】
- 【1】CSS初识
- 【2】CSS简介
- 【3】CSS语法
- 【4】CSS 选择器
- 【5】CSS使用
- 【6】CSS 注释
- 【7】CSS 颜色
- 【8】CSS RGB 颜色
- 【9】CSS HEX 颜色
- 【10】CSS HSL 颜色（色相| 饱和度 | 明度）
- 【0】末尾声名
【1】CSS初识
CSS 是一种描述 HTML 文档样式的语言。
CSS 描述应该如何显示 HTML 元素。
学好CSS对于网站的建设非常重要，并且在Qt学习中，Qss和Css具有异曲同工之妙，不管学好哪一种对自我的提升都非常Nice
注释使用：
/* 注释内容 */
< !-- 注释内容 -->
先看一个实例
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;/*网站可见部分的背景颜色*/
}
h1 {/*一级标题的风格样式定义*/
color: white;
text-align: center;
}
p {/*段落的风格样式定义*/
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<!-- 这里的文字会自动拥有已定义的风格样式 -->
<h1>我的第一个 CSS 实例，</h1>
<p>这是一个段落。</p>
</body>
</html>
备注：
【1】< !DOCTYPE html> 代表文档类型是 html
【2】< html >代表文档开始标签
< /html >代表文档的结束标签
【3】< head > 这里存放一些样式设置，相当于定义一些变量，用于后面的使用< /head>
【4】< style > 这里写文档的风格样式< /style >
【5】< body >这里显示文档可见的所有内容，即网站真正显示的可见内容< /body >
【6】< h1 > 代表一级标题< /h1 >
剩余h2…h6都是标题往后推，跟word文档的标题级别相同
< p > 这是段落的单词首字母，用于写文章的段落< /p >
【2】CSS简介
什么是 CSS？
CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中
*：也称级联样式表。
为何使用 CSS？
CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。
万维网联盟（W3C）创建了 CSS。
CSS 节省了大量工作！
样式定义通常保存在外部 .css 文件中。
通过使用外部样式表文件，您只需更改一个文件即可更改整个网站的外观！
【3】CSS语法
CSS 语法
CSS 规则集（rule-set）由选择器和声明块组成：
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。
实例
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;/*字体颜色*/
text-align: center;/*文本对齐：居中*/
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>这些段落是通过 CSS 设置样式的。</p>
</body>
</html>
例子解释
p 是 CSS 中的选择器
（它指向要设置样式的 HTML 元素：< p >）。
color 是属性，red 是属性值
text-align 是属性，center 是属性值
【4】CSS 选择器
CSS 选择器
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
我们可以将 CSS 选择器分为五类：
`简单选择器（根据名称、id、类来选取元素）`
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）
此页会讲解最基本的 CSS 选择器。
【1】CSS 元素选择器
元素选择器根据元素名称来选择 HTML 元素。
实例
<!DOCTYPE html>
<html>
<head>
<style>
p {/*p就是元素名称*/
text-align: center;/*文本居中*/
color: red;/*字体颜色红色*/
}
</style>
</head>
<body>
<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
</body>
</html>
【2】CSS id 选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号
（＃），后跟该元素的 id。
实例
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {/*#代表特定的元素 para1:代表元素的id*/
text-align: center;/*文本居中*/
color: red;/*字体颜色红色*/
}
</style>
</head>
<body>
<!--注释： id关键字="id" 只有由id的元素才有用-->
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
</body>
</html>
注意：id 名称不能以数字开头。
【3】CSS 类选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，
请写一个句点（.）字符，后面跟类名。
实例
<!DOCTYPE html>
<html>
<head>
<style>
.center {/*.代表特定class元素 center代表类名*/
text-align: center;/*文本对齐*/
color: red;/*字体颜色*/
}
</style>
</head>
<body>
<!-- class关键字="类名" -->
<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>
</body>
</html>
您还可以指定只有特定的 HTML 元素会受类的影响。
实例
<!DOCTYPE html>
<html>
<head>
<style>
p.center {/*p代表特定的元素 .center代表特定 class 的元素*/
text-align: center;
color: red;
}
</style>
</head>
<body>
<!-- h1元素内容无法匹配类名-->
<h1 class="center">这个标题不受影响</h1>
<!-- p元素内容可以精准的匹配内容-->
<p class="center">这个段落将是红色并居中对齐的。</p>
</body>
</html>
HTML 元素也可以引用多个类。
实例
<!DOCTYPE html>
<html>
<head>
<style>
p.center {/*p.center 代表特定的p元素风格*/
text-align: center;
color: red;
}
p.large {/*p.large 代表特定的p元素风格*/
font-size: 300%;/*字体大小 百分比形式*/
}
</style>
</head>
<body>
<!-- h1没有匹配的风格 -->
<h1 class="center">这个标题不受影响</h1>
<!-- 匹配p.center这段风格-->
<p class="center">本段将是红色并居中对齐。</p>
<!-- 匹配p.center p.large这段风格 共用，空格隔开-->
<p class="center large">本段将是红色、居中对齐，并使用大字体。</p>
</body>
</html>
注意：类名不能以数字开头！
【4】CSS 通用选择器
通用选择器
（*）选择页面上的所有的 HTML 元素。
实例
<!DOCTYPE html>
<html>
<head>
<style>
* {/* *：如同通配符 范围作用于每一个元素*/
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>页面上的每个元素都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
</body>
</html>
【5】CSS 分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。
请看下面的 CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
最好对选择器进行分组，以最大程度地缩减代码。
如需对选择器进行分组，请用逗号来分隔每个选择器。
实例
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {/*同一种风格，作用于不同元素 使用 , 号分隔*/
text-align: center;/*文本居中*/
color: red;/*字体颜色：红色*/
}
</style>
</head>
<body>
<!-- h1 h2 p风格一致 -->
<h1>Hello World!</h1>
<h2>更小的标题</h2>
<p>这是一个段落。</p>
</body>
</html>
【5】CSS使用
当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。
三种使用 CSS 的方法
有三种插入样式表的方法：
外部 CSS
内部 CSS
行内 CSS
【1】外部 CSS
通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！
每张 HTML 页面必须在 head 部分的 < link > 元素内包含对外部样式表文件的引用。
实例
<!DOCTYPE html>
<html>
<head>
<!-- link代表连接关键字 rel="风格表" href="样式表文件"-->
<link rel="stylesheet" href="/demo/css/mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。
外部 .css 文件不应包含任何 HTML 标签。
“mystyle.css” 是这样的：
body {/*所有网站可见部分背景色=浅蓝色*/
background-color: lightblue;
}
h1 {/*最高级标题*/
color: navy;/*海蓝色*/
margin-left: 20px;/*文本距离左边缘 20像素*/
}
注意：请勿在属性值和单位之间添加空格（例如 margin-left: 20 px;）。正确的写法是：margin-left: 20px;
【2】内部 CSS
如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。
内部样式是在 head 部分的 < style > 元素中进行定义。
实例
<!DOCTYPE html>
<html>
<head>
<style>
body {/*网站可见的背景色=浅灰色*/
background-color: lightgray;
}
h1 {/*一级标题的风格样式*/
color: maroon;/*字体颜色=红褐色*/
margin-left: 40px;/*文本距离左边缘=40像素*/
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
【3】行内 CSS
行内样式（也称内联样式）可用于为单个元素应用唯一的样式。
如需使用行内样式，
请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
实例
<!DOCTYPE html>
<html>
<body>
<!-- 行内样式 不在需要 <head></head> 并将<style></style>内嵌在行内-->
<h1 style="color:blue;text-align:center;">这是标题</h1>
<p style="color:red;">这是一个段落。</p>
</body>
</html>
提示：行内样式失去了样式表的许多优点（通过将内容与呈现混合在一起）。请谨慎使用此方法。
【4】多个样式表
如果在不同样式表中为同一选择器（元素）定义了一些属性，则将使用最后读取的样式表中的值。
假设某个外部样式表为 < h1> 元素设定的如下样式：
h1 {
color: navy;
}
然后，假设某个内部样式表也为 < h1> 元素设置了如下样式：
h1 {
color: orange;
}
实例
<!DOCTYPE html>
<html>
<head>
<!-- 外部样式表 mystyle.css
body {/*所有网站可见部分背景色=浅蓝色*/
background-color: lightblue;
}
h1 {/*最高级标题*/
color: navy;/*海蓝色*/
margin-left: 20px;/*文本距离左边缘 20像素*/-->
<link rel="stylesheet" type="text/css" href="/demo/css/mystyle.css">
<!--内部样式表-->
<style>
h1 {
color: orange;/*橙色*/
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<!--背景色外部样式表决定 距离左边缘外部样式表决定 字体颜色按照先后顺序 后面的覆盖前面的 所有显示橙色-->
<p>本文档的样式是外部样式表和内部样式的组合。</p>
</body>
</html>
不过，如果在链接到外部样式表之前定义了内部样式，则 < h1 > 元素将是深蓝色：
实例
跟上面的一样，就一个顺序的问题，按照最后出现的为主
【5】层叠顺序
当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？
页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：
【1】行内样式（在 HTML 元素中）
【2】外部和内部样式表（在 head 部分）
【3】浏览器默认样式
因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。
【6】CSS 注释
注释用于解释代码，以后在您编辑源代码时可能会有所帮助。
浏览器会忽略注释。
位于 < style > 元素内的 CSS 注释，以 / * 开始，以 * / 结束：
实例
注释能横跨多行：
/* 这是一条单行注释 */
p {
color: red;
}
HTML 和 CSS 注释
从 HTML 教程中，您学习到可以使用
< !--...-->语法在 HTML 源代码中添加注释。在下面的例子中，我们结合使用了 HTML 和 CSS 注释：
实例
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* 把文本色设置为红色 */
}
</style>
</head>
<body>
<h1>我的标题</h1>
<!-- 这些段落将是红色 -->
<p>Hello World!</p>
<p>这段文本由 CSS 设置样式。</p>
<p>CSS 注释不会在输出中显示。</p>
</body>
</html>
【7】CSS 颜色
指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值。
实例
<!DOCTYPE html>
<html>
<body>
<!--行内风格-->
<h1 style="background-color:Tomato;">番茄色</h1>
<h1 style="background-color:Orange;">橙色</h1>
<h1 style="background-color:DodgerBlue;">道奇蓝</h1>
<h1 style="background-color:MediumSeaGreen;">中海绿色</h1>
<h1 style="background-color:Gray;">灰色</h1>
<h1 style="background-color:SlateBlue;">板岩蓝</h1>
<h1 style="background-color:Violet;">紫色</h1>
<h1 style="background-color:LightGray;">浅灰</h1>
</body>
</html>
CSS/HTML 支持 140 种标准颜色名。
【1】CSS 背景色
您可以为 HTML 元素设置背景色：
实例
<!DOCTYPE html>
<html>
<body>
<!-- 行内风格样式-->
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.
</p>
</body>
</html>
【2】CSS 文本颜色
您可以设置文本的颜色：
实例
<!DOCTYPE html>
<html>
<body>
<!-- 行内风格样式 字体颜色设置-->
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p style="color:MediumSeaGreen;">The city is located on the southern estuary of the Yangtze, with the Huangpu River flowing through it.</p>
</body>
</html>
【3】CSS 边框颜色
您可以设置边框的颜色：
实例
<!DOCTYPE html>
<html>
<body>
<!-- 行内风格样式 border代表边框 2px代表边框大小 solid代表边框是实线 solid后面的值代表边框颜色-->
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>
【4】CSS 颜色值
在 CSS 中，还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值来指定颜色：
与颜色名 “Tomato” 等效：
实例
CSS中— a:代表透明度 范围0.0-1.0
而Qss中 a:代表透明度 范围0-255略有差异
<!DOCTYPE html>
<html>
<body>
<p>与颜色名称 "Tomato" 等同：</p>
<!-- RGB 红绿蓝 真正的色光三原色 范围0-255-->
<!--这里采用的是行内风格样式-->
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<p>与颜色名称 "Tomato" 等同，但是有 50% 透明度：</p>
<!-- 在这里a 代表透明度 范围0-1 -->
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
<p>除了预定义的颜色名称之外，还可以使用 RGB、HEX、HSL 指定颜色，甚至可以使用 RGBA 或 HSLA 颜色值指定带透明度的颜色。</p>
</body>
</html>
学过QT以后，rgb和rgba不陌生
#ff0000不陌生
hsl和hsla这种我是真没见过，但其实也不难，后面会介绍，大家不要慌
【8】CSS RGB 颜色
【1】RGB 值
在 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)。
请通过混合以下 RGB 值来进行实验：
实例
<!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>
通常为所有 3 个光源使用相等的值来定义灰色阴影：
实例
<!DOCTYPE html>
<html>
<body>
<!--行内风格样式-->
<!--想显示灰色程度 需要将rgb值相等-->
<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>
<p>通过使用相等的红绿蓝色值，您会得到不同的灰阶。</p>
</body>
</html>
【2】RGBA 值
RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度。
RGBA 颜色值指定为：
rgba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：
请通过混合以下 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>
【9】CSS HEX 颜色
【1】HEX 值
在 CSS 中，可以使用以下格式的十六进制值指定颜色：
#rrggbb
其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。
例如，#ff0000 显示为红色，因为红色设置为最大值（ff），其他设置为最小值（00）。
请通过混合以下十六进制值来进行实验：
实例
<!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>
通常为所有 3 个光源使用相等的值来定义灰色阴影：
实例
<!DOCTYPE html>
<html>
<body>
<!--行内风格样式 背景色灰色 十六进制显示-->
<h1 style="background-color:#000000;">#000000</h1>
<h1 style="background-color:#3c3c3c;">#3c3c3c</h1>
<h1 style="background-color:#787878;">#787878</h1>
<h1 style="background-color:#b4b4b4;">#b4b4b4</h1>
<h1 style="background-color:#f0f0f0;">#f0f0f0</h1>
<h1 style="background-color:#ffffff;">#ffffff</h1>
<p>通过对红色，绿色和蓝色使用相等的值，您将获得不同的灰阶。</p>
</body>
</html>
【10】CSS HSL 颜色（色相| 饱和度 | 明度）
【1】HSL 值
在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下：
hsla(hue, saturation, lightness)
色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。
请通过混合以下 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>
【2】饱和度
饱和度可以描述为颜色的强度。
100％ 是纯色，没有灰色阴影
50％ 是 50％ 灰色，但是您仍然可以看到颜色。
0％ 是完全灰色，您无法再看到颜色。
实例
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>
<p>通过 HSL 颜色，设置更少的饱和度意味着更少的颜色，0% 为全灰。</p>
</body>
</html>
【3】亮度
颜色的明暗度可以描述为要赋予颜色多少光，
其中 0％ 表示不亮（黑色），50％ 表示 50％ 亮（既不暗也不亮），100％ 表示全明（白）。
实例
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>
<p>通过 HSL 颜色，亮度 0% 显示黑色，亮度 100 显示白色。</p>
</body>
</html>
通常通过将色调和饱和度设置为 0 来定义灰色阴影，并将亮度从 0％ 到 100％ 进行调整可以得到更深/更浅的阴影：
=实例
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h1>
<h1 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h1>
<h1 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h1>
<h1 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h1>
<h1 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h1>
<h1 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h1>
<p>利用 HSL 颜色，可通过将饱和度设置为 0％，并根据灰色的暗/亮程度调整亮度来制作灰阶。</p>
</body>
</html>
【4】HSLA 值
HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度。
HSLA 颜色值指定为：
hsla(hue, saturation, lightness, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：
请通过混合以下 HSLA 值进行实验：
实例
<!DOCTYPE html>
<html>
<body>
<!--行内风格样式 色相 饱和度 明度 透明度a 表示背景-->
<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>
【0】末尾声名
本节只是CSS初级教程的前10段,整个内容庞大，我会不定期更新，喜欢的博主不妨关注订阅不迷路，不然下次就真找不到了哦
