与 CSS 的一次美丽邂逅

没有 CSS 的网页，就像一份没有排版的 Word 文档------信息都在，但你不想多看一眼。

CSS 是前端开发者的第一门"美学课"。

它不像 JavaScript 那样需要理解复杂的逻辑与算法，也不像后端技术那样涉及服务器与数据库的交互。CSS 的门槛很低------几行代码就能改变颜色、调整间距；但 CSS 的天花板很高------同样的属性组合，新手写出来杂乱无章，高手却能搭出优雅稳固的视觉系统。

一、什么是 CSS

1.1 概述

CSS（Cascading Style Sheets，层叠样式表）是一种样式语言，用于控制网页的外观和布局。它与 HTML、JavaScript 并称为 Web 三大核心技术：HTML 负责内容结构，JavaScript 负责交互行为，CSS 则负责视觉呈现------包括颜色、字体、间距、布局、动画等一切你能看到的界面效果。

1.2 核心机制：层叠

"层叠"是 CSS 的核心机制。当多个属性声明同时作用于一个元素时，浏览器会按照优先级层层筛选，最终确定哪个声明生效。优先级由选择器特异性、来源和声明顺序共同决定。这个机制让全局样式可以被局部精确覆盖，既保证了整体一致性，又保留了个别调整的灵活性。

1.3 设计原则：内容与表现分离

CSS 诞生的初衷是让 HTML 专注于内容本身，而样式完全交给 CSS 管理。这一分离带来了显著优势：

可维护性：修改外观无需改动 HTML 结构
可复用性：一份 CSS 可以控制多个页面的样式，甚至同一页面可以切换多套主题
性能优化：CSS 文件可被浏览器缓存，减少重复加载
多设备适配：同一份 HTML 可以针对不同场景（屏幕显示、打印输出、移动设备）应用不同的样式

1.4 规范维护

CSS 标准由 W3C（万维网联盟）的 CSS 工作组制定和维护。规范采用模块化演进，各功能独立推进，如 Selectors、Box Model、Flexbox、Grid、Animations 等模块各自迭代。浏览器厂商依据标准实现功能，新特性通常先以实验形式提供，成熟后成为通用标准。

二、CSS 发展简史

CSS 从 1994 年的一封邮件提案起步，至今已走过三十余年。从最初为 HTML 赋予基本样式，到如今构建复杂的二维布局与交互动效，它的发展脉络清晰反映了 Web 设计需求的演进。

2.1 诞生背景：为 Web 注入样式

1990 年代初，万维网刚刚诞生。HTML 负责承载文档结构，但视觉呈现尚无统一方案，各浏览器实现参差不齐。

1994 年 10 月 10 日，挪威工程师 Håkon Wium Lie 在 www-talk 邮件列表发布了题为 "Cascading HTML style sheets -- a proposal" 的邮件，首次提出层叠样式表（CSS）的概念。随后，Lie 与荷兰工程师 Bert Bos 合作设计 CSS，并于 1995 年间发布约八版修订草案，最后一版于 1995 年 12 月发布。

CSS 的核心理念是"层叠"（Cascading）：一个元素的最终样式可同时来源于创作者、读者和浏览器，按优先级逐层叠加，实现内容与表现的分离与灵活管理。

1996 年 12 月 17 日，CSS Level 1（CSS1） 成为 W3C 首个正式推荐标准。

2.2 CSS1（1996）：奠定基础

CSS1 提供了网页最基本的样式控制能力，包括：

字体属性：font-family、font-size、font-weight 等
颜色与背景：color、background-color、background-image 等
文本属性：text-align、text-indent、line-height 等
盒模型基础属性：margin、padding、border 等

1996 年底，Internet Explorer 3 首次支持 CSS1，标志着 CSS 正式进入浏览器世界。

2.3 CSS2（1998）：功能扩展

1998 年 5 月 12 日，CSS Level 2（CSS2） 成为 W3C 推荐标准，新增重要特性：

定位与布局：position（absolute、relative、fixed）、float、clear、z-index 等
媒介类型：支持打印机、屏幕、语音等不同输出媒介
高级选择器：子选择器（>）、相邻选择器（+）、通用选择器（*）
伪类与伪元素：:hover、:first-child、::before、::after
可下载字体：@font-face

CSS2 推动了"内容与表现分离"原则的实践，使开发者逐步摆脱 <table> 布局依赖。

2.4 CSS2.1：修正与稳定

CSS2 发布后，各浏览器实现存在大量差异。W3C 随即启动 CSS 2.1 修订工作：

2004 年 2 月发布首份草案
2007 年 7 月成为候选推荐
2011 年 6 月 7 日正式成为 W3C 推荐标准

CSS2.1 删除了 CSS2 中缺乏实现支持的属性（如 text-shadow），澄清规范歧义，更准确反映浏览器实际行为。长期以来，它是浏览器支持最完整的 CSS 版本。

2.5 CSS3：模块化时代

CSS2.1 之后，单一庞大规范难以适应快速发展需求。自 1999 年起，CSS 采用模块化策略：将语言拆分为独立模块，各自独立推进标准化。

需要注意的是，CSS3 并非统一版本号，而是模块化演进的统称。W3C 不再使用 CSS4、CSS5 等版本号，而是采用模块级别命名（如 Selectors Level 4、CSS Color Module Level 5）。

两个重要布局模块标志性里程碑：

Flexbox（弹性盒布局）：2009 年草案发布，2015 年 3 月进入候选推荐，解决单方向元素对齐与分布问题。
CSS Grid（网格布局）：2011 年提出草案，2017 年 12 月成为候选推荐，首次提供原生二维布局能力，使复杂布局无需框架即可实现。

Flexbox 与 Grid 的出现，使 CSS 从"描述样式"迈向"构建布局"的新阶段。

2.6 生态演进与持续发展

CSS 核心语言演进的同时，其生态快速发展：

预处理器：Sass、Less、Stylus，解决原生 CSS 编程能力不足
后处理器：PostCSS，通过插件扩展功能，如 Autoprefixer 自动补全浏览器前缀
CSS 框架：Bootstrap、Tailwind CSS，提供开箱即用样式与布局
CSS-in-JS：将样式逻辑嵌入 JavaScript 组件，适应组件化框架

现代 CSS 模块化仍在持续推进，包括：

原生嵌套语法（CSS Nesting）
@layer 规则以精细管理层叠优先级
容器查询（Container Queries）

从 1994 年的一封邮件，到今天数十个独立模块并行演进，CSS 的发展史体现了 Web 从文档展示走向应用平台的演进过程。理解这段历史，有助于把握 CSS 能力边界，并判断特性在生产环境中的适用时机。

三、如何编写 CSS 样式

3.1 语法规则

CSS 的书写核心是规则集（style rule）由两部分组成：选择器和声明块。

示例：

css 复制代码

/* 选择所有 <p> 元素 */
p {
  color: #333;           /* 文字颜色 */
  font-size: 16px;       /* 字体大小 */
  line-height: 1.6;      /* 行高 */
}

/* 选择 class 为 "highlight" 的元素 */
.highlight {
  background-color: yellow;
  padding: 4px 8px;
}

语法要点：

选择器指向要设置样式的 HTML 元素
声明块用 {} 包裹
每条声明以 属性: 值; 的格式书写，以分号结尾
最后一个声明的分号可以省略，但建议保留（方便后续追加）

3.2 注释

CSS 注释使用 /* ... */ 格式，可以跨行：

css 复制代码

/* 这是单行注释 */

/* 
   这是多行注释
   用于解释复杂的样式逻辑
*/

p {
  color: red;  /* 将文字设为红色 */
}

⚠️ CSS 不支持 // 单行注释语法（这是 Sass/Less 等预处理器的特性）。

四、四种引入 CSS 的方式

4.1 内联样式

直接在 HTML 元素的 style 属性中书写：

html 复制代码

<p style="color: red; font-size: 20px;">这是一段红色文字</p>

特点：

优先级最高
难以复用和维护
违背"内容与表现分离"原则
仅适用于需要覆盖特定样式的特殊场景

4.2 内部样式表

在 HTML 文档的 <head> 中使用 <style> 元素：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>我的页面</title>
    <style>
      body {
        background-color: #f5f5f5;
        font-family: "Microsoft YaHei", sans-serif;
      }

      h1 {
        color: #2c3e50;
      }
    </style>
  </head>

  <body>
    <h1>欢迎</h1>
  </body>
</html>

特点：

样式集中管理，便于单页维护
无法跨页面复用
适合单页应用或快速原型开发

4.3 外部样式表

将 CSS 写入独立的 .css 文件，通过 <link> 元素引入：

HTML 文件：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>我的页面</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <h1>欢迎</h1>
  <p class="intro">这是一段介绍文字</p>
</body>

</html>

css/style.css：

css 复制代码

body {
  background-color: #f5f5f5;
  font-family: "Microsoft YaHei", sans-serif;
}

h1 {
  color: #2c3e50;
}

.intro {
  color: #666;
  font-size: 14px;
}

特点：

完全分离内容与样式
多个页面可共享同一份样式，缓存友好
便于团队协作和版本控制
生产环境的标准做法

4.4 @import 导入

在 CSS 文件内部使用 @import 引入其他 CSS 文件：

css 复制代码

/* style.css */
@import url("reset.css");
@import url("layout.css");
@import url("theme.css");

body {
  font-family: sans-serif;
}

特点：

可以按需拆分和组织样式文件
会阻塞渲染，性能不如 <link>
必须在文件最顶部使用
现代项目中更推荐使用构建工具（如 Vite、Webpack）进行模块打包，而非原生 @import