一、选择器进阶
1. 复合选择器
后代选择器:空格
-
作用:根据html标签的嵌套关系,选择父元素后代中满足条件的元素
-
选择器语法:选择器1 选择器2 { css }
-
结果:在选择器1所找到标签的后代中,找到满足选择器2的标签,设置样式
-
注意点:后代包括:儿子、孙子、重孙子…;后代选择器中,选择器与选择器之间通过空格隔开
子代选择器:>
-
作用:根据html标签的嵌套关系,选择父元素子代中满足条件的元素
-
选择器语法:选择器1 > 选择器2{ css }
-
结果:在选择器1所找到标签子代中,找到满足选择器2的标签,设置样式
-
注意点:子代只包括:儿子;子代选择器中,选择器与选择器之间通过 > 隔开
2. 并集选择器
-
作用:同时选择多组标签,设置相同的样式
-
选择器语法:选择器1,选择器2{ css }
-
结果:找到选择器1和选择器2选中的标签,设置样式
-
注意点:并集选择器中的每组选择器之间通过,分隔;并集选择器中的每组选择器可以是基础选择器或者复合选择器;并集选择器中的每组选择器通常一行写一个,提高代码的可读性。
3. 交集选择器
-
作用:选中页面中同时满足多个选择器的标签
-
选择器语法:选择器1选择器2{ css }
-
结果:找到页面中既能被选择器1选中,又能被选择器2选中的标签,设置样式
-
注意点:交集选择器中的选择器之间是紧挨着的,没有东西分隔;交集选择器中如果有标签选择器,标签选择器必须写在最前面
4. hover伪类选择器
-
作用:选中鼠标悬停在元素上的状态,设置样式
-
选择器语法:选择器:hover{ css }
-
注意点:伪类选择器选中的元素的某种状态
5. Emmet语法
- 作用:通过简写语法,快速生成代码
二、背景相关属性
1. 背景颜色
-
属性名:
background-color
(bgc) -
属性值:颜色取值:关键字、rgb表示法、rgba表示法、十六进制…
-
注意点:背景颜色默认值是透明,
rgba(0,0,0,0),transparent;
背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色。
2. 背景图片
-
属性名:
background-image
(bgi) -
属性值:
background-image:url(‘图片的路径’);
-
注意点:背景图片中url中可以省略引号;默认是在水平和垂直方向平铺的;背景图片仅仅是指给盒子起到装饰效果,类似于背景颜色
3. 背景平铺
-
属性名:
background-repeat
(bgr) -
属性值
-
repeat
:(默认值)水平和垂直方向都平铺 -
no-repeat
:不平铺 -
repeat-x
:沿水平方向平铺 -
repeat-y
:沿垂直方向平铺
-
4. 背景位置
-
属性名:
background-position
(bgp) -
属性值:
background-position
:水平方向位置,垂直方向位置; -
注意点:方位名词取值和坐标取值可以混使用,第一个取值表示水平,第二个表示垂直。
5. 背景相关属性连写
-
属性名:
background
(bg) -
属性值:单个属性的合写,取值之间以空格隔开
-
书写顺序:推荐:
background:color image repeat position
-
省略问题:可以按照需求省略;特殊情况:在pc端,如果盒子大小和背景图片大小一样,此时可以直接写
background:url()
-
注意点:如果需要设置单独的样式和连写,要么把单独的样式写在连写的下面,要么把单独的样式写在连写的里面。
6. img标签和背景图片的区别
-
需求:需要在网页中展示一张图片的效果
-
方法一;直接写上img标签即可
- img标签是一个标签,不设置宽高默认会以原尺寸显示
-
方法二:div标签+背景图片
- 需要设置div的宽高,因为背景图片只是装饰的CSS样式,不能撑开div标签
-
三、元素显示模式
1. 块级元素
1) 显示模式
-
独占一行(一行只能显示一个)
-
宽度默认是父元素的宽度,高度默认由内容展开
-
可以设置宽度
2) 代表标签
div
、p
、h系列、ul
、dl
、dt
、dd
、from
、header
、nav
、footer
…
2. 行内元素
1) 显示特点
-
一行可以显示多个
-
高度和宽度默认由内容撑开
-
不可以设置宽高
2) 代表标签
a
、span
、b
、u
、i
、s
、strong
、ins
、em
、del
…
3. 行内块元素
1) 显示特点
-
一行可以显示多个
-
可以设置宽高
2) 代表标签
-
input
、textarea
、button
、select
… -
特殊情况:img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline
4. 元素显示模式转换
-
改变元素默认的显示特点,让元素符合布局要求
-
display:block
转换成块级元素 -
display:inline-block
转换成行内块元素 -
display:inline
转换成行内元素
四、CSS特性
1. 继承性
-
特性:子元素有默认继承父元素样式的特点
-
可以继承的常见属性(文字控制属性都可以继承)
-
color
-
font-size
、font-style
、font-weight
、font-family
-
text-indent
、text-align
-
line-height
-
-
注意点:可以通过调试工具判断样式是否可以继承
2. 层叠性
-
给同一个标签设置不同的样式->此时样式会层叠叠加->会共同作用在标签上
-
给同一个标签设置相同的样式->此时样式会层叠覆盖->最终写在最后的样式会生效
-
注意点:当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果
五、综合案例
2022/8/11 Caroline finish