CSS 的底层工作原理是什么?
CSS(层叠样式表) 是一种用于为网页添加视觉效果的样式表语言。它用于描述页面布局和 HTML 元素的显示。CSS 可以节省大量时间。使用 CSS 可以同时管理多个网页的布局。它使开发人员能够为不同的元素实现各种自定义属性，从而增强网页的外观。在本文中，我们将了解 CSS 及其工作原理。
CSS 基本上分为三种类型 -
外部 CSS - 每个页面都使用 元素，并且 link> 标签位于 head 部分。如果您想同时更改多个页面，请使用外部样式表。在这种情况下，它非常出色，因为它允许您仅通过修改一个文件即可更改整个网站的外观。
内联 CSS- 如果单个 HTML 页面具有独特的样式，则可以使用内部样式表。head 部分中的 style> 元素包含内部样式的定义。
内部 CSS- 要为单个元素赋予独特的外观，请使用内联样式。通过将 style 属性添加到相应的元素来使用内联样式。style 属性是任何 CSS 属性的容器。
语法
selector{
property: value;
}
示例
下面是如何在 HTML 页面中使用 CSS 的示例。这里，我们有内联 CSS。h1 元素带有下划线，而 div 元素为绿色。
<!DOCTYPE html>
<html>
<head>
<title> Using CSS within a HTML page </title>
<style>
h1{
text-decoration: underline;
}
div{
width: 30%;
height: 30px;
background-color: green;
}
</style>
</head>
<body>
<h1> Inline CSS </h1>
<div> This is an example. </div>
</body>
</html>
为什么要使用 CSS?
节省时间- 它能节省大量时间。由于 CSS 样式定义保存在单独的 CSS 文件中，修改其中一个文件可能会影响整个网站。
多种属性- 与纯 HTML 相比，CSS 提供了更精确的选项来确定网站的外观和风格。
快速页面加载- 使用 CSS 时，HTML 标签属性并非总是需要编写。只需为标签编写一次规则，即可将其应用于该标签的所有实例。由于 CSS 使用的代码更少，下载速度更快。
网站维护- 网站需要 CSS 进行维护。如果我们需要对文件进行全局修改，只需更改样式，网页上的所有组件都会立即更新。由于 CSS 文件的灵活性，网站的设计可以轻松修改。
多设备兼容性 - 我们可以将 CSS 与之前的语言版本一起使用，因为它传统上与这些版本兼容。因此，如果 CSS 应用程序是使用早期版本的编程语言创建的，并且开发人员将其与较新的开发版本合并，则 CSS 可以轻松地与所需的调整集成，从而使开发人员能够成功更新现有代码。使用 CSS 的内容可以适应多种设备类型。
CSS 的底层工作原理
计算给定 HTML 元素的最终 CSS 属性的实际过程是一系列极其复杂的步骤 -
数据积累
在此阶段，将从各种来源(例如用户代理、编写者和用户)收集特定元素的所有样式声明。必须对这些声明进行筛选和验证，以确定它们是否来自当前适用于本文档且语法有效的样式表。
层叠
CSS 代表层叠样式表，它是 CSS 的核心概念。必须彻底理解此阶段，因为它是唯一一个受到开发者和作者来源严重影响的阶段。此阶段将上一步收集的声明列表进行无序列表处理，并根据以下标准按优先级降序排列:
基于声明源(用户代理、用户、作者、过渡、动画)和 !important 注解。
基于选择器的特殊性
基于它们的书写顺序
设置默认值
如果没有声明，则在尝试设置元素 CSS 属性值时调用此步骤。
修复
为了在响应式设计中获得最大的灵活性，我们使用了多个相对单位(auto、em、rem、vh)、相对 URL、百分比或某些人类可读的关键字(small、normal、bold)。此阶段将尝试解析尽可能多的属性值，而无需布局文档、执行网络查询或从其父级以外的位置获取值。
格式化
此阶段将格式化整个文档，并通过尝试计算文档布局中使用的绝对理论值来完成上一步的所有剩余工作。此阶段主要针对元素的相对协调、自动布局和弹性布局等场景。它需要进行多次计算，但会产生几乎完全可供浏览器使用的绝对值。
最终修改
在绘制之前，此最终阶段将根据浏览环境(例如浏览器引擎、媒体类型、设备像素密度或操作系统)执行一些修改。将浮点数四舍五入为整数值或根据可用字体更改字体大小是两种常见的修改。
结论
由于 CSS 级联是 CSS 中最容易被误解的方面之一(并且常常是许多错误的根源)，因此了解其工作原理将极大地提升样式表的可管理性。然而，对 CSS 级联的理解越深入，责任就越大。级联中越专业的部分(例如 !important、内联样式和 id 选择器)，生成的样式表将来就越难以更改或覆盖。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
