CSS 入门指南 — 全书拆解
CSS 入门指南 — 全书拆解
30 秒导读: 这是一本 72 页的小册子——我们这份拆解比原书还厚—— 回答一个问题:从没写过样式的人,怎么从零走到能做出一个像样的网页? 它按「写法 → 规则 → 文字 → 颜色 → 布局 → 响应式 → 综合项目」七步走, 每一步都给出可以直接照抄的代码和练习。真正的价值不在任何一个技巧, 而在它从头到尾贯彻的一条分工约定:内容归 HTML,外观归 CSS,二者分开写。
本组文档是我们重写的完整拆解,七章。读完不必看原书。
1. 先交代清楚:这是谁在什么时候写的
| 作者 | 史蒂文·麦克纳尼(Steven Mcananey),以个人身份出版的入门读物 |
| 成书时间 | 2025 年 6 月首版(原书版权页写的首版日期;这本书没有出版社信息) |
| 篇幅 | 72 页、正文约 3.4 万字符,全库最小的一本,七章可以一口气读完 |
| 面向读者 | 零基础:只要求你会用文本编辑器和浏览器,不要求任何编程经验 |
一件事必须先说,否则会误读这本书的定位:
它不是规范手册,也不是设计理论——它是一本带练手册。 每一章的结构都一模一样:先讲一小段概念 → 给一段可以直接运行的代码 → 末尾留一个「动手改一改」的练习。书里所有代码用的都是当时(2025 年)的现行写法, 机制层面没有会过时的东西;但「断点取 480/768/1024 这些数」「Google Fonts 这样引入」 这类具体做法属于行业惯例而非定律,出门遇到别的口径不必奇怪(第 6 章展开)。
2. 全书一条主线(读完这一节,你就懂了这本书)
这本书是一条从头贯到尾的推理链:每一步都是被上一步逼出来的。 下面把这条链完整走一遍——不看后面任何一章,只读这一节,你也能把这本书讲给别人听。
细节全部留给对应的章节,这里只讲「发生了什么、为什么只能这样」。
① 一个网页其实是两层:结构一层,外观一层
最早的网页只有一层:写一段话,浏览器原样显示——黑字、白底、从上到下依次排。 后来网页要变「好看」,要颜色、字体、分栏、对齐——如果把这些全混在内容里, 每改一次外观都得重写一遍内容。
所以这一层被拆出来了,单独用一种语言写,这种语言就是 CSS; 管内容的那层叫 HTML。书里给的分工一句话说死: 没有 CSS,每个网页都长得像一个纯文本文档;CSS 负责把视觉做出来1。 (两个词的确切含义,第 01 章第 2 节讲。)
这本书剩下的六章,就是把「外观」这一层从「会写」到「写得像样」走完的七级台阶。
② 外观这层写在哪:三种写法,一种胜出
样式可以直接写在某个元素上,可以写在页面头部,也可以写在一个单独的文件里再被页面引入。 三种都能用,但第三种(单独文件)从第一章就被定为正路: 一个网站几十上百个页面,样式只写一份,所有页面共用;改一次,全站生效。 前两种只在临时试验和小单页时才用。(第 01 章)
③ 这一层怎么写:一条规则两个部分,关键是「选中谁」
CSS 的全部写法就是一条规则的骨架:先写你要动哪部分,再写怎么动。 「动哪部分」那半句叫选择器,是全书第一个真正的关卡—— 因为页面上元素很多,你必须有本事只说「就这三个卡片」而不牵连别的。 书里给了三件武器:按元素类型选、按类选(可复用)、按 ID 选(应唯一),再教你怎么把它们组合。 并在这里立下第二条约定:默认用类,别滥用 ID——因为类可复用,ID 钉死在一个元素上。(第 02 章)
④ 装饰是最先见效的:文字、颜色、边框
会选中了,先拿什么练手?书里选了最直观的三样:文字长什么样、颜色怎么给、盒子的边怎么画。 文字那一章教会你一件比任何单个属性都重要的事:字体要留备用—— 指定的字体在别人的机器上不一定有,得排个「找不到就用下一个」的队; 颜色那一章教会你同一种颜色有四种写法,从「颜色名」到「红黄蓝各多少」, 以及背景可以不是颜色而是一张图或一段渐变; 边框那一章把前面学的捏成一个「卡片」——这本书第一次让读者做出一个看起来像现代网页的部件。(第 03、04 章)
⑤ 真正的分水岭是布局:每个元素都是一个盒子
会装饰单件了,下一个问题自然冒出来:这些东西怎么摆? 书里在这里放出全书最要紧的一个模型:网页上每个元素,浏览器都当成一个盒子, 盒子从内到外分四层——内容、内边距、边框、外边距。 你平时调的对齐、间距、留白,全部是在动这四层。 再往上,现代布局只有两件工具:Flexbox 管一行或一列内怎么分空间,Grid 管一张二维的格子表。 掌握了这两个,杂志式的复杂排版就有了着落。(第 05 章)
⑥ 最后一块拼图:同一套写法,适配所有屏幕
到这里,页面在电脑上已经像样了。但今天一半以上的网页浏览发生在手机上—— 这是书里给出的理由,一句没有 CSS responsive 手艺的网站会在手机上「字太小、图出屏、 只能 awkward 地缩放」的警告2。 答案不是给手机另写一套页面,而是让同一套 CSS 在窄屏幕上自动换布局: 尺寸不写死(用相对单位),再配上一句「屏幕窄到什么程度就改用另一套规则」的条件语句。 这一步走完,一个零基础读者手里的东西就第一次称得上「一个真正的网站」。(第 06 章)
⑦ 收尾:把七级台阶合成一个作品,再指一条下一步的路
最后一章把前面所有东西倒进一个完整的项目——一个响应式个人作品集页: 先画结构、再写样式、最后加一条「窄屏时把横排改成竖排」的条件。 并集中列了初学者最常踩的五个坑(写死像素宽度、忘了统一盒模型口径、滥用 ID、不在手机上测、 字体颜色堆太多),和一份可以继续自学的工具清单。 书的最后把读者指向下一段路:动画、SCSS、Tailwind/Bootstrap 框架、JavaScript。(第 07 章)
⑧ 一句话收尾
这本书自己给的压缩版,在最后一章的「全书要点」里:
CSS 让你完全控制一个网站长什么样、怎么动;先搭清楚的结构,再上一致的样式; 布局靠盒模型、Flexbox、Grid;写得干净、对手机友好,然后一直做小项目练手。
把这句话翻译回我们的主线,就是:结构外观两层分开(①②)、规则由选择器和声明组成(③)、 装饰从文字颜色边框开始(④)、布局建立在盒模型上(⑤)、同一个页面要能适配所有屏幕(⑥)、 最后用一个真项目把它们焊在一起(⑦)。
3. 七章地图
这张表不用记任何术语——每一章的名字后面,写的是「读完你能做出什么」。
| 章 | 读完你就能 |
|---|---|
| 01 CSS 是什么、为什么重要 | 说清 CSS 和 HTML 的分工;自己建两个文件,让页面换上背景色、字体和居中 |
| 02 语法与选择器 | 看懂任何一条 CSS 规则的结构;按元素、类、ID 精准选中页面上的任意部分 |
| 03 文字与字体 | 把一段文字的字号、颜色、行距、对齐全部调到位;给链接做悬停效果;引入一款网页字体 |
| 04 颜色、背景与边框 | 用四种写法给颜色;做渐变背景和圆角阴影;独立做出一个现代风格的卡片 |
| 05 布局:盒模型、Flexbox 与 Grid | 用盒模型四层解释任何间距现象;横排三卡片、左右分栏、三列网格都能自己写 |
| 06 响应式基础 | 写一套「宽屏横排、窄屏竖排」的页面;让图片不撑破手机屏 |
| 07 综合项目 | 从头做出一个响应式作品集页;避开五个最常见的初学者错误;知道下一步学什么 |
推荐顺序: 01 → 02 → 03 → 04 → 05 → 06 → 07,这也是原书的顺序。 只想要主线的话,读本页第 2 节加第 01、05、06 三章就够。
4. 这本书覆盖什么、不覆盖什么
这两张表和上面那张地图一个口径:不用记任何术语。
覆盖(而且讲得比多数免费教程清楚)——读完你能:
- 说清 CSS 和 HTML 各自管什么,为什么分开;把样式写进单独文件并让页面引用它;
- 看懂并写出一条规则:选中谁、改哪些外观、一个声明里冒号分号各管什么;
- 用三种选择器精准选中元素,并知道为什么默认该用「类」;
- 把文字的字号、颜色、行距、对齐调到专业水准,给链接做交互效果,引入免费网页字体;
- 用四种等价写法表达颜色,做渐变背景、圆角、阴影,独立做出一个卡片部件;
- 用「每个元素都是一个盒子」的模型解释一切间距与对齐;
- 用 Flexbox 和 Grid 做出横排、分栏、网格这些现代布局;
- 写一套在电脑和手机上都成立的页面:相对单位 + 「窄到一定程度换布局」的条件规则。
不覆盖(别指望在这本里找):
| 缺什么 | 说明 |
|---|---|
| 动画 | 过渡、关键帧动画只在结尾一句带过,整本没有展开 |
| 优先级怎么算 | 「更具体的规则赢」只有直觉版;两条规则撞车时浏览器到底怎么排座次,没有精确规则 |
| 定位与叠放 | 把一个元素钉在页面某个位置、让它浮在别的元素上面——这本书一个字没讲 |
| CSS 变量与预处理器 | 自定义属性、SCSS 只在结尾点名,不展开 |
| 浏览器内部 | 浏览器拿到 CSS 之后怎么读懂、怎么布局、怎么画出来——只讲「怎么写」,不讲「引擎怎么执行」 |
| 可访问性与性能 | 颜色对比够不够、样式会不会拖慢页面——没提 |
| 用 JavaScript 改样式 | 让样式「动起来」的编程手段只在结尾点名 |
5. 我们的判断
判断(我们的,不是书里的): 这本书今天最值的用法是当「第一条学习路径」而不是「参考书」。 它的全部内容在 MDN 等免费文档里都能查到,而且查到的会更全; 它不可替代的是把七级台阶排成一条没有岔路的直道——每一步只引入一个新概念, 每一步末尾都有得动手。对零基础读者,「顺序」本身就是教学内容。 如果错,会错在: 如果读者已经有了一点前端经验,这条直道会显得过于平缓, 那时直接读 MDN 的教程与本文档的第 05、06 两章,效率更高。
判断(我们的,不是书里的): 把这本书放进「编程语言与系统研究」书库,着眼点不在技巧,而在 CSS 这个语言样本: 它是工业界部署最广的声明式语言——程序员只写「要什么效果」, 冲突解决(层叠)、按环境求值(媒体查询)、按结构匹配(选择器)全都由引擎代办。 书里那句「HTML 是骨架、CSS 是衣服」的比喻背后,是软件工程里一次影响深远的分层决策; 想研究「把什么留在语言里、什么交给执行环境」这类问题,这是最近、最好得的样本。 如果错,会错在: 如果读者的目标其实是做出东西来(而不是研究语言), 那这本书提供的语言视角就是额外负担,直接照着书里练习做即可,不必关心这一层。
判断(我们的,不是书里的): 书里有两处「硬给数字」的地方要打折听: 一是断点(480/768/1024 像素)是常用惯例,不是标准——书里把它列成表格, 容易让初学者当成规矩背;二是「手机流量占一半以上」这句论证, 原书没有给出来源。数字的氛围是对的(移动设备确实是主流),但引用时别带上精确数字。 如果错,会错在: 如果原书引的行业报告恰好是准确的,那「别带精确数字」就只是过严; 这不影响任何机制层面的结论。
6. 许诺兑现表
这份拆解里每一处「第 N 章讲」「见下一节」,都在这里记一行、逐行核过。 核的是两件事:那一章真的讲了吗?讲的是不是许诺的那件事,而不是同名的另一件事。
| 许诺在哪 | 许诺了什么 | 应兑现在哪 | 核过了吗 |
|---|---|---|---|
| 本页 §2 ① | CSS 与 HTML 两个词的确切含义 | 01 §2「两个词,先说清」 | ✓ |
| 本页 §2 ② | 三种写法、为什么外部胜出 | 01 §3 | ✓ |
| 本页 §2 ③ | 选择器三件武器与「默认用类」 | 02 §3、§5 | ✓ |
| 本页 §2 ④ | 备用字体、四种颜色写法、卡片 | 03 §3;04 §2、§7 | ✓ |
| 本页 §2 ⑤ | 盒模型四层、Flexbox 与 Grid 的分工 | 05 §3、§4、§5 | ✓ |
| 本页 §2 ⑥ | 相对单位与「窄到一定程度换布局」 | 06 §3、§4 | ✓ |
| 本页 §2 ⑦ | 五个常见错误与工具清单 | 07 §4、§5 | ✓ |
| 本页 §3 地图 01 | 建两个文件让页面换样式 | 01 §6 | ✓ |
| 本页 §3 地图 02 | 看懂一条规则、精准选中 | 02 §2、§3 | ✓ |
| 本页 §3 地图 03 | 文字调到位、链接悬停、网页字体 | 03 §3、§4、§5 | ✓ |
| 本页 §3 地图 04 | 四种颜色写法、做出卡片 | 04 §2、§7 | ✓ |
| 本页 §3 地图 05 | 间距现象、横排/分栏/网格 | 05 §3、§4、§5、§7 | ✓ |
| 本页 §3 地图 06 | 宽屏横排窄屏竖排、图片不撑破屏 | 06 §4、§5 | ✓ |
| 本页 §3 地图 07 | 作品集页、五个错误、下一步 | 07 §2、§4、§5、§6 | ✓ |
01 §6 末 | 规则的内部结构、冒号分号 | 02 §2 | ✓ |
02 §7 末 | 选中了之后具体能改哪些外观 | 03、04 全章 | ✓ |
03 §6 末 | 文字排好了,怎么把「框」装饰起来 | 04 全章 | ✓ |
04 §7 末 | 会装饰单件后,怎么摆位置 | 05 全章 | ✓ |
05 §8 末 | 布局在电脑上成立,手机上怎么办 | 06 全章 | ✓ |
06 §7 末 | 零散招数怎么合成一个真页面 | 07 全章 | ✓ |
拆解写于 2026-10-19,依据 2025 年 6 月首版(自购 PDF,ISBN 979-8231263608)。原始书籍文件不入库,
本组文档是我们自己的重写;每条引用都可用 node scripts/book-verify.mjs beginners-guide-to-css 回核。
Footnotes
-
出处:「Chapter 1: What is CSS and Why It Matters」第 9 段(
text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:9,搜「plain Word document」)。原文:没有 CSS,「every website would look like a plain Word document」——黑字、白底、没有样式的链接、没有布局;CSS 带来颜色、字体、间距、对齐、布局和动画。 ↩ -
出处:「Chapter 6: Responsive Design Basics」第 23 段(
text/07-ch06-chapter-6-responsive-design-basics.txt:23,搜「50%」)。原文:「over 50% of web traffic comes from mobile devices」,所以响应式不再可选、而是必需;「字太小、图出屏、缩放别扭」的警告见同章第 16–18 段(搜「too small」)。 ↩