当前位置：首页 > news >正文

探究 CSS 如何在HTML中工作

news 来源：原创 2025/7/17 10:14:47

2025/3/28

向全栈工程师迈进！

一、CSS的作用

简单一句话——美化网页

<p>Let's use:<span>Cascading</span><span>Style</span><span>Sheets</span>
</p>

对于如上代码来说，其显示效果如下：

当加上CSS样式之后如下所示：（这里不需要明白CSS怎么写，怎么运作，只需要明白加了CSS后，网页会变的好看）

二、CSS究竟如何工作

当浏览器展示一个文件的时候，它必须兼顾文件的内容（HTML）和文件的样式信息（CSS），下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

2.1 载入 HTML 文件

浏览器会首先载入HTML文件（比如向服务器访问，网络获取等）

2.2 构建HTML对应的DOM树

<!DOCTYPE html>
<html>
<head><title>示例页面</title>
</head>
<body><h1>欢迎来到我的网站</h1><p>这是一个示例段落。</p>
</body>
</html>其对应的DOM树如下：Document||---<html>---||            |---<head>---||                         |---<title>||---<body>---||---<h1>|---<p>

所以首先，会将html文件构建成一个DOM树，然后根据树结构的每个节点依次的添加CSS样式。以下是上面的一个案例：

<p>Let's use:<span>Cascading</span><span>Style</span><span>Sheets</span>
</p>

在这个 DOM 中，<p>元素对应了父节点，它的子节点是一个 text 节点和三个对应了<span>元素的节点，<SPAN>节点同时也是他们中的 Text 节点的父节点。

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN└─ "Sheets"

上图就是浏览器怎么解析之前那个 HTML 片段——它生成上图的 DOM 树形结构，然后解析 CSS，其CSS如下：

span {border: 1px solid black;background-color: lime;
}

可以看到唯一的选择器就是span元素选择器，浏览器会非常快速的把同样的规则直接使用在三个<span>标签上，然后渲染出图像到屏幕。

三、如果CSS编写出错，会怎么样？

其实现在浏览器并不会实现所有新的CSS样式，使用新CSS样式开发了一个炫酷网页，然后是一个版本特别老的浏览器访问的话，其CSS样式是会显示不出来的，当浏览器遇到无法解析的 CSS 选择器或声明的时候会发生什么呢？答案就是浏览器什么也不会做，继续解析下一个 CSS 样式！即直接忽略。

相似的，当浏览器遇到无法解析的选择器的时候，他会直接忽略整个选择器规则，然后解析下一个 CSS 选择器。

四、何为选择器？

如下图中的 span 就是一个选择器，他是用来告诉浏览器HTML元素应当是被选为应用规则中的CSS属性值的方式。

所以上述的span选择器的作用就是选中html的span标签，将span标签的样式按着如下设计。当然选择器不止这一种方式，在后面我们会单独的用一篇文章来讲解CSS中的选择器种类，以及其使用规则。这里以探究CSS如何工作为目的解析CSS。

Life is not a track, you can do whatever you want to do.

2025/3/28