CSS的全称是Cascading Style Sheets，中文通常译作层叠样式表。名称中的层叠并不是指多个图层上下堆放，而是指一套解决样式冲突的规则系统：当多个样式规则同时作用于同一个元素时，浏览器按照来源、重要性、选择器优先级和书写顺序逐层计算，最后得出确定的外观结果。正因为它把视觉决策从结构中独立出来，HTML可以专注于内容与语义，CSS可以专注表现与布局，这就是网页表现与内容分离的基础。

一、层叠：CSS里的优先级计算不是简单覆盖

层叠的英文 Cascading 来自瀑布流式的优先级传递。浏览器在渲染一个元素时，会汇总三类来源的样式：用户代理默认样式、用户设置和作者样式。作者样式又分为外部样式表、内部样式表和内联样式。来源不同时，作者样式通常高于用户代理样式；相同来源下，再比较选择器优先级。优先级通常用三位数字表示，例如元素选择器的权重可以记为（0，0，1），类选择器为（0，1，0），ID选择器为（1，0，0）。这个比较并不总是越大越合理，过度提高权重会让样式表难以维护。

下面这段样式展示了选择器优先级如何影响最终结果。同一个段落可能同时命中三个规则，颜色并不会因为书写位置靠后就绝对胜出，而是先比较选择器的具体程度。

/* 元素选择器，优先级最低 */
p {
  color: #333;
  line-height: 1.8;
}
/* 类选择器，优先级高于元素选择器 */
.article-summary p {
  color: #555;
}
/* ID选择器，再高一级，不推荐滥用 */
#main-content .article-summary p {
  margin-bottom: 1.5em;
}

可以看到，#main-content 这类 ID 选择器会轻松压过类选择器和元素选择器。除了选择器权重，内联样式也参与层叠，而且通常高于普通作者样式。但内联样式把视觉规则重新塞回 HTML，会破坏表现与内容分离的原则，因此只在极少数场景下使用。

二、内容与表现分离，HTML和CSS各司其职

在早期网页中，颜色、字体、背景甚至布局经常直接写在 HTML 里。像 <font>、<center>、bgcolor 这类表现属性一旦散落在结构代码中，改一个颜色就要逐个页面查找替换。内容与表现分离后，HTML 只描述文档有哪些标题、段落、列表、链接等结构，视觉细节全部交给 CSS。这样不仅代码干净，还更容易理解页面语义。

可以对比一下未分离和分离后的写法。未分离时，HTML 充斥着样式信息，结构并不清晰；分离后，HTML 只保留语义类名，样式集中管理。

<!-- 不推荐：HTML被表现属性污染 -->
<body bgcolor="#f5f5f5">
  <p><font size="5" color="blue"><b>标题</b></font></p>
  <table border="1">
    <tr><td>内容</td></tr>
  </table>
</body>
<!-- 推荐：结构清晰，样式交给CSS -->
<body>
  <h1>标题</h1>
  <table class="price-table">
    <tr><td>内容</td></tr>
  </table>
</body>

对应的 CSS 单独管理背景、标题颜色和表格边框。这样即使以后要换成深色主题或调整边框粗细，也只需要修改样式表，不必动 HTML 结构。

body {
  background: #f5f5f5;
}
h1 {
  color: blue;
  font-size: 1.5rem;
}
.price-table {
  border-collapse: collapse;
}
.price-table td {
  border: 1px solid #ccc;
  padding: 8px 12px;
}

分离还天然适合响应式设计。同一份 HTML 在面对手机、平板、桌面屏幕时，只需要通过媒体查询切换规则。例如小屏幕下让表格横向滚动，结构完全不用改。

/* 小屏幕下调整布局，无需改动HTML */
@media (max-width: 600px) {
  .price-table {
    display: block;
    overflow-x: auto;
  }
}

三、引入CSS的三种方式，优先使用外部样式表

引入 CSS 有三种方式：外部样式表、内部样式表和内联样式。外部方式是在 HTML 头部通过 <link> 标签引用独立的 .css 文件，浏览器在加载页面时下载并应用。内部方式则用 <style> 标签写在当前文档里，只对当前页生效。内联样式通过元素的 style 属性直接声明，例如 <p style="color: red;">，虽然优先级很高，但会把视觉规则重新塞回结构，违背分离原则。

一个规范的外部引入示例如下。多个样式表可以按顺序加载，后面的规则在同等优先级下覆盖前面，这样可以把基础布局和主题皮肤拆成不同文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内容与表现分离示例</title>
  <link rel="stylesheet" href="base.css">
  <link rel="stylesheet" href="theme.css">
</head>
<body>
  <main>
    <h1>文章列表</h1>
    <ul>
      <li><a href="/post/1">第一篇文章</a></li>
      <li><a href="/post/2">第二篇文章</a></li>
    </ul>
  </main>
</body>
</html>

选择外部样式表还有一个现实好处：多个页面可以共享同一份 CSS。修改一次按钮颜色、文章行高或表单边框，就能在整个站点生效。浏览器也能把已经下载过的 CSS 文件缓存起来，后续页面不必重复下载，对性能更友好。

四、实践中的常见误区与维护建议

分离不等于完全不用内联样式，但实践中应尽量少用。一个常见的误区是：遇到样式不生效就不断加 !important。这种声明虽然能立刻压过普通规则，但会让层叠关系变得极难追踪。更好的做法是回头检查选择器权重是否过高、加载顺序是否合理，以及是否存在多个样式文件互相覆盖。

另一个误区是选择器层级过深。例如 .main .content .article .title span 这种写法不仅难读，还会让后续覆盖变得困难。可以通过语义化类名和命名规范来降低复杂度。使用 CSS 变量也能集中管理颜色、间距等主题值，让改动更直观。

/* 使用CSS变量统一主题，方便换肤 */
:root {
  --brand-color: #0a6cff;
  --text-color: #222;
  --spacing-base: 8px;
}
.btn-primary {
  background: var(--brand-color);
  padding: calc(var(--spacing-base) * 1.25) calc(var(--spacing-base) * 2);
  color: #fff;
}

最后需要注意的是，内容与表现分离并不是切断 HTML 和 CSS 的联系，而是明确各自边界。HTML 用标签和类名表达结构意图，CSS 用选择器匹配这些结构并施加视觉表现。边界清楚之后，团队协作时后端或内容编辑可以专注结构调整，前端样式开发者可以独立维护样式系统，不再因为改一个颜色而担心影响整个页面结构。