CSS基础（emmet 语法,CSS 复合选择器, 布局认知,背景样式）_焦点招商3.8.2.2.2.3试

CSS基础

1. emmet 语法 —— 开发效率

1.1 emmet 语法生成 html 标签

emmet 的特点和作用是什么？

• 通过简写提高编码效率。

• emmet 生成 HTML 结构语法

  序号	符号	含义	示例
  1	*N	连续生成 N 个	div*5
  2	父>子	生成父子关系结构	ul>li*5
  3	兄+弟	生成兄弟关系结构	h1+div*2+h4+p*2
  4	.class / #id	生成带 class 或 id 的 div	.red / #app
  5	tag.class / tag#id	生成带 class 或 id 的 tag	p.red / span#nav
  6	$*N	$ 位置会被连续的数字替换	.demo$*5
  7	{内容$}	标签内容	p{段落$}*5

生成多个相同的标签用哪个符号？

• *N div*5

父子关系用哪个符号？兄弟关系用哪个符号？

• 父>子 ul>li*5
• 兄+弟 h1+div*2+h4+p*2

带类名或者 id 的 div 如何编写？其他标签呢？

• .class / #id

自增符号是哪个符号？

• $*N
• .demo$*5

标签内容是哪个符号？

• {内容$}
• p{段落$}*5

1.2 emmet 语法快速生成 css 样式

emmet 生成 css 有什么规律？

• 常用属性大多用英文单词的首字母连写即可，示例如下：
• tac → text-align: center;
• ti2em → text-indent: 2em;
• lh26px → line-height: 26px;
• tdn → text-decoration: none;

如何设置宽高？

• w100 → width: 100px;
• h200 → height: 200px;

emmet 记不住怎么办？

• 不要硬记，以完成代码为主
• 会用在开发时能够快一点，不会用也不至于怎么样，做出结果最重要！

1.3 快速格式化代码

你认为程序员编写出符合规范的代码重要吗？为什么？

• 非常重要
• 代码是最好的文档，代码的可读性非常重要，代码写得规范，是专业性的体现

「快速格式化代码」扩展 —— 保存时自动格式化

1. ctrl + , → 首选项 / 设置
2. 输入 fromat，勾选 Format On Save，如下图所示：

注意：

• VSCode 自带的格式化器能够在保存时自动格式化 HTML 代码（包含其中的 CSS）
• VSCode 自带的格式化器目前不支持单独的 CSS 文件做格式化

2. CSS 复合选择器 —— 选择器

2.1 复合选择器简介

复合选择器具有什么特点？

• 对基础选择器进行组合
• 由两个或多个基础选择器，通过不同方式组合而成的

复合选择器能解决什么问题？

• 更准确、更高效的选择目标元素

常用的复合选择器有几类？

• 4类，
  分别是：

1. 后代选择器、
2. 子代选择器、
3. 并集选择器、
4. 伪类选择器

2.2 后代选择器

后代选择器的应用场景是什么？

• 可以选择父元素中的子元素

后代选择器的语法格式是什么？元素之间使用什么符号分开？

语法格式：

    选择器1 选择器2 {样式声明;}
1

• 后代选择器的选择器之间使用空格分开。

后代选择器最终选中的元素是父代元素还是子代元素？

• 后代选择器最终选中的元素是子代元素 → 后代元素

后代选择器的元素除了使用标签选择器，还可以使用其他的基础选择器吗？

• 可以
• 后代选择器中的元素可以是任一一种基础选择器

    <style>
        ol li {
            color: aqua;
        }
        .adv-selector ul li a {
            color: rgb(255, 0, 0);
        }
    </style>
1
2
3
4
5
6
7
8

2.3 子元素选择器

子代选择器的应用场景是什么？

• 选择某个元素最近一级的子元素（亲儿子）

子代选择器的语法格式是什么？元素之间使用什么符号分开？

• 语法格式

  选择器1 > 选择器2 {样式声明;}
  1

• 子代选择器的选择器之间使用 > 分开。

子代选择器最终选中的元素是父代元素还是子代元素？

• 子代选择器最终选中的元素是子代元素

2.5 并集选择器

并集选择器的应用场景是什么？

• 集体声明——选择多组标签，同时设置相同的样式

并集选择器的语法格式是什么？元素之间使用什么符号分开？有什么注意点？

• 语法格式

   选择器1,
   选择器2 {
     样式声明;
   }
1
2
3
4

• 并集选择器的选择器之间使用 , 分开，最后一个选择器不需要逗号
• 并集选择器通常会竖式排列选择器，提高代码的可读性

并集选择器可以使用后代选择器或子代选择器吗？

• 可以

   <style>
        div,
        p,
        .pig li {
            color: cyan;
        }
    </style>
1
2
3
4
5
6
7

2.6 链接伪类选择器(上)

伪类选择器使用单冒号 :，是某种状态下的样式，例如 :hover 表示鼠标指向元素的状态。

链接伪类选择器的应用场景是什么？

• 针对链接的不同状态设置不同的样式

链接伪类选择器一共有几个，分别表示什么含义？

• 链接伪类选择器	说明
  a:link	选择所有未被访问的链接
  a:visited	选择所有已经被访问的链接
  a:hover	选择鼠标指针位于其上的链接
  a:active	选择激活链接（鼠标按下未抬起的链接

   /* 选择所有未被访问的链接 */
    a:link {
        color: rgb(255, 0, 0);
        text-decoration: none;
    }
    /* 选择所有已经被访问的链接 */
    a:visited {
        color: rgb(255, 238, 0);
    }
    /* 选择鼠标指针位于其上的链接 */
    a:hover {
        color: skyblue;
    }
    /* 选择激活链接（鼠标按下未抬起的链接) */
    a:active {
        color: green;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.7 链接伪类选择器(下)

链接伪类选择器的书写顺序有要求吗？如何记忆？

• 有
• LoVe HAte（爱与恨）

在实际开发中，需要给 a 标签单独设置样式吗？为什么？

• 需要
• 因为 a 标签是有点击跳转行为的，默认与其他文本的显示样式就不相同

在实际开发中，通常只使用链接伪类选择器的哪一个状态？为什么？

• :hover
• 因为只有鼠标经过链接时，与用户的交互是最直接的
• 示例代码如下：

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: skyblue;
  text-decoration: underline;
}
1
2
3
4
5
6
7
8
9

2.8 focus 伪类选择器

focus 伪类选择器的应用场景是什么？

• 在表单中突出显示当前获得焦点的表单元素，提升用户体验

input:focus {
            background-color: rgb(216, 118, 118);
            color: rgb(72, 255, 0);
        }
1
2
3
4

2.9 复合选择器总结

3. 元素的显示模式 —— 布局认知

3.1 什么是元素显示模式

什么是元素显示模式？HTML 元素一般有几种显示模式？

• 元素以什么方式进行显示
• HTML 一般有两种显示模式

猜一猜块元素和行内元素有什么特点？

• 块元素独占一行显示
• 行内元素可以一行显示多个

3.2 块元素 —— block

块级元素有什么特点？

1. 独占一行
2. 可以设置宽度、高度、外边距、边框和内边距
3. 宽度默认是父级容器的宽度
4. 可以存放其他行内元素和块级元素

块级元素有什么注意事项？

• 开发时不要在文本类元素中添加其他元素，专注于文本存放（h1~h6、p）

常见的块级元素有哪些？如何验证？

• div、ul、ol、li、h1~h6、p
• 在 HTML 中添加一个盒子，在 Chrome 调试器中验证是否具有块级元素特征

3.3 行内元素 —— inline

行内元素有什么特点？

1. 相邻行内元素在一行显示，一行多个
2. 给行内元素设置宽高是无效的
3. 默认宽度是内容的宽度（被内容撑开）
4. 只能容纳文本或其他行内元素

行内元素有什么注意事项？

1. 链接不能再放链接
2. 特殊情况的链接可以存放块级元素

a 标签中能够放块级元素吗？应用场景是什么？

1. 特殊情况下可以存放块级元素
2. 应用场景：在电商网站点击商品列表项跳转到商品明细项

3.4 行内块元素 —— inline-block

行内块元素有什么特点？

1. 相邻行内元素在一行显示，一行多个（行内元素特点）
2. 默认宽度就是本身内容的宽度（行内元素特点）
3. 可以设置宽度、高度、外边距、边框和内边距（块级元素特点）

我们现在学习过的标签中，有那三个是行内块元素？

• img、input、td

3.5 元素显示模式总结

3.6 显示模式的转换

显示模式转换的应用场景是什么？

• 让行内元素具有宽高：把行内元素转换成块元素或者行内块元素
• 让块元素一行显示：把块元素转换成行内块元素

三种显示模式转换的代码是什么？哪两个比较重要？

• display: block 转换为块元素
• display: inline-block 转换为行内块元素
• display: inline 转化为行内元素（使用较少）
  在写 CSS 时，记住把 display 转换显示模式的设置写在第一行。

3.7 简单小米侧边栏

<!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>12. 简单小米侧边栏</title>
    <style>
        a {
            display: block;
            width: 200px;
            height: 30px;
            background-color: pink;
            margin-top: 2px;
            text-align: center;
            text-decoration: none;
            font: normal 100 20px/30px "微软雅黑";
        }
        a:hover {
            background-color: rgba(224, 127, 0, 0.945);
        }
    </style>
</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

3.8 单行文字垂直居中

如何实现单行文字的垂直居中？

• 将 line-height 设置为盒子的高度。

行高实现原理

4. 背景图片 —— 样式

4.1 背景颜色

一般情况下元素的背景颜色是什么？

• transparent 透明的

4.2 背景图片

背景图片的应用场景是什么？

1. logo
2. 装饰图片
3. 超大图片
4. 精灵图（雪碧图）

背景图片有什么优点？

• 非常容易控制位置

背景图片的语法是什么？

background-image: none | url(url);
1

指定背景图片的 url 时需要引号吗？

• 不需要

4.3 背景平铺

在使用背景图片时，默认背景是平铺的吗？

• 默认是平铺的

背景平铺有哪些属性？

使用了背景图片还能再指定背景颜色吗？

• 可以

<!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 {
            width: 400px;
            height: 100px;
            background-image: url(./images/logo.png);
            background-repeat: repeat;
        }
        .no-repeat {
            width: 400px;
            height: 100px;
            background-color: greenyellow;
            background-image: url(./images/logo.png);
            background-repeat: no-repeat;
        }
        .repeat-x {
            width: 400px;
            height: 100px;
            background-color: rgb(168, 111, 111);
            background-image: url(./images/logo.png);
            background-repeat: repeat-x;
        }
        .repeat-y {
            width: 400px;
            height: 100px;
            background-color: rgb(0, 132, 255);
            background-image: url(./images/logo.png);
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="no-repeat"></div>
    <div class="repeat-x"></div>
    <div class="repeat-y"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

4.4 背景位置-方位名词

哪一个属性可以改变图片在背景中的位置？

• background-position (背景位置)

使用方位名词指定背景图片有顺序要求吗？

• 没有
• 因为从方位名词能够分清方向

方位名词都分别对应哪些方位？

• 水平方向：left / right / center
• 垂直方向：top / bottom / center

如果指指定了一个方位名词，第二个值默认如何对齐？

• 居中对齐

如何让背景图片水平垂直居中？

• background-position: center;

4.5 背景位置案例

<!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>13. 背景位置案例</title>
    <style>
        h3 {
            width: 200px;
            height: 50px;
            background-color: rgb(180, 155, 155);
            background-image: url(./images/icon.png);
            background-repeat: no-repeat;
            background-position: left;
            text-indent: 2em;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <h3>背景位置案例</h3>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4.6 王者荣耀背景图片

<!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>13. 王者荣耀背景图片</title>
    <style>
        body {
            background-image: url(./images/bg.jpg);
            background-repeat: no-repeat;
            background-position: top;
        }
    </style>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4.7 背景位置-精确单位

使用精确坐标指定背景图片有顺序要求吗？

• 有
• 第一个值一定是 x / 第二个值一定是 y

    <style>
        .box {
            width: 100%;
            height: 200px;
            background-image: url(./images/logo.png);
            background-repeat: no-repeat;
            background-position: 500px 300px;
        }
    </style>
1
2
3
4
5
6
7
8
9

如果只指定了一个值，是哪个方向的值？另一个方向呢？

• x 方向的
• 垂直方向居中显示

4.8 背景位置-混合单位

指定背景图片可以混合使用单位吗？顺序有没有要求？

• 可以
• 第一个值一定是 x / 第二个值一定是 y

    <style>
        .box {
            width: 100%;
            height: 200px;
            background-image: url(./images/logo.png);
            background-repeat: no-repeat;
            background-position: 500px center;
        }
    </style>
1
2
3
4
5
6
7
8
9

4.9 背景固定

背景固定的应用场景是什么？

• 可以制作视差滚动效果

background-attachment 有哪两个参数？分别代表什么含义？

• scroll 默认，背景图像跟随滚动
• fixed 背景图像固定

body {
            background-image: url(./images/bg.jpg);
            background-repeat: no-repeat;
            background-position: top;
            background-attachment: fixed;
            color: greenyellow;
            font-size: 20px;
        }
1
2
3
4
5
6
7
8

4.10 背景属性复合写法

我们已经学过了哪个属性的复合写法？

• font: font-style font-weight font-size/line-height font-family

背景属性的复合写法有顺序要求吗？

• 没有
• 但是推荐顺序是：background: color image repeat attachment position

背景属性的复合写法在开发中用的多吗？每次都要写全吗？

• 多
• 不需要每次都要写全，需要啥就写啥

4.11 背景颜色半透明

使用 background-color 能够设置背景颜色半透明吗？为什么？

• 可以 background: rgba(0, 0, 0, 0.3); 本质上就是在设置背景颜色。

rgba 中的 alpha 取值范围是多少？

• 取值范围：0 ~ 1
• 0 完全透明 / 1 完全不透明

    <style>
    body {
        background-color: rgba(165, 165, 165, 0.5);
    }
    </style>
1
2
3
4
5

4.12 背景总结

复合写法推荐顺序：background: color image repeat attachment position。