文章目录
学习目标
- 使用 emmet 语法
- 使用 CSS 符合选择器
- 写出伪类选择器的使用规范
- 元素的显示模式
- 元素显示模式的相互转换
- 背景图片的设置方式
- 计算 CSS 的权重
emmet 语法
- 使用场景:能使用缩写提高HTML、CSS 编写速度,VSCode内部已经集成该语法
快速生成 HTML 结构语法
- 生成标签,直接输入标签名然后按Tab或者Enter键即可
- 若想生成多个相同标签,加上 * 即可
- 如果是有父子关系的标签,用 > 符号
- 如果是有兄弟关系的标签,用 + 符号
- 如果是生成带有类名或id名字的,在类名前加 . 或 #
- 如果生成的div 类名存在顺序关系,可以用自增符号 $
- 在生成的标签中默认显示几个文字
- 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>emmet语法</title>
</head>
<body>
<!-- div -->
<div></div>
<!-- div*3 -->
<div></div>
<div></div>
<div></div>
<!-- ul>li -->
<ul>
<li></li>
</ul>
<!-- div+p -->
<div></div>
<p></p>
<!-- .nav -->
<div class="nav"></div>
<!-- p.one -->
<p class="one"></p>
<!-- #banner -->
<div id="banner"></div>
<!-- demo$*3 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<!-- div{你好} -->
<div>你好</div>
</body>
</html>
快速生成 CSS 样式语法
- CSS 基本都是采取简写的方式
- 案例
.one {
/* tac */
text-align: center;
/* ti */
text-indent: 2em;
/* w100 */
width: 100px;
/* lh26 */
line-height: 26px;
/* tdnone */
text-decoration: none;
}
快速格式化代码
- 手动快速格式化快捷键: Alt + Shift + F
CSS 的复合选择器
- 建立在基础选择器之上,对基本选择器进行组合形参
- 作用
- 更准确、高效的选择目标元素
- 由两个或多个基础选择器,通过不同的方式组合而成
- 种类
- 后代选择器
- 子代选择器
- 并集选择器
- 伪类选择器
后代选择器
- 亦称为:包含选择器
- 作用:选择父元素中的子元素
- 语法
元素1 元素2 { 样式声明 }
-
注意事项
- 元素1和元素2中间用空格隔开
- 元素1是父级,元素2是子级,最终选择的是元素2
- 元素2只要是元素1的后代就可以
- 元素1和元素2可以是任意基础选择器
-
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style>
ol li {
color: skyblue;
}
ol p {
color: black;
}
</style>
</head>
<body>
<ol>
<li>我们是 ol标签 的孩子</li>
<p>我是 li标签 的孩子</p>
<li>我们是 ol标签 的孩子</li>
<li>我们是 ol标签 的孩子</li>
</ol>
</body>
</html>
- 效果图
子代选择器
- 亦称为:子元素选择器
- 只能选择亲儿子
- 语法
元素1 > 元素2 { 样式声明 }
-
注意事项
- 元素1 和 元素2 之间使用大于号隔开
- 元素1是父级,元素2是子级,最终选择的是元素2
- 元素2必须是亲儿子
-
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子代选择器</title>
<style>
.nav>a {
color: skyblue;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">我是儿子</a>
<p><a href="">我是孙子</a></p>
</div>
</body>
</html>
- 效果图
并集选择器
- 可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明
- 语法
元素1,元素2 { 样式声明 }
-
注意事项
- 元素1 和 元素2 中间用逗号隔开
- 逗号可以理解为和的意思
- 并集选择器通常常用于集体声明
-
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<style>
div,
p,
.singer {
color: skyblue;
}
</style>
</head>
<body>
<div>那就这样吧</div>
<p>洋葱</p>
<span>演员</span>
<ul class="singer">
<li>杨宗纬</li>
<li>薛之谦</li>
</ul>
</body>
</html>
- 效果图
伪类选择器
- 为某些选择器添加特殊的效果
- 特点
- 用冒号表示
- 种类很多
链接伪类选择器
- 属性
样式 | 作用 |
---|---|
a:link | 选择所有未被访问的链接 |
a:visited | 选择所有已被访问的链接 |
a:hover | 选择鼠标指针位于其上的链接 |
a:active | 选择活动链接(即鼠标点下但是还没有弹起的链接) |
-
注意事项:如果一个链接需要多种链接伪类选择器的时候,为了确保生效,需要按照LVHA的顺序声明:link --> visited --> hover --> active
-
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接伪类选择器</title>
<style>
a {
/* 取消所有链接的下划线 */
text-decoration: none;
}
.a1:link {
color: black;
}
.a2:visited {
color: aqua;
}
.a3:hover {
color: skyblue;
}
.a4:active {
color: red;
}
</style>
</head>
<body>
<a href="#" class="a1">链接1</a>
<a href="#" class="a2">链接2</a>
<a href="#" class="a3">链接3</a>
<a href="#" class="a4">链接4</a>
</body>
</html>
- 效果图