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

探究 CSS 如何在HTML中工作

article 2026/2/17 6:27:41

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

 

相关文章：

探究 CSS 如何在HTML中工作

2025/3/28 向全栈工程师迈进&#xff01; 一、CSS的作用 简单一句话——美化网页 <p>Lets use:<span>Cascading</span><span>Style</span><span>Sheets</span> </p> 对于如上代码来说&#xff0c;其显示效果如下&#xff1…...

编程日记 2026/2/13 15:59:29

Verilog中X态的危险：仿真漏掉的bug

由于Verilog中X态的微妙语义&#xff0c;RTL仿真可能PASS&#xff0c;而网表仿真却会fail。 目前进行的网表仿真越来越少&#xff0c;这个问题尤其严重&#xff0c;主要是网表仿真比RTL仿真慢得多&#xff0c;因此对整个回归测试而言成本效益不高。 上面的例子中&#xff0c;用…...

编程日记 2026/2/13 23:56:02

使用 uv 管理 Python 项目

介绍 首先, uv 工具是使用 rust 开发出来的, 速度要比传统的 pip, pipx 等一众包管理工具要快不少. 另外, 除了包管理之外, uv 还提供了脚手架的功能, 使用体验和前端开发使用过的 vue-cli 很相似, 可以帮助我们自动初始化项目, 创建好一个空的包含必要文件结构的文件夹. 此外…...

编程日记 2026/2/4 12:36:17

【操作系统】软中断vs硬中断

在操作系统中&#xff0c;中断&#xff08;Interrupt&#xff09; 是 CPU 响应外部事件的重要机制&#xff0c;分为 硬中断&#xff08;Hardware Interrupt&#xff09; 和 软中断&#xff08;Software Interrupt&#xff09;。它们的核心区别在于 触发方式 和 处理机制。 1. 硬…...

编程日记 2026/2/13 21:40:41

《C++11：通过thread类编写C++多线程程序》

关于多线程的概念与理解&#xff0c;可以先了解Linux下的底层线程。当对底层线程有了一定程度理解以后&#xff0c;再学习语言级别的多线程编程就轻而易举了。 【Linux】多线程 -&#xff1e; 从线程概念到线程控制 【Linux】多线程 -&#xff1e; 线程互斥与死锁 语言级别的…...

编程日记 2026/2/14 21:39:01

19-dfs-排列数字（基础）

题目 来源 842. 排列数字 - AcWing题库 思路 由于相对简单&#xff0c;是dfs的模板题&#xff0c;具体思路详见代码 代码 #include<bits/stdc.h> using namespace std; const int N10; int state[N],path[N];//是否使用过&#xff0c;当前位置 int n; void dfs(int …...

编程日记 2026/2/15 19:14:04

32.代码题

接着上集...... 派对&#xff1a;超时了&#xff0c;总该受到惩罚吧&#xff1f; 洛西&#xff1a;至于吗&#xff1f;就0.1秒&#xff01; 晴/宇&#xff1a;十分应该。 洛西&#xff1a;我..................... 没办法&#xff0c;洛西只能按照要求去抓R了。 1.P1102 …...

编程日记 2026/2/15 20:18:43

nacos 3.x Java SDK 使用详解

Nacos 3.x Java SDK 使用详解 Nacos 3.x 是云原生服务治理的重要升级版本&#xff0c;其 Java SDK 在性能、协议和扩展性上均有显著优化。 一、环境要求与依赖配置 基础环境 JDK 版本&#xff1a;需使用 JDK 17&#xff08;Nacos 3.x 已放弃对 JDK 8 的支持&#xff09;。Spri…...

编程日记 2026/2/1 12:08:54

SPI-NRF24L01

模块介绍 NRF24L01是NORDIC公司生产的一款无线通信芯片&#xff0c;采用FSK调制&#xff0c;内部集成NORDIC自己的Enhanced Short Burst 协议&#xff0c;可以实现点对点或者1对6 的无线通信,通信速率最高可以达到2Mbps. NRF24L01采用SPI通信。 ①MOSI 主器件数据输出&#xf…...

编程日记 2026/2/2 10:34:03

python黑科技：无痛修改第三方库源码

需求不符合 很多时候&#xff0c;我们下载的 第三方库 是不会有需求不满足的情况&#xff0c;但也有极少的情况&#xff0c;第三方库 没有兼顾到需求&#xff0c;导致开发者无法实现相关功能。 如何通过一些操作将 第三方库 源码进行修改&#xff0c;是我们将要遇到的一个难点…...

编程日记 2026/2/2 10:34:53

一区严选！挑战5天一篇脂质体组学 DAY1-5

Day 1! 前期已经成功挑战了很多期NHANES啦&#xff01;打算来试试孟德尔随机化领域&#xff5e; 随着孟德尔随机化研究的普及&#xff0c;现在孟德尔发文的难度越来越高&#xff0c;简单的双样本想被接收更是难上加难&#xff0c;那么如何破除这个困境&#xff0c;这次我打算…...

编程日记 2026/2/1 16:53:07

【JavaScript】合体期功法——DOM（二）

目录 DOM事件监听案例关闭广告随机点名 事件监听版本事件类型 DOM 事件监听 事件&#xff1a;编程时系统内发生的动作或事情&#xff0c;例如用户在网页上单击一个按钮 事件监听&#xff1a;让程序检测是否产生事件&#xff0c;一旦事件触发&#xff0c;立即调用函数做出响应…...

编程日记 2026/1/13 1:34:29

23种设计模式中的中介者模式

定义了一个中介对象来封装一系列对象之间的交互。中介者使各对象直接不再显示地相互引用&#xff0c;从而使其松散耦合&#xff0c;且可以独立地改变它们之间的交互。 通过引入一个中介者对象&#xff0c;来协调和封装多个对象之间的交互&#xff0c;从而降低他们之间的耦合度。…...

编程日记 2026/2/15 19:42:12

量子计算：开启未来计算的新纪元

一、引言 在当今数字化时代&#xff0c;计算技术的飞速发展深刻地改变了我们的生活和工作方式。从传统的电子计算机到如今的高性能超级计算机&#xff0c;人类在计算能力上取得了巨大的进步。然而&#xff0c;随着科技的不断推进&#xff0c;我们面临着越来越多的复杂问题&…...

编程日记 2025/5/13 7:23:36

Docker 的实质作用是什么

Docker 的实质作用是什么 目录 Docker 的实质作用是什么**1. Docker 的实质作用****2. 为什么使用 Docker？****（1）解决环境一致性问题****（2）提升资源利用率****（3）简化部署与扩展****（4）加速开发与协作****3. 举例说明****总结**Docker 的实质是容器化平台，核心作用…...

编程日记 2026/2/12 12:32:15

Assembly语言的装饰器

Assembly语言的装饰器&#xff1a;灵活高效的代码复用 引言 在软件开发中&#xff0c;代码复用和模块化是两个至关重要的概念。它们不仅使得代码的维护变得更为简单&#xff0c;而且能极大提升开发效率。在高级语言中&#xff0c;装饰器是一种非常受欢迎的设计模式&#xff0…...

编程日记 2025/4/19 13:10:37

VITA 模型解读，实时交互式多模态大模型的 pioneering 之作

写在前面：实时交互llm 今天回顾一下多模态模型VITA，当时的背景是OpenAI 的 GPT-4o 惊艳亮相，然而，当我们将目光投向开源社区时，却发现能与之匹敌的模型寥寥无几。当时开源多模态大模型（MLLM），大多在以下一个或多个方面存在局限： 模态支持不全：大多聚焦于文本和图像，…...

编程日记 2025/10/19 10:55:09

自学-408-《计算机网络》（总结速览）

文章目录 第一章 计算机网络概述1. 计算机网络的定义2. 计算机网络的基本功能3. 计算机网络的分类4. 计算机网络的层次结构5. 计算机网络的协议6. 计算机网络的组成部分7. 计算机网络的应用8. 互联网的概念 物理层的主要功能第二章 数据链路层和局域网1. 数据链路层的功能2. 局…...

编程日记 2026/2/2 17:04:38

AF3 FeaturePipeline类解读

AlphaFold3 feature_pipeline 模块 FeaturePipeline 类是一个封装类，通过调用函数np_example_to_features 实现整个数据处理流程。 源代码： def np_to_tensor_dict(np_example: Mapping[str, np.ndarray],features: Sequence[str], ) -> TensorDict:"""C…...

编程日记 2025/5/22 9:20:05

【质量管理】纠正、纠正措施和预防的区别与解决问题的四重境界

“质量的定义就是符合要求”&#xff0c;我们在文章【质量管理】人们对于质量的五个错误观念-CSDN博客中提到过&#xff0c;这也是质量大师克劳士比所说的。“质量的系统就是预防”&#xff0c;防止出现产品不良而造成的质量损失。 质量问题的解决可以从微观和宏观两个方面来考…...

编程日记 2026/2/1 20:46:42

Java面试黄金宝典24

1. 什么是跳表 定义 跳表&#xff08;Skip List&#xff09;是一种随机化的数据结构&#xff0c;它基于有序链表发展而来&#xff0c;通过在每个节点中维护多个指向其他节点的指针&#xff0c;以多层链表的形式组织数据。其核心思想是在链表基础上增加额外层次&#xff0c;每…...

编程日记 2025/5/28 21:47:18

Windows 11系统下Kafka的详细安装与启动指南(JDK 1.8)

1. 安装前准备 在Windows 11系统中安装Kafka之前，需要确保满足以下条件： 1.1 系统要求 Windows 11操作系统（64位）至少4GB内存（建议8GB或更高）至少5GB可用磁盘空间管理员权限1.2 所需工具 浏览器（用于下载软件）解压工具（如7-Zip、WinRAR，Windows 11自带的解压功能也…...

编程日记 2025/4/20 14:37:18

树莓派超全系列文档--(16)无需交互使用raspi-config工具其三

无需交互使用raspi-config工具其三 无需交互的 raspi-configAdvanced optionsExpand filesystemNetwork interface namesNetwork proxy settingsBoot orderBootloader versionWaylandAudio config Update 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文…...

编程日记 2025/4/19 20:33:15

【蓝桥杯】算法笔记1

1.暴力枚举 给定一个正整数n，请找出所有满足a + b = n的整数对(a, b)，其中a和b都是正整数，且a ≤ b。 输入格式：一个正整数n (1 ≤ n ≤ 10⁶) 输出格式：所有符合条件的(a, b)对，每行一对，按a的升序排列。如果没有符合条件的对，输出"No solution"。 问题分…...

编程日记 2025/4/19 19:40:51

爱因斯坦求和 torch

目录 向量点积 矩阵乘法 矩阵转置 向量转换相机坐标系 在 Python 的科学计算库&#xff08;如 NumPy&#xff09;中&#xff0c;einsum 是一个强大的函数&#xff0c;它可以简洁地表示各种张量运算。下面是几个不同类型的使用示例&#xff1a; 向量点积 向量点积是两个向量…...

编程日记 2025/11/25 19:14:43

Linux命令-sed指令

sed命令参数&#xff1a; 基本参数 -n&#xff1a;抑制默认输出&#xff0c;只显示匹配的行。 -e&#xff1a;指定 sed 脚本。 -i&#xff1a;直接修改文件内容。 -f&#xff1a;指定包含 sed 脚本的文件。 -r&#xff1a;启用扩展正则表达式。 常用操作 s&#xff1a;替换字符…...

编程日记 2025/11/17 15:28:29

新手SEO优化实战快速入门

内容概要 对于SEO新手而言&#xff0c;系统化掌握基础逻辑与实操路径是快速入门的关键。本指南以站内优化为切入点&#xff0c;从网站结构、URL设计到内链布局&#xff0c;逐层拆解搜索引擎友好的技术框架&#xff1b;同时聚焦关键词挖掘与内容策略&#xff0c;结合工具使用与…...

编程日记 2026/2/9 16:01:48

如何使不同的窗体控件，适应不同分辨率的屏幕？

问题 当屏幕分辨率提高或降低时&#xff0c;原分辨率显示正常的控件&#xff0c;将变得很小或很大&#xff0c;字体也变得太大或太小。 解决办法 当分辨率变化时&#xff0c;采用递归的方法&#xff0c;对所有的控件放大或缩小。 public static void MainForm_Load(object s…...

编程日记 2026/2/1 0:10:45

sqli-labs靶场 less 11

文章目录 sqli-labs靶场less 11 POS联合注入 sqli-labs靶场 每道题都从以下模板讲解&#xff0c;并且每个步骤都有图片&#xff0c;清晰明了&#xff0c;便于复盘。 sql注入的基本步骤 注入点注入类型 字符型&#xff1a;判断闭合方式 &#xff08;‘、"、’、“”&…...

编程日记 2026/2/7 7:43:26

tomcat部署项目打开是404？

问题描述 今天在帮助一个小伙伴解决问题的时候 部署成功了 就是打不开总是404 他这个项目是公司的一个18年的项目 巨老&#xff01;&#xff01;&#xff01; HTTP状态 404 - 未找到 类型 状态报告 描述 源服务器未能找到目标资源的表示或者是不愿公开一个已经存在的资源表示…...

编程日记 2026/2/1 10:52:01