CSS 语法与引入方式
CSS 必须被浏览器正确加载才能生效。本节先掌握规则语法、三种引入方式和外部样式表路径，再建立一套稳定的排错顺序。
写出 CSS 规则
一条 CSS 规则由选择器和声明块组成：选择器决定“修改谁”，声明块中的 属性: 值; 决定“修改什么、改成什么”。
同一条规则也可以用内联 HTML 拆开观察：
下方是这张图的内联 HTML 版本，两条声明分别标出属性和值：
空格和缩进不改变规则含义，但统一格式能明显降低漏写符号的概率。不同属性通常不受书写顺序影响；同一规则重复声明相同属性时，后面的有效声明会覆盖前面的声明。
认识基本语法
.page-title {
color: #17233d;
font-size: 28px;
line-height: 1.4;
}.page-title是选择器。{}中是声明块。color: #17233d;是一条声明。- 冒号分隔属性与值，分号分隔多条声明。
推荐每条声明单独一行，并保留末尾分号，便于增加和移动代码。
添加 CSS 注释
CSS 注释使用 /* 开始、*/ 结束，适合标记样式分区或解释不明显的处理原因。
/* 页面主标题 */
.page-title {
color: #17233d;
}CSS 使用 /* ... */，不能使用 HTML 的 <!-- --> 或 JavaScript 的 //。
注释应解释分区、目的或不明显的取舍，不必重复属性本身：
/* 为固定顶栏预留空间 */
.main-content {
padding-top: 64px;
}将 CSS 加入页面
CSS 可以写在元素、当前 HTML 页面或独立文件中。先分别运行三种方式，再根据维护范围选择。
行内样式
<p style="color: #16803c; font-weight: 600;">状态：正常</p>行内样式直接写在元素的 style 属性中。
适用场景很少，主要用于快速试验或某些必须动态计算的单个值。它难以统一维护，课程项目不把它作为主要写法。
内部样式表
<head>
<meta charset="UTF-8">
<title>学员列表</title>
<style>
body {
background-color: #f4f7fb;
}
.page-title {
color: #17233d;
}
</style>
</head>内部样式写在 head 中的 style 元素内，适合单文件练习和小型演示。
外部样式表
项目通常把 HTML 与 CSS 分开：
student-page/
├── index.html
└── styles.cssindex.html：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学员列表</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<h1 class="page-title">学员列表</h1>
</body>
</html>styles.css：
body {
background-color: #f4f7fb;
color: #273142;
font-family: "Microsoft YaHei", sans-serif;
}
.page-title {
color: #17233d;
font-size: 28px;
}link 中三个部分都要正确：
rel="stylesheet"：说明链接的是样式表。href：CSS 文件地址。link放在head中。
基础课程不额外依赖远程 CSS 库。综合案例使用项目内的最小基础重置（例如 box-sizing 和 body 的默认外边距），再加载页面样式；如果项目确实维护了 base.css 或 normalize.css，应先加载基础样式，再加载业务样式。
比较三种引入方式
| 方式 | 优点 | 局限 | 课程中的用途 |
|---|---|---|---|
| 行内样式 | 试验快 | 重复、难维护 | 观察即可 |
| 内部样式 | 单文件便于演示 | 不能跨页面复用 | 小节示例 |
| 外部样式 | 分工清楚、可复用、易维护 | 需要正确路径 | 综合案例和项目首选 |
同一个页面可以同时存在三种方式，但教学项目应保持简单，避免混用造成排错困难。
推导 CSS 资源路径
HTML 引入 CSS 时，路径相对于 HTML 文件：
<link rel="stylesheet" href="./css/styles.css">CSS 引用背景图片时，路径相对于 CSS 文件自身：
student-page/
├── index.html
├── css/
│ └── styles.css
└── images/
└── banner.pngcss/styles.css 中应写：
.banner {
background-image: url("../images/banner.png");
}这是常见错误：不要从 HTML 文件的位置计算 CSS 内部的 url()。
用 CSS 自定义属性建立设计变量
综合页面会反复使用主题色、间距和圆角。如果每处都直接写值，修改主题时容易漏改。CSS 自定义属性通常集中放在 :root 中，再通过 var() 使用：
:root {
--color-primary: #2563eb;
--color-surface: #ffffff;
--space-md: 16px;
--radius-card: 12px;
}
.student-card {
padding: var(--space-md);
background: var(--color-surface);
border: 1px solid var(--color-border, #dbe3ef);
border-radius: var(--radius-card);
}
.button-primary {
background: var(--color-primary);
}变量名以 -- 开头，使用时必须写 var(--变量名)。它不是 JavaScript 变量，也不会改变选择器、层叠和继承规则；它只是让一组样式值拥有稳定的名字。
可以为变量提供回退值：
.page-title {
color: var(--color-primary, #2563eb);
}在管理后台案例中，先把颜色、间距和圆角抽成变量，再调整一个变量观察多个组件同时变化，能直观看到“设计决策集中管理”的价值。
外部样式表源码
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学员列表</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<h1 class="page-title">学员列表</h1>
</body>
</html>body {
background-color: #f4f7fb;
color: #273142;
font-family: "Microsoft YaHei", sans-serif;
}
.page-title {
color: #17233d;
font-size: 28px;
}控制样式加载顺序
浏览器从上到下读取样式表：
<link rel="stylesheet" href="./base.css">
<link rel="stylesheet" href="./page.css">当两份样式的重要性和选择器优先级相同时，后加载的规则可能覆盖前面的规则。项目通常先加载通用样式，再加载页面样式。
不要把“后写一定生效”当作完整结论；选择器优先级会在后续章节说明。
排查 CSS 不生效
按下面顺序检查，通常比反复改属性更快：
- HTML 是否真的打开了预期文件。
link是否位于head，rel是否为stylesheet。href是否从当前 HTML 文件正确指向 CSS。- 开发者工具 Network（网络）面板中，CSS 请求是否为成功状态。
- CSS 是否存在漏写
}、冒号或分号等语法错误。 - Elements 面板中的目标元素是否匹配选择器。
- 声明是否被划掉；如果被划掉，继续检查层叠和优先级。
- 修改后是否保存文件，并刷新浏览器。
可以先添加一个容易观察的临时规则验证加载：
body {
outline: 6px solid red;
}确认后删除临时规则。
小结
- CSS 声明使用
属性: 值;，注释使用/* ... */。 - 外部样式表最适合可维护的项目结构。
- HTML 引入 CSS 的路径相对于 HTML，CSS 的
url()相对于 CSS 文件。 - 通用样式通常先加载，页面样式后加载。
- CSS 不生效时应从文件、请求、语法、选择器和层叠依次排查。