白酒营销网站,品牌推广部的职责,企业管理咨询服务机构,wordpress开启用户激活验证CSS 属性计算过程
首先#xff0c;不知道你有没有考虑过这样的一个问题#xff0c;假设在 HTML 中有这么一段代码#xff1a;
bodyh1这是一个h1标题/h1
/body上面的代码也非常简单#xff0c;就是在 body 中有一个 h1 标题而已#xff…CSS 属性计算过程
首先不知道你有没有考虑过这样的一个问题假设在 HTML 中有这么一段代码
bodyh1这是一个h1标题/h1
/body上面的代码也非常简单就是在 body 中有一个 h1 标题而已该 h1 标题呈现出来的外观是如下 目前我们没有设置该 h1 的任何样式但是却能看到该 h1 有一定的默认样式例如有默认的字体大小、默认的颜色。
那么问题来了我们这个 h1 元素上面除了有默认字体大小、默认颜色等属性以外究竟还有哪些属性呢 答案是**该元素上面会有 CSS 所有的属性。**你可以打开浏览器的开发者面板选择【元素】切换到【计算样式】之后勾选【全部显示】此时你就能看到在此 h1 上面所有 CSS 属性对应的值。 换句话说我们所书写的任何一个 HTML 元素实际上都有完整的一整套 CSS 样式。这一点往往是让初学者比较意外的因为我们平时在书写 CSS 样式时往往只会书写必要的部分例如前面的
p{color : red;
}这往往会给我们造成一种错觉认为该 p 元素上面就只有 color 属性。而真实的情况确是任何一个 HTML 元素都有一套完整的 CSS 样式只不过你没有书写的样式大概率可能会使用其默认值。例如上图中 h1 一个样式都没有设置全部都用的默认值。
但是注意我这里强调的是“大概率可能”难道还有我们“没有设置值但是不使用默认值”的情况么 嗯确实有的所以我才强调你要了解“CSS 属性的计算过程”。
总的来讲属性值的计算过程分为如下这么 4 个步骤
确定声明值层叠冲突使用继承使用默认值
确定声明值
首先第一步是确定声明值。所谓声明值就是作者自己所书写的 CSS 样式例如前面的
p{color : red;
}这里我们声明了 p 元素为红色那么就会应用此属性设置。
当然除了作者样式表一般浏览器还会存在“用户代理样式表”简单来讲就是浏览器内置了一套样式表。 在上面的示例中作者样式表中设置了 color 属性而用户代理样式表浏览器提供的样式表中设置了诸如 display、margin-block-start、margin-block-end、margin-inline-start、margin-inline-end 等属性对应的值。
这些值目前来讲也没有什么冲突因此最终就会应用这些属性值。
层叠冲突
在确定声明值时可能出现一种情况那就是声明的样式规则发生了冲突。
此时会进入解决层叠冲突的流程。而这一步又可以细分为下面这三个步骤
比较源的重要性比较优先级比较次序
来来来我们一步一步来看。
比较源的重要性
当不同的 CSS 样式来源拥有相同的声明时此时就会根据样式表来源的重要性来确定应用哪一条样式规则。
那么问题来了咱们的样式表的源究竟有几种呢 整体来讲有三种来源
浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称用户代理样式。网页的作者可以定义文档的样式这是最常见的样式表称之为页面作者样式。浏览器的用户可以使用自定义样式表定制使用体验称之为用户样式。
对应的重要性顺序依次为页面作者样式 用户样式 用户代理样式
更详细的来源重要性比较可以参阅 MDNhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/Cascade
我们来看一个示例。
例如现在有页面作者样式表和用户代理样式表中存在属性的冲突那么会以作者样式表优先。
p{color : red;display: inline-block;
}可以明显的看到作者样式表和用户代理样式表中同时存在的 display 属性的设置最终作者样式表干掉了用户代理样式表中冲突的属性。这就是第一步根据不同源的重要性来决定应用哪一个源的样式。
比较优先级
那么接下来如果是在在同一个源中有样式声明冲突怎么办呢此时就会进行样式声明的优先级比较。
例如
div classtesth1test/h1
/div.test h1{font-size: 50px;
}h1 {font-size: 20px;
}在上面的代码中同属于页面作者样式源的重要性是相同的此时会以选择器的权重来比较重要性。
很明显上面的选择器的权重要大于下面的选择器因此最终标题呈现为 50px。 可以看到落败的作者样式在 ElementsStyles 中会被划掉。
有关选择器权重的计算方式不清楚的可以进入此传送门https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
比较次序
经历了上面两个步骤大多数的样式声明能够被确定下来。但是还剩下最后一种情况那就是样式声明既是同源权重也相同。
此时就会进入第三个步骤比较样式声明的次序。
举个例子
h1 {font-size: 50px;
}h1 {font-size: 20px;
}在上面的代码中同样都是页面作者样式选择器的权重也相同此时位于下面的样式声明会层叠掉上面的那一条样式声明最终会应用 20px 这一条属性值。 至此样式声明中存在冲突的所有情况就全部被解决了。
使用继承
层叠冲突这一步完成后解决了相同元素被声明了多条样式规则究竟应用哪一条样式规则的问题。
那么如果没有声明的属性呢此时就使用默认值么
No、No、No别急此时还有第三个步骤那就是使用继承而来的值。
例如
divpLorem ipsum dolor sit amet./p
/divdiv {color: red;
}在上面的代码中我们针对 div 设置了 color 属性值为红色而针对 p 元素我们没有声明任何的属性但是由于 color 是可以继承的因此 p 元素从最近的 div 身上继承到了 color 属性的值。 这里有两个点需要注意一下。
首先第一个是我强调了是最近的 div 元素看下面的例子
div classtestdivpLorem ipsum dolor sit amet./p/div
/divdiv {color: red;
}
.test{color: blue;
}因为这里并不涉及到选中 p 元素声明 color 值而是从父元素上面继承到 color 对应的值因此这里是谁近就听谁的初学者往往会产生混淆又去比较权重但是这里根本不会涉及到权重比较因为压根儿就没有选中到 p 元素。
第二个就是哪些属性能够继承
关于这一点的话大家可以在 MDN 上面很轻松的查阅到。例如我们以 text-align 为例如下图所示 使用默认值
好了目前走到这一步如果属性值都还不能确定下来那么就只能是使用默认值了。
如下图所示 前面我们也说过一个 HTML 元素要在浏览器中渲染出来必须具备所有的 CSS 属性值但是绝大部分我们是不会去设置的用户代理样式表里面也不会去设置也无法从继承拿到因此最终都是用默认值。
好了这就是关于 CSS 属性计算过程的所有知识了。 一道面试题
好了学习了今天的内容让我来用一道面试题测试测试大家的理解程度。
下面的代码最终渲染出来的效果a 元素是什么颜色p 元素又是什么颜色
diva hreftest/aptest/p
/divdiv {color: red;
}大家能说出为什么会呈现这样的结果么
解答如下 实际上原因很简单因为 a 元素在用户代理样式表中已经设置了 color 属性对应的值因此会应用此声明值。而在 p 元素中无论是作者样式表还是用户代理样式表都没有对此属性进行声明然而由于 color 属性是可以继承的因此最终 p 元素的 color 属性值通过继承来自于父元素。
