编程语言研究书库
CSS 参考指南

速查索引与术语表 — 这本书的正确用法

速查索引与术语表 — 这本书的正确用法

原书第 24 章 + 书末术语表,合并讲——这是全书唯一一章「不是教知识、而是教查法」的。 它本身也值得认真读一遍:索引怎么组织、为什么这么收、三条元知识(简写复位、默认值、 all: unset),比 22 张卡片更保值。

1. 这一章在全书链条里的位置

前 23 章把现代 CSS 的部件逐个讲完;这一章是「把整本书折进兜里」的一步: 书自己定位为字母序字典——「你记得要做什么、忘了确切语法或默认值时」来查1。 全书的最佳用法由此定型:通读建地图(第 1–23 章),日常查卡片(第 24 章), 概念核对翻术语表。

2. 顶层全景:一张卡片的四个格子

索引每张卡片四行,格式统一2:

┌─────────────────────────────────────────────┐
│ accent-color                                │  ① 属性名(即锚点)
│ Syntax: auto | <color>                      │  ② 合法写法
│ Default: auto                               │  ③ 默认值
│ Example: input { accent-color: #ff0000; }   │  ④ 能跑的一行
└─────────────────────────────────────────────┘

四行各解决一问:叫什么、怎么写、不写时是什么、抄哪行能跑。 注意第 ③ 行——默认值是速查卡里最被低估的一格,下一节展开。

3. 核心原理:三条元知识

元知识一:简写会复位,改单项用长手

索引开头先立的概念,也是全书最后一条纪律:「许多属性(如 background、font)是 简写(shorthand),把好几个子属性合在一行;只想改其中一项时,用长手 (longhand,单独的那个,如 background-color)往往更安全」3。

background: red;   /* 顺手把 background-image 复位成 none、repeat 复位成 repeat … */
background-color: red;  /* 只动颜色,其余子属性原样 */

原书第 23 章的 best practice 把话说得更白:写 background: red 时, 你隐式地把 background-image 设成了 none4。在层叠(第 03 章)的世界里, 「隐式复位」= 无声覆盖——这就是「改个颜色,图没了」这类灵异事件的来源。

元知识二:默认值是调试的另一半

索引第二个概念:每个 CSS 属性都有一个出厂默认值(initial value), 知道它,才能理解「为什么我没设任何东西,元素就已经这样了」5。 几张卡片的默认值,串起来就是全书的「默认值地图」:

卡片默认值对应的坑
box-sizingcontent-box第 04 章的 250px 盒子
positionstatic第 05 章 z-index 失灵
overflowvisible内容溢出照画
margin / padding / gap / border-radius0「没设哪来的空白」——浏览器默认样式垫的
font-sizemedium(≈16px)1rem ≈ 16px 的换算原点
transitionall 0s ease 0s写了属性没写时长 = 没有过渡(第 11 章)
flex0 1 auto子项默认不长大、会收缩

留意最后一行 transition 的默认值——0s 的时长,这正是第 11 章「时长是唯一不能省的」 在索引层的倒影。默认值表不是死记的,是排障时查「现在生效的到底是哪个值」的索引。

元知识三:all: unset —— 第三方组件的重置大招

.widget {
  all: unset;       /* 所有属性全部复位(继承的继承、不继承的回默认) */
  display: block;   /* 再从干净的画布上重建 */
  background: white;
}

all: unset 一条把每个 CSS 属性打回初始(第 03 章的 unset 语义)—— 嵌进你页面的第三方小部件,外面世界可能带进来各种样式,all: unset 是给它 「净身」的标准开局6。书里的定位:对第三方 widget 有用7—— 之所以强调第三方,是因为自己项目的样式不该乱到需要这一招。

主线例子:一次真实的「查索引」

场景:忘了「表单控件原生颜色」那个属性叫什么、怎么写。翻索引到 A 打头:

accent-color
Syntax: auto | <color>
Default: auto
Description: Sets the color of interactive controls (checkboxes, radio buttons).
Example: input { accent-color: #ff0000; }

走一遍:名字 accent-color(勾选框、单选钮的原生颜色)——记忆里「有个 accent 什么的」 对上了;默认值 auto(跟随系统);抄例子改值,完成。一次典型的速查闭环8。 这张卡片也补了书内的一个空白:accent-color 在正文 23 章里没出现过, 只在索引里登场——索引偶尔是正文未收属性的唯一入口。

4. 术语表:全书的「名词锚」

书末术语表(Glossary)按字母序收 40 来个概念词,每个一两句定义9。 它的价值不在「学」,而在对表——快速核对「书里说的 cascade/stacking context/fr 和我理解的是不是同一件事」。几个例子:

术语表的定义(大意)对应我们的章节
Cascade:「源顺序、特异性与重要性共同裁决冲突规则的算法」10第 03 章
At-rule:以 @ 开头的指令,如 @media、@keyframes第 11、12 章
Containing Block:另一个元素定位时的参照元素第 05 章
Fr Unit:网格容器里剩余空间的分数第 07 章
Stacking Context:沿 Z 轴的三维层次,主要由 z-index 管理第 05 章(边界)
Viewport / Viewport Units:可视区域 / 相对它的单位第 12 章

有趣的缺席:术语表没收 specificity(特异性)之外的计分细节,也没收 BEM—— 不,BEM 在(B 打头);真正值得注意的是它没收 @layer、:has()、容器查询—— 与正文的口径一致:这本书的「现代」止于它成书时的实用面11。

5. 作者的判断与证据

  • 「本章为快速查语法设计」——自我定位,章首明写1。
  • 「索引适合快速记忆提示,深度请回正文」——索引开头建议用简写求效率、用长手求精确, 这是全书唯一一处「教读者怎么读这本书」的元文字3。
  • 「默认值帮助理解元素行为」——学习方法断言5。
  • 证据类型:工具章无证据负担;卡片内容本身(语法、默认值)是可核验事实, 与主流文档一致性是这本书可靠性的全部基础。

6. 边界与局限

  • 索引只收了 22 个属性,而 CSS 常用属性在百量级——「Complete」是书名而非事实: 没收的包括 white-space、cursor、clip-path、mask、scroll-behavior、 inset、aspect-ratio 等实用件。查不到的别假设「不存在」,去 MDN。
  • 每张卡片只有一行例子,不含输出解释(正文各章才有)——卡片是「想起法」, 「懂为什么」仍要回章节。
  • 默认值一列偶有「因浏览器而异」的诚实说明(如 color 的 Default: Varies)12—— 但多数卡片没标注浏览器差异,跨浏览器核默认值仍以 MDN 为准。
  • 术语表词条没有交叉引用(如 Cascade 条目没指向 Specificity 条目),查找性一般。

判断(我们的,不是书里的): 这一章最好的读法是「当说明书读」——四格卡片的格式 值得抄:任何团队的内部样式规范,用「语法/默认值/一句说明/一行例子」四行描述一个约定, 信息密度刚刚好。三条元知识(简写复位、默认值地图、all: unset)是全书的压舱石, 建议放在团队 onboarding 文档的第一页。 如果错,会错在: 随着 AI 补全和 IDE 内联文档普及,「纸质速查」的使用场景在萎缩—— 这本索引的现实价值可能只剩「默认值一列的速览」;把它当主力参考的人会失望, 把它当地图册的人不会。

7. 可带走的

  1. 全书用法:通读 1–23 建地图,日常查第 24 章卡片,概念核对翻术语表1。
  2. 卡片四格:语法、默认值、一句话说明、一行例子——写团队规范可直接借用此格式2。
  3. 简写会复位没写的子属性;改单项用长手(background vs background-color)34。
  4. 默认值地图(box-sizing: content-box、position: static、transition 时长 0s……) 是排障时「现在生效的是哪个值」的索引5。
  5. all: unset + 重建两行 = 第三方组件的重置开局6。
  6. 索引只收 22 属性,查不到的去 MDN,别当「不存在」。
  7. accent-color 这类「只在索引登场」的属性,提示索引偶尔是正文的唯一入口8。

8. 原文地图

主题原书章原文位置
索引定位(字母序字典)Chapter 24: CSS Property Quick Indextext/25-ch01-1-chapter-overview.txt:7(搜「alphabetical dictionary」)
简写 vs 长手同上text/26-ch03-3-property-feature-reference.txt:5(搜「Shorthand vs. Longhand」)
默认值概念同上text/26-ch03-3-property-feature-reference.txt:7(搜「Initial Values」)
accent-color 卡片同上text/26-ch03-3-property-feature-reference.txt:13(搜「accent-color」)
box-sizing 卡片同上text/26-ch03-3-property-feature-reference.txt:53(搜「box-sizing」)
flex 卡片(0 1 auto)同上text/26-ch03-3-property-feature-reference.txt:85(搜「flex」)
transition 卡片(0s)同上text/26-ch03-3-property-feature-reference.txt:173(搜「transition」)
通用 reset同上text/26-ch03-3-property-feature-reference.txt:195(搜「Universal Reset」)
all: unset同上text/26-ch03-3-property-feature-reference.txt:208(搜「all: unset」)
简写隐式复位同上text/26-ch03-3-property-feature-reference.txt:221(搜「implicitly setting」)
术语表定位Glossary of CSS Termstext/27-fm-a.txt:5(搜「rapid-lookup」)
Cascade 词条同上text/27-fm-a.txt:29(搜「Cascade」)
At-rule 词条同上text/27-fm-a.txt:15(搜「At-rule」)
Fr Unit 词条同上text/27-fm-a.txt:51(搜「Fr Unit」)
Stacking Context 词条同上text/27-fm-a.txt:99(搜「Stacking Context」)

Footnotes

  1. 出处:「Chapter 24: CSS Property Quick Index」(text/25-ch01-1-chapter-overview.txt:7,搜「alphabetical dictionary」)。原文:「This final chapter serves as an alphabetical dictionary of the most commonly used CSS properties. It is designed for the moment you remember what you want to do but forget the exact syntax or the default behavior of a property.」 ↩ ↩2 ↩3

  2. 出处:「Chapter 24: CSS Property Quick Index」(text/26-ch03-3-property-feature-reference.txt:13,搜「accent-color」)。原文卡片四行:Syntax、Default、Description、Example,其后各卡片(align-items、background、border-radius 等)格式相同。 ↩ ↩2

  3. 出处:「Chapter 24: CSS Property Quick Index」(text/26-ch03-3-property-feature-reference.txt:5,搜「Shorthand vs. Longhand」)。原文:「Many properties (like background or font) are shorthands that combine multiple values. If you only need to change one aspect, using the longhand (like background-color) is often safer.」 ↩ ↩2 ↩3

  4. 出处:「Chapter 24: CSS Property Quick Index」(text/26-ch03-3-property-feature-reference.txt:221,搜「implicitly setting」)。原文:「When using a shorthand like background: red;, you are also implicitly setting background-image: none; and background-repeat: repeat;.」 ↩ ↩2

  5. 出处:「Chapter 24: CSS Property Quick Index」(text/26-ch03-3-property-feature-reference.txt:7,搜「Initial Values」)。原文:「Every CSS property has a default 'initial' value. Knowing these helps you understand why elements behave the way they do before you apply your own styles.」 ↩ ↩2 ↩3

  6. 出处:「Chapter 24: CSS Property Quick Index」(text/26-ch03-3-property-feature-reference.txt:208,搜「all: unset」)。原文:「The all property can be used to reset every CSS property to its initial state—useful for third-party widgets.」示例注释:「Resets all inherited and non-inherited properties」。 ↩ ↩2

  7. 出处:「Chapter 24: CSS Property Quick Index」(text/26-ch03-3-property-feature-reference.txt:205,搜「third-party widgets」)。原文:「useful for third-party widgets.」 ↩

  8. 出处:「Chapter 24: CSS Property Quick Index」(text/26-ch03-3-property-feature-reference.txt:13,搜「accent-color」)。原文:Description 为「Sets the color of interactive controls (checkboxes, radio buttons)」,Example 为 input { accent-color: #ff0000; }。accent-color 在正文 23 章中未出现,仅索引收录。 ↩ ↩2

  9. 出处:「Glossary of CSS Terms」(text/27-fm-a.txt:5,搜「rapid-lookup」)。原文:「This glossary provides quick definitions for the essential terminology used throughout the CSS Reference Guide.」 ↩

  10. 出处:「Glossary of CSS Terms」(text/27-fm-a.txt:29,搜「Cascade」)。原文:「The algorithm that determines which CSS rules apply to an element when multiple rules conflict, based on source order, specificity, and importance.」 ↩

  11. 出处:「Glossary of CSS Terms」全文核对(text/27-fm-a.txt),未见 @layer、:has()、container queries 词条;BEM 词条见第 19 段。 ↩

  12. 出处:「Chapter 24: CSS Property Quick Index」(text/26-ch03-3-property-feature-reference.txt:67,搜「usually black」)。color 卡片的 Default 一行:「Varies (usually black)」。 ↩

工程实践与踩坑 — 命名、组织与最常见的六个错

Previous Page

CSS 入门指南 — 全书拆解

Next Page

On this page

速查索引与术语表 — 这本书的正确用法1. 这一章在全书链条里的位置2. 顶层全景:一张卡片的四个格子3. 核心原理:三条元知识元知识一:简写会复位,改单项用长手元知识二:默认值是调试的另一半元知识三:all: unset —— 第三方组件的重置大招主线例子:一次真实的「查索引」4. 术语表:全书的「名词锚」5. 作者的判断与证据6. 边界与局限7. 可带走的8. 原文地图Footnotes