目录
0 学习目标
- 能使用emmet语法；
- 能够使用 CSS 复合选择器；
- 能够写出伪类选择器的使用规范；
- 能够说出元素有几种显示模式；
- 能够写出元素显示模式的相互转换代码；
- 能够写出背景图片的设置方式；
- 能够计算 CSS 的权重。
1. Emmet 语法
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,VScode内部已经集成该语法。
1.1. 快速生成HTML结构语法
- 生成标签：直接输入标签名按tab键即可 比如 div 然后tab键，就可以生成<div></div>
- 如果想要生成多个相同标签 加上*就可以了比如 div*3 就可以快速生成3个div
- 如果有父子级关系的标签，可以用>比如u>li就可以了
- 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
- 如果生成带有类名或者id名字的，直接写.demo 或者 #two tab 键就可以了
- 如果生成的div类名是有顺序的，可以用自增符号 $
- 如果想要在生成的标签内部写内容可以用{}表示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0516_Page_1_emmet语法</title>
</head>
<body>
<!-- 想直接生成标签，直接输入标签名称后tab或者回车 -->
<div>直接输入div后回车或者tab即可快速生成div标签</div>
<br>
<!-- 快速生成多个相同的标签 -->
<div>快速生成五个相同的标签内容：标签名称*5，注意这里的*符号前后不可以有空格</div>
<div>快速生成五个相同的标签内容：标签名称*5，注意这里的*符号前后不可以有空格</div>
<div>快速生成五个相同的标签内容：标签名称*5，注意这里的*符号前后不可以有空格</div>
<div>快速生成五个相同的标签内容：标签名称*5，注意这里的*符号前后不可以有空格</div>
<div>快速生成五个相同的标签内容：标签名称*5，注意这里的*符号前后不可以有空格</div>
<!-- 快速生成包含父子关系的多个标签，比如列表 -->
<ol>
<li>快速生成包含父子关系的多个标签，比如列表，直接输入ol>li即可</li>
</ol>
<ul>
<li> 如果想一次生成5个小li </li>
<li> 可以和前面的*5 </li>
<li> 直接输入 </li>
<li> ol>li*5 </li>
<li> </li>
</ul>
<!-- 同时生成同级别的标签 -->
<div>一次生成多个同级别的标签用+号</div> <br>
<p>比如，一次生成div和p，直接输入：div+p即可</p>
<!-- 在生成标签的同时，让其包含类名或id名 -->
<div id="id">若要包含id名：输入#id名</div>
<div class="class_name">若要包含类名：.类名</div>
<!-- 需要生成递增内容，用dollar符$ -->
<div class="class_name1">生成类名分别为class_name1~5的div标签: .class_name$*5</div>
<div class="class_name2"></div>
<div class="class_name3"></div>
<div class="class_name4"></div>
<div class="class_name5"></div>
<div>生成内容为1~5递增的div标签</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<br>
<!-- 想要在生成标签的同时填充内容，使用{}符号 -->
<div>想要在生成标签的同时填充内容，使用{}符号</div>
<div>比如，给div内填充内容，只需输入div{}，然后在括号之间输入内容</div>
</body>
</html>
1.2. 快速生成CSS样式语法
CSS 基本采取简写形式即可
- 比如w200 按tab 可以生成 width: 200px;
- 比如lh26 按tab 可以生成 line-height: 26px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0516_2_快速生成css样式</title>
<style>
.quick {
text-align: center;
line-height: 26px;
font-weight: 700;
font-style: italic;
text-decoration: underline;
width: 100px;
background-color: #32a1dd;
}
</style>
</head>
<body>
<div class="quick">测试</div>
</body>
</html>
1.3. 文本自动格式化
2. CSS 的复合选择器
2.1. 什么是复合选择器
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器（在css part1已经学过）和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
- 复合选择器可以更准确、更高效的选择目标元素(标签)；
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的；
- 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
2.2. 后代选择器（重要）
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
比如， div a会将div内部包含的所有a都选出来进行样式的处理
2.2.1. 语法
元素1 元素2 {
样式声明
}
<!-- 上述语法表示选择元素1里面的所有元素2(后代元素)。 -->- 元素1和元素2中间用空格隔开；
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2 可以是儿子（元素1的下一级），也可以是孙子（元素1的下下一级）等，只要是元素1的后代即可
- 元素1和 元素2 可以是任意基础选择器
2.2.2. 实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0516_Page_3_后代选择器</title>
<style>
ul li {
color: aqua;
}
ol li {
color: blueviolet;
}
div a {
color: red;
}
.nav ul li a {
color: chartreuse;
}
</style>
</head>
<body>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div>
<ul>
<li></li>
<a href="#">xxx</a>
<li></li>
<li> <a href="#" target="_blank">test</a>xxx</li>
<li> <a href="#" target="_blank">test</a>xxx</li>
<li> <a href="#" target="_blank">test</a>xxx</li>
<li> <a href="#" target="_blank">test</a>xxx</li>
</ul>
</div>
<div class="nav">
<ul>
<li><a href="#" target="_blank">AAAAA</a></li>
<li><a href="#" target="_blank">AAAAA</a></li>
<li><a href="#" target="_blank">AAAAA</a></li>
</ul>
</div>
</body>
</html>
2.3. 子选择器（重要）
子元素选择器(子选择器)，只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.
div>p {样式声明 } /*选择 div 里面所有最近一级 p 标签元素大/- 元素1和 元素2 中间用 大于号 隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2 必须是亲儿子，其孙子、重孙之类都不归他管.也可以叫他,亲儿子选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0516_Page_4_子选择器</title>
<style>
div {
background-color: bisque;
}
div>a {
color: aqua;
}
div>li {
color: red;
}
</style>
</head>
<body>
<div>
<a href="#" target="_blank">test0</a>
<ul>
<li><a href="#">test1</a></li>
<li></li>
<li> </li>
</ul>
<a href="#">test2</a>
</div>
<div>
<ul>
<li><a href="#">test3</a></li>
<li></li>
</ul>
</div>
</body>
</html>
2.4. 后代选择器和子选择器对比练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0517_Page_1_练习</title>
<style>
/* 题目一 */
/* 方法1 */
/* .nav ul li a {
color: red;
} */
/* 方法2 */
/* .nav a {
color: red;
} */
/* 方法3 */
.nav ul a {
color: red;
}
/* 题目二 */
.hot>a {
color: pink;
}
</style>
</head>
<body>
<!-- 1.将下面的链接文字修改为红色 -->
<div class="nav">
<ul>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
</ul>
</div>
<!-- 2.将下面的大肘子文字修改为粉红色 -->
<div class="hot">
<a href="#">大肘子</a>
<ul>
<li><a href="#">猪头</a></li>
<li><a href="#">猪尾巴</a></li>
</ul>
</div>
</body>
</html>
2.5. 并集选择器（重要）
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。
- 元素1和 元素2 中间用逗号隔开；
- 逗号可以理解为和的意思；
- 并集选择器通常用于集体声明
💡 注意
约定的语法规范，并集选择器喜欢竖着写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0517_Page_2_并集选择器</title>
<style>
/* 熊大熊二变成亮绿色 */
div,
p {
color: aqua;
}
/* 光头强和两只熊变成粉红色 */
span,
.sheep li {
color: pink;
}
</style>
</head>
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="sheep">
<li>喜羊羊</li>
<li>美羊羊</li>
<li>懒羊羊</li>
</ul>
</body>
</html>
2.6. 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示，比如:hover（鼠标经过时的效果）、:first-child（选择第一个孩子）。
伪类选择器很多，比如有链接伪类、结构伪类等。
2.6.1. 链接伪类选择器（重要）
a:link /*选择所有未被访问的链接 */
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起的链接)*/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0517_Page_3_链接伪类选择器</title>
<style>
/* 选择未访问过的链接 a:link */
a:link {
color: black;
text-decoration: none;
}
/* 选择访问过的链接 a:visited */
a:visited {
color: aqua;
}
/* 选择鼠标悬停的链接 a:hover */
a:hover {
color: blueviolet;
}
/* 选择那些活动的链接（鼠标点击中未松开） a:active */
a:active {
color: red;
}
</style>
</head>
<body>
<a href="https://developer.mozilla.org/" target="_blank">链接伪类标签选择器示例</a> <br>
<a href="https://www.baidu.com" target="_blank">百度</a> <br>
<a href="https://www.youkuaiyun.com/">csdn</a>
</body>
</html>
2.6.1.1. 链接伪类选择器注意事项
- 为了确保生效，请按照LVHA的顺序声明:link- :visited- :hover- :active；
- 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
2.6.1.2. 链接伪类选择器实际开发中的写法
/*a 是标签选择器所有的链接*/
a {
color: gray;
text-decoration: none;
}
/*:hover 是链接伪类选择器 鼠标经过 */
a:hover {
/*鼠标经过的时候，由原来的灰色变成了红色*/
color:red;
}💡 注意
这里只点击了 https://developer.mozilla.org/ 成功测试了点击变色的效果，但是当继续添加后两个链接，刷新页面显示时，页面中后两个链接也变成了访问过的颜色，首先确保三个链接的href属性指向的地址不一样，随后检查是浏览器缓存造成的，清除缓存即可。
2.6.2. focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0517_Page_4_focus伪类选择器</title>
<style>
input:focus {
background-color: aqua;
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
2.7. 复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是大于 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号.nav, .header |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住 a{} 和 a:hover 这是实际开发的写法 |
| :focus 选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus 记住这个写法 |
3. CSS的元素显示模式
3.1. 什么是元素的显示模式
作用:网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页,
元素显示模式就是元素(标签)以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。
HTML元素一般分为块元素和行内元系两种类型
3.2. 元素显示模式的分类
3.2.1. 块元素
3.2.1.1. 常见的块元素
有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
3.2.1.2. 块级元素的特点
- 比较霸道，自己独占一行。
- 高度，宽度、外边距以及内边距都可以控制。
- 宽度默认是容器(父级宽度)的100%。
- 是一个容器及盒子，里面可以放行内或者块级元素。
3.2.1.3. 注意点
文字类的元素内不能使用块级元素
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
同理<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0518_Page_1_块元素</title>
<style>
body>div {
width: 100px;
height: 30px;
background-color: aqua;
border: 1px solid red;
}
</style>
</head>
<body>
<div>div是块元素</div>
</body>
</html>
💡 注意
这里没有添加“body>”前，页面显示了两个色块
3.2.2. 行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>,<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点:
- 相邻行内元素在一行上，一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
💡 注意
- 链接里面不能再放链接；
- 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0521_2_行内元素</title>
<style>
span {
width: 600px;
height: 600px;
background-color: red;
}
</style>
</head>
<body>
<span>这是span标签内容</span> <strong>这是strong标签内容</strong>
<span>行内元素的高度和宽度无法直接设置</span> <strong>这是strong标签内容</strong>
<a href="#" target="_blank"><a href="http://www.baidu.com" target="_blank">xx</a>yy</a>
</body>
</html>
3.3. 行内块元素
在行内元素中有几个特殊的标签：<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点:
① 和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
② 默认宽度就是它本身内容的宽度(行内元素特点)。
③ 高度，行高、外边距以及内边距都可以控制(块级元素特点)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0521_3_行内块元素</title>
<style>
input {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
</body>
</html>
3.4. 元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
| 块级元素 | 行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
3.5. 元素显示模式转换
特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性比如想要增加链接<a>的触发范围。
- 转换为块元素:display:block（较常使用）;
- 转换为行内元素:display:inline;
- 转换为行内块:display: inline-block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0521_4_显示模式转换</title>
<style>
.a1 {
width: 200px;
height: 20px;
background-color: red;
}
.a2 {
width: 300px;
height: 20px;
background-color: red;
/* 将行内元素a转换成块级元素 */
display: block;
}
.div1 {
width: 200px;
height: 30px;
background-color: blue;
}
.div2 {
width: 200px;
height: 30px;
background-color: blue;
/* 将块级元素div转换为行内元素 */
display: inline;
}
.span1 {
width: 300px;
height: 30px;
background-color: aqua;
}
.sapn2 {
width: 300px;
height: 30px;
background-color: aqua;
/* 将行内元素转换为行内块元素 */
display: inline-block;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank" class="a1">baidu，这是一个行内元素</a>
<a href="https://www.baidu.com" target="_blank" class="a1">baidu，这是一个行内元素</a>
<a href="https://www.baidu.com" target="_blank" class="a2">baidu，行内元素转换为块级元素</a>
<a href="https://www.baidu.com" target="_blank" class="a2">baidu，行内元素转换为块级元素</a>
<br>
<div class="div1">这是一个块级元素</div>
<div class="div1">这是一个块级元素</div>
<div class="div2">块级转换为行内元素</div>
<div class="div2">这是一个块级元素</div>
<br>
<span class="span1">这是一个行内元素</span>
<span class="span1">这是一个行内元素</span>
<span class="sapn2">行内元素转换为行内块元素</span>
<span class="sapn2">行内元素转换为行内块元素</span>
</body>
</html>
3.6. snipaste工具的使用
直接windows的Microsoft store里就能直接搜索下载安装
Snipaste 是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上。常用快捷方式:
- F1 可以截图. 同时测量大小,设置箭头 书写文字等；
- 2.F3 在桌面置顶显示；
- 点击图片,alt 可以取色(按下shift 可以切换取色模式)
- 按下esc 取 消图片显示
3.7. 单行文字垂直居中
CSS 没有给我们提供文字垂直居中的代码.
让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中，原理解释如下：
行高包含：上空隙+文字高度+下空隙
💡注意
行高的上空隙和下空隙把文字挤到中间了.是如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下
3.8. 小练习：简洁版小米侧边栏
3.8.1. 案例界面示例
实现以上效果还需要别的没学的知识，现在需要做到以下的简单效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0521_5_练习-小米侧边栏</title>
<style>
/* 定义一些共有的属性特点 */
a {
color: white;
text-decoration: none;
}
/* 鼠标悬停的时候连接背景为橙色 */
a:hover {
background-color: #ff6f00;
}
/* 直接将行内元素a标签转换为块元素 */
.a1 {
width: 300px;
height: 50px;
color: white;
text-decoration: none;
text-indent: 2em;
background-color: #535758;
/* 行高（line-height）和盒子高度（上面的height）一致就能实现垂直居中 */
line-height: 50px;
display: block;
}
.div {
width: 300px;
height: 50px;
background-color: #535758;
}
/* 更改div内包含的a标签为块元素 */
.a2 {
width: 300px;
height: 50px;
text-indent: 2em;
display: block;
line-height: 50px;
}
.div_3 {
width: 300px;
/* 因为方法三里只用了一个盒子，所以这里定义盒子的高度的时候需要50px*7 */
height: 350px;
background-color: #535758;
/* 为了设置每行文本垂直居中，仍然需要将每行的行高设置为盒子里一行文本所占据的大小，即为50px，如果只会套公式“行高等于盒子大小” 会造成一行的高度为350px，会将单行的文本放在整个大盒子的中间*/
line-height: 50px;
/* line-height: 350px; */
}
</style>
</head>
<body>
<!-- 实现方式 1 -->
<a href="#" target="_blank" class="a1">手机 电话卡</a>
<a href="#" target="_blank" class="a1">电视 盒子</a>
<a href="#" target="_blank" class="a1">笔记本 平板</a>
<a href="#" target="_blank" class="a1">出行 穿戴</a>
<a href="#" target="_blank" class="a1">智能 路由器</a>
<a href="#" target="_blank" class="a1">健康 儿童</a>
<a href="#" target="_blank" class="a1">耳机 音响</a>
<br>
<!-- 实现方式 2 -->
<div class="div"><a href="#" target="_blank" class="a2">手机 电话卡</a></div>
<div class="div"><a href="#" target="_blank" class="a2">电视 盒子</a></div>
<div class="div"><a href="#" target="_blank" class="a2">笔记本 平板</a></div>
<div class="div"><a href="#" target="_blank" class="a2">出行 穿戴</a></div>
<div class="div"><a href="#" target="_blank" class="a2">智能 路由器</a></div>
<div class="div"><a href="#" target="_blank" class="a2">健康 儿童</a></div>
<div class="div"><a href="#" target="_blank" class="a2">耳机 音响</a></div>
<br>
<!-- 实现方式 3 -->
<div class="div_3">
<a href="#" target="_blank" class="a2">手机 电话卡</a>
<a href="#" target="_blank" class="a2">电视 盒子</a>
<a href="#" target="_blank" class="a2">笔记本 平板</a>
<a href="#" target="_blank" class="a2">出行 穿戴</a>
<a href="#" target="_blank" class="a2">智能 路由器</a>
<a href="#" target="_blank" class="a2">健康 儿童</a>
<a href="#" target="_blank" class="a2">耳机 音响</a>
</div>
</body>
</html>
4. CSS 的背景
通过 CSS 背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
4.1. 背景颜色
background-color属性定义了元素的背景颜色。
background-color: 颜色值一般情况下元素背景颜色默认值是transparent(透明)，我们也可以手动指定背景颜色为透明色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0523_1_背景颜色</title>
<style>
.div {
width: 260px;
height: 30px;
background-color: aqua;
/* 如果不写背景颜色，则默认透明 */
/* background-color: transparent; */
}
</style>
</head>
<body>
<div class="div">这是一个盒子</div>
</body>
</html>
4.2. 背景图片
background-image属性描述了元素的背景图像。实际开发常见于logo 或者一些装饰性的小图片或者是超
大的背景图片,优点是相对于插入图片更便于精确控制位置.(精灵图也是一种运用场景)
background-image : none | url(url)| 参数值 | 作用 |
| none | 无背景图(默认的) |
| url | 使用绝对或相对地址指定背景图像 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0523_2_背景图片</title>
<style>
.div {
width: 300px;
height: 260px;
/* 注意反斜杠的位置 */
background-image: url(../images/wangyiyun.png);
}
</style>
</head>
<body>
<div class="div">
背景图片设置
</div>
</body>
</html>
4.3. 背景平铺
如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat属性。
background-repeat:repeat | no-repeat | repeat-x | lrepeat-y| 参数值 | 作用 |
| repeat | 背景图像在纵向和横向上平铺(默认的) |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0523_3_背景平铺</title>
<style>
.div1 {
width: 300px;
height: 100px;
/* 注意反斜杠的位置 */
background-image: url(../images/wangyiyun.png);
/* 背景默认平铺 */
background-repeat: repeat;
}
.div2 {
width: 300px;
height: 100px;
background-image: url(../images/wangyiyun.png);
/* 设置背景不要平铺 */
background-repeat: no-repeat;
}
.div3 {
width: 300px;
height: 100px;
background-image: url(../images/wangyiyun.png);
background-repeat: repeat-x;
}
.div4 {
width: 300px;
height: 100px;
background-image: url(../images/wangyiyun.png);
background-repeat: repeat-y;
}
.div5 {
width: 300px;
height: 100px;
background-color: aqua;
background-image: url(../images/wangyiyun.png);
background-repeat: no-repeat;
/* background-repeat: repeat; */
}
</style>
</head>
<body>
<div class="div1">
背景图片默认平铺
</div>
<br>
<div class="div2">
背景图片不平铺
</div>
<div class="div3">
背景图片沿着x轴平铺
</div>
<div class="div4">
背景图片沿着y轴平铺
</div>
<br>
<!-- 一个思考，还能给背景元素中添加背景颜色吗 -->
<div class="div5">
给背景元素同时添加背景图片和背景颜色的效果
答案：依旧可以添加颜色，但是背景图片所在的位置会将背景颜色覆盖，如果是非平铺的情况，还是能看到部分背景颜色的。
</div>
</body>
</html>
4.4. 背景位置（重要）
前面说过，当图片以背景元素插入时最大的优点是——控制图片的位置会更加方便（相较于直接插入图片）
利用 background-position属性可以改变图片在背景中的位置。
background-position: x y;参数代表的意思是: x坐标和y坐标。可以使用方位名词 或者精确单位。
| 参数值 | 说明 |
| length | 百分数|由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
4.4.1. 使用方位名词参数设置
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和 top lek 效果一致
- 如果只指定了一个方位名词，另一个值省略，则第二个省略的值默认居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0524_1_背景位置-方位名词</title>
<style>
/* 使用方位名词设置背景图片位置 */
.bp1 {
width: 300px;
height: 120px;
background-color: aqua;
background-image: url(../images/wangyiyun.png);
background-repeat: no-repeat;
/* 设置图片为中右 */
background-position: right center;
}
.bp2 {
width: 300px;
height: 120px;
background-color: aqua;
background-image: url(../images/wangyiyun.png);
background-repeat: no-repeat;
background-position: center right;
}
.bp3 {
width: 300px;
height: 120px;
background-color: aqua;
background-image: url(../images/wangyiyun.png);
background-repeat: no-repeat;
background-position: left;
}
.bp4 {
width: 300px;
height: 120px;
background-color: aqua;
background-image: url(../images/wangyiyun.png);
background-repeat: no-repeat;
background-position: top;
}
</style>
</head>
<body>
<!-- 使用方位名词设置背景图片位置 -->
<div class="bp1">
使用方位名词设置背景图片位置
</div>
<br>
<div class="bp2">
调换两个参数位置，效果一致
</div>
<br>
<div class="bp3">
省略其中一个参数，另一个参数默认为center
</div>
<br>
<div class="bp4">
省略其中一个参数，另一个参数默认为center
</div>
</body>
</html>
4.4.2. 背景位置小练习一
使用截图工具snipaste，得到盒子（容器）的尺寸：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0524_2_背景位置练习1</title>
<style>
.bp1 {
width: 177px;
height: 69px;
/* background-color: aqua; */
background-image: url(../images/icon_wangyi.png);
background-repeat: no-repeat;
background-position: left center;
font-size: 20px;
font-weight: 400;
line-height: 69px;
text-indent: 2em;
}
</style>
</head>
<body>
<h1 class="bp1">网易云音乐</h1>
</body>
</html>实现效果大致一样：
4.4.3. 大背景位置练习二
设置大的图片背景：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0524_3_背景位置练习2</title>
<style>
body {
background-image: url(../images/wangzheBigImg.png);
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
</body>
</html>
4.5. 使用精确单位设置背景图片位置
- 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标；
- 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0524_4_背景位置-精确单位</title>
<style>
.div1 {
width: 300px;
height: 100px;
background-image: url(../images/wangyiyun.png);
background-repeat: no-repeat;
background-color: aqua;
background-position: 10px 40px;
}
.div2 {
width: 300px;
height: 100px;
background-image: url(../images/wangyiyun.png);
background-repeat: no-repeat;
background-color: aqua;
background-position: 40px 10px;
}
.div3 {
width: 300px;
height: 100px;
background-image: url(../images/wangyiyun.png);
background-repeat: no-repeat;
background-color: aqua;
background-position: 20px;
}
</style>
</head>
<body>
<div class="div1">
使用精确参数设置背景图片位置
</div>
<br>
<div class="div2">
调换两个参数位置，效果不一致
</div>
<br>
<div class="div3">
省略一个参数，默认那个维度为居中；剩下的那个有数值的参数，默认为X轴方向上的参数
</div>
</body>
</html>
4.6. 参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0524_5_背景位置-混合单位</title>
<style>
.div1 {
width: 300px;
height: 100px;
background-image: url(../images/wangyiyun.png);
background-repeat: no-repeat;
background-color: aqua;
background-position: center 40px;
}
</style>
</head>
<body>
<div class="div1">
混合单位设置背景图片位置
</div>
</body>
</html>
4.7. 背景图像固定（背景附着）
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment后期可以制作视差滚动的效果。
background-attachment: scroll |fixed| 参数 | 作用 |
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0524_6_背景固定/背景附着</title>
<style>
body {
background-image: url(../images/wangzheBigImg.png);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
/* 默认是滚动的 */
/* background-attachment: scroll; */
}
</style>
</head>
<body>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
<p>背景固定或称背景附着，可用来制作视差滚动的效果</p>
</body>
</html>
4.8. 背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中，从而节约代码量。
当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为
background: 背景颜色 --> 背景图片地址 --> 背景平铺 --> 背景图像滚动 --> 背景图片位置
这是实际开发中，更提倡的写法。
4.9. 背景色半透明
CSS3 提供了背景颜色半透明的效果。
background: rgba(0, 0, 0, 0.3);- 最后一个参数是 alpha透明度，取值范围在0~1之间 (0：全透明，1：不透明)。
- 习惯把 0.3的0省略掉，写为 background:rgba(0,0,0,.3);
- 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
- CSS3 新增属性，是IE9+版本浏览营才支持的
- 现在实际开发，不太关注兼客性写法了，可以放心使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0527_1_背景色半透明</title>
<style>
.div1 {
width: 300px;
height: 100px;
background-color: black;
}
.div2 {
width: 300px;
height: 100px;
background: rgba(0, 0, 0, 1);
}
.div3 {
width: 300px;
height: 100px;
background: rgba(0, 0, 0, 0);
}
.div4 {
width: 300px;
height: 100px;
background: rgba(0, 0, 0, 0.3);
}
.div5 {
width: 300px;
height: 100px;
background: rgba(0, 0, 0, .7);
}
</style>
</head>
<body>
<div class="div1"></div>
<br>
<div class="div2"></div>
<br>
<div class="div3"> alpha参数为0</div>
<br>
<div class="div4">alpha参数为0.3,alpha参数越大越显色</div>
<br>
<div class="div5">alpha参数为0.7,alpha参数越大越显色</div>
</body>
</html>
4.10. 背景总结
| 属性 | 作用 | 值 |
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position分别是x 和 y坐标 |
| background-attachment | 背景附着 | scroll(背景滚动)/fixed(背景固定) |
| 背景简写 | 书写更简单 | 颜色 图片地址 平铺 滚动 位置; |
| 背景色半透明 | 背景颜色半透明 | background: rgba(0,0,0,0.3); 后面必须是 4个值 |
背景图片实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)
4.11. 背景-综合案例
案例描述：当鼠标放在这四个导航上时，颜色会发生变化，四个导航都应该是能够跳转的链接
练习价值:
1.链接属于行内元素,但是此时需要宽度高度,因此需要模式转换
2.里面文字需要水平居中和垂直居中,因此需要单行文字垂直居中的代码
3.链接里面需要设置背景图片.因此需要用到背景的相关属性设置
4.鼠标经过变化背景图片,因此需要用到链接伪类选择器
4.11.1. 自主实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0527_2_背景-综合案例-五彩导航</title>
<style>
.nav1 {
display: inline-block;
width: 120px;
height: 58px;
/* 预先设置背景颜色，帮助自己一步步观察和调试 */
/* background-color: aqua; */
/* 想要文字居中，但是背景图片中还包含了小尖尖的大小，几点减去小尖尖的高（大概是10px） */
line-height: 48px;
text-align: center;
text-decoration: none;
color: white;
background-image: url(../images/bg01.png);
background-repeat: no-repeat;
}
/* 写:hover 前面不要加空格*/
.nav1:hover {
/* background-color: red; */
background-image: url(../images/bg-1.png);
}
.nav2 {
display: inline-block;
width: 120px;
height: 58px;
/* 预先设置背景颜色，帮助自己一步步观察和调试 */
/* background-color: aqua; */
/* 想要文字居中，但是背景图片中还包含了小尖尖的大小，几点减去小尖尖的高（大概是10px） */
line-height: 48px;
text-align: center;
text-decoration: none;
color: white;
background-image: url(../images/bg02.png);
background-repeat: no-repeat;
}
.nav2:hover {
/* background-color: red; */
background-image: url(../images/bg-2.png);
}
.nav3 {
display: inline-block;
width: 120px;
height: 58px;
/* 预先设置背景颜色，帮助自己一步步观察和调试 */
/* background-color: aqua; */
/* 想要文字居中，但是背景图片中还包含了小尖尖的大小，几点减去小尖尖的高（大概是10px） */
line-height: 48px;
text-align: center;
text-decoration: none;
color: white;
background-image: url(../images/bg03.jpg);
background-repeat: no-repeat;
}
.nav3:hover {
/* background-color: red; */
background-image: url(../images/bg-3.png);
}
.nav4 {
display: inline-block;
width: 120px;
height: 58px;
/* 预先设置背景颜色，帮助自己一步步观察和调试 */
/* background-color: aqua; */
/* 想要文字居中，但是背景图片中还包含了小尖尖的大小，几点减去小尖尖的高（大概是10px） */
line-height: 48px;
text-align: center;
text-decoration: none;
color: white;
background-image: url(../images/bg04.png);
background-repeat: no-repeat;
}
.nav4:hover {
/* background-color: red; */
background-image: url(../images/bg-4.png);
}
</style>
</head>
<body>
<a href="#" target="_blank" class="nav1"> 五彩导航栏 </a>
<a href="#" target="_blank" class="nav2"> 五彩导航栏 </a>
<a href="#" target="_blank" class="nav3"> 五彩导航栏 </a>
<a href="#" target="_blank" class="nav4"> 五彩导航栏 </a>
</body>
</html>
4.11.2. 简化实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0527_3_背景-综合案例-五彩导航简化实现l</title>
<style>
.nav a {
/* background-color: aqua; */
display: inline-block;
width: 120px;
height: 58px;
color: white;
text-decoration: none;
text-align: center;
line-height: 48px;
}
.nav .bg1 {
background-image: url(../images/bg01.png);
background-repeat: no-repeat;
}
.nav .bg1:hover {
background-image: url(../images/bg-1.png);
}
.nav .bg2 {
background: url(../images/bg02.png) no-repeat;
}
.nav .bg2:hover {
background-image: url(../images/bg-2.png);
}
.nav .bg3 {
background: url(../images/bg03.jpg) no-repeat;
}
.nav .bg3:hover {
background-image: url(../images/bg-3.png);
}
.nav .bg4 {
background: url(../images/bg04.png) no-repeat;
}
.nav .bg4:hover {
background-image: url(../images/bg-4.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#" target="_blank" class="bg1">五彩导航</a>
<a href="#" target="_blank" class="bg2">五彩导航</a>
<a href="#" target="_blank" class="bg3">五彩导航</a>
<a href="#" target="_blank" class="bg4">五彩导航</a>
</div>
</body>
</html>
5. CSS的三大特性
CSS 有三个非常重要的三个特性：层叠性、继承性、优先级。
5.1. 层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则:
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0527_4_层叠性</title>
<style>
div {
color: red;
font-weight: 700;
font-size: 30px;
}
div {
color: aqua;
}
</style>
</head>
<body>
<div>xx</div>
</body>
</html>
💡 注意
层叠性只层叠那些一样的属性，比如示例中的颜色，选择器中剩余的字体加粗和大小样式依旧。
5.2. 继承性
5.2.1. 一般样式继承
现实中的继承：我们继承了父亲的姓
CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是:子承父业。
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性
- 子元素可以继承父元素的样式，主要是一些跟文字相关的样式(text-，font-，line-这些元素开头的可以继承，以及color属性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0527_5_继承性</title>
<style>
div {
color: aqua;
font-size: 50px;
text-decoration: dashed;
line-height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<div>
<!-- 虽然p标签的其他的属性样式并没有明确定义，但是父标签div的相关的样式定义了，会直接从父标签中集成相关的文字和颜色样式 -->
<p>这是关于CSS继承性的示例</p>
</div>
</body>
</html>
5.2.2. 行高的继承
body {
font: 12px/1.5 Microsoft YaHei;
}- 行高可以跟单位，也可以不跟单位
- 如果子元素没有设置行高，则会继承父元素的行高为1.5*font-size
- 此时子元素的行高是：当前子元素的文字大小*1.5
- body行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0527_6_继承性_行高的继承</title>
<style>
body {
font: 12px/1.5 Microsoft YaHei;
}
p {
/* 未指定行高，于是从父元素body处继承行高样式：1.5倍的font-size */
/* 此时line-weight=20px*1.5 */
font-size: 20px;
}
div {
/* 未指定行高，同样从父元素body处继承行高样式：1.5倍的font-size */
/* 此时line-weight=8px*1.5 */
font-size: 8px;
}
</style>
</head>
<body>
这是关于行高继承的一个简单示例。
<p>这是body中的p标签内容。</p>
<div>这是body中的div标签内容。</div>
<ul>
<!-- 这里li在前面的样式定义中未指定行高和字体大小,于是继承父元素的样式 -->
<!-- 回溯父元素,先是ul然后是body,找到样式12px/1.5 -->
<!-- 因此,li的基本样式为,字体大小12px,行高为1.5*12px -->
<li>这是body标签中无序列表中的第一个小li</li>
<li>这是body标签中无序列表中的第二个小li</li>
<li>这是body标签中无序列表中的第三个小li</li>
</ul>
</body>
</html>
5.3. 优先级
5.3.1. 原则
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠性；
- 选择器不同，则根据选择器权重执行；
5.3.2. 选择器权重表
选择器权重如下表所示。
| 选择器 | 选择器权重 |
| 继承 或者 * | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式 style="" | 1，0，0，0 |
| !important 重要的 | ∞无穷大 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0527_7_优先级</title>
<style>
div {
/* 一旦添加了"!important"字眼,则该样式优先级最高 */
color: red !important;
}
.test1 {
color: blue;
}
#test2 {
color: rgb(0, 0, 0);
}
</style>
</head>
<body>
<!-- 当指定了行内样式,优先级顺序为: -->
<!-- 行内样式>id选择器>伪类/类选择器>元素选择器 -->
<div class="test1" id="test2" style="color: aqua;">xx</div>
</body>
</html>
5.3.3. 优先级注意点
- 权重是有4组数字组成（如上面表中0，0，0，1），但是不会有进位。
- 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推..
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
- 可以简单记忆法: 通配符和继承权重为0，标签选择器为1，类(伪类)选择器为10，id选择器为100，行内样式表为1000，!important为无穷大。
- 继承的权重是0。如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
💡 注意 优先级顺序
!important>行内样式>id选择器>类/伪类选择器>元素选择器>继承或者通配符选择器*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0527_8_优先级的注意点</title>
<style>
#test {
color: red;
}
/* 这里要注意,尽管id选择器的优先级高于元素选择器,但是要注意区分,这个id选择器分配给了父标签,子标签依旧会只能根据继承得到样式,
所以要注意子标签一旦有别的样式定义,一定不会继承到父标签的样式,因为继承的优先级最低 */
p {
color: aqua;
}
</style>
</head>
<body>
<div id="test">
<!-- p如果继承自父标签div,则会显示红色 -->
<!-- 由于前面定义了元素标签选择器p,这个优先级比继承高,故而会执行p标签选择器中的颜色,而非红色 -->
<p>
这是包含在div标签内的p标签.
</p>
<!-- 这里依旧没办法显示父标签的颜色
这是因为在浏览器中,默认给链接定义了样式为蓝色加下划线,该样式定义一定会比继承的优先级更高
如果想要更改链接标签的样式,只需要在样式表里层叠定义新样式就好-->
<a href="#" target="_blank">这是一个链接标签</a>
</div>
</body>
</html>
5.3.4. 优先级权重叠加
如果是复合选择器，则会有权重善加，需要计算权重。（权重会叠加，不会进位）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0527_9_优先级权重叠加</title>
<!-- 当使用了复合选择器后,会出现权重叠加的情况 -->
<style>
li {
color: aqua;
}
/* 0,0,0,2 */
ul li {
color: blue;
}
/* 0,0,1,1 */
.test li {
color: red;
}
/* 注意这个选择器相当于 一个标签选择器 a +一个伪类选择器:hover */
/* 0,0,1,1 */
a:hover {
color: black;
}
</style>
</head>
<body>
<ul class="test">
<li>芒果</li>
<li>西瓜</li>
<li>榴莲</li>
</ul>
<a href="#" target="_blank">这是一个链接标签</a>
</body>
</html>
5.3.5. 权重两练习题
5.3.5.1. 练习1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0527_10_权重练习1</title>
<style>
.nav {
color: red;
}
li {
color: black;
}
</style>
</head>
<body>
<ul class="nav">
<!-- 尽管父亲的权重很高,但是小li继承的权重很小,会显示黑色 -->
<li>人生四大悲</li>
<li>家里没宽带</li>
<li>网速不够快</li>
<li>手机没流量</li>
<li>学校没wifi</li>
</ul>
</body>
</html>
5.3.5.2. 练习二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0527_11_权重练习2</title>
<style>
/* 权重为 0,0,1,0 + 0,0,0,1 */
.nav li {
color: red;
}
/* 需求:把第一个小li颜色改为 蓝色加粗 */
/* 自主实现 */
/* 权重 0,1,0,0 */
#li1 {
color: blue;
font-weight: 700;
}
/* 视频实现 */
/* 权重 0,0,1,0 + 0,0,1,0 */
.nav .li2 {
color: aqua;
font-weight: 700;
}
</style>
</head>
<body>
<ul class="nav">
<!-- 尽管父亲的权重很高,但是小li继承的权重很小,会显示黑色 -->
<li id="li1">人生四大悲</li>
<li class="li2">家里没宽带</li>
<li>网速不够快</li>
<li>手机没流量</li>
<li>学校没wifi</li>
</ul>
</body>
</html>
💡 写在最后
- 在进行背景元素的设置时，最好先加上一个背景颜色（默认是透明的，不利于观察），方便自己观察设置的盒子（容器）的尺寸和自己放入的元素的具体效果。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
