目录
一、CSS美化文档
（一）HTML内部添加样式
本节我们来学习如何在标签中引入CSS样式。
1 在标签中添加声明
声明的关键字是style后接等号（=）再接引号（""），即style=""
具体声明如下：
<input type="text" placeholder="手机号码" style="">
-
声明位置不分先后
<input type="text" style="" placeholder="手机号码"> <!-- 或者 --> <input style="" type="text" placeholder="手机号码">以上两种方式都正确
-
与其他关键字之间用空格隔开
关键字和关键字之间要用空格隔开，比如type和placeholder之间会加一个空格
<input type="text" placeholder="手机号码" style="">
注意：关键字和标签名之间也要用空格隔开，比如下面这种写法就是错误的
<pstyle=""></p>
2 在引号之间添加样式
<p style="font-size:14px;color:white"></p>
这段代码的意思就是：设置p标签中的字体大小为14px，颜色为白色。
（二）字体大小/字体粗细
在这一章当中我们要学习的是一些常见的与字体相关的 CSS 样式。
在 CSS 中，样式是由属性和值组成，中间用冒号（:）隔开，用分号（;）收尾，其中属性可以理解为身高、体重，值可以理解为 1.8 米、60kg，在现实生活中我们用这样一对组合来描述人或者物，在 CSS 中，我们用这样一对组合来描述文字的粗细、大小、颜色等等。
字体大小
设置格式为：font-size:36px;
font-size --> 字体的大小 36px --> 字体大小的尺寸
注意：
你可能会在以后的代码中看到这样的现象，style = "font-size: 12px; font-weight:bold"。可以看到，bold 后面没有分号
;，这是因为这一组属性后面再没有其他的属性了，所以可以把结尾的分号;省略，但是这样的写法允许，但不规范。
核心代码如下：
<!-- 设置字体的大小为12px -->
<p style="font-size: 12px;">
一个轻量级和模块化的前端框架，用于开发快速和强大的web接口。
</p>
<!-- 设置字体的大小为24px -->
<p style="font-size: 24px;">
一个轻量级和模块化的前端框架，用于开发快速和强大的web接口。
</p>字体加粗
设置格式：font-weight:100;
设置文字粗细的时候，其值可以是 100，200，300，400，500，600，700，800，900 中的任何一个,或者可以用英文代替，normal（正常粗细），lighter(细)，bold（粗），bolder（更粗）
下面我们来看看使用不同的值去设置字体粗细的效果
font-weight:200;
font-weight:lighter;
font-weight:400;
font-weight:normal;
font-weight:700;
font-weight:bold;
核心代码如下：
<p style="font-weight: 200;">要学的比别人好一点～</p>
<p style="font-weight: lighter;">要学的比别人好一点～</p>
<p style="font-weight: 400;">要学的比别人好一点～</p>
<p style="font-weight: normal;">要学的比别人好一点～</p>
<p style="font-weight: 700;">要学的比别人好一点～</p>
<p style="font-weight: bold;">要学的比别人好一点～</p>（三） 字体颜色/文字对齐方式
颜色
颜色是页面中不可或缺的属性，在背景、文字中应用非常广泛，颜色的值的设置方式分为四种：
1. 英文字母形式
2. 十六进制颜色 十六进制颜色由#开头，后面跟三个数字，每个数字的范围为 00 ～ FF，每个数字代表一种颜色，最终的颜色由这三种颜色调和而成； 这个颜色一般由设计师给我们，或者可以用吸色工具去获取。
3. rgb 形式 rgb 形式和十六进制的原理相同，其最终的颜色由三种颜色的深浅决定，即 r(red)，g(green)，b(blue)，每种颜色的范围为 0 ～ 255，代表这每种颜色的深浅，值越大越深；同样的，我们不必去深入研究它，设计师给我们什么，我们就用什么。
4. rgba 形式 rgba 形式相比 rgb 形式，多了一个 a，这里的 a 代表的是 Alpha(透明度)，a 的值在 0 ～ 1 之间，为了简化书写，也可以直接省略 0，写成.4，等同于 0.4。
注意：以上四种表达方式：
- 多数情况下建议使用十六进制表达方式；
- 调试的时候可以用英文字母形式，初期的调试就是随便设置一个颜色，查看区块是否存在，区块大小等，在盒模型中我们会遇到；
- 如果要设置文字透明度或者背景透明度，就要用到
rgba形式，在第八章我们会遇到。
下面我们来使用字体颜色来实现下图效果：
核心代码如下：
<h3 style="color:#ff9a9e;font-weight:700;font-size: 24px;">UIzards</h3>
<h4 style="font-size: 16px;color: #474d5d;font-weight: 400;">
Senior UX Designer
</h4>
<p style="font-size: 14px;color:#84868d;">
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
doming id quom placerat facer possim assum. Typi non habent claritatem
insitam; est usus legentis in iis qui faorum claritatem. Investigationes
demonstraverunt lectores legere me lius quod ii legunt saepius.
</p>
文字居中/居左/居右
在学习这一节的文字对齐方式的时候，大家可以结合 word 这个办公软件的文字对齐方式去理解，原理是一样的。具体对齐方式效果如下图所示：
设置文字对齐的格式如下：
- text-align: center; 文字居中对齐
- text-align: left; 文字左对齐
- text-align: right; 文字右对齐
（四） 文字行高/字间距/字体
行高
首先来解释一下行高，我们先来看一张图：
font-size：12px；
line-height：20px；
图中虚线框的高度就是我们之前学过的font-size(字体大小)，以图中的行高为例，20px的行高除去文字大小12px后，将剩下的8px均分为两部分，分别填充在文字上下；
两行文字之间的距离就是由第一行文字下面的4px加第二行文字上面的4px形成一个8px的间距，因此行高的大小决定了文字行与行之间距离的大小。
行高的设置格式：line-height: 30px;
在实际应用中，行高的作用主要有两个：
第一个作用：改变段落中行与行之间的距离
段落中默认是有行高的，但是这个默认的行高未必能满足我们的需求，因此我们就需要改变行高来实现我们需要的效果；
下面我们来看一个案例，第一个p标签内的行高为默认高度，第二个p标签的行高为32px，下图是结果：
We understand every aspect of project and we put a great amount of time in understanding the project.
We understand every aspect of project and we put a great amount of time in understanding the project.
核心代码如下：
<p>
We understand every aspect of project and we put a great amount of time in
understanding the project.
</p>
<p style="line-height:32px;">
We understand every aspect of project and we put a great amount of time in
understanding the project.
</p>
第二个作用：使文字上下居中
从下图可以看出，随着行高的变化，文字的位置也在不断变化，当行高和矩形的高度一样的时候，文字在矩形中上下居中。
例如：文字外面的矩形高度为 80px，要想让文字在矩形中上下居中，就要设置文字的行高为 80px
如下图所示，我们可以使用做一个文字居中的按钮：
核心代码如下： 为了美观，背景颜色和圆角我们在 index.css 中写出，后面我们会学到，这里不用纠结
<button
style="width: 120px;height:50px;text-align: center;line-height:50px;color:white;font-size: 18px;"
>
提交
</button>
字间距
字间距就是文字之间的间距，但是中文和英文的字间距是不一样的
- 英文的字间距是每个字母之间的距离，单词和单词之间的距离不属于字间距
- 中文是每个汉字之间的距离
设置字间距的格式为：letter-spacing: 30px;
字体
字体的概念我们在生活中肯定接触了很多，比如说宋体，隶书，黑体，草书等等，当然还有很多外国字体，比如微软雅黑。
字体了解了，那么我们如何去设置字体呢？其实设置字体的方式很简单，关键字+值即可，例如：
font-family: sans-serif;
我们设置的字体能否被应用在页面上取决于使用者的电脑有没有安装这个字体，所以网页中会使用一些常见的字体，使得自己的网站兼容性更好。
当然了，有的网站比较个性化，喜欢用一些个性化的字体，所以他们会多设置几个字体，比如：
font-family: 'Goudy Bookletter 1911', sans-serif, 'Gill Sans Extrabold';
这段代码怎么去理解呢？页面加载以后会先去找代码中设置的字体，这里有三个备选的字体，浏览器会按顺序加载：首先看看"Goudy Bookletter 1911"字体在电脑上是否安装；如果没有安装，就去看第二个字体；如果还没有，就去看第三个字体是否已经安装；如果都没有安装，那么就只能用默认的微软字体，这个字体是所有电脑默认会安装的。
字体写法有一些注意事项：
- 多个字体之间用英文逗号（
,）隔开 - 字体名称中间有空格的时候，要加引号，单引号和双引号都行：
"Times News Roman" - 中文字体名称要用引号，单引号和双引号都行：
"宋体"
二、CSS引入方式
（一）CSS的三种引入方式
CSS的三种引入方式，在前面我们修改字体的时候，已经接触了第一种CSS的引入方式，即行内式。
下面我们来系统的介绍一下CSS的三种引入方式。
1.行内样式
下面我们通过画图来理解第一种CSS引入方式--行内式
如上图所示：行内样式需要内嵌在每一个HTML标签中，可想而知，当我们有几百行HTML标签的时候，就需要写几百个style，实际上在前面设置字体样式的时候，你一定体会到了这种书写方式的繁琐，比如说我们要修改两个p标签，他们的样式明明是一样的，我们还不得不再去重写一次相同的CSS样式，例如：
<p style="font-size: 18px;font-weight: 700;color: blue;">
这是一个p标签，和第三个p标签样式一样
</p>
<p>这是一个中立的p标签</p>
<p style="font-size: 18px;font-weight: 700;color: blue;">
这是一个p标签，和第一个p标签样式一样
</p>
因此，我们就要想办法把每一个标签中的CSS样式抽取出来，抽取成一整段，放在HTML文件中的某个位置。这时候我们就要去了解第二种CSS的引入方式--内部样式
2.内部样式
接下来我们用一张图来介绍内部样式的抽离过程：
抽离步骤：
-
首先我们将每一个标签里的
CSS样式抽取出来 -
然后在
head标签里声明了一个<style></style>标签 -
接下来将样式都放在了
style标签里，注意，这里不是简单的粘贴复制。
注意：；（分号）
-
将相同标签的样式写在相同的大括号(
{})里，大括号前面加上标签名，形如：
p {
font-size: 16px;
color: #ffffff;
}
最后来重点说一下头部样式的书写规则:
- 不要忘记写声明标签
<style></style> - 样式要用花括号括起来
- 每个样式后面要用分号结尾
至此，我们就完成了CSS样式从每一个标签到头部（head）的搬迁工作，此时你的HTML代码看起来是不是没有以前那样杂乱无章了呢？
可能画图的方式对于有些同学理解起来有点障碍，接下来以代码的方式来演示一下内部样式的书写方法
3.外部样式
随着代码量的逐渐增多，整个HTML文件就会呈现出头重脚轻的现象，即CSS代码要比HTML代码多的多，这样很不利于阅读和复查代码，更重要的是为了实现代码的分离，让HTML负责结构，CSS代码负责样式。
所以我们要对代码进行进一步的分离。
- 新建一个
index.css文件 - 将 html 代码头部中的
style标签内的样式全部拷贝过来； - 将复制的
CSS样式粘贴进 index.css 文件中； - 建立
HTML和CSS文件的联系，即用link标签引入CSS文件注意这里的 link 标签引入的位置一定要在 head 标签内；关于引入的时候
./具体是什么意思，我们在下一节讲。
下面我们来演示一下整个文件分离的过程：
完成HTML代码，并在头部引入外部CSS文件和在外部index.css文件中书写CSS样式
可以看到，文字的颜色和字间距都变化了，说明我们在外部index.css文件中写的CSS代码对index.html中的标签起了作用。
补充知识点
CSS 注释
在前文中我们知道 HTML 的注释方式是<!-- 注释内容 -->，在 CSS 代码中的注释方式跟 HTML 中是不同的，注释格式为/* CSS注释内容 */
CSS 的注释位置 1.内部样式注释
<style>
/* 写CSS的基础样式 */
.base{
/* 基础字体大小 */
font-size: 14px;
/* 基础字体颜色 */
color:#000000;
}
</style>
2.外部样式注释 直接在.css文件中注释即可
/* 写CSS的基础样式 */
.base {
/* 基础字体大小 */
font-size: 14px;
/* 基础字体颜色 */
color: #000000;
}
link
最后再提一下link标签里的一些属性，可能会有同学会对此有疑问，但是这是非必要掌握的知识点：
<link rel="stylesheet" type="text/css" href="index.css" />
rel属性rel属性规定了当前文档与被链接文档之间的关系，但是rel属性的stylesheet值被所有浏览器支持，也就是说你只要记住一个值即可。
stylesheet的意思就是文档的外部样式表。
-
type属性type属性规定了被链接文档的 MIME（多用途互联网邮件扩展类型）类型，type属性对应的最常见的值就是text/css，该类型描述样式表. -
href属性href属性后跟的是要引入的链接地址
（二） 相对路径/绝对路径
路径主要是为了在文件中引入外部资源，比如说我们前面一节在学外部样式的时候，就用到了路径./
路径分为相对路径和绝对路径两种。
绝对路径
绝对路径指的是文件在硬盘上真正存在的路径。 例如，在电脑E盘里面的book文件夹里面的“网页布局”文件夹里面有一个bg.jpg图片，现在我需引入bg.jpg这张图片，用绝对路径需要这样写：
<img src="E:\book\网页布局\bg.jpg" />
这种路径看起来很好理解，但是在实际应用中却有很多问题，比如你的项目拷贝到了你同学的电脑上，你就会发现你引入的图片，或者样式文件没有了。这是因为你引入样式或者图片资源的时候是这样写的：
<link rel="stylesheet" href="E:\style\css\index.css">
<img src="E:\images\beauty.jpg" />
但是同学的电脑的E盘下面根本不存在style文件夹，所以计算机根据你给的路径无法找到要引入的文件。
因此我们要尽量避免使用绝对路径。
相对路径
为了避免绝对路径造成的页面资源丢失现象，在引入外部资源的时候，都会选择使用相对路径。
所谓相对路径就是相对于文件自身位置，去寻找要引入的资源文件。
上面这句话很重要，理解了这句话，相对路径的学习就非常轻松了。
使用相对路径引用文件的时候需要掌握以下内容：
./:当前文件夹目录，比如在下面这个目录结构下（test文件夹下有index.css和index.html两个文件），要在index.html中引入index.css就需要用到./。
具体写法如下：
<link rel="stylesheet" href="./index.css">
<!-- 或者./去掉也可以，效果是一样的 -->
<link rel="stylesheet" href="index.css">
../:回到上一级文件夹目录,比如下面这个文件目录结构中（index.html在test文件夹里面，index.css和test文件夹在同一级目录下），我们要在index.html中引入index.css文件，首先要从index.html文件所在目录即test文件夹里出来，才能找到index.css，从某个文件夹里面出来，就要用到../
具体写法如下：
<link rel="stylesheet" href="../index.css">
用相对路径引入文件记住三点：
- 找到引用资源的文件所在位置，以引用资源的文件为基准，寻找资源
- ../返回一层，如果有多层，就用多个../，比如返回两层就用
../../- 文件夹名代表进入该文件夹，例如css/，表示进入css文件夹，比如从test文件夹里出来进入css文件夹找到index.css文件，可以这样写
../css/index.css
（三）常用选择器
标签选择器
我们之前在学习CSS的三种引入方式的时候，其实已经接触了其中一种选择器，即标签选择器，使用标签的名字将标签选中，然后给标签中的文字设置字体样式。
下图可以清楚的看到标签选择器的作用--选中所有叫p的标签，然后就可以统一给所有的p标签设置样式
在今后我们还会接触很多其他的选择器，但是请大家记住一点，选择器的作用，就是选中，因为只有选中了以后，才能去对应的做出修改。接下来我们要去理解选择器的一个好处--减少代码量
首先我们来写一个案例，使用最初的行内样式：
页面效果如下：
孟航沛
平面设计师
专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育， 但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识， 专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
核心代码如下：
<h3 style="font-size: 25px;color: #330867;">孟航沛</h3>
<h4 style="font-size: 18px;color: #30cfd0;">平面设计师</h4>
<p style="font-size: 14px;line-height: 28px;color: #4a5252">
专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，
但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，
专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
</p>
接下来我们将行内样式抽离出来，写在头部，即内部样式：
页面效果如下：
孟航沛
平面设计师
专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育， 但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识， 专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
核心代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>标签选择器</title>
<style>
h3 {
font-size: 25px;
color: #330867;
}
h4 {
font-size: 18px;
color: #30cfd0;
}
p {
font-size: 14px;
line-height: 28px;
color: #4a5252;
}
</style>
</head>
<body>
<h3>孟航沛</h3>
<h4>平面设计师</h4>
<p>
专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，
但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，
专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
</p>
</body>
</html>
这时候并不能体现出代码量有所减少，只不过是将 CSS 代码换了个位置而已，但是如果我们要实现下面下面这张图的效果呢？
孟航沛
平面设计师
专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
江晓风
UI
专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
左小青
插画师
专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
蒋小鱼
Java工程师
专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
可以看到，下面几块除了文字内容不一样，字体颜色，字体大小等都一样；
如果还是使用常规的行内样式，就要在每个标签内重复的去写样式，如果用选择器，只需要添加几个HTML标签即可。
接下来我们对第二个案例进行一点修改，完成上图所示的效果，代码在下面贴出，你可以在右侧的编辑器里尝试并运行以下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>标签选择器</title>
<style>
/* 给h3标签添加样式 */
h3 {
font-size: 25px;
color: #330867;
}
/* 给h4标签添加样式 */
h4 {
font-size: 18px;
color: #30cfd0;
}
/* 给p标签添加样式 */
p {
font-size: 14px;
line-height: 28px;
color: #4a5252;
}
</style>
</head>
<body>
<h3>孟航沛</h3>
<h4>平面设计师</h4>
<p>
专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
</p>
<h3>江晓风</h3>
<h4>UI</h4>
<p>
专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
</p>
<h3>左小青</h3>
<h4>插画师</h4>
<p>
专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
</p>
<h3>蒋小鱼</h3>
<h4>Java工程师</h4>
<p>
专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
</p>
</body>
</html>
选择器的层叠性
在写CSS样式的时候，有时候因为粗心，之前写过的标签又会重新写一次，然后给{}里面添加样式，这样做可能会造成两种结果：
- 添加新的效果（如果添加的是一个新属性）
- 改变之前已经存在的效果（如果该属性之前就存在）
核心代码如下：
h3 {
font-size: 25px;
color: #330867;
}
h4 {
font-size: 18px;
color: #30cfd0;
}
p {
font-size: 14px;
line-height: 28px;
color: #4a5252;
}
/*在这里写一个同名标签名h3,所以你只要关注“孟航沛”的变化即可*/
h3 {
/*font-weight属性在之前的h3标签里没有写，那么这里就会添加新的效果*/
font-weight: 700;
/*color这个属性前面已经定义了，这里再写，就会覆盖前面的字体颜色*/
color: red;
}
注意：选择器的层叠性，在后面的类选择器和 id 选择器同样适用
类选择器
在前面的标签选择器中我们通过标签选择器将很多重复的模块批量化的设置了它们的样式，但是在实际应用中，仅仅一个标签选择器还不足以满足我们日常的开发需求； 比如说，在标签选择器的案例中，我们是否想过，给“左小青”设置一个特殊的颜色呢？此时标签选择器的功能就不足以实现我们预期的效果了。
首先我们来了解一下类选择器的定义和使用
定义
<p class="article">
class是定义类的关键字，article是类名，类名可以任意，但是要符合规范
</p>
class 是定义类的关键字，article 是类名，类名可以任意，但是要符合规范
使用
.article {
color: red;
font-size: 14px;
}
如果是内部样式，上面的代码就要写在<style></style>标签之间，如果是外部样式，直接写在.css文件中即可。
类选择器的作用就是在普通中寻找特别，下面我们就来实现上面的需求，给“左小青”设置一个特殊的颜色：
除此之外呢，一个标签上面还可以添加多个类名，类名之间要用空格隔开，就像这样：
<p class="common color font-size">
common设置通用样式，color设置特殊颜色，font-size设置特殊字体大小
</p>
举个例子：
前面我们学过选择器的层叠性，那么这里是class="common current"类名的先后顺序影响最终样式呢？还是<style></style>标签中的类名先后顺序影响结果呢？
将class="common current"改为class="current common"，不会影响页面效果
再将
.common {
font-size: 22px;
color: #333333;
letter-spacing: 8px;
}
.current {
color: #ff6973;
}
改为
.current {
color: #ff6973;
}
.common {
font-size: 22px;
color: #333333;
letter-spacing: 8px;
}
.current中的颜色会被.common中的颜色层叠掉。
id 选择器
id 选择器与类选择器非常相似，首先我们看一下它的定义和使用格式：
在标签中定义 id
<p id="p-item">这是一段文字</p>
使用 id 选择器
#p-item {
font-size: 24px;
font-weight: 400;
}
可以看出，除了定义和使用的规范不同之外，基本没有什么变化，不同的地方是：
- id 选择器在文档中只会出现一次，像下面这种使用方式是不对的：
<a href="#" id="link">点击进入详情</a>
<!-- link这个id名已经被使用，就不可以再次定义 -->
<a href="#" id="link">点击进入主页</a>
id 就像身份证号码一样，全国只能有一个，同样，id 选择器亦是如此，这里的 link 重复了。
- 不能像类选择器一样，一个标签上定义多个 id 名，像下面这种写法是错误的：
<a href="#" id="link linkto">点击进入详情页</a>
id 选择器在写页面的时候用的不是很广泛，其性质与类选择器也相似，因此这里不做过多讲述。可以去用 id 选择器尝试修改之前的案例。
（四）高级选择器
常用的高级选择器有四种：
- 后代选择器
- 交集选择器
- 子选择器
- 并集选择器
1. 后代选择器(空格)
p a ---- 选择所有p标签内的所有a标签
后代选择器的书写规则:用空格隔开，例如：
/* 选择id名为password的标签内部所有类名为box的元素内部的所有p标签 */
#password .box p{}
/* 选择所有p标签内部的所有span标签 */
p span{}
/* 选择所有p标签内部的所有类名为spanItem的标签 */
p .spanItem{}
下面我们来尝试一下后代选择器来实现古诗词的着色，具体实现效果如下：
核心代码如下：
<ul class="first-ul">
<li>苍苍竹林寺，杳杳钟声晚。</li>
<li>荷笠带斜阳，青山独归远。</li>
</ul>
<ul class="second-ul">
<li>白日依山尽，黄河入海流。</li>
<li>欲穷千里目，更上一层楼。</li>
</ul>
ul li {
/* 去除li标签前面的小圆点 */
list-style: none;
font-size: 22px;
}
.first-ul li {
color: rgb(212, 166, 28);
}
.second-ul li {
color: rgb(230, 127, 122);
}
补充一点：从上面这个例子可以看出一种编程思想，就是抽离，将li标签公有的属性抽离在ul li选择器内，因为这个选择器选中的是所有的li，然后再分别用.first-ul li和.second-ul li选择器来设置不同的属性。可能一开始我们会这样写：
.first-ul li {
list-style: none;
font-size: 22px;
color: rgb(212, 166, 28);
}
.second-ul li {
list-style: none;
font-size: 22px;
color: rgb(230, 127, 122);
}
不过随着经验的积累，你或许会慢慢的会去思考着抽离。
重点理解后代
什么是后代？比如说，某某某是孔子的88代孙，那么某某某就是孔子的后代，在HTML中，随着页面复杂程度的增加，会出现很多标签嵌套（标签里面写标签）的现象，比如：
<ul>父
<li>子
<p>孙
<span>曾孙
<a href="">曾曾孙</a>
</span>
</p>
</li>
</ul>
在这段代码中，标签和标签当中就形成了子代关系，a、span、p、li就是ul标签的后代，li既是ul的后代又是ul的子元素。 以上面的这段HTML代码为例，我要选中a标签，可以有很多办法：
/* 方法一： */
a{}
/* 方法二 */
ul a{}
/* 方法三 */
ul li p a{}
/* 方法四 */
ul li p span a{}
具体要用哪种方法呢？这是要根据具体情况（HTML的结构）来定的,比如说现在HTML的代码结构变了：
<ul>父
<li>子
<p class="p-one">孙
<span>曾孙
<a href="">曾曾孙1</a>
</span>
</p>
<p class="p-two">孙
<span>曾孙
<a href="">曾曾孙2</a>
</span>
</p>
</li>
</ul>
此时我们用上面的四种方法都会选到两个a标签，但是我们的目的是选中“曾曾孙1”，所以我们要在最开始出现重复标签的那一级来做区分，给这一级分别加上类名，或者你可以只给你需要的那个标签添加类名即可，此时我们要选中“曾曾孙1”可以这样做：
/* 方法一 */
ul li .p-one span a{}
/* 方法二 */
.p-one span a{}
2. 交集选择器
交集选择器的书写规则是：
a.special{}
<a href="#" class="special">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
它的意思是，在所有a标签内，类名为special的标签。
举个例子：
实现效果如下：
核心代码如下：
<ul>
<li><a href="" class="special">电子产品</a></li>
<li><a href="">家居服饰</a></li>
<li><a href="">电竞手办</a></li>
<li><a href="" class="special">家装服务</a></li>
<li><a href="">房屋出租</a></li>
</ul>
ul li {
list-style: none;
font-size: 22px;
}
ul li a {
/* 去除a标签的下划线 */
text-decoration: none;
/* 这里的颜色一定要在a标签上设置，因为a标签默认会去设置字体颜色，会层叠掉默认的黑色 */
color: black;
}
ul li a.special {
color: orangered;
}
3.子选择器
子选择器与后代选择器类似，不同的是后代选择器突出的是“后代”，子选择器突出的是“子”。 比如同样的HTML代码，但是用不同的选择器，得到的结果就就不同，HTML代码如下：
<p>
<span>Span 1. 在p标签内
<span>Span 2. 在p标签的span标签内</span>
</span>
</p>
<span>Span 3. 与p标签相邻</span>
使用后代选择器：
span {
color: black;
}
p span {
color: orangered;
}
得到的结果：
使用子选择器：
span {
color: black;
}
p>span {
color: orangered;
}
得到的结果：
4.并集选择器
如果要给不同的标签，或者不同类名的标签添加相同的样式，此时就要用到并集选择器，并集选择器的规则是在标签名或者类名后面用逗号（,）隔开，例如：。
.box,p,h3,.phone{}
并集选择器的作用是--“和”，上面这段代码的意思就是给类名为box、phone标签名为p、h3的标签添加相同的属性。
有了前面的选择器基础，相信并集选择器大家都可以理解，这里就不做过多解释啦～
到盒模型和对 li 标签前小圆点的修改代码
ul,
li {
/* 去除li标签前的小圆点 */
list-style: none;
/* 清除标签默认的内边距 */
padding: 0;
}（五） 选择器的优先级
单个选择器的优先级
单个选择器的优先级很容易理解，可以记下这个顺序id 选择器>类选择器>标签选择器，什么意思呢？举个例子来说明一下。
比如说我们有这样一段HTML代码：
<p class="poem" id="ch-poem">百川东到海，何时复西归？</p>
第一步
用p标签来设置文字的颜色：
p {
color: blue;
}
得到如下结果：
第二步
在p标签的基础上加上类选择器：
p {
color: blue;
}
.poem {
color: red;
}
得到如下结果：
在这里，有人会想，是不是因为.poem在p后面，层叠掉了之前设置的blue呢？其实并不是，层叠是在优先级相同的情况下，上下位置的不同会导致属性被层叠
第三步
在上面两步的基础上添加 id 选择器：
p {
color: blue;
}
.poem {
color: red;
}
#ch-poem {
color: purple;
}
得到如下结果：
同样，在这里不论如何移动选择器在CSS代码中的位置，都不会影响最终的结果。
文字属性的继承性
在前面我们已经学过关于文字的一些属性，例如font-size(文字大小)、font-weight(文字粗细)、font-family(字体)、color(文字颜色)等，在这里我们要学一下文字的另一个知识点--文字属性的继承性。
大家有没有发现，除了h标签，其它的标签内写了文字以后，默认会有相同的颜色、大小，这就是文字属性的继承性导致的，他们都继承了body标签的字体大小、颜色。
为了验证这个说法，我们可以用代码来验证一下，HTML代码如下：
<ul class="ul-item">
蒹葭
<li>蒹葭苍苍，白露为霜。所谓伊人，在水一方。</li>
<li>溯洄从之，道阻且长。溯游从之，宛在水中央。</li>
<li>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</li>
</ul>
默认情况下，显示结果应该是这样的：
下面我们在ul标签上修改文字的颜色：
.ul-item {
color: #ff6973;
}
得到如下结果：
可以看到我们本想修改 ul 标签里的“蒹葭”二字，但是却把li标签内的文字颜色也一起修改了，这就是---文字属性的继承性
这里只是用文字颜色做了实验，另外文字的字体大小，字体，字间距等都会被继承到。
高级选择器的优先级
权重的计算方法
单个选择器的优先级可以通过id 选择器>类选择器>标签选择器的顺序去判断，那么多个选择器的优先级该如何去判断呢？
这里就要用到选择器权重的叠加性，按照优先级越高，权重越大的规则，假设 id 选择器的权重为 100，类选择器的权重为 10，标签选择器的权重为 1，我们可以计算一下下面这个高级选择器的权重：
.param #item span {
}
根据规则可以计算得出，这个高级选择器的权重为 111=100(#item)+10(.param)+1(span)。再比如下面这个选择器的权重：
#item1 #item2 .param1 .param2 p span {
}
它的权重为：222=200(#item1 #item2)+20(.param1 .param2)+2(p span)
那么权重的计算会不会进位呢？比如高级选择器有 11 个标签选择器，会不会往类选择器上进一位呢？答案是不会的，当然了，你也不会遇到这种情况，标签套十层已经不便于阅读了。
权重的应用
权重的作用
学会了如何计算权重以后，我们就要去想怎么去用权重呢？权重的作用是什么？权重的作用就是决定当用两个不同的选择器给同一个标签设置了相同的属性，该听谁的？
例如下面这个案例：
<ul class="ul-item">
<li>
<p>文字的颜色到底是什么颜色？</p>
</li>
</ul>
ul li p {
color: blue;
}
p {
color: red;
}
最终的结果是：
在这里，为了消除有同学质疑是因为层叠性的原因导致字体颜色是blue，我专门将设置blue的选择器放在了上面。在这里要注意一点，层叠性只有在权重一样的情况下才会适用。
接下来我们来推导一下为什么字体颜色是blue，根据前文所学，我们知道，权重的作用就是决定当用两个不同的选择器给同一个标签设置了相同的属性，该听谁的，根据权重的计算公式可以知道，第一个选择器的权重为 3，第二个选择器的权重为 1，所以最终字体颜色应该由第一个选择器决定，也就是蓝色。
什么情况下可以考虑权重？
我们来再看一个案例：
<ul class="ul-item">
<li>
<p>文字的颜色到底是什么颜色？</p>
</li>
</ul>
.ul-item li {
color: blue;
}
得到如下页面效果：
接下来在CSS代码中增加一点代码：
.ul-item li {
color: blue;
}
p {
color: red;
}
得到如下效果：
此时就有点“违背常理”了，根据计算，第一个选择器的权重是 11，第二个是 1，权重决定着谁设置的属性会生效，一切都有理有据，但是结果却和我们想的不一样，这是因为第一个选择器脱离了权重的适用范围，即选中。
可以看到，第一个选择器权重虽然大，但是它只选到了li标签，而第二个选择器是直接选中了p标签，没有选中，当然权重再大也无济于事。
那么在这个案例中，第一次通过.ul-item li选择器设置颜色的时候，为什么会生效呢？这是因为字体属性的继承性，p标签的字体继承了它父元素li的字体属性。
再来一个案例，具体代码如下：
<ul class="ul-item">
<li class="li-item">
<p>文字的颜色到底是什么颜色？</p>
</li>
</ul>
.ul-item .li-item {
color: yellowgreen;
}
.ul-item li {
color: black;
}
最终效果：
在这个案例中我们如何去确定颜色呢？答案是根据权重+继承性：
首先我们要知道字体属性的继承性的另一个性质，就是字体属性继承的是离它最近的一个父类标签，什么是最近？就是最先包裹住它的标签，在这个案例中，最近的父类标签就是li标签。
li标签的字体颜色直接决定着p标签的字体颜色，接下来我们就要看设置li标签的选择器有哪些？案例中两个选择器都选中了li标签，在都选中的情况下，就要想到权重，根据计算，第一个选择器.ul-item .li-item权重为 20，第二个选择器.ul-item li权重为 11，所以最终的颜色自然是yellowgreen。
扫一扫
871
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
