css引入方式有内联、内部和外部三种。内联样式通过style属性定义，优先级高但复用性差；内部样式表在head中使用style标签，适用于单页；外部样式表通过link引入独立CSS文件，利于多页共享与维护。推荐优先使用外部样式表以提升项目可维护性和性能。
CSS 样式表有三种主要引入方式：内联样式、内部样式表和外部样式表。每种方式各有适用场景，了解它们的差异有助于在开发中做出合理选择。
1. 内联样式（Inline Styles）
通过 html 元素的 style 属性直接定义样式。
语法示例：
<p style=”color: red; font-size: 16px;”>这是一段红色文字</p>
特点：
立即学习“前端免费学习笔记（深入）”；
- 优先级最高，会覆盖其他方式定义的同名样式
- 无法复用，样式与结构耦合严重
- 不利于维护，修改需逐个调整 HTML 元素
- 不支持伪类、媒体查询等复杂规则
适用场景：临时调试、动态生成样式（如 javaScript 控制）、邮件模板等对兼容性要求高的环境。
2. 内部样式表（internal/Embedded Stylesheet）
在 HTML 文档的 <head> 区域使用 <style> 标签定义 CSS。
语法示例：
<style>
p { color: blue; }
.highlight { background: yellow; }
</style>
特点：
立即学习“前端免费学习笔记（深入）”；
- 作用于当前页面，便于局部控制
- 可复用类选择器，提升代码整洁度
- 仍与 HTML 文件绑定，不利于多页共享
- 增加 HTML 文件体积，影响加载速度
适用场景：单页应用、临时页面、演示文档或仅用于当前页面的独特样式。
3. 外部样式表（External Stylesheet）
将 CSS 代码保存为独立的 .css 文件，通过 <link> 标签引入。
语法示例：
<link rel=”stylesheet” href=”styles.css”>
特点：
立即学习“前端免费学习笔记（深入）”；
- 实现结构与表现完全分离，利于团队协作
- 样式可被多个页面复用，减少重复代码
- 浏览器可缓存 CSS 文件，提升加载效率
- 便于统一管理和维护整体风格
适用场景：绝大多数网站项目，尤其是多页面、长期维护的系统。
三种方式对比总结
| 特性 | 内联样式 | 内部样式表 | 外部样式表 |
|---|---|---|---|
| 优先级 | 最高 | 中等 | 较低 |
| 复用性 | 无 | 限于当前页面 | 跨页面共享 |
| 维护性 | 差 | 一般 | 好 |
| 加载性能 | 即时生效但阻塞渲染 | 随 HTML 加载 | 可缓存，利于性能 |
| 适用范围 | 单元素临时样式 | 单页定制样式 | 多页项目标准做法 |
基本上就这些。实际开发中推荐以外部样式表为主，配合少量内部样式处理页面特有需求，尽量避免使用内联样式。若需动态控制样式，建议通过 javascript 操作 class 而非直接写入 style。这样能保证项目的可维护性和扩展性。