CSS 是什么、为什么重要 — 从骨架到衣服¶

这一章讲三件事: CSS 这个名字指什么、它和 HTML 是怎么分工的; 样式可以写在哪三个地方、为什么其中一个是正路; 「层叠」这两个字到底是什么意思。读完你会跑通自己的第一个样式页面——这是后面六章一切内容的起点。 不需要任何基础,遇到的生词都在当场解释。

1. 这一章讲什么¶

一个网页没有样式时长什么样?为什么「外观」要从「内容」里拆出来单独写? 拆出来之后,样式又能写在几个地方?这一章回答这三个问题, 并顺手把「Cascading(层叠)」这个藏在 CSS 名字里的核心概念讲掉。

它在全书链条里的位置:这是第 ① 级台阶。 第 02 章开始教你怎么写规则, 但「为什么写规则」「写在哪里」这两个问题必须先在这一章落定。

2. 两个词,先说清¶

HTML 是描述网页内容的语言:标题、段落、图片、链接,全用它写。它是你打开「查看源代码」时看到的那一层骨架。

CSS 是描述网页外观的语言,全名 Cascading Style Sheets,中文译作「层叠样式表」¹。同一个 HTML 骨架,配不同的 CSS,可以长得完全不一样—— 书里把它俩的关系比作骨架和衣服:HTML 提供结构,CSS 负责让它好看²。

有多重要?书里给了一个对照:没有 CSS,每个网页都会像一个纯文本文档—— 黑字、白底、链接没有样式、没有任何排版;颜色、字体、间距、对齐、布局、动画,全是 CSS 带来的³。你可以现在就在浏览器里验证:随便打开一个新闻网站,按 F12 打开开发者工具, 把样式全关掉,就能看到那个「纯文本文档」的样子(验证方法不在书里,是我们给的)。

为什么要分成两层,而不是把「好看」直接写进内容里? 这是软件工程里一次影响深远的分层决策,值得在这里想透: 一个网站往往有几十上百个页面;如果外观混在内容里, 「把全站按钮从灰的改成蓝的」就要改几百处。拆成两层后,外观集中写在一处,内容页面只管内容—— 改样式不动内容,换皮肤不动骨架。(这条理由书里是用「可复用」三个字点到的,见第 3 节;展开是我们补的。)

3. 顶层全景:样式可以写在三个地方¶

  一个 HTML 页面
      │
      ├─ ① 内联:样式直接贴在某个元素上        ← 快,但乱
      ├─ ② 内部:样式集中写在页面的 <head> 里   ← 适合单页,不能跨页复用
      └─ ③ 外部:样式写在单独的 .css 文件里,页面用一行声明引入  ← 正路

  图说:三种写法浏览器都认,差别只在「样式离内容多远」。
  离得越远,越容易复用,也越不容易乱。

4. 核心原理¶

写法一:内联——样式贴在元素上¶

HTML 里每个元素都可以带一个 style 属性,样式直接写在里面:

<p style="color: red;">This is red text.</p>

效果是这行字变红。优点是快——改一处立即生效,不用碰别处。 缺点是乱:样式散落在内容的每个角落,页面大了之后,想统一改一种颜色, 得在几百个元素里翻箱倒柜。书里对它的定语是「small changes」——只适合小改⁴。

写法二:内部——样式集中在页面头部¶

HTML 页面有个 <head> 区块,装的是「关于这个页面的信息」而非正文。在 <head> 里放一个 <style> 标签,里面写样式:

<head>
  <style>
    p { color: blue; }
  </style>
</head>

效果是全页所有 <p> 段落变蓝。比内联进了一步:样式至少聚在一处了。但书里点出它的硬伤:不能跨页复用——你有第二个页面,就得把这堆样式复制一遍; 以后改颜色,得记住所有复制过的地方⁵。

写法三:外部——样式写进单独文件(正路)¶

这是书里标了「Most Common」的一种⁶。做法分两步:

第一步,建一个后缀为 .css 的纯文本文件(比如 style.css),里面写:

p { color: green; }

第二步,在 HTML 页面的 <head> 里用一行声明把它引进来:

<link rel="stylesheet" href="style.css">

这行的意思拆开看:link 是「我要引用一个外部资源」; rel="stylesheet" 说明这个资源的角色是样式表(stylesheet 就是「一张样式表」); href="style.css" 给出文件的位置⁷。从此这个样式文件可以被任意多个页面引用——改一处,全站生效。

主线例子:一个页面从头走到尾¶

书里给了一个可以直接照做的完整流程,我们把它当本章的主线例子走一遍。你有两个文件,浏览器打开 HTML 文件后发生的事,一步一步是这样:

文件一 index.html:

<!DOCTYPE html>
<html>
<head>
  <title>My First Styled Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome!</h1>
  <p>This page uses CSS.</p>
</body>
</html>

文件二 style.css:

body {
  background-color: #e0f7fa;
  font-family: Georgia, serif;
  text-align: center;
}
h1 { color: #00796b; }
p  { color: #004d40; }

浏览器从上到下读 HTML,读到一个元素就去看样式表里有没有管它的规则:

步骤	读到的内容	应用到页面上的效果
1	`<head>` 里的 `<link ... href="style.css">`	浏览器先去把 `style.css` 整个读进来,记成一张「规则清单」
2	`<body>` 开始	清单里有一条管 `body` 的:背景 `#e0f7fa`(一种很浅的青色)、字体 Georgia、文字居中 → 整页立即换底、换字体、所有内容居中
3	`<h1>Welcome!</h1>`	清单里有一条管 `h1` 的:颜色 `#00796b`(深青绿)→ 标题变色
4	`<p>This page uses CSS.</p>`	清单里有一条管 `p` 的:颜色 `#004d40`(更深的青绿)→ 正文变色
5	页面读完	你看到一个浅青底、居中、标题和正文两种深青绿的页面——而不是黑字白底

(以上代码和颜色值全部来自原书本章的练习;#e0f7fa 这类「井号加六个字符」的颜色写法, 第 04 章会专门讲清它怎么读。)

为什么这条路径有效? 因为它把「外观」彻底搬出了内容文件: HTML 里没有一个字在说「我是什么颜色」,它只报自己的身份(body、h1、p); 颜色全在另一个文件里,按身份对号入座。这就是「分层」在浏览器里的真实工作方式。

「层叠」是什么意思:三个发号施令的人,谁说了算¶

这是全书第一个概念难点,书里用了一个场景来讲⁸。想象有三个人先后对同一个按钮下指令:

浏览器自带的默认规则说:「所有按钮做成灰色。」
你在外部 CSS 文件里写:「按钮做成蓝色。」
你又在这个按钮自己的标签上写了内联样式:「这个按钮做成红色。」

最后按钮是红的。 因为浏览器拿规则时按「谁更具体、谁更靠近这个元素」排优先级: 写在元素身上的(内联)比写在外部文件里的具体,外部文件里的又比浏览器默认的具体—— 越具体、越靠近的指令,覆盖越笼统的。 这种「按优先级从高到低应用规则」的机制, 就是 CSS 名字里那个 Cascading(层叠)⁹。

这里只讲直觉版——「更具体者赢」。两条规则具体程度一样时怎么分胜负? 有一套精确的计算规则(行话叫优先级,specificity),这本书没有展开, 我们在第 5 节「边界」里如实标注。日常使用里,「内联 > 外部文件 > 浏览器默认」这条直觉足够应付。

5. 作者的判断与证据¶

这一章基本没有「证据」性质的内容——它是概念与操作章,作者的判断都写在推荐里:

判断:外部 CSS 是正路。 依据是「clean, organized, and reusable」(干净、有组织、可复用); 代价是要多管一个文件,但作者补了一句「it's worth it」——值得¹⁰。
判断:默认用类、慎用 ID 的习惯从第一天就要养。 这条出现在章末的练习说明里, 第 02 章会展开成正式的规矩。
事实性陈述(可直接验证):没有 CSS 的网页是纯文本文档的样子;样式三种写法浏览器都支持。这两条在任何浏览器里都能当场验证,不需要信作者。

6. 边界与局限¶

「层叠」只给了直觉。 「更具体者赢」在两条规则同样具体时会失灵—— 那时浏览器有一套分数化的优先级计算,这本书全文没有讲。靠这本书入门后,迟早要在别处补上这一课(MDN 的 specificity 一篇即可)。
#e0f7fa 这类颜色代码没有当场解释。 第 1 章就出现了 HEX 颜色, 但「井号加六个字符怎么读」要等到第 04 章才讲。阅读时只需知道「它是一种颜色的编码」。
<link> 那一行没有逐个部分讲。 原书只让你照抄。我们在第 4 节补了逐部分的解释(标明为补充)。
练习假设你用「双击文件」的方式打开页面。 这在你自己电脑上成立; 将来把网站放到网上托管,路径问题会复杂一些——超出本书范围。

7. 可带走的¶

本章主线例子,一行写完: 两个文件(.html + .css)放在同一个文件夹 → 浏览器读 HTML,遇到 <link> 先去读样式表 → 之后每读到一个元素, 就照样式表里管它的规则上色 → 浅青底、居中、标题正文两个深青绿。

CSS 管外观,HTML 管内容和结构——这一句是全书的地基;
CSS 全名 Cascading Style Sheets(层叠样式表),「层叠」= 规则按优先级应用;
样式三种写法:内联(贴在元素上,快而乱)、内部(聚在页面头部,不可跨页)、外部(单独文件,正路);
引入外部样式用 <link rel="stylesheet" href="...">,一个文件可被任意多页共用;
冲突时谁赢:元素身上的 > 外部文件里的 > 浏览器默认的——越具体越赢;
书里给的颜色写法(#e0f7fa)是 HEX 编码,第 04 章才讲怎么读,现在照抄即可;
只需要文本编辑器 + 浏览器就能开始,不需要装任何东西。

8. 原文地图¶

主题	原书章	原文位置
CSS 定义、骨架与衣服的比喻	Chapter 1: What is CSS and Why It Matters	`text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:5`(搜「Cascading Style Sheets」) · `text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:5`(搜「skeleton」)
没有 CSS = 纯文本文档	同上	`text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:9`(搜「plain Word document」)
HTML/CSS 分工表(菜谱/房子/摆盘)	同上	`text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:35`(搜「work together」)
三种写法、内联快而乱	同上	`text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:50`(搜「three main ways」) · `text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:57`(搜「hard to maintain」)
内部写法不可跨页复用	同上	`text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:83`(搜「Not reusable」)
外部写法是正路	同上	`text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:84`(搜「Most Common」) · `text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:104`(搜「Clean, organized」)
层叠:三个人下指令	同上	`text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:109`(搜「how rules are applied」) · `text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:118`(搜「most specific rule」)
建文件夹、两个文件、双击打开	同上	`text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:126`(搜「my-first-website」) · `text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:137`(搜「stylesheet」) · `text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:169`(搜「Double-click」)
主线例子的全部代码与颜色	同上	`text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:153`(搜「e0f7fa」)

出处:「Chapter 1: What is CSS and Why It Matters」第 5 段(text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:5,搜「Cascading Style Sheets」)。原文:「CSS stands for Cascading Style Sheets.」中文版读者注意:本书库一律用英文原名 CSS,不译。 ↩
出处:「Chapter 1: What is CSS and Why It Matters」第 6–8 段(text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:5,搜「skeleton」)。原文:「If HTML is the skeleton of a webpage … then CSS is the clothing and makeup.」 ↩
出处:「Chapter 1: What is CSS and Why It Matters」第 9–11 段(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: black text, white background, unstyled links, and no layout」。 ↩
出处:「Chapter 1: What is CSS and Why It Matters」第 51–57 段(text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:52,搜「style attribute」;:57,搜「hard to maintain」)。原文对内联写法的评价:Pros 是「Quick and easy for small changes」,Cons 是「Messy and hard to maintain for bigger projects」。 ↩
出处:「Chapter 1: What is CSS and Why It Matters」第 59–83 段(text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:83,搜「Not reusable」)。原文对内部写法的评价:Pros 是「Good for small pages or single files」,Cons 是「Not reusable across multiple pages」。 ↩
出处:「Chapter 1: What is CSS and Why It Matters」第 84 段(text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:84,搜「Most Common」)。小节标题原文:「3. External CSS (Most Common)」。 ↩
出处:「Chapter 1: What is CSS and Why It Matters」第 98–100 段(text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:100,搜「stylesheet」)。原文给出 <link rel="stylesheet" href="style.css"> </head>。逐字段解释(rel 是 relationship、href 是文件地址)是我们补的,原书没有展开。 ↩
出处:「Chapter 1: What is CSS and Why It Matters」第 112–120 段(text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:112,搜「giving instructions」)。原文:「Imagine three people giving instructions to style a button」——默认灰色、外部蓝色、内联红色。 ↩
出处:「Chapter 1: What is CSS and Why It Matters」第 109–110 段(text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:109,搜「how rules are applied」)。原文:「The ‘Cascading’ in CSS refers to how rules are applied in order of importance.」按钮最终变红见第 118 段(搜「most specific rule」):浏览器采用最具体的规则,按钮变红。 ↩
出处:「Chapter 1: What is CSS and Why It Matters」第 102–106 段(text/02-ch01-chapter-1-what-is-css-and-why-it-matters.txt:104,搜「Clean, organized」;:106,搜「worth it」)。原文对外部写法的评价:Pros 是「Clean, organized, and reusable」,Cons 是「Requires managing multiple files (but it’s worth it!)」。 ↩