CSS 基础 — 规则、层叠、盒模型与 display

这一章讲 CSS 的「操作系统」: 规则怎么写(选择器、属性、值); 两条规则打架时听谁的(层叠与优先级——这是全章最重要、初学者最容易翻车的一块); 以及每个元素在页面上到底占了多大地方(盒模型 + display)。外加颜色、字体、阴影渐变这些「化妆术」,和过渡、动画这两件「时间武器」。 原书这一章 3.2 万字符,是全书的重心;我们的拆解也最长。

1. 先看现象:改一行颜色,为什么整个页面都变了

第 04 章你用内联样式给 Anna's Kitchen 的标题涂了黄色。设想现在要改版:全站字体换、主色换、所有段落的间距调大。如果样式都写在标签里,你得逐行翻几百个标签; 而书里在这一章让你做的第一件事,是把样式全部搬进一个单独的 .css 文件—— 然后「改一个文件,整个网站换脸」¹。

这个瞬间值得停下来: 同一个需求(改样式),两种写法的工作量差出两个数量级。 CSS 的全部设计——选择器、层叠、盒模型——都是为了让「改样式」这件事可集中、可复用、可预测。

2. 顶层全景:一张规则的全景图

  一条 CSS 规则
      p { color: red; font-size: 18px; }
      └┬┘  └─────┬──────┘ └──────────┘
     选择器      属性:值      声明(可多条,分号隔开)

  规则放哪(三种来源,按推荐顺序):
      外部 .css 文件 ← <link> 引入      ← 全站共享,一改全改(默认选择)
      内部 <head> 里的 <style>          ← 单页独用
      行内 style="…"                    ← 单个元素(第 04 章的临时工)

  冲突了听谁(裁判程序,从高到低):
      ① !important 标记                  ← 一票否决,慎用
      ② specificity:行内 > ID > 类/属性 > 标签
      ③ 同级别:谁写在后面听谁

  每个元素占多大地方:
      盒模型:content ← padding ← border ← margin(四层圈)
      display:block(独占一行)/ inline(只占内容宽)/ inline-block(同行且可调宽高)

  图说:四行就是本章四段——语法、来源、裁判、空间。

3. 语法层:选择器、属性、值

一条规则三个成分²:选择器(selector)说「哪些元素」;属性(property)说「改它的哪个方面」 (颜色、字号、外边距……);值(value)说「改成什么样」。

书里教了三种最常用的选择器³:

选择器	写法	命中谁	典型用途
通配选择器	`* { … }`	页面上的每一个元素	开局清零:`* { margin: 0; padding: 0; }` 抹掉各家浏览器不一样的默认间距⁴
类型选择器	`h1 { … }`	所有这个标签	给某类元素定基调:`h1 { font-size: 24px; }`⁵
类选择器	`.highlight { … }`	所有带这个 class 的元素	最常用:「给这几段黄底」而不动其他段落⁶

类选择器要成对出现:CSS 里写 .highlight { background-color: yellow; }, HTML 里给元素挂 class="highlight"。同一个类可以挂任意多个元素,一个元素也可以挂多个类 (class="highlight large",空格分隔)——这是它和 id 的本质区别(id 一页一个、只挂一个)。

一个思想实验帮你记住选择器的存在意义: 没有类选择器,你想让三段话黄底,只能给每段写行内样式; 有了它,你在 HTML 里贴三个相同的标签,在 CSS 里写一条规则。重复从「n 份」变成「1 份」—— 这就是「标记身份」对「写死样式」的全部优势。

4. 来源层:三种写法,一个主选

规则可以写在三个地方,书里按「由内到外」教了一遍⁷:

行内(inline):直接写在元素的 style 属性里——第 04 章用过,只影响这一个元素; 内部(internal):写在 HTML 的 <head> 里一对 <style> 标签中,只影响这一个页面⁸; 外部(external):写在独立的 .css 文件里,HTML 用 <link rel="stylesheet" href="styles.css"> 引入⁹。

书里给的选择标准可以直接当行业惯例用:多页网站一律用外部——可复用、好维护、浏览器还能把 .css 文件缓存起来,整站共用一份¹⁰;单页小 demo 用内部图省事; 行内只留给「真的是一次性的」场景(以及 JavaScript 动态改样式,第 12 章)。

5. 裁判层:规则打架,听谁的——本章的心脏

现在到了全章最重要的一节。CSS 的全称是 Cascading Style Sheets—— cascading(层叠)说的就是:同一样式可能来自好多条规则,浏览器要裁定谁生效¹¹。「层叠」这个名字不是装饰,它就是 CSS 的核心机制。

首先,样式有三个来源¹²:浏览器的默认样式(user-agent styles,比如 h1 又大又粗)、用户在浏览器设置里自定义的、以及网页作者写的(你)。作者样式按引入方式再分三类(行内/内部/外部)。 你写的几乎所有样式都属于「作者」这一层——但要知道浏览器默认样式的存在, 因为你「没写任何样式」时看到的排版,全是它给的;而 * 清零清的就是它。

然后,冲突按 specificity(优先级,字面是「特异性」——指这条规则瞄准得有多精确)排队¹³:

  行内样式(style="…")          ← 最精确:指名道姓这一个元素
      ↓ 压过
  ID 选择器(#header)            ← 次精确:一页只有一个
      ↓ 压过
  类选择器、属性选择器(.btn、[type="text"])  ← 再次:按身份归类
      ↓ 压过
  类型选择器(p、div)             ← 最宽:所有这种标签

两条同级规则再平手,后写的赢——「后定义者优先」(last rule applied)¹⁴。最顶上还悬着一个核弹 !important,加在任意声明后,压过以上全部¹⁵—— 但书里的立场和业界一致:能不用就不用。为什么?它会破坏上面那套可预测的裁判程序, 今天你 !important 救急,明天就得 !important 盖 !important,层叠从此变成军备竞赛。

主线例子:同一段文字,四条规则抢它

这一章的主线例子,是「Anna's Kitchen 的 <h2>The Home of the Roast!</h2> 最终显示成什么颜色」。让四条规则同时存在(场景为演示编排的,不是书里的原例;每条规则的写法书里都教过):

/* 文件 styles.css,从上到下的书写顺序 */
h2          { color: blue; }    /* 规则 A:类型选择器,最宽 */
.subtitle   { color: green; }   /* 规则 B:类选择器 */
#tagline    { color: purple; }  /* 规则 C:ID 选择器 */

<h2 id="tagline" class="subtitle" style="color: red;">The Home of the Roast!</h2>
<!-- 规则 D:行内样式,写 red -->

裁定过程,一步一看:

  第 1 轮:四条规则都命中这段文字 → 进入层叠
  第 2 轮:比 specificity → 行内(D)最高,直接胜出
  结果:这段文字是红色

  变体:把 style="color: red" 从标签上删掉
  第 2 轮:ID(C)压过类(B)压过类型(A)
  结果:紫色

  变体:再删掉 id="tagline"
  第 2 轮:类(B)压过类型(A)
  结果:绿色

  变体:再删掉 class="subtitle",只剩规则 A 和一条后写的 h2 { color: black; }
  第 2 轮:两条都是类型选择器,平手
  第 3 轮:后写赢
  结果:黑色

  图说:每删一个属性,结果就变一次——specificity 的阶梯就是这么一级一级压下来的。

这个例子是全书的「层叠」演示器:四种优先级各赢一次,每次都只有一个变量在变。以后页面颜色「不听话」,先别怀疑浏览器——回到这张阶梯图,问自己:是不是有一条更精确的规则在压它?

判断(我们的,不是书里的): specificity 阶梯是 CSS 被初学者骂得最多的地方, 「改了没反应」九成是它。但我们替它说句话:它不是复杂,是把「谁说了算」从约定变成了算法—— 你不需要记住每条规则是谁写的,只要会数「行内/ID/类/标签」的层级。真正该骂的是 !important 滥用,不是阶梯本身。 如果错,会错在: 现代 CSS 正在引入 @layer 规则层,让作者主动划分优先级组—— 它是阶梯之上的新一层组织方式;但阶梯本身在 2026 年依然是最底层的裁定机制,这一点没有变。

6. 化妆台:颜色、字体、特效

语法和裁判是「法」,这一节是「术」——让页面好看的具体道具。

颜色:命名色与十六进制

最简单的颜色写法是命名色:red、gold、darkblue——约 140 个 predefined 颜色名, VS Code 输入时还有取色器弹出来帮你挑¹⁶。正经项目用得更多的是十六进制(hex)颜色: # 加 6 位十六进制数,每两位一组,依次是红、绿、蓝三通道的强度,00 是关、FF(= 十进制 255)是拉满¹⁷:

  #RRGGBB
   │││││└─ 蓝:00 关 ~ FF 满
   │││└─── 绿:A5 = 十进制 165,约六成
   │└───── 红:FF = 255,拉满
  例子:#FFA500 = 红满 + 绿六成 + 蓝关 = 橙色
       #FFFFFF = 三通道全满 = 白
       #000000 = 三通道全关 = 黑

  图说:颜色 = 三盏灯的亮度组合;十六进制只是「写 255 用两位字符」的紧凑记法。

三个数字成对重复时还能缩写:#FFA500 → #FA0,#FFFFFF → #FFF¹⁸。配套的三个常用属性:color(文字色)、background-color(背景色)、border-color(边框色)¹⁹。

字体:Google Fonts 的接法

font-family 指定字体;想要网页上没有的字体,最通行的免费来源是 Google Fonts—— 开源字体、托管在谷歌服务器上,用 <link> 把字体文件引到你的页面里²⁰。书里给的接入代码值得看一眼,因为它演示了一个性能小手法:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

前两行 preconnect 的意思是「我待会儿要从这两个域名拿东西,现在先把手握上」—— 浏览器会提前建立连接,等第三行真正请求字体时省一次握手延迟。第三行里 wght@400;700 是「只要常规和粗体两种字重」:字体文件按字重分文件,用几种引几种, 别把整个字体全家桶都下载下来。这个细节书只演示没解释,我们补上:引字体时的克制,和第 05 章「图要压缩」是同一个工程观。

特效四件套:阴影、圆角、渐变,加文字版

书里教的四种视觉特效,语法都不难,难在每个值的含义:

盒子阴影 box-shadow: 4px 4px 10px darkgrey;——四个值依次是: 水平偏移(正右负左)、垂直偏移(正下负上)、模糊半径(0 是硬边实影,越大越糊)、颜色²¹。

圆角 border-radius: 15px;——盒子四角的弯曲半径;还能分角调: border-top-left-radius 等四个属性各管一角²²。

线性渐变 background: linear-gradient(to right, orange, red);—— 括号里第一项是方向(to right 左到右),后面接两种以上颜色,浏览器在两者之间平滑过渡²³。另有两个亲戚:radial-gradient(从中心向外,径向)和 conic-gradient(绕中心转,锥向)。

文字版:文字阴影 text-shadow: 2px 2px 5px lightgrey;(值序同盒子阴影)²⁴; 渐变文字是「背景裁成文字形状」的小技巧:background: linear-gradient(...) + -webkit-background-clip: text; color: transparent;²⁵——看到 -webkit- 前缀要知道, 这是「还在标准化路上、各家浏览器要加前缀」的历史遗留写法,2026 年的现代浏览器大多已不需要前缀, 但书里的写法兼容性最广。

伪元素与伪类:两个长得像、本质不同的东西

这一章有一对最容易混的术语,书里分两节教的,我们摆在一起对照²⁶²⁷:

	伪元素 pseudo-element	伪类 pseudo-class
管什么	元素内部的某个部分	元素所处的状态
写法	双冒号 `::first-letter`	单冒号 `:hover`
例子	`::before`(内容前插入)、`::after`、`::first-line`、`::selection`(选中文字的高亮色)	`:hover`(悬停)、`:focus`(聚焦)、`:active`(按住)、`:checked`(勾选)、`:nth-child(2n)`(偶数个子元素)

典型的配合战:.box:hover { background-color: lightcoral; }——「鼠标悬停在 .box 上时,底色变浅珊瑚红」²⁸。 伪类是「交互感」的开关:没有它,CSS 只能画静态页面;有了它,按钮能「回应」鼠标了。第 10 章给表单按钮做悬停变色,用的就是它。

7. 时间武器:过渡与动画

伪类让样式「能换」,但默认换得很生硬——瞬间跳变。两种机制把时间引进来:

过渡(transition):transition: background-color 2s;——声明「这个属性变化时,用 2 秒平滑地变过去」²⁹。悬停变色从「跳」变成「两秒内渐渐晕开」。它只负责「变化过程好看」,不负责「什么时候变」—— 变的时机由伪类(悬停)或其他 CSS 决定。

动画(animation):由两件套组成——@keyframes 规则定义关键帧(0% 是什么样、50% 是什么样、100% 是什么样), animation 属性把它应用到元素上(名字、时长、循环次数、速度曲线)³⁰。书里那个盒子的例子:0% 红、在最左;25% 橙、右移 100px;50% 黄、右移 200px;75% 橙、退回 100px; 100% 红、回最左——循环播放,你就看到一个边变色边左右滑动的盒子³¹。

  transition:谁触发(hover)→ 怎么过渡(2 秒)     ← 「被动响应」
  animation:按剧本(keyframes)自动演,可循环      ← 「主动表演」

  图说:过渡是“别人推一下,你优雅地变”;动画是“自己拿着剧本一直演”。

8. 空间层:盒模型——所有布局问题的总根源

现在回到最根本的问题:页面上每个元素,到底占了多大地方? CSS 的答案是一个「盒子套盒子」的模型,书里给了四层,从里到外³²:

  ┌─────────────── margin(外边距)───────────────┐  ← 盒子与盒子之间的空隙,透明
  │  ┌──────────── border(边框)────────────┐  │
  │  │  ┌─────── padding(内边距)───────┐  │  │  ← 内容到边框的空隙,算盒子的
  │  │  │        content(内容)         │  │  │
  │  │  └──────────────────────────────┘  │  │
  │  └────────────────────────────────────┘  │
  └───────────────────────────────────────────┘

  图说:总占位 = content + padding + border + margin。改任何一个,周围都会动。

第 04 章你在表格单元格上写过 padding: 10px,现在你知道它的正式身份了——内容和边框之间那圈留白。四层的分工:

content:装东西的地方,宽高默认指它;
padding:内容到边框,盒子的「内衬」,有背景色;
border:边线,有粗细、样式、颜色;
margin:盒子之外,盒子与邻居之间的呼吸空间,透明、不占背景。

为什么盒模型是「总根源」? 因为「这个元素太宽了把旁边挤下去了」「两个块之间的缝怎么这么大」「我设了 width: 400 为什么实际 440」——这类问题的答案,全部在这四层里。尤其那个 440 的谜:默认算法 width 只算 content,padding 和 border 会外加; 一个 width: 400px; padding: 20px; border: 2px 的盒子,实际占位是 400 + 20×2 + 2×2 = 444px。想改成「width 就是总宽」,用一条 * { box-sizing: border-box; } 开局——第 13 章的项目里你会看到它的实战价值。

display:盒子怎么排队

盒模型说盒子多大,display 说盒子怎么站队。书里教了三种值³³:

display	站法	能设宽高?	例子
`block`	独占一整行,上下叠	能	`div`、`p`、`h1`、`li` 默认
`inline`	跟在文字流里,只占内容那么宽	不能(设了也无效)	`span`、`strong`、`a` 默认
`em`… 不,看右边
`inline-block`	像 inline 一样排在一行里,但像 block 一样可调宽高	能	`img`、`button` 默认

书里点出 inline-block 最经典的用途:把竖排的列表项改成横排——导航栏就是一排横着的 <li>, li { display: inline-block; } 是 2010 年代做导航的标准做法(第 08 章 flexbox 会接手这件事)³⁴。

一个_inline 陷阱_要现在就种下: inline 元素(比如链接)的 width、height 无效, 因为「它的高度由里面的文字行高决定」。第 12 章用 JavaScript 改样式时,改不生效先看 display 是不是 inline—— 这个坑每个前端都掉过一次。

9. 一页预告:Sass 是什么

章末书里塞了一节 Sass(Syntactically Awesome Stylesheets)——一种 CSS 预处理器: 你写带变量、嵌套、mixin(可复用的样式块)的增强版 CSS,它编译成普通 CSS 再交给浏览器³⁵。

// Sass 源码(变量 + mixin)
$primary-color: #3498db;
@mixin button-style($bg-color) {
  background-color: $bg-color;
  padding: 10px 20px;
}

书里给的编译命令 sass --watch sass.scss:sass.css 的意思是「盯着 .scss 文件,一变就重新生成 .css」³⁶。 要装它就得用 Node.js 的 npm——这就是第 02 章那个「Add to PATH」第一次兑现的地方。

判断(我们的,不是书里的): 2026 年回头看,Sass 的变量和嵌套这两个主卖点, 已经被原生 CSS 的自定义属性(--变量)和嵌套语法吸收了大半——学它的优先级比十年前低了很多。书给这一节的价值,在于让你知道「CSS 可以被程序生成」这一层存在;真到需要时,现代工具链里它 Often 已经被更上游的方案(如 CSS-in-JS、Tailwind)取代。这一页了解即可,不必动手。 如果错,会错在: 大型遗留项目里 Sass 仍然广泛存在,真接手时会遇到——所以「知道它是什么」仍然必要, 只是「现在就学」不必要。

10. 作者的判断与证据

书内作为事实给出的: specificity 阶梯与来源三层¹³¹²、后写赢原则¹⁴、盒模型四层³²、 display 三值的行为表³³、阴影四值的含义²¹、@keyframes 的百分比时间轴³¹。

作者的口吻里带经验判断、书里没给证据的: 深色主题护眼(第 02 章)、WebP 优先(第 05 章)、「float 别用了」(第 08 章)——都是这一行的通行经验,不是浏览器规则。这类判断本书的做法是直接陈述, 我们的拆解统一按「行业通行经验」对待并在相应位置标注。

一处需要修正的表述: 书里写 flex-direction: rows / columns(第 08 章多处)—— CSS 实际值是单数 row/column。这类小错在入门书里常见,照 CSS 标准写,书中意图不变。

11. 边界与局限

选择器只教到类。 ID 选择器、属性选择器、后代选择器(div p)、子选择器(div > p)只在优先级表里露名; 它们都是日常工具,建议用第 12 章的 querySelector 需要时顺势补。
响应式没进这一章。 盒模型和 display 讲的是「桌面逻辑」,小屏适配整体留给第 09 章——顺序合理,但学到这里做出的页面在手机上是「缩小版的桌面页」。
颜色没讲 rgba/HSL。 半透明色(rgba(0,0,0,0.5))和更直观的 HSL 色相环都没出现;阴影一节倒是会用到,自学补一下即可。
动画表里有若干排版错乱(如 animationduration、animationdirection 少了连字符)——转码或原书排版问题,实际属性名以 animation-duration 等连字符形式为准。

12. 可带走的

全章主线例子,一行写完: <h2> 的最终颜色 = 四条规则按「!important → 行内 > ID > 类 > 标签 → 后写赢」逐级裁定出来的。

一条规则 = 选择器 + { 属性: 值; };类选择器 .名 配 HTML 的 class="名",一个元素可挂多个类;
样式三种来源:外部 .css(默认选择)、内部 <style>、行内 style;
样式三来源(浏览器默认/用户/作者)+ specificity 阶梯(行内 > ID > 类 > 标签)+ 后写赢——「改了没反应」先查这三层;
!important 是核弹,救急可以,养成习惯就是灾难;
盒模型四层:content / padding / border / margin;width 默认只算 content,box-sizing: border-box 改为算总宽;
display:block 独占行、inline 只占内容宽且不能设宽高、inline-block 兼得;
伪元素双冒号(管元素内部的部分),伪类单冒号(管状态);:hover 是交互感的开关;
transition 管「变化的过程」,animation(@keyframes + animation)管「自动演的剧本」;
hex 颜色 #RRGGBB = 红绿蓝三通道,成对重复可缩成三位;
Sass 了解即可:它的主卖点大半已被原生 CSS 吸收,但「CSS 可以被程序生成」这一层要知道。

13. 原文地图

主题	原书章	原文位置
层叠与优先级总纲	Introduction to CSS	`text/13-fm-introduction.txt:41`(搜「cascading because they can come from」)
样式三来源	Introduction to CSS	`text/13-fm-introduction.txt:47`(搜「User-agent styles are the default」)
specificity 阶梯	Introduction to CSS	`text/13-fm-introduction.txt:53`(搜「Inline styles are defined directly」) · `text/13-fm-introduction.txt:55`(搜「ID selectors using」)
后写赢原则	Introduction to CSS	`text/13-fm-introduction.txt:63`(搜「last rule defined」)
!important	Introduction to CSS	`text/13-fm-introduction.txt:61`(搜「important rule overrides」)
三种选择器	Introduction to CSS	`text/13-fm-introduction.txt:77`(搜「universal selector」) · `text/13-fm-introduction.txt:87`(搜「Type selector」) · `text/13-fm-introduction.txt:101`(搜「class selector is one of the most」)
三种引入方式	Introduction to CSS	`text/13-fm-introduction.txt:115`(搜「change the look of an entire website」) · `text/13-fm-introduction.txt:127`(搜「Internal styles are defined」) · `text/13-fm-introduction.txt:161`(搜「External styles are defined」)
十六进制颜色	Introduction to CSS	`text/13-fm-introduction.txt:247`(搜「Hexadecimal (Hex) color codes」)
颜色三属性	Introduction to CSS	`text/13-fm-introduction.txt:219`(搜「sets the text color」)
Google Fonts 接入	Introduction to CSS	`text/13-fm-introduction.txt:439`(搜「Google Fonts is a free」)
盒子阴影四值	Introduction to CSS	`text/13-fm-introduction.txt:570`(搜「box-shadow attribute」)
圆角	Introduction to CSS	`text/13-fm-introduction.txt:586`(搜「border-radius property」)
渐变	Introduction to CSS	`text/13-fm-introduction.txt:606`(搜「linear-gradient」)
伪元素表	Introduction to CSS	`text/13-fm-introduction.txt:512`(搜「Pseudo-elements are used」)
伪类表与 hover 例子	Introduction to CSS	`text/13-fm-introduction.txt:630`(搜「Pseudo-classes are used to target」)
过渡	Introduction to CSS	`text/13-fm-introduction.txt:732`(搜「transition property」)
动画与 @keyframes	Introduction to CSS	`text/13-fm-introduction.txt:742`(搜「@keyframes」) · `text/13-fm-introduction.txt:820`(搜「At the start of the animation」)
盒模型四层	Introduction to CSS	`text/13-fm-introduction.txt:826`(搜「box model is a concept」)
display 三值	Introduction to CSS	`text/13-fm-introduction.txt:844`(搜「block-level element takes up」)
Sass	Introduction to CSS	`text/13-fm-introduction.txt:860`(搜「Syntactically Awesome」)

出处:「Introduction to CSS」第 115 段(text/13-fm-introduction.txt:115,搜「change the look of an entire website」)。原文:「With an external stylesheet file, you can change the look of an entire website by changing just one file.」 ↩
出处:「Introduction to CSS」第 67 段(text/13-fm-introduction.txt:67,搜「selectors, properties, and values」)。原文对三者的定义:「A selector specifies the HTML element(s) to be styled. The property defines the specific aspect... and the value specifies the exact style setting.」 ↩
出处:「Introduction to CSS」第 73 段(text/13-fm-introduction.txt:73,搜「various types of selectors」)。 ↩
出处:「Introduction to CSS」第 77–85 段(text/13-fm-introduction.txt:77,搜「universal selector」)。原文例子:* { margin: 0; padding: 0; } 作为「给页面所有元素设基础样式」的开局。 ↩
出处:「Introduction to CSS」第 87–97 段(text/13-fm-introduction.txt:87,搜「Type selector」;:91,搜「font-size: 24px」)。 ↩
出处:「Introduction to CSS」第 101–111 段(text/13-fm-introduction.txt:101,搜「class selector is one of the most」)。原文:「enables you to style multiple elements consistently without affecting other elements of the same type.」 ↩
出处:「Introduction to CSS」第 113–121 段(text/13-fm-introduction.txt:117,搜「Inline styles」;:127,搜「Internal styles are defined」)。 ↩
出处:「Introduction to CSS」第 127 段(text/13-fm-introduction.txt:127,搜「Internal styles are defined」)。原文:「This method allows you to keep the styles separate from the HTML elements themselves, but still within the same file.」 ↩
出处:「Introduction to CSS」第 161–173 段(text/13-fm-introduction.txt:161,搜「External styles are defined」;:173,搜「link rel="stylesheet"」)。 ↩
出处:「Introduction to CSS」第 185 段(text/13-fm-introduction.txt:185,搜「best for multi-page websites」)。原文:「This approach is best for multi-page websites and scalable projects, as it allows code reuse and makes maintenance a lot easier.」 ↩
出处:「Introduction to CSS」第 41 段(text/13-fm-introduction.txt:41,搜「cascading because they can come from」)。原文:「These styles are called cascading because they can come from multiple sources, such as external stylesheets, internal stylesheets, and inline styles.」 ↩
出处:「Introduction to CSS」第 47–51 段(text/13-fm-introduction.txt:47,搜「User-agent styles are the default」)。三类来源:user-agent(浏览器默认)、user(用户浏览器设置)、author(网页作者)。 ↩ ↩²
出处:「Introduction to CSS」第 53–59 段(text/13-fm-introduction.txt:53,搜「Inline styles are defined directly」;:55,搜「ID selectors using」;:57,搜「Classes, attributes selectors」;:59,搜「Element types」)。 ↩ ↩²
出处:「Introduction to CSS」第 63 段(text/13-fm-introduction.txt:63,搜「last rule defined」)。原文:「When multiple rules have the same specificity and importance, the last rule defined in the stylesheet... is applied.」 ↩ ↩²
出处:「Introduction to CSS」第 61 段(text/13-fm-introduction.txt:61,搜「important rule overrides」)。原文:「The important rule overrides all other rules, regardless of origin or specificity.」 ↩
出处:「Introduction to CSS」第 193–215 段(text/13-fm-introduction.txt:193,搜「predefined colors」;:213,搜「color selector」)。 ↩
出处:「Introduction to CSS」第 247–327 段(text/13-fm-introduction.txt:247,搜「Hexadecimal (Hex) color codes」;:325,搜「intensity of the red, green, or blue channel」)。原文:「each pair of digits represents the intensity of the red, green, or blue channel, ranging from 00 (no color) to FF (full color intensity).」 ↩
出处:「Introduction to CSS」第 329–349 段(text/13-fm-introduction.txt:343,搜「shortened to F」;:343,搜「approximated to A」)。原文示范了 #FFA500 → #FA0 的逐位缩写过程。 ↩
出处:「Introduction to CSS」第 219–223 段(text/13-fm-introduction.txt:219,搜「sets the text color」)。 ↩
出处:「Introduction to CSS」第 439 段(text/13-fm-introduction.txt:439,搜「Google Fonts is a free」)。原文:「Google Fonts is a free, web-based collection of open-source fonts that are hosted on Google's servers and can be easily integrated into web projects by linking to them in your HTML or CSS.」 ↩
出处:「Introduction to CSS」第 570–578 段(text/13-fm-introduction.txt:570,搜「box-shadow attribute」;:574,搜「horizontal offset」;:578,搜「blur radius」)。 ↩ ↩²
出处:「Introduction to CSS」第 586–600 段(text/13-fm-introduction.txt:586,搜「border-radius property」;:592,搜「border-top-left-radius」)。 ↩
出处:「Introduction to CSS」第 606–616 段(text/13-fm-introduction.txt:606,搜「smooth transitions between two or more colors」;:612,搜「direction of the gradient」)。 ↩
出处:「Introduction to CSS」第 490–494 段(text/13-fm-introduction.txt:494,搜「text-shadow」)。 ↩
出处:「Introduction to CSS」第 498–508 段(text/13-fm-introduction.txt:502,搜「linear-gradient(90deg, red, gold)」;:504,搜「background-clip」)。 ↩
出处:「Introduction to CSS」第 512 段(text/13-fm-introduction.txt:512,搜「Pseudo-elements are used」)。原文:「Pseudo-elements are used to style specified parts of an element.」 ↩
出处:「Introduction to CSS」第 630 段(text/13-fm-introduction.txt:630,搜「Pseudo-classes are used to target」)。原文:「Pseudo-classes are used to target elements in a particular state, such as when a user interacts with them.」 ↩
出处:「Introduction to CSS」第 706–726 段(text/13-fm-introduction.txt:722,搜「lightcoral」)。 ↩
出处:「Introduction to CSS」第 732–738 段(text/13-fm-introduction.txt:732,搜「transition property」)。原文:「Now, when you hover the mouse pointer over the box, the color will transition to lightcoral over 2 seconds.」 ↩
出处:「Introduction to CSS」第 742–746 段(text/13-fm-introduction.txt:742,搜「@keyframes」;:746,搜「sequence of steps」)。 ↩
出处:「Introduction to CSS」第 820 段(text/13-fm-introduction.txt:820,搜「At the start of the animation」)。原文完整描述了 0%/25%/50%/75%/100% 五个关键帧的颜色和位移。 ↩ ↩²
出处:「Introduction to CSS」第 826–836 段(text/13-fm-introduction.txt:826,搜「box model is a concept」)。原文:「The model consists of four components: the content, padding, border, and margin.」 ↩ ↩²
出处:「Introduction to CSS」第 840–856 段(text/13-fm-introduction.txt:844,搜「block-level element takes up」;:848,搜「Inline elements take up only the space」;:852,搜「Inline-block elements are similar」)。 ↩ ↩²
出处:「Introduction to CSS」第 856 段(text/13-fm-introduction.txt:856,搜「navigation bars」)。 ↩
出处:「Introduction to CSS」第 860–866 段(text/13-fm-introduction.txt:860,搜「Syntactically Awesome」)。原文:「Sass is a CSS preprocessor that introduces advanced features, such as variables, nesting, mixins, inheritance, and functions.」 ↩
出处:「Introduction to CSS」第 878 段(text/13-fm-introduction.txt:878,搜「sass --watch」)。原文:「This command tells Sass to watch the Sass.scss file and compile it into sass.css.」 ↩

CSS 基础 — 规则、层叠、盒模型与 display

CSS 基础 — 规则、层叠、盒模型与 displayCopy Anchor Link

1. 先看现象:改一行颜色,为什么整个页面都变了Copy Anchor Link

2. 顶层全景:一张规则的全景图Copy Anchor Link

3. 语法层:选择器、属性、值Copy Anchor Link

4. 来源层:三种写法,一个主选Copy Anchor Link

5. 裁判层:规则打架,听谁的——本章的心脏Copy Anchor Link

主线例子:同一段文字,四条规则抢它Copy Anchor Link

6. 化妆台:颜色、字体、特效Copy Anchor Link

颜色:命名色与十六进制Copy Anchor Link

字体:Google Fonts 的接法Copy Anchor Link

特效四件套:阴影、圆角、渐变,加文字版Copy Anchor Link

伪元素与伪类:两个长得像、本质不同的东西Copy Anchor Link

7. 时间武器:过渡与动画Copy Anchor Link

8. 空间层:盒模型——所有布局问题的总根源Copy Anchor Link

display:盒子怎么排队Copy Anchor Link

9. 一页预告:Sass 是什么Copy Anchor Link

10. 作者的判断与证据Copy Anchor Link

11. 边界与局限Copy Anchor Link

12. 可带走的Copy Anchor Link

13. 原文地图Copy Anchor Link

FootnotesCopy Anchor Link

On this page

CSS 基础 — 规则、层叠、盒模型与 display

1. 先看现象:改一行颜色,为什么整个页面都变了

2. 顶层全景:一张规则的全景图

3. 语法层:选择器、属性、值

4. 来源层:三种写法,一个主选

5. 裁判层:规则打架,听谁的——本章的心脏

主线例子:同一段文字,四条规则抢它

6. 化妆台:颜色、字体、特效

颜色:命名色与十六进制

字体:Google Fonts 的接法

特效四件套:阴影、圆角、渐变,加文字版

伪元素与伪类:两个长得像、本质不同的东西

7. 时间武器:过渡与动画

8. 空间层:盒模型——所有布局问题的总根源

display:盒子怎么排队

9. 一页预告:Sass 是什么

10. 作者的判断与证据

11. 边界与局限

12. 可带走的

13. 原文地图

Footnotes