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

CSS 基础 — 规则长什么样、三种写法怎么选

CSS 基础 — 规则长什么样、三种写法怎么选

这一章讲三件事: CSS 在网页开发里管什么;一条 CSS 规则由哪几部分组成; 以及同一份样式,写在外部文件、HTML 头里、还是元素属性上,该怎么选。 这是全书的第 1 章,后面每一章都在往「一条规则」里填东西——这里先把骨架立起来。

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

全书的决策路径(见总纲第 2 节)从「把样式写得出来」开始。 这一章交付的就是这个起点:规则的结构(第 2 节)、三种写法的取舍(第 3 节)、 以及两条不写错就过不了编译纪律(第 4 节)。读完全书回来再看这一章,它讲的其实是 「所有后续机制(层叠、盒模型、布局)共同作用的那张纸」。

2. 顶层全景:一条规则的解剖

书里给的完整结构就一行1:

selector { property: value; }
  │          │         │
  │          │         └─ 值:想设成什么样(如 red)
  │          └─ 属性:想改哪个方面(如 color 颜色)
  └─ 选择器:选中哪些 HTML 元素(如 p,即所有段落)

图说:一条规则 = 选中谁 + 改成什么样。

CSS 管的是网页的呈现(presentation):颜色、字体、间距、位置; HTML 管的是结构:哪段是标题、哪段是正文、哪个是按钮2。 把两者分开写,是这本书从第 1 章就立下的总原则——术语叫分离关注点: 内容与样式分家,改颜色不用动 HTML,换结构不用动样式,网站才好维护3。

主线例子:把一段文字变红

全书第一条主线例子从这里开始,后面各章会反复回到它。输入就两行:

<p>This text will be red and 16px.</p>
p {
  color: red;
  font-size: 16px;
}

浏览器做的事,书里写得很具体:找到页面上所有 <p> 元素,给它们套上红色文字和 16 像素的字号4。 没有任何「编译」步骤——浏览器读到 HTML 和 CSS,直接照着画。这一条「找到所有 X 然后应用」的动作, 就是后面第 02 章选择器、第 03 章层叠裁决共同服务的对象。

顺带交代词义:这里的 color 指文字颜色,不是「颜色」这个笼统概念; px(像素)是屏幕上的最小色点,16px 大约是普通正文的字号——这两个词后面每章都用。

3. 核心原理:三种写法,一种答案

同一个样式效果,可以写在三个不同的地方。书里给了明确的取舍。

写法一:外部 CSS——独立的 .css 文件

<!-- index.html 的 <head> 里 -->
<link rel="stylesheet" href="style.css">

样式全部住在另一个文件里,HTML 用一行 <link> 把它引进来。 书里说这是行业标准做法(industry-standard),理由是它在扩展性和可维护性上最好5: 一百个页面共用一个 .css 文件,改一处,全站更新。

写法二:内部 CSS——HTML 里的 <style> 标签

<head>
  <style>
    h1 { text-decoration: underline; }
  </style>
</head>

样式写在 HTML 的 <head>(文件头部,存页面元信息的地方)里的 <style> 标签里,只对这一个页面生效。 书里给的适用场景:单页特有的小样式。

写法三:内联 CSS——元素自己的 style 属性

<button style="color: white; background-color: black;">Click Me</button>

样式直接写在元素标签的 style 属性上,只对这个元素生效。 书里的立场最硬:生产环境里极少用它——它让代码杂乱、难以更新6; 只有两种场合合理:快速试一下效果,或者样式由 JavaScript 动态算出(那种情况代码本来就在元素上)。 另外从第 03 章会知道,内联样式的优先级极高(仅次于 !important), 用它等于亲手制造后面难以覆盖的麻烦——这是「别用内联」的第二个、书里这章没讲的理由。

回到主线例子:三种写法各走一遍

把同一个按钮变白字黑底:

写法写在哪影响范围书里的定位
外部style.css 里的 .btn { … }所有用它的页面行业标准做法,默认选它5
内部页面 <head> 的 <style>仅本页单页特有样式
内联元素 style="…"仅本元素只用于临时测试和 JS 动态样式6

4. 两条写作纪律:分号与小写

CSS 不报编译错误——写错了,浏览器只是静默地跳过那一行(这本书的第 23 章把这条性质叫「沉默的错误」)。 所以写作纪律就是防错本身:

每条声明以分号 ; 结尾。 书里把它列为最常见的 CSS 损坏原因7。 漏一个分号,坏掉的是下一条声明,不是这一条——排查时容易找错地方。

全小写。 CSS 本身大小写不敏感,但书里说行业标准是小写8,照做即可。 (注意:HTML 里类名是区分大小写的,.Box 和 .box 是两个类——这是第 02 章的事。)

注释:给人看的部分

/* 单行注释 */
/*
   多行
   注释
*/

注释写在 /* … */ 里,浏览器忽略,只给开发者看。 书里给了一个大文件的实用模式:用注释把样式表分成功能区块(导航、页脚……), 长文件翻得动9。顺带一提,CSS 没有 // 单行注释写法——那是别的语言的。

5. 作者的判断与证据

这本速查书的「判断」以断言为主,没有展开论证,照实分开标:

  • 「外部 CSS 是行业标准做法」——作者断言,未给证据,但与业界实践一致5。
  • 「内联样式让代码杂乱、难以更新」——作者断言;真正的硬伤是优先级陷阱(见第 03 章),书里此处没提。
  • 「漏分号是最常见的 CSS 损坏原因」——经验性断言,符合日常观察7。

我们没有在书中找到任何带数据或实验的证据;这本书的证据类型从头到尾是「作者的经验断言 + 最小例子」, 读全书时保持这个预期就不会失望。

6. 边界与局限

  • 这一章没讲 <link> 的更多属性(如媒体查询用法)、也没讲 @import——两者都不是这本书的范围。
  • 没讲 CSS 文件加载的先后顺序对最终样式的影响——那是第 03 章层叠的事。
  • 没讲浏览器默认样式(行话叫 user agent styles,说的就是浏览器这个「用户代理」自己)的存在——按钮、标题长得「自带样子」, 是因为浏览器先垫了一份默认样式;这本书到第 21、23 章才间接碰到它。

判断(我们的,不是书里的): 这一章的取舍本身是对的:对零基础读者, 「规则结构 + 三种写法 + 两条纪律」恰好是第一天需要且仅需要的全部。 真正该补的一课是「浏览器自带默认样式」——不知道它存在, 初学者第 2 天就会撞墙(「我没设过 margin,哪来的空白?」),而本书把它拖到了第 21 章。 如果错,会错在: 如果读者的第一课有老师现场答疑,默认样式可以在撞墙时再补,这一课不提前讲也无妨。

7. 可带走的

  1. CSS 管呈现,HTML 管结构;分开写才好维护——这是全书的起手原则3。
  2. 一条规则 = 选择器 + 声明块;声明 = 属性 + 值 + 分号1。
  3. 默认用外部 .css 文件(<link> 引入),这是行业标准做法5。
  4. 内部 <style> 留给单页特有样式;内联只用于临时测试和 JS 动态样式6。
  5. 每条声明以分号结尾;漏掉的分号会让下一条声明失效7。
  6. 全小写;注释用 /* … */,长文件用它分区块9。
  7. CSS 写错不报错、只静默跳过——「没反应」先怀疑写错,这是第 23 章的总纲。

8. 原文地图

主题原书章原文位置
CSS 管呈现、HTML 管结构Chapter 1: Introduction to CSStext/02-ch01-1-chapter-overview.txt:7(搜「presentation」)
分离关注点同上text/02-ch01-1-chapter-overview.txt:21(搜「Separation of Concerns」)
规则结构 selector { property: value; }同上text/02-ch01-1-chapter-overview.txt:33(搜「property: value」)
外部 CSS 是行业标准做法同上text/02-ch01-1-chapter-overview.txt:60(搜「industry-standard」)
内联的适用场合与禁用理由同上text/02-ch01-1-chapter-overview.txt:150(搜「rarely used in production」)
漏分号是最常见损坏原因同上text/02-ch01-1-chapter-overview.txt:154(搜「Missing Semicolons」)
全小写惯例同上text/02-ch01-1-chapter-overview.txt:156(搜「lowercase」)
注释分区块同上text/02-ch01-1-chapter-overview.txt:136(搜「Organizing Stylesheets」)

Footnotes

  1. 出处:「Chapter 1: Introduction to CSS」(text/02-ch01-1-chapter-overview.txt:33,搜「property: value」)。原文语法行:selector { property: value; },随后逐一解释选择器、声明块、属性、值四个部件(第 35–43 段)。 ↩ ↩2

  2. 出处:「Chapter 1: Introduction to CSS」(text/02-ch01-1-chapter-overview.txt:7,搜「presentation of web pages」)。原文:「the language used to control the presentation of web pages. While HTML provides the structure of a page, CSS provides the style.」 ↩

  3. 出处:「Chapter 1: Introduction to CSS」(text/02-ch01-1-chapter-overview.txt:21,搜「Separation of Concerns」)。原文:CSS 让设计(CSS)与内容(HTML)保持分离,网站更易维护。 ↩ ↩2

  4. 出处:「Chapter 1: Introduction to CSS」(text/02-ch01-1-chapter-overview.txt:56,搜「applies a red text color」)。原文输出解释:「The browser finds all <p> elements and applies a red text color and a font size of 16 pixels.」 ↩

  5. 出处:「Chapter 1: Introduction to CSS」(text/02-ch01-1-chapter-overview.txt:60,搜「industry-standard」;同文件 :168 搜「best practice for scalability」)。原文:链接独立 .css 文件「是行业标准做法」;快速总结里写「External CSS is the best practice for scalability and maintenance.」 ↩ ↩2 ↩3 ↩4

  6. 出处:「Chapter 1: Introduction to CSS」(text/02-ch01-1-chapter-overview.txt:149,搜「Quick Overrides」;:160 搜「messy and difficult to update」)。原文:内联 CSS 在生产中极少用,但适合快速测试或 JS 动态样式;「Don't use inline CSS for large projects; it makes the code messy and difficult to update.」 ↩ ↩2 ↩3

  7. 出处:「Chapter 1: Introduction to CSS」(text/02-ch01-1-chapter-overview.txt:154,搜「Missing Semicolons」)。原文:「Forgetting this is the most common cause of broken CSS.」 ↩ ↩2 ↩3

  8. 出处:「Chapter 1: Introduction to CSS」(text/02-ch01-1-chapter-overview.txt:156,搜「lowercase」)。原文:「While CSS is generally case-insensitive, it is best practice to write everything in lowercase.」 ↩

  9. 出处:「Chapter 1: Introduction to CSS」(text/02-ch01-1-chapter-overview.txt:136,搜「Organizing Stylesheets」)。原文:开发者常用注释在大文件里切分区块(NAVIGATION STYLES、FOOTER STYLES)便于浏览。 ↩ ↩2

CSS Reference Guide — 全书拆解

Previous Page

选择器 — 怎么选中你想改的那个元素

Next Page

On this page

CSS 基础 — 规则长什么样、三种写法怎么选1. 这一章在全书链条里的位置2. 顶层全景:一条规则的解剖主线例子:把一段文字变红3. 核心原理:三种写法,一种答案写法一:外部 CSS——独立的 .css 文件写法二:内部 CSS——HTML 里的 <style> 标签写法三:内联 CSS——元素自己的 style 属性回到主线例子:三种写法各走一遍4. 两条写作纪律:分号与小写注释:给人看的部分5. 作者的判断与证据6. 边界与局限7. 可带走的8. 原文地图Footnotes