第12课：颜色与背景
进度 0/30
🌈
颜色与背景
网页的调色盘
📖知识引入
🎨三种写颜色的方式
red直接写名字（认识140个颜色单词）；#FF6B00是十六进制码；rgb(255,107,0)是红绿蓝配方。三种写法说的是同一个颜色！
🧪RGB混色原理
屏幕颜色=红绿蓝三色光按比例混合。0是熄灯、255是拉满，三个255是白色，三个0是黑色——你家屏幕上千万种颜色全靠它。
🖼️背景大变样
background能铺纯色、图片，还能用linear-gradient做渐变——从一种颜色慢慢过渡到另一种，高级感立刻拉满。
🌡️颜色有情绪
红色热情危险、蓝色冷静科技、绿色自然健康、紫色神秘高级。选颜色前先问：我的网站想让访客什么心情？
🤖AI整套配色
问AI「科技感网站配色方案」，它给你主色+辅色+强调色的完整搭配，还附使用建议——比配色小白瞎试强100倍。
💡
配色不超过三种主色：多则乱，少则精！
🔍调色实验室
/* 三种写法，同一个橙色 */
.color-a { color: tomato; }
.color-b { color: #FF6B00; }
.color-c { color: rgb(255, 107, 0); }
/* 星空渐变背景 */
body {
background: linear-gradient(#667eea, #764ba2);
}
/* 深色卡片 */
.card {
background: #1e293b;
color: #f8fafc;
}RGB像调鸡尾酒，各倒多少随你：
🟥 红 255 + 🟩 绿 107 + 🟦 蓝 0
= 🟧 橙色 #FF6B00🟥 红 0 + 🟩 绿 0 + 🟦 蓝 0
= ⬛ 黑色（全熄灯）🟥 红 255 + 🟩 绿 255 + 🟦 蓝 255
= ⬜ 白色（全拉满）🎨 经典渐变（右边代码）： 从蓝紫渐变，仿佛把 星空铺进了网页！
小实验： 把rgb里的数字改一改， 保存刷新，看看调出什么色。 每人随机一色，全班没有 两个一样的「专属色」！
🎯小测验
第1题：rgb(255,255,255)是什么颜色？
第2题：想做一个「森林主题」网站，主色最好选？
第3题：linear-gradient在CSS里用来做什么？
📝本课知识点
- ✓颜色三种写法：名字/#十六进制/rgb
- ✓RGB三色光混合出千万色
- ✓background能铺色、图、渐变
- ✓颜色自带情绪：红热蓝冷绿自然
- ✓AI能出整套配色方案
第12课完成！继续探索下一课吧 🚀