CSS层样式表，通常简称为CSS（Cascading Style Sheets），是网页设计中用于控制元素外观的标记语言。根据样式的定义位置和加载方式，CSS大致可以分为三种类型：外部样式表、内部样式表和内联样式。这三种类型在开发中各有用途，理解它们的特点和优先级顺序，是构建规范、可维护样式系统的基础。
外部样式表
外部样式表是最常用也最推荐的CSS类型。它将所有样式规则保存在一个独立的.css文件中，再通过HTML文档中的<link>标签引入。这样可以让样式与内容完全分离，便于复用和维护。
语法与引入方式
在HTML的<head>中添加<link>标签，href属性指向.css文件路径，rel属性值为stylesheet。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>外部样式表示例</p>
</body>
</html>在style.css文件中定义样式：
p {
color: blue;
font-size: 16px;
}优点与缺点
- 优点：样式可被多个页面共享，维护方便；浏览器可缓存.css文件，提升加载速度。
- 缺点：需要额外请求资源，初次加载可能稍慢；如果文件过多，管理不当可能造成请求阻塞。
内部样式表
内部样式表将CSS代码直接写在HTML文档的<style>标签中，通常放在<head>部分。它适用于单页面或样式规则较少的情况，避免引入额外的CSS文件。
语法示例
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>内部样式表示例</p>
</body>
</html>应用场景与限制
- 适用场景：邮件模板、单页应用、快速原型、针对特定页面的独有样式。
- 限制：样式无法跨页面复用，导致HTML文件体积增大；不易于团队协作和全局管理。
内联样式
内联样式通过元素的style属性直接定义，样式仅作用于该元素。它的优先级最高，通常用于覆盖其他样式或做临时调整。
语法示例
<p style="color: green; font-size: 20px;">内联样式示例</p>
注意事项
- 优势：最直接、优先级最高，可快速覆盖外部和内部样式。
- 弊端：样式与内容混合，违反结构与表现分离原则；难以维护和复用。
- 提示：尽量避免在生产项目中大量使用内联样式，仅用于测试或动态样式（如JavaScript生成的style）时适合。
三种类型的优先级与最佳实践
CSS的层叠机制决定了当多种样式冲突时，优先级顺序为：内联样式 > 内部样式表 > 外部样式表（在相同选择器权重下）。但并非绝对，还会受到选择器特异性、!important声明等因素影响。
推荐的做法是：以外部样式表为主，内部样式表用于页面级覆写，内联样式仅用于个别元素的临时调整。同时，合理利用CSS预处理器（如Sass、Less）或CSS Modules，可以进一步提升样式的组织效率。
总结
CSS层样式表的三种类型——外部、内部和内联——各自承担着不同的职责。外部样式表适合全局、多页面项目；内部样式表适合单页面特殊需求；内联样式用于紧急覆写或动态控制。掌握它们的特点并根据实际场景灵活选用，能让你的样式代码更清晰、更易维护。