'CSS在幕后是如何工作的？'-css教程-PHP中文网

首页

web前端

css教程

'CSS在幕后是如何工作的？'

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 17, 2023 am 10:33 AM

CSS在幕后是如何工作的？

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 id="Inline-CSS"> 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中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

CSS Flexbox与网格：全面评论May 12, 2025 am 12:01 AM

选择Flexbox还是Grid取决于布局需求：1)Flexbox适用于一维布局，如导航栏；2)Grid适合二维布局，如杂志式布局。两者在项目中可结合使用，提升布局效果。

如何包括CSS文件：方法和最佳实践May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用标签在HTML的部分引入外部CSS文件。1.使用标签引入外部CSS文件，如。2.对于小型调整，可以使用内联CSS，但应谨慎使用。3.大型项目可使用CSS预处理器如Sass或Less，通过@import导入其他CSS文件。4.为了性能，应合并CSS文件并使用CDN，同时使用工具如CSSNano进行压缩。

Flexbox vs Grid：我应该学习两者吗？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

轨道力学（或我如何优化CSS KeyFrames动画）May 09, 2025 am 09:57 AM

重构自己的代码看起来是什么样的？约翰·瑞亚（John Rhea）挑选了他写的一个旧的CSS动画，并介绍了优化它的思维过程。

CSS动画：很难创建它们吗？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@KeyFrames CSS：最常用的技巧May 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatoryand and powerincreatingsmoothcssanimations.keytricksinclude：1）definingsmoothtransitionsbetnestates，2）使用AnimatingmatematingmultationmatingMultationPropertiessimultane，3）使用使用4）使用BombingeNtibalibility，4）使用BombingingWithjavofofofofofoffo

CSS计数器：自动编号的综合指南May 07, 2025 pm 03:45 PM

CSSCOUNTERSAREDOMANAGEAUTOMANAMBERINGINWEBDESIGNS.1）他们可以使用forterablesofcontents，ListItems，and customnumbering.2）AdvancedsincludenestednumberingSystems.3）挑战挑战InclassINCludeBrowsEccerCerceribaliblesibility andperformiballibility andperformissises.4）创造性