CSS 控制 HTML 样式有三种核心引入方式：行内样式、内部样式表、外部样式表，不同方式适用于不同场景，且遵循明确的优先级规则。本文结合实战代码，详解三种方式的用法、差异及优先级，新手可直接复制代码上手练习。
一、CSS 三种引入方式核心代码示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三种引入方式实战</title>
<!-- 2. 内部样式表：style标签包裹，位于head内 -->
<style type="text/css">
/* 标签选择器：控制所有p标签样式（示例注释，取消注释即可生效） */
/* p {
color: blue;
font-family: "楷体";
} */
</style>
<!-- 3. 外部样式表：link标签引入独立css文件 -->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!-- 1. 行内样式：直接写在标签的style属性中 -->
<p style="color: red; font-size: 16px;">这是行内样式的段落。</p>
<p>这是受内部/外部样式表控制的段落。</p>
</body>
</html>外部样式表文件（style.css）示例
html
/* style.css - 外部样式表文件 */
p {
color: green;
font-family: "微软雅黑";
line-height: 1.5;
}二、三种引入方式详细说明
| 引入方式 | 写法格式 | 核心特点 | 适用场景 |
|---|---|---|---|
| 行内样式 | <标签 style="属性:值;..."> |
耦合度高、仅作用于当前标签、优先级最高 | 临时样式调整、单个标签定制 |
| 内部样式表 | <style>选择器{属性:值;}</style>（head 内） |
作用于当前页面、维护较方便、优先级次之 | 单页面样式、小型项目 |
| 外部样式表 | <link rel="stylesheet" href="路径"> |
样式与结构分离、可复用、优先级最低 | 多页面项目、大型开发 |
link 标签核心属性说明
<link rel="stylesheet" href="style.css" type="text/css">rel="stylesheet"：声明链接的是样式表文件（必填）；href="style.css"：指定 CSS 文件路径（相对 / 绝对路径均可）；type="text/css"：声明资源类型为 CSS（现代浏览器可省略）。
三、CSS 优先级规则（核心）
CSS 样式遵循就近原则，优先级从高到低依次为：
- 行内样式：直接写在标签上，优先级最高，覆盖所有其他样式；
- 内部样式表：写在页面 head 内，优先级次之，覆盖外部样式表；
- 外部样式表：独立文件引入，优先级最低，被行内 / 内部样式覆盖。
优先级验证示例
<!-- 行内样式（red）> 内部样式（blue）> 外部样式（green），最终显示红色 -->
<p style="color: red;">优先级验证段落</p>四、关键注意事项
- 语法规范 ：
- 行内样式的属性值之间用
;分隔，如style="color: red; font-size: 14px;"； - 内部 / 外部样式表中，每个样式声明结尾必须加
;，注释格式为/* 内容 */。
- 行内样式的属性值之间用
- 路径问题 ：
- 外部样式表的
href路径需准确：同目录写style.css，子目录写css/style.css，上级目录写../style.css。
- 外部样式表的
- 最佳实践 ：
- 避免滥用行内样式，尽量使用外部样式表（样式与结构分离，便于复用和维护）；
- 大型项目建议统一使用外部样式表，可按模块拆分多个 CSS 文件（如
base.css、page.css）。
总结
- CSS 有行内样式、内部样式表、外部样式表三种引入方式，核心区别在于 "样式与结构的耦合度" 和 "复用性"；
- 优先级遵循就近原则：行内样式 > 内部样式表 > 外部样式表；
- 实际开发中优先使用外部样式表，仅在特殊场景使用行内 / 内部样式，保证代码可维护性。