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

简介: 本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。

文章目录:


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>
AI 代码解读

1.3.2 优先级-叠加计算规则

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

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

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

注意:

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

2. 背景图

2.1 背景属性

背景属性有以下这些:
image.png

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>
AI 代码解读

效果图:
image.png

注意:

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

2.3 背景图的平铺方式

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

image.png

2.4 背景图位置

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

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

  • 关键字
    image.png
  • 坐标 (数字 +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;
}
AI 代码解读

注意:

关键字取值方式写法,可以颠倒取值顺序

可以只写一个关键字,另一个方向默认为居中;数字只写一个值表示水平方向,垂直方向为居中


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;
}
AI 代码解读

2.7 背景复合属性

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

div {
width: 400px;
height: 400px;
background: pink url(./images/1.png)no-repeat right center/cover;
}
AI 代码解读
相关文章
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
2月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
62 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
87 1
【CSS】——基础入门常见操作
CSS引入,CSS对元素美化,style修饰,选择器(标签选择器,类选择器,ID选择器,复合选择器),font-size , boder ,width,height,margin,paddiing
Spring Boot 入门:简化 Java Web 开发的强大工具
Spring Boot 是一个开源的 Java 基础框架,用于创建独立、生产级别的基于Spring框架的应用程序。它旨在简化Spring应用的初始搭建以及开发过程。
127 7
Spring Boot 入门:简化 Java Web 开发的强大工具
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
48 3
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
108 4
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
825 1
前端小白也能掌握的高级技巧:如何让你的网页支持PWA特性?
【10月更文挑战第30天】随着互联网技术发展,渐进式网页应用(PWA)成为提升用户体验的重要手段。本文通过一个案例,介绍如何为在线问答社区网页应用添加PWA特性。从创建基本结构、添加Service Worker、创建Manifest文件到测试PWA特性,详细展示了每一步的操作方法。适合前端小白学习参考。
102 2
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
573 1