祖传小妙招：三行代码拯救祖传乱码页 + 深色模式自动切换

【总览】

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

阅读提示：800 字左右，泡面的三分钟刚好；学不会你来打我，我面已经坨了。

一、祖传乱码页长啥样？

病因 90% 是：文件 UTF-8，但浏览器按 GBK 喝；或者数据库 Latin-1，却硬塞 Emoji。
解药：三行代码，从 HTTP 到 HTML 全链路喊“统一 UTF-8”。

二、三行代码，拯救乱码

1. HTTP 响应头（服务器配置，一劳永逸）

AddDefaultCharset UTF-8

Nginx 版：

charset utf-8;

2. HTML 文档头（防老服务器作妖）

<meta charset="utf-8">

3. CSS 文件头（避免中文注释变天书）

@charset "utf-8";

口诀：
“响应头是大哥，meta 是备胎，css 带个护照，三方会师不乱码。”

三、深色模式：白天奶白，夜晚暗黑

1. CSS 变量 + 媒体查询，一杯咖啡搞定

:root {
  --bg: #ffffff;
  --text: #1e293b;
  --accent: #f43f5e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e293b;
    --text: #f1f5f9;
    --accent: #f472b6;
  }
}

body {
  background: var(--bg);
  color: var(--text);
  transition: background .3s, color .3s;
}

• prefers-color-scheme: dark 会读取系统主题；
• 一行 transition 让切换有丝滑淡入，而不是瞬间闪瞎；
• 以后老板说“粉色太娘”，改变量一处，日夜双杀。

四、手动开关：让“用户说了算”

系统深色，但用户就想白？加按钮 + 1 行 JS：

<button id="toggle">🌓 切换</button>

toggle.addEventListener('click', () => {
  document.documentElement.classList.toggle('dark');
});

/* 手动覆写媒体查询 */
:root.dark {
  --bg: #1e293b;
  --text: #f1f5f9;
  --accent: #f472b6;
}

逻辑：
“class 存在 → 强制暗黑，class 去掉 → 回归媒体查询。”
持久化：再塞一行 localStorage，刷新不乱：

const key = 'theme';
// 读取
document.documentElement.classList.toggle('dark', localStorage.getItem(key) === 'dark');
// 写入
toggle.onclick = () => {
  const isDark = document.documentElement.classList.toggle('dark');
  localStorage.setItem(key, isDark ? 'dark' : '');
};

五、图片也换肤？一行 mask 搞定

Logo 白底很丑？深色模式自动反白：

.logo {
  background: url(logo-black.svg) no-repeat center/contain;
  filter: invert(0);
}
@media (prefers-color-scheme: dark) {
  .logo { filter: invert(1); }   /* 黑变白，白变黑 */
}

无需双图，一键反色，连图标都日夜双拼。

六、兼容性兜底：IE 连夜买站票

IE 不支持 prefers-color-scheme，但支持 CSS 变量？
不，IE 也不支持变量。终极兜底：

/* 给旧浏览器一份传统配色 */
body {
  background: #fff;
  color: #1e293b;
}

@supports (--css: variables) {
  body {
    background: var(--bg);
    color: var(--text);
  }
}

解释：
“支持变量就用变量，不支持拉倒，至少不乱码。”
IE：我退休了，别叫我。

七、祖传避坑指南

八、课后作业：给“呼吸灯”输入框加夜行衣

第 6 集做的“呼吸灯”输入框，现在支持深色模式：

• 白天：边框 #e5e7eb → #6366f1 → #e5e7eb
• 夜晚：边框 #374151 → #818cf8 → #374151

要求：

1. 仅用 CSS 变量 + @media (prefers-color-scheme: dark)；
2. 聚焦动画依旧 1.5s 循环；
3. 提交 CodePen 或截图。

最佳实现送“暗黑模式”鼠标垫（电子版，自己印），老板看到都想要链接。

九、系列彩蛋：一句话总结 7 集核心

“写网页就像相亲——
先套衣服（CSS），再学点菜（选择器），
配色像化妆，盒子是身材，定位找座位，
动画会摇尾巴，深色模式换夜行衣，
全程 UTF-8 别乱码，不然丈母娘直接拉黑。”

十、完结撒花 & 下一条规划

至此，“CSS”系列 7 集全部交稿。
从“给网页穿衣服”到“深色模式”，老板需求 80% 已覆盖。
接下来想聊啥？评论区投票：

1. 响应式布局 & 媒体查询实战
2. CSS 预处理器（Sass/Less）快速上手
3. 组件库搭建：按钮、表单、弹窗一次打包
4. 性能优化：压缩、按需加载、关键 CSS

票数最高就开坑，关注不迷路，我们下系列见！

（完）