CSS特性:简化代码/定位问题,并解决问题
1.继承性
定义:子级标签默认继承父级标签的文字控制属性。
将属性放在body标签当中,那么全文都将继承该属性,就不需要重复定义CSS属性。但自己定义了CSS属性,则自己的属性会覆盖原样式。
<style>
body{
font-size: 30px;
font-weight: 600;
color: red;
}
</style>
<body>
<div>divspan标签</div>
<p>p标签</p>
<span>span标签</span>
</body>
效果如下:
2.层叠性
特点:
- 相同的属性会覆盖:后面的CSS属性覆盖前面的CSS属性
- 不同的属性会叠加:不同的CSS属性都会生效
<style>
div{
color:red;
font-size: 20px;
}
div{
color:green;
font-weight: 700;
}
</style>
<body>
<div>div标签</div>
</body>
效果如下:
生效了下面div属性的color,两个div标签不同的加粗,字体均生效。
3.优先性
也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。
使用标签选择器以及类选择器两个选择器均添加颜色属性如下:
<style>
div {
color: red;
}
.box {
color: green;
}
</style>
<body>
<div class="box">div标签</div>
</body>
效果如下:
规则:选择器优先级高的样式生效
优先性规则:选中标签的范围越大,优先级越低,可以理解为,范围大的先生效,后面范围小的生效覆盖之前的样式。
例如:通配符是整个文件的,范围最大,故越容易被覆盖,优先级越小。
公式:通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内选择器 < !important
!important使用规则是放在某个属性之后,例如:
div {
color: red !important;
}
这样这一个属性的优先级变为最高,但不建议使用,因为无法保证在任何时候都是这样的
4.优先级-叠加计算规则
叠加计算:如果是复合选择器,则需要权重叠加计算。
公式:(每一位之间不存在进位)
(行内样式,id选择器格式,类选择器格式,标签选择器个数)
规则:
- 从左向右依次比较选择器个数,同一级个数多的优先级高,如果个数相同,则向后比较、
- !important权重最高
- 继承权重最低
5.背景属性
5.1背景图
网页中,使用背景图实现装饰性的图片效果
属性名:background-image
属性值:url(背景图URL)
但是图片默认是平铺的,如果宽高大或者小了,是多张图片或者残缺的效果
div {
width: 200px;
height: 100px;
background-image: url(../第1个案例/图片/img.jpg);
}
<div>div标签</div>
5.2背景图片的平铺方式
属性名:background-repeat(bgr)
属性值:
属性值 | 效果 |
no-repeat | 不平铺 |
repeat | 平铺(默认效果) |
repeat-x | 水平方向平铺 |
repeat-y | 垂直方向平铺 |
5.3背景图位置属性
属性名:background-position
属性值:水平方向位置以及垂直方向位置
- 关键字
关键字 | 位置 |
left | 左侧 |
right | 右侧 |
center | 居中 |
top | 顶部 |
buttom | 底部 |
- 坐标:数字+px,正负皆可
div {
width: 200px;
height: 200px;
background-color: pink;
background-image: url(../第1个案例/图片/bird.png);
background-repeat: no-repeat;
background-position: center center;
}
5.4背景图缩放
作用:设置背景图的大小
属性名:background-size
常用属性值
- 关键字
- cover:等比例缩放背景图以完全覆盖背景取,可能背景图片部分看不清
改关键字是一直放大到完全覆盖背景,若宽高比例不一致就会造成,某一方向上扩大到背景外
- contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白
保证图片是在背景里面能显示的最大图片
- 百分比:根据盒子尺寸计算图片大小
将宽度缩放至背景宽度,高等比例缩放
- 数字加单位(例如:px)
5.5背景属性
作用:背景不会随着元素的内容滚动
属性名:background-attachment
属性值:fixed
当内容过多时会有滚动条,该属性可不随滚动条滚动而滚动
body {
background-image: url(../第1个案例/图片/bird.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
5.6背景复合属性
属性名:background
属性值:背景色 背景图 背景平铺方式 背景图位置/背景图缩放 背景图固定(用空格隔开属性值,不区分顺序)
如:
div {
width: 400px;
height: 400px;
background: pink url(./1.png) no-repeat right center/cover fixed;
背景色 背景图 平铺方式 位置 / 缩放 固定
}