网页与程序协作
CSS
网页的外观与布局
免费阅读 · 配套小练习 · 更新于
一句话理解
选择要调整的元素，再设置颜色、间距和排列方式。
打个比方
HTML 安排了房间里的家具，CSS 决定家具的颜色、间距和摆放方式。想改变一把椅子，先要明确选中哪把椅子。
一条 CSS 规则包含选择器和声明。选择器决定哪些元素受影响，属性和值决定如何显示。例如 h1 选中主标题，color 设置文字颜色。多条规则可能同时影响一个元素；浏览器依据层叠规则决定最终样式。
看个例子
<style>
body {
font-family: sans-serif;
line-height: 1.8;
padding: 24px;
}
h1 { color: #366e60; }
p { font-size: 18px; }
</style>如果你要求 AI 调整标题颜色、正文字号和页面边距，可以检查它是否修改了对应的 color、font-size 和 padding。这个 style 可以放在 HTML 篇示例的 head 中；实际项目也可能把样式写在独立 CSS 文件里。
什么时候会遇到
- 把“好看一点”变成 AI 可执行的颜色、间距与字号要求。
- 检查 AI 的样式改动是否影响了其他元素，或漏掉目标元素。
常见误解
把所有元素设成固定宽度，容易让手机出现横向滚动。只改颜色也不能修复布局问题。
Vibe Coding 小练习 · 描述需求 → 看懂改动 → 验证结果
动手练一练：把外观要求说清楚，检查 AI 的样式改动
向 AI 提供 HTML 篇完成的介绍页和当前样式；没有自己的页面时，可用上方示例作对照材料。
试着这样告诉 AI
请只调整介绍页的阅读样式：主标题改成紫色 #805e91，正文段落为 18px，页面内边距为 32px。保留现有文字与链接，不增加新功能。完成后列出修改的选择器和属性，并说明我应如何检查。可以在你使用的 AI 编程工具中完成；也可以先对照本页代码示例，练习理解需求、识别改动和列出检查项。
跟着做
- 把具体的颜色、字号、间距和保留要求交给 AI。
- 对照修改前后，找到 h1 的 color、p 的 font-size 和页面 padding，检查是否还有无关改动。
- 刷新实际页面，查看文字与边距，再点击原有链接；不符合时把观察结果反馈给 AI。
你应该看到
样式符合要求，原有内容与链接仍正常。
完成检查
- 标题颜色、正文字号和边距分别符合需求。
- 正文与链接保留，AI 没有顺带重写页面内容。
遇到卡点？看提示
把“好看一点”拆成可检查的属性。若没有变化，先检查保存、刷新和样式是否作用于正确元素。
查看参考思路
在本例中，可以核对 h1 的 color、p 的 font-size 和 body 的 padding。其他结构也可能实现需求；最后以实际显示和功能检查为准，不能只看 AI 的完成说明。
想一想
h1 { color: ... } 会修改页面的所有文字吗？
查看答案
不会。它直接匹配 h1 元素；正文段落需要另外选择。部分属性会继承，但不能把继承理解成所有元素都被选中了。