前端HTML5 +CSS3 4.CSS基础 4 选择器进阶 5 背景相关属性
前端HTML5 +CSS3
老师:黑马程序员
文章目录
- 前端HTML5 +CSS3
- 老师:黑马程序员
- 三. CSS基础
- 4 选择器进阶
- 4.1 复合选择器
- 4.1.1 后代选择器:空格
- 4.1.2 子代选择器 >
- 4.2 并集选择器
- 4.2.1 并集选择器 ,
- 4.3 交集选择器
- 4.3.1 交集选择器 “紧挨着”
- 4.4 hover伪类选择器
- 4.1.1 hover伪类选择器
- 4.5 Emmet语法
- 4.5.1 emmet语法
- 5 背景相关属性
- 5.1 背景颜色
- 5.1.1 背景颜色
- 5.2 背景图片
- 5.2.1 背景图片
- 5.3 背景平铺
- 5.3.1 背景平铺
- 5.4 背景位置
- 5.4.1 背景位置
- 5.5 背景相关属性连写
- 5.5.1 背景相关属性的连写形式
- 拓展 img标签和背景图片的区别
- 拓展 img标签和背景图片的区别
三. 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标签