构建网页的过程中，我们不仅需要HTML来搭建骨架，还需要CSS来装扮我们的网页。在前面的教程中，我们已经简单介绍了CSS的用法，本节教程我们将详细讲解CSS的基础概念，注释、选择器及优先级。
1、CSS简介
CSS英文全称为Cascading Style Sheets（层叠样式表）是一种用于描述HTML（超文本标记语言）和XML（可扩展标记语言）等文档外观和样式的语言。它的主要功能是控制网页中的字体、大小、颜色、布局、边框、背景等方面的样式。通过CSS，开发者可以将样式与HTML文档分离，使网页的样式和布局更加灵活、可维护和可扩展。CSS可以内嵌在网页中、通过外部链接引用CSS文件或直接写入HTML标记中。CSS文件扩展名为“.css”。
2、CSS语法规则
CSS规则的基本结构如下：
选择器{属性:属性值; 属性:属性值; 属性:属性值;}
（1）CSS声明
CSS声明总是以大括号“{}”括起来，并以分号“;”结束。注意，在CSS中，所有的标点符号必须使用英文状态下的标点符号。例如：
p{color:red;height:60px;width:200px;}
为了提高CSS的可读性，可以在每行只描述一个属性，这样的格式化书写可以让开发者能够快速理解和修改CSS代码。例如：
动手练一练：
p {
color:red;
height:60px;
width:200px;
}
（2）CSS注释
CSS注释是用来解释代码的，并且可以随意编辑它，浏览器会忽略它。CSS注释以“/*”开始，以“*/”结束，例如：
/*这是一个注释*/
p {
color:red;
/*这是另一个注释*/
height:60px;
width:200px; /*这还是一个注释*/
}
（3）选择器
CSS选择器用于指定要设置样式的HTML标签。常见的选择器包括：
标签选择器：如p选择所有的<p>标签。
ID选择器：如“#id”选择具有特定ID的标签，ID选择器以“#”来定义，ID在页面中是唯一的，因此ID选择器用于选择一个唯一的标签，一个ID选择器只能给一个标签使用。
类选择器：如“.class”选择具有特定类的标签，类选择器以“.”来定义，一个class类选择器可以给多个标签使用。
常见的选择器代码示例如下：
动手练一练：
<!DOCTYPE html>
<html>
<!--head头部.用来完成一个网页的相关设置-->
<head>
<!--汉字编码-->
<meta charset="UTF-8">
<!--网页标题-->
<title>z-index属性</title>
<style>
.myClass {
color: pink;
font-size: 40px;
}
#myId {
color: purple;
font-size: 50px;
}
p {
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<!-- class实例 -->
<div class="myClass">第一个DIV“区块”</div>
<!-- id实例，用于选择一个唯一的标签 -->
<div id="myId">第二个DIV“区块”</div>
<!-- 可以在多个标签中使用相同的class属性 -->
<div class="myClass">第三个DIV“区块”</div>
<!-- p段落标签实例 -->
<p>
这是一个段落。
</p>
</body>
</html>
（4）通用选择器
通用选择器“”可以选中页面上所有的HTML标签，并对它们设置样式。通用选择器“”可以控制页面中所有的标签样式。例如：
* {
color: red;
font-size: 50px;
}
（5）CSS多个选择器
在HTML中，CSS多个选择器可以通过逗号分隔的方式组合在一起，应用相同的样式规则。这样可以同时为多个不同的标签添加相同的样式，而不需要为每个标签写多个样式规则。
例如，想为多个标签设置相同的样式，可以这样写：
div, span, #myId, .myClass {
color: pink;
font-size:15px;
}
（6）伪类选择器
同一个标签，根据其不同的状态，有不同的样式，叫做“伪类”。伪类前面用冒号来表示。
:link：超链接点击之前
:visited：超链接被访问过之后
以上伪类选择器只适用于超链接。
:hover：鼠标放到标签上的时候
:active：鼠标点击标签，但是不松手时。
以上伪类选择器适用于所有的标签。
常见的伪类选择器代码示例如下：
动手练一练：
<!DOCTYPE html>
<html>
<!--head头部.用来完成一个网页的相关设置-->
<head>
<!--汉字编码-->
<meta charset="UTF-8">
<!--网页标题-->
<title>z-index属性</title>
<style>
/*让超链接点击之前是红色*/
a:link{
color:red;
}
/*让超链接点击之后是蓝色*/
a:visited{
color:blue;
}
/*鼠标悬停，放到标签上的时候是绿色*/
a:hover{
color:green;
}
/*鼠标点击链接，但是不松手的时候是黑色*/
a:active{
color:black;
}
/*正常显示为粉红色*/
.myClass {
color: pink;
font-size: 40px;
}
/*鼠标悬停，放到标签上的时候是绿色*/
.myClass:hover {
color: green;
}
/*鼠标点击div，但是不松手的时候是黑色*/
.myClass:active {
color: black;
}
</style>
</head>
<body>
<a href="https://www.example.com" target="_blank">这是一个超链接，点击这里访问示例网站</a>
<div class="myClass">
这是一个DIV“区块”
</div>
</body>
</html>
3、CSS的三种引入方式
CSS可以通过以下三种方式引入到HTML中：
内联样式：直接在HTML标签中使用style属性来设置样式，例如：<p style="color: red;">文本</p>。这种方式只对当前标签有效。
嵌入式样式：将CSS代码放在<style>标签内，通常放在<head>标签中，例如：<style>p { color: red; }</style>。
外部样式：将CSS代码保存在一个外部文件中，例如mystyle.css，通过<link>标签引入到HTML中，例如：<link rel="stylesheet" href="mystyle.css">。
4、CSS优先级
在复杂的网页布局中，当有多个CSS样式规则应用于同一个标签时，浏览器如何决定哪一套规则最终生效呢？CSS优先级就是用于解决多个样式规则应用于同一标签产生冲突的机制。优先级从高到低，按照如下顺序：
（1）内联样式
直接在HTML标签的style属性中定义的样式规则具有最高的优先级。例如：<div style="color: red;">内容</div>。
（2）ID选择器：
ID选择器使用“#”符号指定标签的ID，每个ID在页面中应该是唯一的，因此ID选择器的优先级仅次于内联样式。例如：#myId{color: red;}。
（3）类选择器：
类选择器使用“.”符号指定标签的类，用于定义标签的类别、属性或状态，类选择器的优先级低于ID选择器。例如：.myClass{color: red;}。
（4）标签选择器
选择器指定HTML的标签名称，优先级低于类选择器。例如：p{color: red;}。
（5）通用选择器（*）：
通用选择器使用“*”匹配任何标签，优先级最低。
（6）!important声明
在CSS中可以使用!important声明样式，来提升某个样式规则的优先级，使其覆盖其他同级或更高级别的样式规则。这里需要注意的是，应该谨慎使用!important声明，因为它会打破正常的优先级规则。例如：p{ color:red !important; }
（7）CSS的层叠性和继承性
层叠性：同一标签的同一样式值被定义多次时，会发生样式规则的叠加，这时写在后面的样式会覆盖写在前面的样式，即样式的层叠。
继承性：CSS的继承性指的是一些属性可以从父标签继承到子标签。例如，文本颜色（color）和字体大小（font-size）可以被继承。
CSS优先级代码示例：
动手练一练：
<!DOCTYPE html>
<html>
<!--head头部.用来完成一个网页的相关设置-->
<head>
<!--汉字编码-->
<meta charset="UTF-8">
<!--网页标题-->
<title>CSS优先级</title>
<style>
p { color: blue; }
.text { color: green; }
#special { color: red; }
.important { color: purple !important; }
</style>
</head>
<body>
<!-- 最终颜色将是orange，因为内联样式具有最高优先级 -->
<p class="text" style="color: orange;">第一个标签：橙色</p>
<!-- 最终颜色将是purple，因为!important提高了优先级 -->
<p class="text important">第二个标签：紫色</p>
<!-- 最终颜色将是green，因为类选择器优先级高于标签选择器 -->
<p class="text">第三个标签：绿色</p>
<!-- 最终颜色将是red，因为ID选择器的优先级高于标签选择器 -->
<p id="special">第四个标签：红色</p>
<!-- 最终颜色将是orange，因为内联样式的优先级高于ID选择器 -->
<p id="special" style="color: orange;">第四个标签：橙色</p>
<!-- 最终颜色将是red，因为ID选择器的优先级高于类选择器 -->
<p id="special" class="text">第四个标签：红色</p>
<!-- 最终颜色将是blue -->
<p>第四个标签：蓝色</p>
</body>
</html>