CSS概述

撰写时间：2023-07-02

修订时间：2025-03-01

关于CSS

CSS第一个发布的规范是CSS Level 1。当CSS Level 1发布时，所有的规范都发布在一个文档中。CSS Level 2也是集中于一个文档。此后，CSS工作组选择了模块化的方式，每个模块仅规范了一部分的CSS内容。这使得各部分的CSS规范得以快速地发布。

随着越来越多的CSS模块规范的发布，跟踪各个CSS规范的最新稳定版本也随之越来越难。于是CSS工作组便发布了一个集中列出各个CSS规范的当前进度的页面，其网址是https://www.w3.org/Style/CSS/current-work。

在该页面下，有一个CSS Snapshot，并在该名称后面加上各年年份，用以分类列出截止到该年，各种CSS的工作进度。2025年2月25日，发布了2024年的CSS Snapshot 2024，其网址是https://www.w3.org/TR/css-2024/。

任何CSS规范都分为3个阶段：

Working Draft (WD): 这是CSS规范的设计阶段。
Candidate Recommendation (CR): 这是CSS规范的测试阶段。
Recommendation (REC): 在此阶段，CSS规范已经全部完成，并开始进入维护阶段，跟踪错误并在必要时发布更新版本。

对于各个CSS规范，CSS没有使用版本的概念，而是使用了level的概念。更高level的规范支持所有低level的规范，并加入新功能。

level与版本有何不同？使用版本，则旧版的功能可能会被新版所覆盖、代替，从而导致旧版不会被使用。而使用level，则可保证所有的level都获得各个浏览器的完美的支持。

各个CSS规范共分为3个等级：

CSS Level 1

CSS工作组认为CSS Level 1被认为是过时的规范。

CSS Level 2

CSS Level 2最早发布时，当时W3C尚未定义Candidate Recommendation阶段，因此它从Working Draft阶段就直接进入了Recommendation阶段，从而导致存在许多错误。鉴于此，W3C就发布了CSS Level 2 Revision 1 (CSS2.1)以取代CSS Level 2。

CSS2.1定义了CSS Level 2的内容，并遵从CSS Style Attributes规范。

还有一个CSS2.2规范，但尚处于Working Draft阶段。因此，CSS2.1仍是被广泛使用的CSS Level 2规范。

CSS Level 3

CSS Level 3遵照CSS2.1规范，以模块化的方式来定义各个CSS规范。

没有CSS Level 4或更高等级的规范。个别CSS模块可能发展出CSS Level 4的版本，但这意味着它可能不会被所有浏览器共同遵循。

CSS规范分类

每年的CSS规范都会不一样，2025年之前分为3类，2025年新增预CR模块一类。

CSS — 官方定义

这些模块已经非常稳定，在我们谈到CSS时，应包含以下模块：

预CR模块

这一部分是CSS Snapshot 2024新增的一部分，准备提升为Candidate Recommendation (CR) 阶段，但仍有一些小问题或需要更多的测试报告。

相对稳定的CSS模块

这部分的CSS模块，其设计阶段已经完成，但尚缺乏充分的测试。这些模块很可能在下一期的Snapshot中会被收录到官方定义中。

与CSS Snapshot 2023相比，Media Queries Level 4, CSS Scroll Snap Module Level 1, CSS Scrollbars Styling Module Level 1提升到预CR阶段。

不够完善的CSS模块

这一部分的CSS，或者尚未完全设计完毕，或者规范文档编写不全面，因此尚需更多的测试及排错。在将来的Snapshot中也可能会被收录到官方定义中。

与CSS Snapshot 2023相比，上面列表的排列顺序变化较大，且新加入了Motion Path Module，Scroll Anchoring Module，Object Model，Color Module Level 5，Selectors Level 4。

下面的CSS模块提升到预CR阶段：

如何学习CSS

一个很好的开始之处是：W3C CSS Home。上面汇集了规范列表、最新事件、学习资源以及较好的软件。

CSS的模块很多，在应用CSS排版时不可能全部记住相应的规则，而这些规则又散布于各个CSS模块中，不易查找。但CSS SnapShot页面中有各个关键字的索引，因此，可将该页面视为CSS规则的总搜索页面。在页面中找到对应的关键字，点击它，会链接到相应CSS规范。

学习CSS最有效的方法是亲自动手实践，不断地修改各个规则的值，并对比查看它们的效果。

由于CSS具有从父容器中继承属性的特性，因此，在学习CSS过程中，最好新建一个全新的网页，并在其中仅使用相关的CSS规则，这样可避免受到其他元素的意外干扰。

分类专题学习，各个专题集中突破。一次只学一个专题，并尽量全面涵盖该专题的所有规则。

DeepSeek应用

CSS规范分成了很多模块，而我们是针对各个具体的HTML标签进行设置，这不免要涉及到多个模块中的CSS属性名与属性值，若要分别到查找CSS各个模块，工作量很大。此时，可向DeepSeek提出类似问题：有哪些CSS属性可用以设置HTML5中类型为"range"的input控件？。若要纳入CSS最新规范的内容，可将深度思考与联网搜索这2个选项同时打开。