CSS是什么

给网页换装打扮的魔法语言

📖知识引入

🎨CSS=化妆师

HTML是素颜，CSS化完妆惊艳全场。没有CSS的网页只有黑字白底，像没装修的毛坯房；加上CSS，才有花花绿绿的真实互联网。

🎯选择器：先选中再打扮

CSS第一步是「选中」要打扮的元素：p选中所有段落、h1选中大标题。选中谁、穿什么，两步走缺一不可。

📦属性和值：打扮说明书

color: blue; 一条规则=属性（改什么）+值（改成啥），中间冒号、结尾分号，像认真填一张表格。

📍三种放置法

写在标签里（行内样式）、写在head里（内部样式）、单独存.css文件（外部样式）。正规网站都用外部样式表，一处修改全站生效。

🤖AI是配色大师

把代码丢给AI：「帮我改成赛博朋克风格」，AI直接帮你重写所有CSS——配色、字体、间距一次到位。

💡

CSS口诀：先选谁（选择器），再变啥（属性：值）！

🔍素颜 vs 化妆

h1 {
  color: orange;
  text-align: center;
}

p {
  background: white;
  padding: 16px;
  border-radius: 12px;
}

body {
  background: linear-gradient(#a1c4fd, #c2e9fb);
}

同一段HTML，CSS前后对比：

😴 素颜版（只有HTML）：
┌──────────────────┐
│ 我是小明            │
│ 我喜欢编程和画画      │
│                    │
│（黑字白底，像试卷）   │
└──────────────────┘

😍 化妆版（加上CSS）：
┌──────────────────┐
│ ░░ 我是小明 ░░      │ ←橙色加粗居中
│ ╭──────────────╮ │
│ │ 我喜欢编程和画画│ │ ←白卡片圆角带阴影
│ ╰──────────────╯ │
│（背景还淡淡发光✨）  │
└──────────────────┘

右边代码里的CSS 一共就干了三件事： 1️⃣ 选中h1，改成橙色大字 2️⃣ 选中p，装进卡片 3️⃣ 给body上渐变背景

三段CSS，判若两「页」！

🎯小测验

第1题：CSS在网页中扮演什么角色？

第2题：CSS规则「color: blue;」的组成是？

第3题：想让所有段落都变成红色，选择器该写什么？

📝本课知识点

✓CSS给HTML化妆：素颜变惊艳
✓选择器选中，属性值改造
✓一条规则=属性：值；
✓正规网站用外部.css文件
✓AI一句话换整站风格

第11课完成！继续探索下一课吧 🚀

🎨

上一课

第10课

下一课

第12课

🎨