【CSS】样式的计算过程

标签的 CSS 样式

现在有这么一段 HTML 代码:

<div class="test"><h1>Hello World</h1>
</div>

目前我们没有给 h1 设置任何样式,可以看到 h1 自带了一些样式,eg:font-size、font-weight、margin。

这里我们需要注意的是:h1 上面会有所有的 CSS 属性。我们可以打开浏览器的开发者面板,选择 [元素] - [计算样式] - 勾选 [全部显示],就能看到 h1 上应用的 CSS 属性。这里展示的属性值都是计算后的具体值,颜色值都是 rgb 的格式、长度值都以 px 为单位。

就是说,我们书写的任何一个 HTML 元素,实际上都应用了一整套 CSS 样式



样式的计算过程

总的来讲,CSS 属性值的计算过程,分为如下 4 个步骤:

  1. 确定声明值
  2. 解决层叠冲突
  3. 继承属性值
  4. 使用默认值

确定声明值

我们编写如下 CSS(层叠样式表)代码:

h1 {color: red;
}

我们编写的层叠样式表称为 “作者样式表”,浏览器内置的层叠样式表称为 “用户代理样式表”。

现在就可以确定声明值了,“作者样式表” 设置了 color 属性,“用户代理样式表” 设置了 display、font-size 等属性。


解决层叠冲突

在确定声明值时,可能出现 “声明的样式发生冲突” 的情况,此时会进入解决层叠冲突的流程。

这一步可以分为下面这 3 个步骤:

  1. 比较源的重要性
  2. 比较样式的权重
  3. 比较编写的位置

  1. 比较源的重要性:“作者样式表” > “用户代理样式表”
h1 {font-weight: 400;color: red;
}

使用上述样式,可以看到页面上的 h1 最终应用了 font-weight: 400 这个属性值。


  1. 比较样式的权重
.test h1 {font-size: 50px;
}h1 {font-size: 20px;
}

上面的样式同属于 “作者样式表”,即源的重要性相同,此时就会比较样式的权重。样式的权重有 3 个等级:

  1. ID 选择器:(1, 0, 0)
  2. 类选择器、属性选择器、伪类选择器:(0, 1, 0)
  3. 元素选择器、伪元素选择器:(0, 0, 1)

上例 .test h1 的权重为 (0, 1, 1),而 h1 的权重为 (0, 0, 1),因此最终会应用 font-size: 50px 这个属性值。

这里需要注意:权值不能跃迁。就是说,无论有多少个第 4 等的元素选择器,都不能超过一个第 3 等的类选择器。

也有说法是:最开始权重的计算是 256 进制的((0, 0, 255) + (0, 0, 1) = (0, 1, 0))。后随着计算机的发展 这个进制在不断增大。

不管怎样,我们就当作权值不能跃迁就好了。毕竟再怎么样写代码也不可能写出几百上千个选择器吧。


  1. 比较编写的位置:行内样式 > 样式表的样式;位置靠后的样式 > 位置靠前的样式
h1 {font-size: 50px;
}h1 {font-size: 20px;
}

以上样式具有相同的源重要性和样式权重,此时位于下面的样式会覆盖掉上面的样式,最终会应用 font-size: 20px 这个属性值。


继承属性值

对于可继承属性,如果经过 “确定声明值”、“解决层叠冲突” 后,属性仍没有值,则会尝试继承最近的父元素身上的属性值。

div {color: red;
}

上例给 div 设置了 color 属性,由于 color 是可以继承的,因此 h1 从最近的父元素 div 身上继承了 color 属性。


大致上,与文本相关的属性都是可继承的,而与布局相关的属性都是不可继承的。

以下是一些可继承的 CSS 属性:

  • 字体系列属性:font、font-family、font-weight、font-size、font-style 等。
  • 文本系列属性:color、line-height、word-spacing、letter-spacing、text-transform、text-indent、text-align 等。
  • 列表系列属性:list-style、list-style-type、list-style-position 等。
  • 表格系列属性:border-collapse、border-spacing 等。
  • 其他属性:visibility、cursor、direction 等。

以下是一些不可继承的 CSS 属性:

  • 盒模型系列属性:margin、padding、border、width、height 等。
  • 定位系列属性:position、top、right、bottom、left 等。
  • 背景系列属性:background、background-color、background-image 等。
  • 显示系列属性:display、overflow 等。
  • 其他属性:vertical-align、z-index 等。

使用默认值

经过 “确定声明值”、“解决层叠冲突”、“继承属性值” 后,如果属性仍没有值,才会使用默认值。



DEMO

<div><a href="#">Hello World</a><h1>Hello World</h1>
</div>
div {color: red;
}

问:a 元素是什么颜色? h1 元素又是什么颜色?

答:a 元素为蓝色,h1 元素为红色。

解释:因为 a 元素的 “用户代理样式表” 设置了 color 属性,因此会应用此声明值。而在 h1 元素中,无论是 “作者样式表” 还是 “用户代理样式表”,都没有对此属性进行声明,由于 color 属性是可继承的,因此 h1 元素会继承父元素 div 的 color 属性。

如果希望 a 元素可以继承 div 的 color,可以显式地设置 color: inherit

除了 inherit 这个特殊值,还有 initial,可以通过 color: initial 显式地设置 color 属性值为默认值。


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

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

相关文章

微信小程序快速备案的通道揭秘方法

随着国家政策的调整&#xff0c;微信小程序备案已变得刻不容缓。传统备案路径较为繁琐&#xff0c;耗时较长&#xff0c;为解决此痛点&#xff0c;今天我们将揭示一个快速备案的新通道。 步骤1&#xff1a;探索智慧助手 打开微信&#xff0c;探索“智慧商家服务助手”公众号。…

NProgress顶部进度条的用法

大家打开一个网页的时候&#xff0c;会看到一个进度条&#xff0c;然后加载完成后进度条就消失了。这个呢&#xff0c;就是一个第三方的进度条库&#xff0c;叫做nprogress. 1.首先安装nprogress(咱直接用npm安装了) : npm install --save nprogress 2.然后在 router/index.j…

编译支持GPU的opencv,并供python的import cv2调用

下载opencv和opencv_contrib&#xff0c;cmake过程中要下载的一些包可以手动下载配置&#xff0c;如果网络较好&#xff0c;也可以等待自动下载。主要记录的是cmake命令&#xff1a; cmake -D CMAKE_BUILD_TYPERELEASE \-D BUILD_opencv_python3YES \-D CMAKE_INSTALL_PREFIX/…

Mac允许任何来源的的安装包进行安装

首先打开终端&#xff0c;开启“任何来源”&#xff0c;执行如下命令&#xff1a; sudo spctl --master-disable 然后回车&#xff0c;继续输入密码&#xff08;密码输入时是不可见的&#xff09;&#xff0c;然后回车。 接着打开【系统偏好设置】&#xff0c;选择【安全性与…

MySQL(6):多表查询

多表查询&#xff0c;也称为关联查询&#xff0c;指两个或更多个表一起完成查询操作。 前提条件&#xff1a; 这些一起查询的表之间是有关系的&#xff08;一对一、一对多&#xff09;&#xff0c;它们之间一定是有关联字段&#xff0c;这个关联字段可能建立了外键&#xff0c;…

CSS3盒模型

CSS3盒模型规定了网页元素的显示方式&#xff0c;包括大小、边框、边界和补白等概念。2015年4月&#xff0c;W3C的CSS工作组发布了CSS3基本用户接口模块&#xff0c;该模块负责控制与用户接口界面相关效果的呈现方式。 1、盒模型基础 在网页设计中&#xff0c;经常会听到内容…

Spring Boot 整合 MyBatis Plus

目录 一、初始化演示数据 二、创建应用 二、应用配置 三、实体类 四、Mapper 五、Mapper 映射文件 六、Service 七、Service 层抽象接口 八、配置 Mapper 扫描包 九、在日志中输出 SQL 十、测试 MyBatis Plus 是 MyBatis 框架的一个增强。除了基本的 MyBatis 功能外…

浅谈安科瑞电力监控系统在百事亚洲研发中心的应用

摘要&#xff1a;介绍百事亚洲研发中心&#xff0c;采用智能电力仪表、采集配电现场的各种电参量和开关信号。系统采用现场就地组网的方式&#xff0c;组网后通过现场总线通讯并远传至后台&#xff0c;通过Acrel-2000型电力监控系统实现配电所配电回路用电的实时监控和管理。 …

【AI视野·今日Robot 机器人论文速览 第六十一期】Tue, 24 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Tue, 24 Oct 2023 Totally 50 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers Robot Fine-Tuning Made Easy: Pre-Training Rewards and Policies for Autonomous Real-World Reinforcement Learning Autho…

全球互联网信息,中文内容只占1.3%,学好英语,这几条路子让你赚认知外的钱

在全世界的整个互联网上&#xff0c;中文内容只占1.3%&#xff0c;而英文内容接近60%&#xff0c;如果你不会英语&#xff0c;你的眼界和思维将局限在这1.3%里面。 单单就说赚钱这个事情&#xff0c;学好英语&#xff0c;你可以有很多特殊的路子赚到大钱&#xff0c;可以赚到你…

c语言练习(9周)(16~20)

输入12个一位整数&#xff0c;创建二维数组a[3][4]&#xff0c;显示二维数组及各列的平均值&#xff0c;平均值四舍五入到小数点后一位。 题干输入12个一位整数&#xff0c;创建二维数组a[3][4]&#xff0c;显示二维数组及各列的平均值&#xff0c;平均值四舍五入到小数点后一…

uni-app 应对微信小程序最新隐私协议接口要求的处理方法

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 一&#xff0c;问题起因 最新在开发小程序的时候&#xff0c;调用微信小程序来获取用户信息的时候经常报错一个问题 fail api scope is not declared in the privacy agreement&#xff0c;api更具公告…

STM32:AHT20温湿度传感器驱动程序开发

注&#xff1a;温湿度传感器AHT20数据手册.pdf http://www.aosong.com/userfiles/files/AHT20%E4%BA%A7%E5%93%81%E8%A7%84%E6%A0%BC%E4%B9%A6(%E4%B8%AD%E6%96%87%E7%89%88)%20B1.pdf 一、分析AHT数据手册文档 (1).准备工作 1.新建工程。配置UART2 2.配置I2C1为I2C标准模式&…

Rocky9 上安装 redis-dump 和redis-load 命令

一、安装依赖环境 1、依赖包 dnf -y install perl gcc gcc-c zlib-devel2、编译openssl 1.X ### 下载编译 wget https://www.openssl.org/source/openssl-1.1.1t.tar.gz tar xf openssl-1.1.1t.tar.gz cd openssl-1.1.1t ./config --prefix/usr/local/openssl make make ins…

[Hive] 查询结果保存

文章目录 1.插入新表追加 2.插入hdfs文件系统 1.插入新表 使用INSERT OVERWRITE语句的情况&#xff1a; 整个表&#xff1a;可以使用INSERT OVERWRITE TABLE table_name语句将查询结果直接覆盖整个表中的数据。 INSERT OVERWRITE TABLE table_name SELECT * FROM ...特定分区…

Vue项目创建与启动(2023超详细的图文教程)

目录 一、下载node.js 二、下载vue-cli与webpack插件 三、项目初始化(项目配置详细信息) 四、项目启动 五、Vue项目工程结构&#xff08;扩展知识&#xff09; 一、下载node.js 1.检测是否已经安装过node.js 打开控制台,输入 npm -v如果有会显示对应版本 如果没有会显示…

centos中mongodb设置服务自启动并 允许远程IP访问

安装mongodb参考 注意的是配置文件需要把journal设置为true 制作为系统服务 创建MongoDB服务文件。运行以下命令创建服务文件/etc/systemd/system/mongod.service&#xff1a; vi /etc/systemd/system/mongod.service [Unit] DescriptionMongoDB Database Server Documenta…

Python框架之Flask入门和视图

一、Flask入门和视图 需要安装Pycharm专业版 1. Flask简介 Python后端的2个主流框架 Flask 轻量级框架Django 重型框架 Flask是一个基于Python实现的web开发微框架 官方文档&#xff1a;https://flask.palletsprojects.com/ 中文文档&#xff1a;https://dormousehole.readthe…

lambda表达式和Stream(流)

Lambda表达式是Java 8引入的一项重要特性&#xff0c;它允许您以一种更简洁的方式定义匿名函数&#xff08;也称为闭包&#xff09;。Lambda表达式是函数式编程的一部分&#xff0c;它提供了在Java中处理函数式接口的能力。函数式接口是一个只有一个抽象方法的接口。Lambda表达…

防范欺诈GPT

去年&#xff0c;ChatGPT的发布让全世界都感到惊讶和震惊。 突然间出现了一个平台&#xff0c;它比之前的任何其他技术都更深入地了解互联网。人工智能可以被训练成像阿姆一样说唱&#xff0c;以世界著名诗人的风格写作&#xff0c;并精确地翻译内容&#xff0c;以至于它似乎能…