持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

导读

上一期我们学习了CSS基础，那么及接下来，我将给大家带来CSS进阶知识，话不多说，我们这就开始~

0. Emmet语法

快速写代码工具，实际开发用处较大，初学不用太在意，有基础了在用 编译器中通过简写语法，快速生成代码

如:当你输入div后按下Tab，编译器就会输出 <div></div> 在这里插入图片描述

1. 选择器进阶

1.1 复合选择器

后代选择器 选择器之间用空格隔开

作用： 由嵌套关系，在根据选择器1所找到的标签的后代中，找到满足选择器2的标签，设置样式

==注意点：== 后代是在选择器1对应标签内的所有标签，无论是孙子还是重孙

p .color{
	color:red;
}

子代选择器选择器之间用>隔开

作用： 由嵌套关系，在根据选择器1找到的==子代==中，找到满足选择器2的标签，设置样式 ==注意点：== 子代只包括儿子！！！

p>.color{
	color:red;
}

1.2 并集选择器

选择器之间用,隔开

作用： 找到选择器1选中的标签和选择器2选中的标签，均设置样式 ==注意点：==

并集选择器中的选择器可以是基础选择器，也可以是复合选择器
代码规范——并集选择器中的每组选择器通常一行写一个，提高代码的可读性

div,
p .color
p{
 	font-size : 16px;
}

1.3 交集选择器

选择器与选择器之间紧挨着

作用： 选中页面中==同时满足==所有选择器的标签，设置样式

选择器语法：

p.box{
	font-style:italic;
}

==注意点：== 交集选择器中如果有标签选择器，标签选择器必须写在最前面

1.4 hover伪类选择器

作用： 当鼠标放在元素上时，显示hover伪类设置的样式

语法： 选择器:hover{css}

p:hover{
	color:red;
	background-color:#f5f5f5;
}

2. 背景相关属性

2.1 背景颜色

属性名： background-color(可以用emmet语法，输入bgc+Tab)

属性值： 颜色取值：关键字、rgb表示法、rgba表示法、十六进制...

关键字就是：red\blue这些
rgb是通过三个数字表示一个颜色rgb(0,0,0)
rgba除了上面三个数字外，还有第四个数字表示透明程度，取值在0到1之间rgba(0,0,0,0)
十六进制一般就为#开头加十六进制的数字#f5f5f5 ==这些ui设计师会给我们提供好，不需做过多了解如何配色，开发中十六进制和rgba用得比较多==

==注意点：== 一般在布局中会习惯先给盒子设置背景颜色，便于操作调试

2.2 背景图片

属性名： background-image(可以用emmet语法，输入bgi+Tab)

语法：

background-image: url("图片路径")

==注意点：==

url的引号可以省略
背景图片是默认在水平和垂直方向平铺，直到盒子能接纳的最大尺寸，==盒子是不会被背景图片撑大的==

2.3 背景平铺属性

属性名： background-repeat(可以用emmet语法，输入bgr+Tab)

属性值：

取值	效果
repeat	（默认值）水平垂直方向都平铺
no-repeat	不平铺
repeat-x	水平平铺
repeat-y	垂直平铺

默认值效果：在这里插入图片描述

2.4 背景位置

属性名： background-position(可以用emmet语法，输入bgp+Tab)

属性值： 语法格式—— background-positon: 水平方向位置垂直方向位置 (最后两项值用空格隔开)

属性值写法(两种)：

方位名词

.	左/上	中	右/下
水平方向	left	center	right
垂直方向	top	center	bottom

==一共可以表示九个位置==

background-position:center center;

在这里插入图片描述 2. 数字+px（坐标格式） 原点0.0在左上角，x轴方向水平向右，y轴方向是竖直向下！

想要把图片放到哪，就把对应想要的位置的左上角坐标填上去就行

==注意点：== 上述两种取值可以混用，注意不可颠倒

2.5 背景相关属性连写

与上期所提的font属性一样，背景属性background

==各属性值之间用空格隔开==

书写顺序： （推荐，各属性值的顺序是可以调换的） background: color image repeat position

background: red url("图片路径") no-repeat 0 0;

省略： 与font只能省略前俩个style和weight不同，background可以按照需求省略,如只有颜色需求：

     background: blue;

特殊情况：在PC端，若盒子大小与背景图片大小一样，此时可以直接写background：url();

==注意点：== 在background连写中，属性名position的水平值和垂直值，只有均用方位名词时，可以调换位置但建议，直接用默认值进行开发，以免引起不必要的麻烦

小tip: 当用div标签 + 背景图片时，需要设置div的宽高，因为背景图片是不可以撑开div的

【前端三剑客——css】选择器加背景

导读