前端HTML5 +CSS3 4.CSS基础 4 选择器进阶 5 背景相关属性

前端HTML5 +CSS3

老师：黑马程序员

三. CSS基础

4 选择器进阶

4.1 复合选择器

4.1.1 后代选择器：空格

作用:根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素

选择器语法:

选择器1 选择器2{ css }

结果:
在选择器1所找到标签的后代(儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式

注意点:

• 1.后代包括:儿子、孙子、重孙子.……
• 2.后代选择器中，选择器与选择器之前通过空格隔开

4.1.2 子代选择器 >

作用:根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素

选择器语法:

选择器1>选择器2{ css }

结果:

在选择器1所找到标签的子代(儿子)中，找到满足选择器2的标签，设置样式

注意点:

• 1.子代只包括:儿子
• 2.子代选择器中，选择器与选择器之前通过>隔开

4.2 并集选择器

4.2.1 并集选择器 ,

作用:同时选择多组标签，设置相同的样式

选择器语法:

选择器1 ，选择器2{ css }

结果:

找到选择器1和选择器2选中的标签，设置样式

注意点:

• 1.并集选择器中的每组选择器之间通过，分隔
• 2.并集选择器中的每组选择器可以是基础选择器或者复合选择器3．并集选择器中的每组选择器通常一行写一个，提高代码的可读性

4.3 交集选择器

4.3.1 交集选择器 “紧挨着”

作用:选中页面中同时满足多个选择器的标签

选择器语法:

选择器1选择器2{ css }

结果:
(既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

注意点:

• 1．交集选择器中的选择器之间是紧挨着的，没有东西分隔
• 2．交集选择器中如果有标签选择器，标签选择器必须写在最前面

4.4 hover伪类选择器

4.1.1 hover伪类选择器

作用:选中鼠标悬停在元素上的状态，设置样式

选择器语法:

选择器:hover { css }

注意点:

• 1.伪类选择器选中的元素的某种状态

4.5 Emmet语法

4.5.1 emmet语法

作用:通过简写语法，快速生成代码

5 背景相关属性

5.1 背景颜色

5.1.1 背景颜色

属性名: background-color (bgc)

属性值:

• 颜色取值:关键字、rgb表示法、rgba表示法、十六进制…

注意点:

• 背景颜色默认值是透明: rgba(0,0,0,0)、transparent

• 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

5.2 背景图片

5.2.1 背景图片

属性名: background-image (bgi)

属性值:background-image: url(‘图片的路径’);

注意点:

• 背景图片中url中可以省略引号
• 背景图片默认是在水平和垂直方向平铺的
• 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

5.3 背景平铺

5.3.1 背景平铺

属性名: background-repeat (bgr)

属性值:

5.4 背景位置

5.4.1 背景位置

属性名: background-position (bgp)

属性值: background-position:水平方向位置 垂直方向位置;

注意点：

方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

5.5 背景相关属性连写

5.5.1 背景相关属性的连写形式

属性名: background (bg)

属性值:
单个属性值的合写，取值之间以空格隔开

书写顺序:

推荐: background: color image repeat position

省略问题:

• 可以按照需求省略
• 特殊情况:在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background: url()

注意点：

• 如果需要设置单独的样式和连写
• 要么把单独的样式写在连写的下面
• 要么把单独的样式写在连写的里面

拓展 img标签和背景图片的区别

img标签是一个标签，不设置宽高默认会以原尺寸显示

因为背景图片只是装饰的CSS样式，不能撑开div标签

注意点：

• 如果需要设置单独的样式和连写
• 要么把单独的样式写在连写的下面
• 要么把单独的样式写在连写的里面

拓展 img标签和背景图片的区别

img标签是一个标签，不设置宽高默认会以原尺寸显示

因为背景图片只是装饰的CSS样式，不能撑开div标签