CSS 样式表一共分为行内样式、内部样式表、外部样式表三种引入方式，核心区别就是样式代码存放位置不一样，三种方式都可以给 HTML 元素添加样式，但是优先级、适用场景、维护难度差别很大，行内样式优先级最高，适合临时单独修改某个元素，内部样式表写在当前 HTML 页面里面，适合单页面测试，外部样式表是独立 css 文件，通过 link 引入，是正式项目最推荐的写法，学习前端的时候必须掌握这三种写法，同时理解层叠优先级规则，避免后续出现样式不生效、样式被覆盖的问题。
三种方式详细清单
- 行内样式（内联样式）
- 内部样式表
写法是直接在 HTML 标签上面，使用 style 属性写入样式代码，样式只对当前这一个标签生效。
示例：
测试文字
特点：优先级最高，但是耦合度高，修改不方便，不能复用，只适合临时调试，不推荐正式项目大量使用。
写法是在 HTML 文件 head 标签里面，使用 style 标签包裹全部 CSS 代码，样式作用于当前整个 html 页面内匹配的元素。
示例：
特点：样式和 HTML 写在同一个文件，适合单页面练习、小型页面，缺点是多个页面无法共用这份样式，页面代码会变长。
- 外部样式表
写法是单独新建后缀为.css 的文件，把全部 CSS 代码写进这个文件，然后在 HTML 的 head 里面使用 link 标签引入 css 文件。
示例：
特点：样式和 HTML 完全分离，多个网页可以共用同一个 css 文件，方便统一改版维护，是企业项目标准推荐方案。
三种方式对比表格
| 类型 | 代码位置 | 作用范围 | 优先级 | 推荐场景 |
|---|---|---|---|---|
| 行内样式 | 标签的 style 属性 | 单个元素 | 最高 | 临时调试 |
| 内部样式表 | head 里面 style 标签 | 当前页面 | 中等 | 单页面练习 |
| 外部样式表 | 独立 css 文件 + link 引入 | 多个页面共用 | 中等 | 正式项目开发 |
深度补充要点
第一 优先级规则，当三种样式同时作用同一个元素的时候，行内样式 > 内部样式表 > 外部样式表，也就是行内样式会覆盖另外两种写法的同名属性，这就是层叠的核心逻辑。
第二 注意事项，外部样式表 link 标签的 href 路径要写正确，路径写错会出现 css 加载失败，页面没有样式的情况。
第三 选型建议，初学练习可以先用内部样式表，正式开发优先外部样式表，行内样式尽量少用，保持结构和样式分离。
第四 补充知识点，除了这三种，还有 import 导入方式，属于外部引入的一种特殊写法，一般考题默认三种就是行内、内部、外部。
相关 FAQ
问题 1 css 样式表的三种方式 哪一种优先级最高
回答 1 css 样式表的三种方式里面，行内样式优先级最高，会覆盖内部样式表和外部样式表里面相同的样式属性。
问题 2 css 样式表的三种方式 正式项目推荐哪一种
回答 1 css 样式表的三种方式里面，正式项目优先选择外部样式表，实现 HTML 和 CSS 分离，多页面可以复用样式，方便维护改版。
问题 3 css 样式表的三种方式 内部样式表可以跨页面生效吗
回答 1 css 样式表的三种方式里，内部样式表写在单个 html 页面 style 标签内，只对当前页面生效，不能跨其他页面共用样式。
问题 4 css 样式表的三种方式 行内样式适合大量使用吗
回答 1 css 样式表的三种方式里面，行内样式只适合临时调试，不建议大量使用，因为代码耦合，后续修改维护成本很高。
免责声明
本文为前端基础考点科普，内容符合 W3C 标准，不同教材考题表述基本一致，实际开发请结合项目规范使用，本文不涉及框架特殊扩展语法。