A01 认识 CSS 与引入方式

摘要：CSS 通过选择器把声明应用到元素上，一条规则由选择器与若干「属性: 值」组成。样式可以写在标签内、页面内或独立文件里，三种方式的作用范围与优先级不同，选错会让调试无从下手。本文给出三种引入方式的完整写法、优先级顺序与三条选择依据。
关键词：样式表，选择器，声明，引入方式，优先级

所属：frontend/css / A-入门 ｜ 上一篇：A00-总结 ｜ 下一篇：A02-选择器与层叠基础

1 引言

HTML 决定有什么内容，CSS 决定内容怎么呈现。两者通过选择器连接：选择器写错，样式不会报错，只是静默不生效。

本文解决三个问题：样式写在哪里、规则由什么组成、三种引入方式如何取舍。范围见表 1-1。

项	本文覆盖	本文不覆盖
语法	规则、选择器、声明、注释	预处理器语法
引入	行内、style 块、外部文件	构建与打包
优先级	三种方式的覆盖顺序	完整层叠规则（B01）

2 预备知识

项	要求	核对方式
环境	一个可用的本地服务器（HTML 科目 A02 已配置）	浏览器能打开 localhost
素材	一份可运行的 HTML 页面	含 h1、p、ul 即可
浏览器	Chrome 130+，开发者工具 Styles 面板可用	能改样式并即时看到效果
前置	HTML A03	能写完整 HTML 结构

3 原理与实现

3.1 从样式表到画面

浏览器把 HTML 与 CSS 合成一棵渲染树，再计算每个元素的最终样式，如图 3-1 所示。

flowchart LR
    A["HTML 文本"] --> B["DOM 树"]
    C["CSS 规则"] --> D["样式规则表"]
    B --> E["匹配选择器"]
    D --> E
    E --> F["层叠与继承计算"]
    F --> G["渲染树"]
    G --> H["布局与绘制"]

图 3-1 样式规则如何作用到元素

图上可见：规则必须先匹配到元素才参与计算；选择器不匹配时不会有任何提示，这是「样式不生效」最常见的原因。

3.2 三种引入方式

<!-- 运行环境：Chrome 130+；三种方式可同时存在，用于对比优先级 -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>引入方式</title>
    <link rel="stylesheet" href="./styles/main.css" />
    <style>
      h1 { color: #1d4ed8; }
    </style>
  </head>
  <body>
    <h1 style="color: #b91c1c;">三种方式</h1>
    <p class="note">外部样式负责整体，页面样式负责个别，行内样式只做临时试验。</p>
  </body>
</html>

/* styles/main.css；运行环境：Chrome 130+ */
.note {
  color: #334155;
  line-height: 1.7;
}

三种方式的差异见表 3-1。

方式	写法	作用范围	优先级	适用场景
行内样式	style="color: red"	单个元素	最高	临时调试，不长期保留
页面样式	<style> 块	当前页面	中	单页 demo、首屏关键样式
外部样式	<link rel="stylesheet" href="...">	引用它的页面	最低	正式项目，可缓存复用

三条规则：正式项目只保留外部样式，行内样式用完即删；<link> 放在 head 中，避免无样式闪烁；注释统一用 /* ... */，不要用 HTML 注释。

4 验证与讨论

1. 打开页面，确认标题为红色，说明行内样式覆盖了页面样式。
2. 删除 h1 的行内样式，标题变蓝；再删除 style 块，标题变为外部样式文件中的颜色（未设置时回到浏览器默认黑）。
3. 打开开发者工具 Styles 面板，观察被划掉的声明及其来源文件。
4. 把 <link> 移到 body 末尾，刷新，观察首屏是否出现短暂无样式。

检查项	预期结果	说明
行内优先	标题为红色	行内样式优先级最高
外部生效	段落为深灰色	选择器匹配成功
面板定位	被覆盖的声明显示删除线	便于定位冲突来源
首屏无闪烁	样式在首次绘制前已应用	link 位于 head

讨论与局限。 三种方式同时存在时，覆盖关系不只由优先级决定，还受选择器权重与出现顺序影响；这部分在 B01 展开。另，外部样式会被浏览器缓存，改完不生效时先强刷。

5 常见问题

现象	原因	处理
样式完全没生效	link 的 href 路径错误	按 Network 面板状态码核对
只有部分样式生效	选择器拼写与类名不一致	用元素面板查看实际类名
改完刷新没变化	浏览器缓存了旧样式表	Ctrl + F5 强刷
中文乱码	CSS 文件编码不是 UTF-8	文件另存为 UTF-8
行内样式删不掉的效果	有 !important 声明	搜索 !important 并逐条处理

6 结论

序号	结论	依据
1	规则必须先匹配元素，否则静默失效	图 3-1
2	正式项目只用外部样式	表 3-1
3	行内样式优先级最高，仅用于调试	表 3-1
4	link 放 head，避免无样式闪烁	4 节步骤 4

• 上一篇：A00-总结
• 下一篇：A02-选择器与层叠基础
• 返回：A00-总结 ｜ 科目 README

参考文献

[1] MDN Web Docs · CSS 第一步，https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps（访问于 2026-10-31）
[2] CSS Cascading and Inheritance Level 5，W3C，https://www.w3.org/TR/css-cascade-5/（访问于 2026-10-31）