avatar

CSS02

本质介绍EMMET语法、复合选择器、css显示模式display、css背景

思维导图

emmet语法

简介

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。
快速生成HTML结构语法
快速生成CSS样式语法

快速生成HTML结构语法

生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成 <div></div>
如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
如果有父子级关系的标签,可以用 > 比如 ul > li就可以了
如果有兄弟关系的标签,用 + 就可以了 比如 div+p
如果生成带有类名或者id名字的, 直接写 .demo 或者 #two tab 键就可以了
如果生成的div 类名是有顺序的, 可以用 自增符号 $
如果想要在生成的标签内部写内容可以用 { } 表示

快速生成CSS样式语法

CSS 基本采取简写形式即可
比如 w200 按tab 可以 生成 width: 200px;
比如 lh26px 按tab 可以生成 line-height: 26px;

css的复合选择器

什么是复合选择器

在 CSS 中,可以根据选择器的类型把选择器分为基础选择器复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,可以更准确、更高效的选择目标元素(标签)
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器 (重要)

功能

选择父元素下的所有子元素,包括儿子辈的、孙子辈的、曾孙子辈的…..

语法

选择器和选择器之间使用空格

1
2
3
4
选择器1 选择器2 {
样式名: 样式值;
样式名: 样式值;
}

案例

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
<!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>Document</title>

<!-- 需求1:使用后代选择器,将class=xx的标签下的li标签设置字体颜色为红色 -->
<style>
.xx li {
color: red;
}
</style>
<!-- 需求2:使用后代选择器,将class=xx的标签下的class=list下的li标签设置背景色为绿色 -->
<style>
.xx .list li {
background-color: green;
}
</style>
</head>
<body>
<div class="xx">
<h3>基础选择器</h3>
<div>
<ul>
<li>标签选择器</li>
<li>类选择器</li>
<li>id 选择器</li>
<li>通配符选择器</li>
</ul>
</div>
<h3>复合选择器</h3>
<div class="list">
<ul>
<li>后代选择器</li>
<li>子代选择器</li>
<li>并集选择器</li>
<li>交集选择器</li>
</ul>
</div>
</div>
</body>
</html>

子选择器 (重要)

功能

选择父元素下的直接子元素(最近一级的元素)

语法

1
2
3
4
选择器1 > 选择器2 {
样式名: 样式值;
样式名: 样式值;
}

案例

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
<!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>Document</title>

<!-- 需求:使用子选择器将class=xx的标签下的li标签设置字体颜色为红色 -->
<style>
.xx>div>ul>li {
color: red;
}
</style>

</head>
<body>
<div class="xx">
<h3>基础选择器</h3>
<div>
<ul>
<li>标签选择器</li>
<li>类选择器</li>
<li>id 选择器</li>
<li>通配符选择器</li>
</ul>
</div>
<h3>复合选择器</h3>
<div class="list">
<ul>
<li>后代选择器</li>
<li>子代选择器</li>
<li>并集选择器</li>
<li>交集选择器</li>
</ul>
</div>
</div>
</body>
</html>

子孙元素和子元素综合案例

并集选择器 (重要)

功能

并集选择器可以选择多组标签, 同时为他们定义相同的样式,通常用于集体声明。通过,号分隔多个选择器

语法

1
2
3
4
选择器1,选择器2,选择器3 {
样式名: 样式值;
样式名: 样式值;
}

案例

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
45
46
47
48
49
50
51
52
53
54
55
<!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>Document</title>

<!-- 需求
给.xx下.list1下的所有li标签设置字体为红色
给.xx下.list2下的所有li标签设置字体为红色 -->

<style>
/*
.xx .list1 li {
color: red;
}

.xx .list2 li {
color: red;
}
*/



/* 已上两个选择器做的事情一样,只是选择器的名字不一样,那么可以使用并集选择器优化,将2个选择器合并到一块,多个选择器使用,分隔 */
.xx .list1 li,
.xx .list2 li {
color: red;
}
</style>
</head>
<body>
<div class="xx">
<h3>基础选择器</h3>
<div class="list1">
<ul>
<li>标签选择器</li>
<li>类选择器</li>
<li>id 选择器</li>
<li>通配符选择器</li>
</ul>
</div>
<h3>复合选择器</h3>
<div class="list2">
<ul>
<li>后代选择器</li>
<li>子代选择器</li>
<li>并集选择器</li>
<li>交集选择器</li>
</ul>
</div>
</div>
</body>
</html>

交集选择器

功能

根据多个条件查询标签

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>Document</title>
<style>
/* 之前通过一个条件查找元素,比如div{}根据标签名找,或者.a{}根据类名找
现在根据多个条件查找元素
查询标签名为div并且类名为a并且id为xx的标签,多个选择器中间不使用其他分隔符
*/
div.a#xx {
color: red;
}
</style>
</head>
<body>
<div class="a" id="xx"></div>
</body>
</html>

伪类选择器

定义

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。

语法

伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。

链接伪类选择器

定义

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。

语法

伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。
a:link 没有点击过的(访问过的)链接
a:visited 点击过的(访问过的)链接
a:hover 鼠标经过的那个链接
a:active 鼠标正在按下还没有弹起鼠标的那个链接

链接伪类选择器注意事项

为了确保生效,请按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。
记忆法:love hate 或者 lv 包包 hao 。
因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。

链接伪类选择器实际工作开发中的写法

1570868845786

:focus 伪类选择器

定义

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况 <input> 类表单元素才能获取

例子

1570868891669

复合选择器总结

1570868930472

css的显示模式

什么是元素的显示模式

元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>

网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。

元素显示模式的分类

块元素

常见的块元素

1
<h1>~<h6><p><div><ul><ol><li>

<div> 标签是最典型的块元素。

块级元素的特点

比较霸道,自己独占一行。
高度,宽度、外边距以及内边距都可以控制。
宽度默认是容器(父级宽度)的100%。
是一个容器及盒子,里面可以放行内或者块级元素。

注意

文字类的元素内不能放块级元素

1
2
<p> 标签主要用于存放文字,因此 <p> 里面不能放块级元素,特别是不能放<div> 
同理, <h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素

行内元素

常见的行内元素

1
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点

相邻行内元素在一行上,一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意
链接里面不能再放链接
特殊情况链接 <a> 里面可以放块级元素,但是给 <a> 转换一下块级模式最安全

行内块元素

常见的行内块标签

1
<img /><input /><td>

它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点

和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。
一行可以显示多个(行内元素特点)。
默认宽度就是它本身内容的宽度(行内元素特点)。
高度,行高、外边距以及内边距都可以控制(块级元素特点)。

元素显示模式总结

1570870718415

学习元素显示模式的主要目的就是分清它们各自的特点,当我们网页布局的时候,在合适的地方用合适的标签元素。

元素显示模式的转换

简单理解

一个模式的元素需要另外一种模式的特性
比如想要增加链接 <a> 的触发范围。

转换方式

转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块:display: inline-block;

单行文字垂直居中的代码

解决方案

让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中
1570870368253
1570870387089

简单理解:

行高的上空隙和下空隙把文字挤到中间了,
如果行高小于盒子高度,文字会偏上,
如果行高大于盒子高度,则文字偏下。

css的背景

通过 CSS 背景属性,可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

样式名称

background-color 定义元素的背景颜色

使用方式

1570886137899

其他说明

元素背景颜色默认值是 transparent(透明)
1570886176292

背景图片

样式名称

background-image 定义元素的背景图片

使用方式

1570886322557
1570886362813

其他说明

实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)
注意:背景图片后面的地址,千万不要忘记加 URL, 同时里面的路径不要加引号

背景平铺

样式名称

background-repeat 设置元素背景图像的平铺

使用方式

1570886648887
1570886688306

背景图片位置

样式名称

background-position 属性可以改变图片在背景中的位置

使用方式

1570886973530
参数代表的意思是:x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位
1570887034135

其他说明

1、参数是方位名词
如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐

2、参数是精确单位
如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中

3、参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标

背景图片固定

样式名称

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

使用方式

1570887652404
1570887699177

其他说明

background-attachment 后期可以制作视差滚动的效果。

背景样式合写

背景合写样式

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

使用方式

1570887809455

背景色半透明

CSS3 提供了背景颜色半透明的效果。

使用方式

1570887978061
最后一个参数是 alpha 透明度,取值范围在 0~1之间
我们习惯把 0.3 的 0 省略掉,写为 background: rgba(0, 0, 0, .3);

注意

背景半透明是指盒子背景半透明,盒子里面的内容不受影响
CSS3 新增属性,是 IE9+ 版本浏览器才支持的,但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

背景总结

1570888283511

文章作者: 微信:hao_yongliang
文章链接: https://haoyongliang.gitee.io/2021/05/15/%E5%89%8D%E7%AB%AF/css/day02/CSS%E7%AC%AC%E4%BA%8C%E5%A4%A9/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 郝永亮的主页
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论