复合选择器
定义:由 两个或多个基础选择器 ,通过不同的方式组合而成。 作用: 更准确、更高效 的选择目标元素(标签)。后代选择器
后代选择器:选中某元素的后代元素。
选择器写法:父选择器 子选择器{CSS属性},父子选择器之间用空格隔开。
<style>
div p{
font-size: 50px;
}
</style>
<div>
<p>我是P</p>
</div>
子代选择器
子代选择器:选择某个元素的子元素(最近的子元素)。
选择器写法:父选择器>子选择器{CSS属性},父子选择器用 > 隔开。
<style>
div>p{
color: red;
font-size: 50px;
}
</style>
<div>
<p>我是P</p>
</div>
并集选择器
并集选择器:选中多组标签设置相同样式。
选择器写法:选择器1,选择器2,选择器3{CSS属性},选择器之间用,隔开。
<style>
p,h1{
color: red;
font-size: 50px;
}
</style>
<div>
<h1>我是h1</h1>
<p>我是P</p>
</div>
交集选择器
交集选择器:选中同时满足多个条件的元素。
选择器写法: 选择器1选择器2{CSS属性},选择器之间连写,没有任何符号。
<style>
p.box {
color: blue;
font-size: 50px;
}
</style>
<div>
<p class="box">我是P</p>
</div>
伪类选择器
伪类选择器:伪类表示元素状态,选中元素时的某个状态设置样式
鼠标悬停状态:选择器:hover{CSS属性}。
<style>
a:hover {
color: red;
}
.box:hover {
color: green;
}
</style>
<a href="#">a 标签</a>
<div class="box">div 标签</div>
超链接一共有四个状态
注:如果要同时设置多个状态需要按上面表格的顺序来写。
CSS特性
继承性
继承性:子级默认继承父级的文字控制属性。
注意:如果标签有默认文字样式会继承失败。 例如:a 标签的颜色、标题的字体大小。层叠性
特点:
- 相同的属性会覆盖:后面的CSS属性会覆盖前面的CSS属性。
- 不同的属性会叠加:不同的CSS属性都生效。
<style>
div {
color: red;
font-weight: 700;
}
div {
color: green;
font-size: 30px;
}
</style>
<div>div 标签</div>
注意:
选择器类型相同则遵循层叠性
,否则按选择器
优先级
判断。
优先级
优先级:也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。
<style>
div {
color: red;
}
.box {
color: green;
}
</style>
<div class="box">div 标签</div>
规则:选择器优先级高的先生效。
公式:通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important ( 选中标签的范围越大,优先级越低 ) 优先级叠加规则:叠加计算:如果是复合选择器,则需要权重叠加计算。
公式:(每一级之间 不存在进位 ) 规则:- 从左向右依次比较选个数,同一级个数多的优先级高,如果个数相同,则向后比较。
- !important 权重最高。
- 继承权重最低。
Emmet写法
Emmet写法:代码的简写方式,输入缩写 VS Code 会自动生成对应的代码。
- HTML
- CSS
背景属性
背景图
网页中,使用背景图实现装饰性的图片效果。
属性名:background-image
属性值:url(背景图URL)
div {
width: 400px;
height: 400px;
background-image: url(./images/1.png);
}
提示:背景图默认有平铺(复制)效果。
背景图平铺方式
属性名:background-repeat
属性值:
div {
width: 400px;
height: 400px;
background-image: url(./images/1.png);
background-repeat: no-repeat;
}
背景图位置
属性名:background-position
属性值:水平方向位置 垂直方向位置
- 关键字
- 坐标(数字+px,正负都可以)
水平:正数向右,负数向左。
垂直:正数向下,负数向上。
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-position: 20px 50px;
}
提示:
- 关键字取值方式写法,可以颠倒取值顺序
- 可以只写一个关键字,另一个方向默认为居中;数字只写一个值表示水平方向,垂直方向为居中。
背景图缩放
作用:设置背景图大小
属性名:background-size
常用属性值:- 关键字
cover:等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。
contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白。
- 百分比:根据盒子尺寸计算图片大小
- 数字 + 单位(例如:px)
提示:工作中,图片比例与盒子比例相同,使用 cover 或 contain 缩放背景图效果相同。
背景图固定
作用:背景图片不会随着元素的内容滚动。
属性名:background-attachment
属性值:fixed
背景复合属性
属性名:background
属性值:背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性值,不区分顺序)。
div {
width: 400px;
height: 400px;
background: pink url(./images/1.png) no-repeat right center/cover;
}
显示模式
显示模式:标签(元素)的显示方式。
作用:布局网页的时候,根据标签的显示模式选择合适的标签摆放内容。
块级元素:
- 独占一行。
- 宽度默认是父级的100%。
- 添加宽高属性生效。
行内元素:
- 一行可以显示多个。
- 设置宽高不生效。
- 宽高尺寸由内容撑开。
行内块元素:
- 一行可以显示多个。
- 设置宽高生效。
- 宽高尺寸可以由内容撑开。
转换显示模式
属性名:display
属性值: