网站
引入
CSS 设计关注的不只是某个属性怎么写，而是整个页面看起来是否清楚、统一、舒服。
学会基础属性之后，需要开始考虑颜色、字体、间距、层次和组件样式怎么组织。
正文
定义
定义
CSS 设计是指通过颜色、字体、间距、布局、圆角、阴影等样式规则，组织页面视觉效果和阅读体验。
简单理解：CSS 设计就是把零散样式整理成一套更统一的页面视觉规则。
颜色
颜色要有主次，不要每个地方都用不同颜色。
:root {
--primary-color: #2563eb;
--text-color: #111827;
--muted-color: #6b7280;
--bg-color: #ffffff;
}常见颜色角色：
| 颜色角色 | 作用 |
|---|---|
| 主色 | 按钮、链接、重点操作 |
| 正文色 | 主要文字 |
| 辅助色 | 次要说明文字 |
| 背景色 | 页面或卡片背景 |
| 状态色 | 成功、警告、错误提示 |
字体和排版
排版要保证文字好读。
body {
font-family: system-ui, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #111827;
}常见做法：
- 正文保持稳定字号
- 标题比正文更明显
- 行高不要太紧
- 一段文字不要太宽
间距
间距决定页面是否透气。
.section {
padding: 32px 24px;
}
.card {
padding: 24px;
margin-bottom: 16px;
}不要每个地方都随便写不同间距，可以固定常用值。
:root {
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
}层次
页面需要有主次层次，让用户知道先看哪里。
常见方式：
- 标题更大或更粗
- 重要按钮使用主色
- 次要文字颜色更浅
- 卡片用背景、边框或阴影分组
.title {
font-size: 28px;
font-weight: 700;
}
.desc {
color: #6b7280;
}统一组件
相同类型的元素应该使用统一样式。
.btn {
padding: 8px 16px;
border: none;
border-radius: 8px;
background-color: #2563eb;
color: white;
}
.card {
padding: 24px;
border-radius: 12px;
background-color: white;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}按钮、卡片、表单、导航这些常见元素，最好有统一规则。
使用 CSS 变量组织样式
CSS 变量适合保存设计中反复使用的值。
:root {
--primary-color: #2563eb;
--text-color: #111827;
--radius: 12px;
--shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.card {
border-radius: var(--radius);
box-shadow: var(--shadow);
}这样改风格时，不需要到处找重复值。
例子
简单卡片设计
<div class="card">
<h3>CSS 学习</h3>
<p>整理基础属性、布局和动效。</p>
<a href="#">继续学习</a>
</div>.card {
max-width: 360px;
padding: 24px;
border-radius: 16px;
background-color: white;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.card h3 {
margin: 0 0 8px;
color: #111827;
}
.card p {
margin: 0 0 16px;
color: #6b7280;
line-height: 1.6;
}
.card a {
color: #2563eb;
font-weight: 700;
}这个例子用标题、正文、链接颜色区分了信息层次。
页面基础变量
:root {
--color-primary: #2563eb;
--color-text: #111827;
--color-muted: #6b7280;
--color-bg: #f9fafb;
--radius-card: 16px;
--space-md: 16px;
--space-lg: 24px;
}先整理常用变量，再写具体组件，会更容易保持统一。
特点
- CSS 设计关注整体视觉，不只是单个属性
- 颜色要有主次关系
- 字体、字号、行高影响阅读体验
- 间距要统一，页面才不会乱
- 按钮、卡片、表单等组件样式要保持一致
- 可以用 CSS 变量 管理颜色、间距、圆角、阴影
- 好的设计应该兼顾美观、可读性和可访问性
理解
CSS 设计可以理解为给页面建立一套“视觉规则”。
如果没有规则，页面可能每个地方都能单独看，但放在一起就很乱。
我理解 CSS 设计的重点是统一：颜色统一、间距统一、组件统一、层次清楚。这样页面不一定复杂，但会更干净、更好读。
引出
理解 CSS 设计之后，可以继续结合 CSS 变量、CSS 可访问性 和 CSS 响应式设计，整理出更完整的页面样式规范。