【CSS重点知识】属性计算的过程

csdn动态图标

✍️ 作者简介: 前端新手学习中。

💂 作者主页: 作者主页查看更多前端教学

🎓 专栏分享：css重难点教学   Node.js教学 从头开始学习   ajax学习

标题

  • 什么是计算机属性
    • 确定声明值
    • 层叠冲突
    • 继承
    • 使用默认值
  • 总结

什么是计算机属性

CSS属性值的计算过程是指一个元素从所有属性都没有值，到所有属性都有值的过程。
这个过程分为四个步骤：确定声明值，层叠冲突，使用继承和使用默认值。

确定声明值

参考样式表（作者样式表+浏览器默认样式表）中没有冲突的声明，作为CSS属性值,如果你设置的属性跟浏览器默认属性重合了，那么就是有冲突的属性，如果没有冲突那么就作为css的属性,同时还会进行css预设值的处理。

作者样式表

就是你自己给这个网页写的样式。

默认样式表

浏览器自带的样式，自动生成的样式。
一个标签是块级元素还是行内元素，这都跟它的默认样式有关，h1标签是一个会计元素是因为自带一个display：block，我们可以在计算属性中查看。

在这里插入图片描述

层叠冲突

层叠冲突是指在CSS中，当多个样式规则应用于同一个元素并且具有相同的特定性时，浏览器需要确定哪个规则应该生效的过程。这种情况通常发生在多个样式表或多个选择器应用于同一个元素时。
为了解决层叠冲突，浏览器会使用一组称为层叠规则的标准来确定哪个样式规则应该生效,分为三个步骤比较重要性，比较特殊性，比较原次序
这些规则考虑了样式规则的来源、特定性和顺序。
例如，内联样式优先于外部样式表中的样式，ID选择器优先于类选择器，
而后定义的规则优先于先定义的规则。

比较重要性
从高到低

  1. 带有important的作者样式
  2. 带有important的默认样式
  3. 作者样式
  4. 默认样式

例

    <style>*{font-size: 16px;}</style>
</head>
<body><h1>坚毅的小解同志</h1>
</body>

在这里插入图片描述
用户样式表高于默认样式表

比较特殊性

style id 属性 元素
是否内联 id选择器的数量 属性，类，伪类选择器的数量 元素，伪元素的数量

例

  <style>body h1 {font-size: 10px;}/* (0,0, 0, 2) */body .h1 {font-size: 8px;}/* (0,0, 1, 1) */* {font-size: 16px;}/* (0,0, 0, 0) */</style></head><body><h1 class="h1">坚毅的小解同志</h1></body>

在这里插入图片描述
比较原次序

如果还有冲突，我们可以在这一步比较顺序，最新写的有效果。
例

 <style>body h1 {font-size: 10px;}/* (0,0, 0, 2) */body h1 {font-size: 8px;}/* (0,0, 0, 2) */* {font-size: 16px;}/* (0,0, 0, 0) */</style></head><body><h1 class="h1">坚毅的小解同志</h1></body>

在这里插入图片描述

继承

我们前两步实际上将作者书写的属性进行乐一个筛选得到了作者的值，但是仍然有许多没有设置值的属性，这个时候我们就会来到继承这一步，并不是所有的属性都会被继承，一般可以继承的值都是文本类型的值。
我举个例子大家就能理解了。

例

 <style>div{color: red;}</style></head><body><div><h1 class="h1">坚毅的小解同志</h1>
</div></body>

在这里插入图片描述
给外面的div标签 将颜色设置成红色，里面的h1标签没有设置color颜色，于是继承了父级标签，也变成了红色，这就是继承。

使用默认值

不能继承，作者也没有设置属性，那么就会使用默认属性。

总结

注意 前两部是筛选作者属性，第一步对比的是作者属性，和浏览器默认属性（作者代写属性）， 大家需要把浏览器默认属性，和默认属性分开。
学习css 属性计算是一个非常重要的基础，需要好好学习。

查看全文

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章：

在这里插入图片描述

【CSS重点知识】属性计算的过程

✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享：css重难点教学 Node.js教学 从头开始学习 ajax学习 标题什么是计算机属性确定声明值层叠冲突继承使用默认值总结什么是计算机属性
CSS属性值的计算……

编程日记2023/3/27 14:44:47

基于Python 进行卫星图像多种指数分析

一、前言本文帮助读者更好地了解卫星数据以及使用 Python 探索和分析哨兵2卫星数号数据在Sundarbans地区的不同方法。二、Sundarbans研究区孙德尔本斯（Sundarbans）是恒河、雅鲁藏布江和梅克纳河在孟加拉湾汇合形成的三角洲中最大的红树林区之一。 孙德尔……

编程日记2023/3/27 14:44:07

Java_Spring：5. 基于注解的 IOC 配置

目录 1 环境搭建
1.1 第一步：拷贝必备 jar 包到工程的 lib 目录。
1.2 第二步：使用Component 注解配置管理的资源
1.3 第三步：创建 spring 的 xml 配置文件并开启对注解的支持
2 常用注解
2.1 用于创建对象的注解
2.1.1 Component
2.1……

编程日记2023/3/27 14:43:41

OPNET Modeler 常用编辑器的综合运用举例

文章目录一、创建进程模型二、创建节点模型三、创建网络模型四、配置及仿真总结OPNET Modeler 常用编辑器主要有项目编辑器、节点模型编辑器和进程模型编辑器。下面举一个例子来介绍这几种常用编辑器的使用。 在仿真开始时，进程模型被首次调用，进入Initi……

编程日记2023/3/27 14:43:30

pip镜像安装代码

直接使用pip安装，总是会遇到网络不佳，安装失败的场景 我们可以借助镜像进行安装
1、清华镜像代码
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple 2、豆瓣镜像代码
pip install -i http://pypi.douban.com/simple/3、阿里云镜像代码
pip ……

编程日记2023/3/27 14:42:54

3月26日星期日

一、java学习一、异常及其分类1、什么是异常（1、）异常也叫Exception，是一种程序运行过程中发生的错误，它会中断指令的正常执行。2、异常的分类（1、）异常类Exception与错误类Error都继承自可抛出类Throwable……

编程日记2023/3/27 14:42:44

Linux线程同步必知，常用方法揭秘！

一、为什么要线程同步
在Linux 多线程编程中，线程同步是一个非常重要的问题。如果线程之间没有正确地同步，就会导致程序出现一些意外的问题，例如：
竞态条件（Race Condition）：多个线程同时修改……

编程日记2023/3/27 14:42:24

软件在线升级系统的设计与实现

本科毕业设计（论文）
题 目 软件在线升级系统的设计与实现 院（系） 专业 学 号 学生姓名 指导教师 起讫日期 2015.1.11-2015.6.6 设计地点 摘要 就算是最专业的软件开发商也不可能在软件开发过程中做到完美，都会……

编程日记2023/3/27 14:42:18

电力公司SMS短信群发平台的设计与实现

潍坊科技学院 本科毕业设计（论文）
题 目 电力公司SMS短信群发平台的设计与实现 院（系） 专 业 科学与技术 学 号 学生姓名 指导教师 刘效伟 起讫日期 2015.1.11-2015.6.6 设计地点 寿光市软件园山东潍科软件科技有限公司 ……

编程日记2023/3/27 14:42:17

微信与支付宝开发问题总结

微信与支付宝开发问题总结 1.先说微信 首先需要明确的问题是：微信公众号，微信开放平台，微信商户平台。这是三个完全不同的概念，需要加以区分。切记一定不要搞混。具体我就不再这说了。网上这方面的资料很多。要想做好微信开发这……

编程日记2023/3/27 14:42:16

反序列化渗透与攻防(五)之shiro反序列化漏洞

Shiro反序列化漏洞
Shiro介绍
Apache Shiro是一款开源安全框架，提供身份验证、授权、密码学和会话管理。Shiro框架直观、易用，同时也能提供健壮的安全性
Apache Shiro 1.2.4及以前版本中，加密的用户信息序列化后存储在名为remember-me的Cookie中。攻击者可以使用Shiro的默……

编程日记2023/4/16 14:52:13

vue2+vue3

vue2vue3尚硅谷vue2vue2 课程简介【02:24】vue2 Vue简介【17:59】vue2 Vue官网使用指南【14:07】vue2 搭建Vue开发环境【13:54】vue2 Hello小案例【22:25】了解： 不常用常用：id 更常用 简单class差值总结vue 实例vue 模板 ： 先 取 &#xff0……

编程日记2023/4/16 14:52:00

【hello Linux】环境变量

目录 1. 环境变量的概念 2. 常见的环境变量 3. 查看环境变量 4. 和环境变量相关的命令 5. 环境变量的组织方式 6. 通过代码获取环境变量 7. 通过系统调用获取环境变量 Linux🌷 在开始今天的内容之前，先来看一幅图片吧！ 不知道你们是否和我一……

编程日记2023/4/16 14:51:36

【Linux基础】常用命令整理

ls命令
-a选项，可以展示隐藏的文件和文件夹-l选项，以列表形式展示内容-h，需要和-l搭配使用，可以展示文件的大小单位ls -lah等同于la -a -l -h
cd命令（change directory）
语法：cd [Linux路径]……

编程日记2023/4/16 14:51:26

客快物流大数据项目（一百一十二）：初识Spring Cloud

文章目录
初识Spring Cloud
一、Spring Cloud简介
二、SpringCloud 基础架构图…

编程日记2023/4/16 14:51:11

C和C++中的struct有什么区别

区别一： C语言中： Struct是用户自定义数据类型（UDT）。 C语言中： Struct是抽象数据类型（ADT），支持成员函数的定义。
区别二：
C中的struct是没有权限设置的&#xff0c……

编程日记2023/4/16 14:50:59

docker的数据卷详解

数据卷 数据卷是宿主机中的一个目录或文件，当容器目录和数据卷目录绑定后，对方修改会立即同步
一个数据卷可以同时被多个容器同时挂载，一个容器也可以被挂载多个数据卷
数据卷作用：容器数据持久化 /外部机器和容器间接通信 /容器……

编程日记2023/4/16 14:50:50

13、Qt生成dll-QLibrary方式使用

Qt创建dll，使用QLibrary类方式调用dll
一、创建项目
1、新建项目->其他项目->Empty qmake Project->Choose 2、输入项目名，选择项目位置，下一步 3、选择MinGW，下一步 4、完成 5、.pro中添加TEMPLATE subdirs&#xff……

编程日记2023/4/16 14:50:38

基于mapreduce 的 minHash 矩阵压缩

Minhash作用： 对大矩阵进行降维处理，在进行计算俩个用户之间的相似度。
比如： 俩个用户手机下载的APP的相似度，在一个矩阵中会有很多很多的用户要比较没俩个用户之间的相似度是一个很大的计算任务 如果首先对这个矩阵降维处理&am……

编程日记2023/4/16 14:50:37

关于hashmap使用迭代器的问题

keySet获得的只是key值的集合，valueSet获得的是value集合，entryset获得的是键值对的集合。 package com.test2.test;import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Map.Entry;public class mapiterator……

编程日记2023/4/16 14:50:37

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注