CSS 如何在幕后工作？

级联样式表简称CSS ，是一种样式表语言，用于设计和描述网页的呈现以使其具有吸引力。 CSS 的主要用途是简化使网页可呈现的过程。

元素应在屏幕上呈现的方式描述为 CSS。 CSS 将样式应用于网页。更重要的是，CSS 使这种样式独立于 HTML。

CSS 大致分为3类：

• 内部 CSS
• 内联 CSS
• 外部 CSS

为什么使用 CSS？

• Web 开发：每个 Web 开发人员都应该知道的基本技能是 HTML 和 CSS。
• 代码的可重用性： CSS 文件可以在我们想要应用一些样式的多个 HTML 页面中重用。
• 有吸引力的网站：为我们的网站添加样式肯定会使它对用户更有吸引力。
• 易于维护：只需在单个文件中更改代码。
• 提升用户体验：简洁美观的用户界面帮助用户轻松浏览网站。

语法： CSS 包含样式规则集，这些规则集由选择器和声明块组成。这些样式规则由浏览器解释。

p { 
    background-color: aliceblue; 
    font-size: 18px; 
}

• 选择器：选择器告诉要设置样式的 HTML 元素。在这种情况下，选择器是“p”元素。
• 声明：每个声明都包含一个 CSS 属性名称和值，以分号分隔。在这种情况下，它的“背景颜色”和“字体大小”。

示例：在此示例中，所有“h1”元素将居中对齐，颜色为绿色，字体大小为 30 像素。

HTML

  

    

  

    

        Welcome to GeeksforGeeks
    
  

  

输出：

CSS 在底层是如何工作的？

您是否对 HTML 将在 CSS 解释之前还是之后解释感到困惑？或者它会在浏览器构建 DOM 时立即应用。让我们讨论一下它实际上是如何工作的。在显示文档时，浏览器必须将文档的内容与样式信息结合起来。文档分多个阶段进行处理。

在职的：

• 浏览器加载 HTML 并转换为 DOM（文档对象模型）。
• 然后获取链接到 HTML 文档的大部分资源，例如嵌入的视频、图像和链接的 CSS。
• 获取的 CSS 然后由浏览器解析。根据使用的选择器类型，它会确定要在 DOM 中的哪些节点上应用哪种样式并将样式附加到它们。这些被称为渲染树。
• 将规则应用于渲染树后，应该会出现其布局结构。
• 在绘画阶段，页面的视觉显示显示在屏幕上。

现在，如果 CSS 已经被解析，则解析后的 CSS 中的元素一放在页面上就会立即设置样式。 （最好在 中加载）另一方面，如果 CSS 加载较晚，则元素将以其“无样式形式”显示，直到其相应的样式被解析为“无样式内容的 Flash”。

下图以更简化的方式解释了CSS的工作原理。

CSS 的限制：

• 由于 CSS、CSS 1 到 CSS3 等不同级别，Web 浏览器之间的混淆。
• 由于其开放的基于文本的系统，安全性很少存在。
• 跨浏览器问题，在不同浏览器上的工作方式不同。