内功篇Paid
网站的“颜值” - CSS
想更加系统的学习可以看看这个教程：https://www.runoob.com/html/html-css.html
在我们使用“装修利器” Tailwind CSS 之前，让我们先花十分钟，快速了解一下 CSS 最传统、最基础的工作方式。这对于你理解“样式”的本质至关重要。
1、传统装修的“三要素”
传统 CSS 的工作方式，就像是你写了一本独立的《装修设计规范手册》，然后告诉 HTML 骨架去遵守这本手册。这本手册里的每一条规则，都由三个核心要素构成：
- 选择器 (Selector)：你要装修“谁”？
这是规则的第一部分，它会精准地选中页面上的一个或多个元素。比如 h1 就是选中所有的一级标题，.card 就是选中所有带有“card”这个外号的盒子。
- 属性 (Property)：你要装修“哪个方面”？
选中目标后，你需要指明要改变它的哪个视觉特征。比如 color (文字颜色)、font-size (字号大小)、background-color (背景颜色)。
- 值 (Value)：你想把它装修成“什么样”？
这是对属性的具体设定。比如 color 的值可以是 blue (蓝色)，font-size 的值可以是 24px (24像素)。
把这三者合起来，就成了一条完整的 CSS 规则，它看起来是这样的：
plainh1 { color: blue; font-size: 36px; }
这条规则的“人话”翻译就是：“找到我页面里所有的 `h1` 标题，把它的文字颜色改成蓝色，并且字号设置为 36 像素。”
#### **2、实战案例：用传统方式给“毛坯房”做个简装**
我们还是用之前那个个人介绍页面的“毛坯房” HTML。现在，假设我们创建了一个名为 `style.css` 的独立装修文件，内容如下：
`**style.css**`** 文件：**
```plain
body {
text-align: center; /* 让所有文字内容居中 */
}
h1 {
color: #2c5282; /* 一种深蓝色 */
}
img {
border-radius: 50%; /* 圆角设置为50%，就变成了圆形 */
border: 2px solid #e2e8f0; /* 一个2像素宽的、浅灰色的实线边框 */
}
p {
color: #4a5568; /* 一种深灰色 */
}
```
然后，我们需要在 HTML 文件的 `<head>` 部分，用一个 `<link>` 标签，把这本“装修手册”引入进来，告诉 HTML 要