CSS · 视觉样式

颜色、字体、间距、布局——让裸奔的HTML变好看。三步上手。

第 1 步

颜色和字体

CSS 的格式永远是 属性: 值;。把下面代码里的颜色和字号改一改，看变化：

style.css

color = 文字颜色 background = 背景色 font-size = 字号
颜色可用英文名（red）或十六进制（#8b5e3c）。
💡 试试看：把 color 改成 #c0392b 看看效果。

🔍 发生了什么

<style> 标签里写的就是 CSS。改一处，全页面生效——比在每个 HTML 标签上写 style="..." 方便多了。

第 2 步

盒模型

每个 HTML 元素都是一个盒子。从内到外：内容 → padding → border → margin：

┌────────── margin ──────────┐
│ ┌──────── border ────────┐ │
│ │ ┌───── padding ─────┐ │ │
│ │ │    你的内容在这     │ │ │
│ │ └────────────────────┘ │ │
│ └─────────────────────────┘ │
└──────────────────────────────┘

改右侧数字，看蓝色盒子的变化：

盒子实验

padding = 内边距 border = 边框 margin = 外边距 border-radius = 圆角
💡 试试看：把 border-radius 改成 50%——盒子会变成椭圆！

第 3 步

做一张角色卡片

把学到的颜色、盒模型、字体拼在一起：

角色卡片

border-radius: 50% → 圆形 text-align: center → 居中
💡 试试看：换成你的OC名字和信息！

🎯 你学会了

✅ color 和 font-size 控制文字 ✅ padding/border/margin 控制间距 ✅ border-radius 做圆角 ✅ .class 选择器 ✅ 拼出完整角色卡片

先把手卡用起来，剩下边用边查。

← HTML · 骨架 JavaScript · 行为 →