写CSS的人几乎都遇到过这种困惑：明明给元素写了样式，却死活不生效，打开开发者工具一看，被别的样式压了一头。问题的根源往往就藏在样式的引入方式里。CSS从诞生之初就设计了多种将样式规则作用到HTML元素上的途径，按照写法和作用范围的不同，可以系统地分为内联样式、内部样式表和外部样式表三大类。每一类都有自己的适用场景、优先级权重和最佳实践，理解这些分类是写出可维护、可预期的样式代码的第一步。
内联样式：直接贴在标签上的样式
内联样式是离元素最近的一种CSS书写方式，它直接将样式声明写在元素的style属性里。比如想要让一个段落文字变成红色并增大字号，可以写成：
<p style="color: red; font-size: 20px;">这是一段红色大号文字</p>
这种写法的好处是直观、立即生效，而且优先级极高——根据CSS层叠规则，内联样式的权重仅次于加了!important的声明，能够轻易覆盖来自内部或外部样式表的同名属性。在早期网页开发或者通过JavaScript动态修改样式时，内联样式非常常见，比如用element.style.display = 'none'隐藏元素，本质上就是操作行内样式。
然而，内联样式的缺点也非常明显。当项目规模变大，大量内联样式散落在HTML标签中，会让结构和表现严重耦合，后续修改一个颜色可能需要遍历所有HTML文件逐个查找替换。更重要的是，内联样式无法利用CSS的继承、复用、媒体查询等特性，也无法通过伪类选择器控制元素的交互状态，极大地限制了样式的表达能力。几乎所有编码规范都建议：除非是脚本生成的动态样式或临时调试，否则避免在HTML中批量书写内联样式。
内部样式表：锁在当前页面的样式集合
内部样式表是指把CSS规则集中放在HTML文档head区域内的style标签中。这种方式将样式从标签属性中抽离出来，但仍然和页面结构绑定在同一个文件里。典型写法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式表示例</title>
<style>
h1 {
color: #2c3e50;
border-bottom: 2px solid #bdc3c7;
}
.highlight {
background-color: #fff9c4;
padding: 4px 8px;
}
</style>
</head>
<body>
<h1>页面标题</h1>
<p>这是一段包含<span class="highlight">高亮文字</span>的段落。</p>
</body>
</html>
内部样式表解决了内联样式重复代码过多的问题，一个页面的所有样式都可以统一管理，而且支持类选择器、ID选择器、后代选择器以及伪类等完整的CSS语法。对于只有一两个页面的小型项目、活动落地页或者需要独立封装的组件预览页来说，内部样式表是开发效率极高的选择——不需要额外管理外部文件就能快速试错。
不过内部样式表依然存在局限：样式只对当前页面有效，无法跨页面共享。如果一个网站有几十个页面都使用了相同的按钮、标题、导航栏样式，就需要在每个页面的style标签里重复粘贴同样的代码，后续统一修改时仍然要在多个文件间切换。此外，由于浏览器会顺序解析HTML，内部样式表的体积会直接增加页面的大小，外部样式表则可以借助浏览器缓存机制避免重复下载，提升后续页面的加载速度。
外部样式表：解耦结构与表现的利器
外部样式表是前端工程化中最主流的CSS组织方式，它将所有样式规则保存在独立的.css文件中，再通过link标签或@import规则引入到HTML页面。一个典型的引入写法是：
<link rel="stylesheet" href="styles/main.css">
外部样式表最大的价值在于结构（HTML）与表现（CSS）的彻底分离。团队可以并行编写页面模板和样式文件，设计师甚至可以独立维护一套组件样式库，开发人员只需通过类名引用即可。由于.css文件可以被浏览器缓存，用户在第一次访问网站后，后续页面加载时样式文件往往直接来自本地磁盘，显著减少了网络请求和带宽消耗。这也使得外部样式表成为多页面网站和大型应用的唯一理智选择。
在实际使用中，外部样式表还有两种不同的引入语法需要辨析：link标签和@import指令。link是由HTML提供的资源链接方式，在页面解析阶段就可以被浏览器识别并异步下载，不会阻塞页面渲染的起始时间；@import则是CSS语法层面的引入方式，通常写在外部样式表文件或者内部样式表的顶部，例如@import url("theme.css");。但@import的下载时机较晚，往往需要等到包含它的样式表下载并解析之后才会发起新请求，这成了影响首屏渲染的一个典型性能瓶颈，因此在生产环境中更推荐使用link标签引入外部样式。另外，理解外部样式表、内部样式表和内联样式三者之间的优先级关系对于解决样式覆盖问题至关重要：在同等选择器权重的情况下，内联样式优先级最高，内部样式表和外部样式表则以书写顺序为准，后出现的样式会覆盖先出现的同名属性，这也就是为什么通常会把外部样式表放在前面，再配合更具体的选择器来做微调。
再往深看：用户代理样式与用户样式
除了开发者书写的三类样式，浏览器本身也内置了一套默认的CSS规则，被称为“用户代理样式表”。比如没有给<h1>定义任何样式时，它依然会以2em大小的粗体显示，这就是用户代理样式在起作用。通常我们会在项目起步阶段使用reset.css或normalize.css（均以外部样式表形式引入）来重置这些默认表现，保证跨浏览器的一致性。
还有一种在实际开发中较少接触但完整层叠模型中存在的样式来源——用户样式。部分浏览器允许用户通过辅助功能或扩展插件设置个人的样式表，例如为视障用户强制放大字体、提高对比度。这类样式的优先级介于用户代理样式和作者样式之间，但可以通过!important进行强化。了解这些背景知识，有助于更全面地掌握CSS的层叠和继承规则，而不仅仅是停留在三种引入方式的表面分类上。