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