颜色与字体：如何让你的网站看起来像“设计师”而不是“设计师他弟”

【总览】

1. 老板让网页“穿件衣服”——CSS 到底是啥？
2. 选择器：在 HTML 里精准点外卖
3. 颜色与字体：如何让你的网站看起来像“设计师”而不是“设计师他弟”
4. 盒子模型：万物皆盒子，除了你老板画的大饼
5. 定位与布局：把 div 当乐高，拼出九宫格还是巴黎铁塔随你
6. 动画：让按钮像猫咪一样会摇尾巴
7. 祖传小妙招：三行代码拯救祖传乱码页

阅读提示：800 字左右，带薪如厕时间刚好；学不会你来打我，我提前冲水。

一、开场先放两张对比图

老板看完沉默：
“我要前者，后者看起来像是盗版光盘包装。”
于是今天这篇教你配色不乱来、字体不塌方。

二、颜色篇：别在调色盘里撒野

1. 三招搞定“高级脸”

1. 631 法则
   60% 主色 + 30% 辅色 + 10% 强调色，和衣柜一样，主色买大地色，怎么穿都不出错。
2. 偷色神器
   打开 coolors.co 或 huemint.com，一键生成“看起来我就很贵”的配色，复制十六进制即可。
3. WCAG 对比度
   浅灰字配白底 = 老年人+近视双重暴击。用浏览器 DevTools → Lighthouse → Accessibility，低于 4.5:1 就回炉重配。

2. CSS 写法速记

:root {
  --main: #1e293b;    /* 主色 | 深海蓝 */
  --sub: #f1f5f9;     /* 辅色 | 奶奶灰 */
  --accent: #f43f5e;  /* 强调 | 女团粉 */
}

body {
  background: var(--sub);
  color: var(--main);
}

a {
  color: var(--accent);
}

用 var() 就像给颜色起花名，以后老板一句“把粉色换成爱马仕橙”，改一行搞定，不用全局搜索 #f43f5e 找到哭。

三、字体篇：别让读者放大 175%

1. 选字体像相亲，先看“气质”

2. 一行代码搞定“苹果同款”

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", sans-serif;
}

解释：
浏览器从左到右找字体，系统有啥用啥，保证 macOS、Windows、安卓都长得像亲兄弟，没人会看到“宋体”跳出来吓人。

3. 三行把排版变“呼吸状”

body {
  line-height: 1.6;      /* 行高 = 字号×1.6，读起来不憋气 */
  letter-spacing: 0.05em;/* 字距松一点，高级感+1 */
  word-break: break-word;/* 英文长单词自动换行，防止布局被撑成孕妇 */
}

四、实战：把“土味通知”变“小红书风”

原始 HTML：

<div class="card">
  <h3>限时优惠</h3>
  <p>买不了吃亏，买不了上当，全场 9 块 9！</p>
</div>

土味默认样式：黑字+宋体+无间距。
加完 CSS 直接变身：

.card {
  --main: #1e293b;
  --accent: #f43f5e;

  background: #fff;
  border-left: 4px solid var(--accent);
  padding: 1.2rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  max-width: 320px;
  margin: 2rem auto;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.card h3 {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
  color: var(--main);
  letter-spacing: 0.05em;
}

.card p {
  margin: 0;
  color: #64748b;
  line-height: 1.6;
}

效果：

• 深海蓝标题 + 女团粉边条，像小红书里“买它”的卡片；
• 行高 1.6，奶奶都看得清；
• 圆角 + 阴影，瞬间脱离 Word 味。

五、祖传避坑指南

六、课后作业：把“原谅绿”换成“高级莫兰迪”

给你上一集的“确认/取消”按钮加点料：

/* 只让确认按钮高级灰绿，取消按钮保持低调 */
.btn:nth-child(1) {
  background: #a3b18a;   /* 莫兰迪绿 */
  color: #fff;
  border: none;
  padding: .5rem 1.2rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

截图发评论区，让大伙看看你是不是已经从“设计师他弟”毕业。
前 10 名送“莫兰迪 swatch”电子色卡一份，拿去忽悠老板必备。

七、下集预告

颜色字体像化妆，但盒子模型才是骨架。
下一篇《盒子模型：万物皆盒子，除了你老板画的大饼》，
带你彻底搞懂 width、padding、border、margin 四兄弟如何联手把网页撑成“完美身材”。
别走开，系列文持续更新，插眼不亏！

（完）