CSS 三种引入方式全解析：行内 / 内部 / 外部样式表（附优先级规则）

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 有行内样式、内部样式表、外部样式表三种引入方式，核心区别在于 "样式与结构的耦合度" 和 "复用性"；
优先级遵循就近原则：行内样式 > 内部样式表 > 外部样式表；
实际开发中优先使用外部样式表，仅在特殊场景使用行内 / 内部样式，保证代码可维护性。