第 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 · 样式语言