第 3 章 CSS：样式语言

CSS 的整个世界，就是下面这个句式重复几百遍：

css

.hero-title {
  color: #ffffff;
  font-size: 38px;
  margin-bottom: 14px;
}

读法：选择器（选中谁）+ 花括号里一串 属性: 值;（把它们改成什么样）。这一条读作："所有戴着 hero-title 名牌的元素，字白色、38 号、底下留 14 像素。"

选择器最常见三种：标签名（p 选中所有段落）、.class（选中戴这块名牌的，实战中最常用——名牌就是上一章 HTML 里的 class 属性，两章在这里握手）、#id（选中那个唯一编号）。组合选择器从右往左读：.nav a 是"链接，且住在 .nav 里面的"。

然后是本章最值钱的概念：盒模型（Box Model）。每个元素都是一个矩形盒子，从里到外四层：内容 → padding（内边距，盒子里的留白）→ border(边框) → margin（外边距，和邻居的距离）。界面上一切"间距不对"的问题，九成出在 padding 和 margin 之间。F12 点选任何元素，样式面板里那张彩色靶心图就是它的盒模型，实时可看、现场可改。

还有一个现象要提前解释，免得你打开我们的项目一头雾水：为什么代码里几乎看不到上面那种 CSS，反而满屏是这个——

jsx

<div className="flex items-center gap-4 text-sm text-gray-400">

这是 Tailwind：一本预制的 class 字典。每个词对应一小条现成的 CSS——flex 是弹性排列，gap-4 是间距，text-sm 是小号字，text-gray-400 是灰色。传统写法是"起个名牌，去 CSS 文件里写规则"；Tailwind 是"直接把规则的名字挂在名牌位上"。它省去了起名和切换文件，AI 生成起来极其顺手，代价是 HTML 看起来很吵。读法不变：一个词就是一条"属性: 值"，不认识的词问 AI，一问一个准。顺带一提：我们主站那份手写的 style.css 是传统派，项目里的 React 界面是 Tailwind 派——两种你都会撞见，两种都要认得。

认脸卡

后缀 .css，满眼 { 属性: 值; }；或者根本没有独立文件，样式藏在 className 的一长串单词里（Tailwind）。

关键领悟

CSS 只回答"长什么样、摆在哪"。读它的钥匙是选择器——先搞清这条规则管到谁头上，再看它改了什么。

试一试

F12 打开我们自己的网站，点选一个按钮，在 Styles 面板里现场改它的 color 和 padding——所见即所得，刷新就还原，零风险。再从项目里挑一段 Tailwind class，逐词让 AI 翻译成"属性: 值"。

第 3 章 CSS：样式语言 ​

第 3 章 CSS：样式语言