'CSS在幕后是如何工作的？'
- WBOY转载
- 2023-09-17 10:33:021421浏览
CSS（层叠样式表）是一种样式表语言，用于向网页添加视觉效果。它用于描述HTML元素的页面布局和显示。通过 CSS 可以节省大量时间。使用它可以同时管理多个网页的布局。它使开发人员能够为不同的元素实现各种自定义属性，从而增强网页的外观。在本文中，我们将了解 CSS 及其工作原理。
CSS 基本上分为 3 种类型 -
外部 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 的底层工作
计算给定 HTML 元素的最终 CSS 属性的实际过程是一系列极其复杂的步骤 -
数据积累
在此阶段，特定元素的所有样式声明都是从各种来源（例如用户代理、作者和用户）收集的。必须对这些声明进行过滤和验证，以确定它们是否来自现在适用于本文档的样式表并且在语法上有效。
级联
CSS这个词代表层叠样式表，这是CSS的基本概念。这一阶段必须彻底理解，因为它是唯一一个深受开发者作为作者来源影响的阶段。此阶段采用上一步中收集的声明的无序列表，并使用以下标准按优先级降序排列它们 -
基于声明源（用户代理、用户、作者、过渡、动画）和！重要注释的组合。
基于选择器的特殊性
基于它们的书写顺序
设置默认值
如果没有声明，则在尝试为元素的 CSS 属性设置值时调用此步骤。
修复
为了在响应式设计中获得最大的灵活性，我们使用几种相对单位（auto、em、rem、vh）、相对 URL、百分比或某些人类可读的关键字（小、正常、粗体）。此阶段将尝试解析尽可能多的属性值，而无需放置文档、执行网络查询或从父级以外的其他位置获取值。
格式化
此阶段将格式化整个文档，并通过尝试计算文档布局中使用的绝对理论值来完成上一步中剩余的工作。这一阶段主要关注元素相对协调、自动布局、Flex布局等场景。它需要进行多次计算，但会产生几乎完全可用的绝对数字供浏览器使用。
最终更改
在绘制之前，最后阶段将根据冲浪环境执行一些修改，例如浏览器引擎、媒体类型、设备像素密度或操作系统。将浮点数舍入为整数值或根据可用字体更改字体大小是两个常见的更改。
结论
由于 CSS 级联是 CSS 最容易被误解的方面之一（并且常常是许多错误的根源），因此了解它的工作原理将为您提供保持样式表易于管理的显着优势。然而，对 CSS 级联的了解越深入，责任就越大。级联中更专业的部分（例如 !important、内联样式和 id 选择器）生成的样式表将来更难以更改或覆盖。
以上是'CSS在幕后是如何工作的？'的详细内容。更多信息请关注PHP中文网其他相关文章！