很多人在学习前端开发时，最头疼的就是“代码写完了，但页面丑得没法看”。明明功能都实现了，图片要么变形，文字要么挤在一起，颜色搭配也很突兀。这其实不是你的代码逻辑有问题，而是缺少了**CSS样式美化**这一步。CSS就像是网页的衣服和化妆品，能让原本灰头土脸的HTML变得精致专业。
本教程会带你从零开始，手把手修改页面中的图片和文字样式。我们会使用最实用的CSS属性，通过具体的代码示例，让你理解每一行代码的作用。跟着操作一遍，你就能掌握让页面变好看的底层逻辑。
## 前置准备
在开始动手之前，你需要准备好两样东西：
1. **一个HTML文件**：创建一个新的文本文件，命名为`index.html`，并用记事本或VS Code打开。把下面这段基础结构代码粘贴进去。这是我们要美化的“素颜”页面。
```html
欢迎来到我的网站
这是一段介绍文字。CSS可以改变它的颜色、大小和间距，让阅读体验更好。
这里是正文内容。通过合理的排版，文字会变得清晰易读，不再挤在一起。
```
2. **一个浏览器**：Chrome或Edge都可以。用浏览器打开你刚创建的`index.html`文件。你会看到一个默认样式的页面：标题很大，图片原样显示，文字紧贴边缘，按钮是默认的灰框样式。这就是我们要改造的对象。
## 分步操作步骤
### 步骤1：重置浏览器默认样式，统一基础
浏览器对HTML元素有默认的样式，比如`body`默认有8px的外边距，标题有加粗和上下边距。这些默认值在不同浏览器里表现不一致，而且通常不符合设计需求。我们需要先清除这些干扰。
1. 在`