数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究CSS 的底层工作原理是什么？
CSS（层叠样式表）是一种样式表语言，用于为网页添加视觉效果。它用于描述 HTML 元素的页面布局和显示。通过 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 选择器）会产生更难更改或覆盖的样式表。
396 次浏览
