Web前端—CSS属性计算过程

news2024/12/26 21:56:40

属性计算过程

  • CSS 属性计算过程
    • 1. 确定声明值
    • 2. 层叠冲突
      • 比较源的重要性
      • 比较优先级
      • 比较次序
    • 3. 使用继承
    • 4. 使用默认值

CSS 属性计算过程

我们所书写的任何一个 HTML 元素,实际上都有完整的一整套 CSS 样式(该元素上面会有 CSS 所有的属性。)。

  • 任何一个 HTML 元素,都有一套完整的 CSS 样式,只不过你没有书写的样式,大概率可能会使用其默认值。
  • 总的来讲,属性值的计算过程,分为如下这么 4 个步骤:
    • 确定声明值
    • 层叠冲突
    • 使用继承
    • 使用默认值

1. 确定声明值

  • 首先第一步,是确定声明值。所谓声明值就是作者自己所书写的 CSS 样式,例如:
p{
  color : red;
}

这里我们声明了 p 元素为红色,那么就会应用此属性设置。

  • 除了作者样式表,一般浏览器还会存在“用户代理样式表”,简单来讲就是浏览器内置了一套样式表。

image-20220813143500066

2. 层叠冲突

在确定声明值时,可能出现一种情况,那就是声明的样式规则发生了冲突。

此时会进入解决层叠冲突的流程。而这一步又可以细分为下面这三个步骤:

  • 比较源的重要性
  • 比较优先级
  • 比较次序

比较源的重要性

当不同的 CSS 样式来源拥有相同的声明时,此时就会根据样式表来源的重要性来确定应用哪一条样式规则。

整体来讲有三种来源:

  • 浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称用户代理样式
  • 网页的作者可以定义文档的样式,这是最常见的样式表,称之为页面作者样式
  • 浏览器的用户,可以使用自定义样式表定制使用体验,称之为用户样式

对应的重要性顺序依次为:页面作者样式 > 用户样式 > 用户代理样式

比较优先级

  • 如果是在在同一个源中有样式声明冲突,此时就会进行样式声明的优先级比较。

  • 如果源的重要性是相同的,此时会以选择器的权重来比较重要性。

比较次序

  • 样式声明既是同源,权重也相同的情况下,就会进入第三个步骤,比较样式声明的次序。

  • 此时位于下面的样式声明会层叠掉上面的那一条样式声明,最终应用

至此,样式声明中存在冲突的所有情况,就全部被解决了。

3. 使用继承

  • 层叠冲突这一步完成后,解决了相同元素被声明了多条样式规则究竟应用哪一条样式规则的问题。
  • 如果没有声明的属性,此时就使用继承而来的值。
  • 会继承最近的元素的属性
  • 哪些属性能够继承:可以在 MDN 上面查阅到。

4. 使用默认值

一个 HTML 元素要在浏览器中渲染出来,必须具备所有的 CSS 属性值,但是绝大部分我们是不会去设置的,用户代理样式表里面也不会去设置,也无法从继承拿到,因此最终都是用默认值。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Windows 7 一键恢复 - 联想拯救系统

Windows 7 一键恢复 - 联想拯救系统 1. 联想拯救系统1.1. OEM 分区1.2. 一键恢复 References 1. 联想拯救系统 1.1. OEM 分区 计算机 -> 管理 -> 存储 -> 磁盘管理 1.2. 一键恢复 重新启动电脑 F11 -> 从初始备份恢复 References [1] Yongqiang Cheng, https…

实在数字员工,助力菜鸟智慧物流高效腾飞,领航行业新高度

秉承人人都有一个智能助理的发展愿景,自2023年首个数字员工落地以来,菜鸟数字员工累计运行时长已达10万小时。 在智能物流科技不断飞速迭代的今天,物流行业作为社会经济运行的重要支柱和电子商务生态链的关键环节,面临着前所未…

Python灰帽子网络安全实践

教程介绍 旨在降低网络防范黑客的入门门槛,适合所有中小企业和传统企业。罗列常见的攻击手段和防范方法,让网站管理人员都具备基本的保护能力。Python 编程的简单实现,让网络运维变得更简单。各种黑客工具的理论和原理解剖,让人知…

PLC常用通信协议应用

PLC通信协议 ModbusModbus协议介绍Modbus协议的应用Modbus通信模式 Modbus RTU通讯Modbus RTU报文映射寄存器常见功能码数据类型Modbus CRC校验计算Modbus RTU举例(读位)Modbus RTU举例(读字) Modbus TCP协议应用TCP数据帧Modbus …

Spring IOC 容器的加载过程(bean 的创建过程)

Spring IOC 容器的加载过程(bean 的创建过程) 配置Bean 通过xml或者是Component Bean 等进行配置 解析Bean,得到BeanDefinition定义对象 通过 BeanDefintionReader 将 bean 进行解析,准备要创建的bean对象的定义对象BeanDefinition,存放到Be…

Elasticsearch 索引模板、生命周期策略、节点角色

简介 索引模板可以帮助简化创建和二次配置索引的过程,让我们更高效地管理索引的配置和映射。 索引生命周期策略是一项有意义的功能。它通常用于管理索引和分片的热(hot)、温(warm)和冷(cold)数…

尽可能使用清晰、统一的方式初始化所有对象:列表初始化。【C++】

不管是为了统一性,还是避免发生窄化转换,尽可能使用初始化列表。 说明哪些对象可以使用列表初始化?代码演示 说明 C11 引入了列表初始化(也称为统一初始化或初始化列表),它是一种使用花括号 {} 来初始化对…

对象实例化在bean注入之前导致@Autowired失效

开发时遇到一个问题,Springboot的Autowired失效,无法注入bean,获取的到的mqttProperties一直为空。 MqttProperties定义: 业务代码: 按理来说,我的MqttProperties和当前类 NettyMqttClient都注册为了bea…

铁道障碍物检测6种YOLOV8

铁道障碍物检测6种,采用YOLOV8训练,得到PT模型,然后转换成ONNX模型,OPENCV调用 铁道障碍物检测6种YOLOV8

YOLOv8 | 注意力机制 | 添加ECA注意力机制

目录 原理简介 代码实现 yaml文件实现 检查是否添加执行成功

教大家几种解决msvcr120.dll文件丢失的问题以及解决办法

当这个msvcr120.dll文件丢失或损坏时,依赖它的程序可能无法启动或正常运行,这可能影响电脑的使用效率。如果用户遇到因缺少msvcr120.dll而导致的程序错误,安装或修复这个msvcr120.dll文件是一种维护措施,可以帮助恢复软件的正常功…

【python从入门到精通】--第一战:安装python

🌈 个人主页:白子寰 🔥 分类专栏:python从入门到精通,魔法指针,进阶C,C语言,C语言题集,C语言实现游戏👈 希望得到您的订阅和支持~ 💡 坚持创作博文…

餐饮连锁食品安全标准落实难?悠络客AI巡检,用SOP AI化守护“舌尖上的安全”

食品安全与卫生问题一直是全民关注的焦点,从民生角度,民以食为天,食品安全关系到消费者的身体健康和生命安全;从企业角度,品牌建设不易,一旦出现食品卫生安全问题,不仅会带来直接经济损失&#…

Web实战:采用JSP+ Servlet + DB实现用户登录功能

文章目录 一、项目运行效果二、项目实现步骤三、项目实战总结 一、项目运行效果 二、项目实现步骤 三、项目实战总结 本实战项目采用了JSP Servlet DB的组合,搭建了一个简单的用户登录功能。通过创建数据库、用户表、Jakarta EE项目,以及编写用户实体类…

慧天【HTWATER】软件是什么?在城市内涝水文水动力耦合模拟中如何应用小李15833332534

慧天[HTWATER]软件简介 针对城市排水系统基础设施数据管理的需求,以及水文、水力及水质模拟对数据的需求,实现了以数据库方式对相应数据的存储。可以对分流制排水系统及合流制排水系统进行地表水文、管网水力、水质过程的模拟计算。可以对城市低影响开发…

Linux命令学习入门

文章目录 登录注销关机重启Vim编辑器快捷键文件目录类打包、解包、压缩和解压指令输出重定向>和追加>>指令时间日期类搜索查找类用户管理文件所有者所在组权限管理变更权限crond任务时间调度crond相关指令:特殊符号说明: at定时任务磁盘分区磁盘…

力扣HOT100 - 1. 两数之和

解题思路&#xff1a; 解法一&#xff1a;暴力 class Solution {public int[] twoSum(int[] nums, int target) {int n nums.length;for (int i 0; i < n; i)for (int j i 1; j < n; j) {if (target nums[i] nums[j])return new int[] { i, j };}return new int[…

复盘一下我用过的设计模式

建造者模式 保卫萝卜中使用了建造者模式。UML图如下&#xff1a; 接口&#xff1a; public interface IBuilder<T> {//获取到游戏物体身上的脚本对象&#xff0c;从而去赋值T GetProductorClass(GameObject gameObject);//使用工厂去获取具体的游戏对象GameObject GetP…

探索生成式AI Agent,让公众自动化触手可及

在科技浪潮的推动下&#xff0c;AI Agent市场正经历深刻变革。Kognitos智能RPA厂商凭借675万美元融资和生成式AI自动化的定位&#xff0c;吸引业界关注。然而&#xff0c;微软早已将ChatGPT融入Power Platform&#xff0c;提供低代码应用开发体验&#xff0c;引领市场。初创公司…

聚类算法之高斯混合模型聚类 (Gaussian Mixture Model, GMM)

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 高斯混合模型&#xff08;GMM&#xff09;是统计模型中的一颗璀璨之星&#xff0c;它为数据提供了一种复杂而又强大的表示方法。在机器学习的许多…