🟦 CSS 样式与布局语言全典

CSS（Cascading Style Sheets）是一门描述文档表现、布局和响应式规则的声明式样式表语言。它的核心不是按顺序执行语句，而是让选择器匹配元素，再由层叠、继承和优先级共同决定最终样式。

🔀🟦 CSS 平台能力演进

CSS1 → CSS2.1 (1996–2011)字体、颜色、盒模型、定位、媒体类型与层叠规则定型

#content {
  width: 760px;
  margin: 0 auto;
}
.nav li { float: left; }

💡 特性解析： CSS1/2 建立选择器、层叠、盒模型与定位基础；布局长期依赖 table、float 和 position 等间接手段。

Live CSS 实验室

修改颜色、布局、选择器或容器查询，右侧页面会自动刷新。示例 DOM 固定，因此可以专注观察层叠与布局结果。

CSS

:root {
  --accent: #2563eb;
  --surface: #eff6ff;
}
body { background: linear-gradient(145deg, #eff6ff, #f8fafc); }
.demo-shell { container: demo / inline-size; max-width: 42rem; margin: auto; }
.eyebrow { color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.card-grid { display: grid; gap: .8rem; }
.card-grid article { display: grid; gap: .25rem; padding: 1rem; border: 1px solid #bfdbfe; border-radius: .8rem; background: white; box-shadow: 0 8px 24px #1d4ed81a; }
.card-grid span { color: #475569; }
@container demo (width > 34rem) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

:root { --accent: #2563eb; --surface: #eff6ff; } body { background: linear-gradient(145deg, #eff6ff, #f8fafc); } .demo-shell { container: demo / inline-size; max-width: 42rem; margin: auto; } .eyebrow { color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .card-grid { display: grid; gap: .8rem; } .card-grid article { display: grid; gap: .25rem; padding: 1rem; border: 1px solid #bfdbfe; border-radius: .8rem; background: white; box-shadow: 0 8px 24px #1d4ed81a; } .card-grid span { color: #475569; } @container demo (width > 34rem) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

修改后切换到“效果”即可刷新预览 · Ctrl/⌘ + Enter

学习路线

• CSS 基础、层叠与布局：选择器、盒模型、自定义属性、Flexbox 与 Grid。
• CSS3 之前：CSS1、CSS2/2.1、盒模型、浮动与定位，以及旧式布局为何难以维护。
• CSS3 模块化时代：媒体查询、圆角、阴影、渐变、过渡、动画、Flexbox 与模块化标准。
• 现代 CSS 平台能力：Grid、容器查询、级联层、:has()、嵌套与现代颜色空间。

三阶段看懂 CSS

阶段	主要布局方式	代表能力	今天怎么用
CSS1 / CSS2.1	正常流、table、float、position	字体、颜色、盒模型、伪类、媒体类型	理解层叠根基，维护遗留布局
CSS3 模块化	Flexbox + 响应式媒体查询	圆角、阴影、渐变、变换、动画	构建现代响应式界面，避免把 CSS3 当成单一版本号
Modern CSS	Grid + 容器驱动组件	@layer、:has()、容器查询、嵌套、OKLCH	建立低耦合组件与设计系统，按 Baseline/兼容性渐进增强

CSS 的特殊定位

维度	CSS
求值模型	选择器匹配 + 层叠 + 继承 + 布局与绘制
核心抽象	规则集、选择器、属性、值、条件规则
状态表达	伪类、媒体查询、容器查询和自定义属性
正确性验证	Stylelint、视觉回归、响应式与浏览器兼容性测试