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

文章目录:

  • [1. CSS三大特性](#1. CSS三大特性)

    • 1.1继承性
    • [1.2 层叠性](#1.2 层叠性)
    • [1.3 优先级](#1.3 优先级)
      • [1.3.1 优先级](#1.3.1 优先级)
      • [1.3.2 优先级-叠加计算规则](#1.3.2 优先级-叠加计算规则)
  • [2. 背景图](#2. 背景图)

    • [2.1 背景属性](#2.1 背景属性)
    • [2.2 背景图](#2.2 背景图)
    • [2.3 背景图的平铺方式](#2.3 背景图的平铺方式)
    • [2.4 背景图位置](#2.4 背景图位置)
    • [2.5 背景图缩放](#2.5 背景图缩放)
    • [2.6 背景图固定](#2.6 背景图固定)
    • [2.7 背景复合属性](#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提权功能,提高权重/优先级到最高

html 复制代码
<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的例子?

html 复制代码
  <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,正负都可以

一个具体的实例?

html 复制代码
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

html 复制代码
body {
background-image: url(./images/bg.jpg);
background-repeat: no-repeat;

background-attachment: fixed;
}

2.7 背景复合属性

属性名: background ( bg)

属性值:背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定

(空格隔开各个属性值,不区分顺序)

html 复制代码
div {
width: 400px;
height: 400px;
background: pink url(./images/1.png)no-repeat right center/cover;
}
相关推荐
王解5 分钟前
速度革命:esbuild如何改变前端构建游戏 (1)
前端·vite·esbuild
葡萄城技术团队13 分钟前
使用 前端技术 创建 QR 码生成器 API1
前端
DN金猿15 分钟前
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)(很详细)
前端·vue.js·pdf
鸽鸽程序猿23 分钟前
【前端】javaScript
开发语言·前端·javascript
秦时明月之君临天下31 分钟前
React和Next.js的相关内容
前端·javascript·react.js
上官花雨1 小时前
什么是axios?怎么使用axios封装Ajax?
前端·ajax·okhttp
米奇妙妙wuu1 小时前
React中 setState 是同步的还是异步的?调和阶段 setState 干了什么?
前端·javascript·react.js
李刚大人1 小时前
react-amap海量点优化
前端·react.js·前端框架
闹闹没有闹1 小时前
socket连接封装
前端
qq_364371722 小时前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存