【前端web入门第四天】02 CSS三大特性+背景图

文章目录:

1. CSS三大特性
- 1.1继承性
- 1.2 层叠性
- 1.3 优先级
  - 1.3.1 优先级
  - 1.3.2 优先级-叠加计算规则
2. 背景图
- 2.1 背景属性
- 2.2 背景图
- 2.3 背景图的平铺方式
- 2.4 背景图位置
- 2.5 背景图缩放
- 2.6 背景图固定
- 2.7 背景复合属性

1. CSS三大特性

1.1继承性

什么是继承性?
子级默认继承父级的文字控制属性。

什么叫父类
比如说body就是所有标签的父类
div标签里,有一个p标签,那么div标签就是p标签的父类

注意:

如果标签自己有样式则生效自己的样式,不继承

1.2 层叠性

特点:

相同的属性会覆盖:后面的CSS属性覆盖前面的CSS属性。
不同的属性会叠加:不同的CSS属性都生效

1.3 优先级

1.3.1 优先级

什么叫优先级?
优先级:也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

优先级的规则?
选择器优先级高的样式生效

优先级的公式
公式:通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
(选中标签的范围越大，优先级越低)

!important什么功能?
!important提权功能，提高权重/优先级到最高

<style>
div {
color: red;
}
.box {
color: green;
}
</style><div class="box">div标签</div>

1.3.2 优先级-叠加计算规则

叠加计算应用在什么情况
有复合选择器的情况,需要权重叠加计算.

叠加计算公式是什么?规则是什么?
公式:(每一级之间不存在进位)
(行内样式, id选择器个数,类选择器个数，标签选择器个数)

规则是什么?
从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
!important权重最高
继承权重最低(继承先排除)

注意:

先判断最后一条,再判断倒数第二条

2. 背景图

2.1 背景属性

背景属性有以下这些:
在这里插入图片描述

2.2 背景图

网页中，使用背景图实现装饰性的图片效果。
属性名: background-image ( bgi)
属性值:url(背景图URL)

一个使用background-image的例子?

  <style>div{width:400px;height:400px;background-image: url(./images/1.png);}
</style><body>
<div>这是一段文字</div>
</body>

效果图:
在这里插入图片描述

注意:

背景图默认是平铺(复制）的效果,不平铺就显示一张
水平方向平铺就是,横向2张,垂直平铺同理

2.3 背景图的平铺方式

属性名:background-repeat (bgr)
属性值:

属性值	效果
no-repeat	不平铺
repeat	平铺(默认效果)
repeat-x	水平方向平铺
repeat-y	竖直方向平铺

2.4 背景图位置

属性名: background-position ( bgp)
属性值:水平方向位置垂直方向位置

两种写法是什么?
关键字和坐标

关键字

关键字	位置
left	左侧
right	右侧
center	居中
top	顶部
bottom	底部

坐标 (数字 +px,正负都可以

一个具体的实例?

div {
width: 408px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;background-position: center bottom;
background-position: 50px -100px;
background-position: 50px center;
}

注意:

关键字取值方式写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认为居中;数字只写一个值表示水平方向，垂直方向为居中

2.5 背景图缩放

作用∶设置背景图大小
属性名: background-size ( bgz)
常用属性值:

关键字
cover:等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
contain:等比例缩放背景图片以完全装入背景区，可能背景区部分空白·
百分比:根据盒子尺寸计算图片大小
数字＋单位（例如:px)

2.6 背景图固定

作用:背景不会随着元素的内容滚动
属性名: background-attachment ( bga)
属性值: fixed

body {
background-image: url(./images/bg.jpg);
background-repeat: no-repeat;background-attachment: fixed;
}

2.7 背景复合属性

属性名: background ( bg)
属性值:背景色背景图背景图平铺方式背景图位置/背景图缩放背景图固定
(空格隔开各个属性值，不区分顺序)

div {
width: 400px;
height: 400px;
background: pink url(./images/1.png)no-repeat right center/cover;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/252225.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！