CSS样式引入方式详解与优先级规则

1. CSS样式引入方式概述

作为一名前端开发者，每天打交道最多的就是CSS了。但你是否真正理解CSS的三种引入方式及其优先级规则？在实际项目中，我们经常会遇到样式冲突、覆盖无效等问题，究其根源往往是对CSS引入机制理解不够深入。

CSS的三种引入方式分别是：

• 行内样式（Inline Style）
• 内部样式表（Internal Style Sheet）
• 外部样式表（External Style Sheet）

这三种方式看似简单，但在实际开发中却藏着不少门道。比如：

• 为什么有时候写的!important不生效？
• 外部样式表和内部样式表到底哪个优先级更高？
• 在Vue/React等现代框架中，CSS的引入方式又有哪些变化？

接下来，我将结合多年实战经验，带你彻底搞懂CSS样式引入的方方面面。

2. 行内样式（Inline Style）详解

2.1 基本语法与使用场景

行内样式是直接写在HTML元素的style属性中的CSS代码，例如：

html复制<div style="color: red; font-size: 16px;">这是一个红色文字</div>

行内样式的特点：

• 优先级最高（后面会详细解释优先级规则）
• 只作用于当前元素
• 不利于维护和复用

适用场景：

1. 需要最高优先级覆盖其他样式时
2. 动态样式（通过JavaScript动态修改）
3. 邮件模板开发（很多邮件客户端会过滤外部CSS）

提示：在常规Web开发中应尽量避免大量使用行内样式，这会导致代码难以维护。但在某些特殊场景（如第三方嵌入代码）可能需要使用。

2.2 行内样式的性能考量

虽然行内样式避免了额外的HTTP请求，看起来似乎性能更好，但实际上：

• 增加了HTML文件体积
• 无法被浏览器缓存
• 导致重复代码（相同样式需要在多个元素重复定义）

实测数据：一个包含100个使用相同行内样式元素的页面，比使用外部样式表的版本大30%-50%。

3. 内部样式表（Internal Style Sheet）解析

3.1 基本用法

内部样式表是写在HTML文档中的