【前端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>

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>

效果图:
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;
}

注意:

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

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


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;
}
相关文章
|
5天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
8天前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
12 1
前端基础(十七)_HTML5新特性
|
5天前
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
8天前
|
前端开发 开发者 Python
从零到一:Python Web框架中的模板引擎入门与进阶
在Web开发的广阔世界里,模板引擎是连接后端逻辑与前端展示的重要桥梁。对于Python Web开发者而言,掌握模板引擎的使用是从零到一构建动态网站或应用不可或缺的一步。本文将带你从基础入门到进阶应用,深入了解Python Web框架中的模板引擎。
14 3
|
6天前
|
JSON 前端开发 JavaScript
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
该文章提供了Webpack的基础入门指南,涵盖安装配置、基本使用、加载器(Loaders)、插件(Plugins)的应用,以及如何通过Webpack优化前端项目的打包构建流程。
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
|
7天前
|
存储 前端开发 JavaScript
浅谈Web前端安全策略xss和csrf,及又该如何预防?
该文章详细讨论了Web前端安全中的XSS(跨站脚本攻击)和CSRF(跨站请求伪造)攻击原理及其防范措施,帮助读者了解如何保护Web应用程序免受这两种常见安全威胁的影响。
浅谈Web前端安全策略xss和csrf,及又该如何预防?
|
7天前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
15天前
|
编解码 前端开发 JavaScript
web端 本地调用摄像头、前端摄像头
web端 本地调用摄像头、前端摄像头
|
21天前
|
前端开发
|
21天前
|
SQL 安全 数据库
从入门到精通:Python Web安全守护指南,SQL注入、XSS、CSRF全防御!
【9月更文挑战第13天】在开发Python Web应用时,安全性至关重要。本文通过问答形式,详细介绍如何防范SQL注入、XSS及CSRF等常见威胁。通过使用参数化查询、HTML转义和CSRF令牌等技术,确保应用安全。附带示例代码,帮助读者从入门到精通Python Web安全。
46 6
下一篇
无影云桌面