第二章：CSS秘典 · 色彩与布局的力量

剧情承接：色彩失衡的荒原

林昊穿过 HTML 大门，眼前却是一片灰白扭曲的荒原。所有页面元素如同幽灵般漂浮，没有色彩、没有结构，错乱无章。

"这是失控的样式荒原。 " 零号导师的声音再次响起，

"HTML 给了你骨架，CSS 是赋予世界色彩与形态的皮肤与血肉。"

一个形体扭曲的怪物从远方袭来------它名为默认样式怪（Default Render），专吞未设样式的页面。

秘典显现：CSS 三种注入方式

导师唤出《CSS秘典》，林昊学会三种掌控页面样式的方式：

内联样式（inline style）：
html 复制代码
```
<p style="color: red;">我是红色文字</p>
```
"直接写在标签里，适合快速测试，但不推荐用于大型项目。"
内部样式表（internal style）：
html 复制代码
```
<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
```
"放在 <head> 内部，适合小项目或教学演示。"
外部样式表（external stylesheet）：
html 复制代码
```
<head>
  <link rel="stylesheet" href="styles.css" />
</head>
```
"最推荐的方式，分离结构与样式，利于维护与复用。"

第一场战斗：默认样式怪

林昊输入以下样式：

css 复制代码

body {
  background-color: #f0f0f0;
  color: #333;
  font-family: Arial, sans-serif;
}

灰白的荒原立刻变得柔和有序，怪物发出哀嚎。林昊的世界第一次染上色彩。

选择器三式

导师赐他三把"样式之刃"------

元素选择器
css 复制代码
```
p {
  color: purple;
}
```
"直接命中所有该标签的元素。"
类选择器
html 复制代码
```
<p class="highlight">高亮文字</p>
```
css 复制代码
```
.highlight {
  background-color: yellow;
}
```
"你可以给多个元素加相同的类，批量施法。"
ID 选择器
html 复制代码
```
<p id="title">我是唯一的标题</p>
```
css 复制代码
```
#title {
  font-size: 24px;
}
```
"ID 是唯一标识，一击必中，但请勿滥用。"

CSS 属性魔法

林昊开始掌握更强的属性控制术：

🎨 颜色相关

css 复制代码

color: #222;
background-color: #fff;

🔠 字体相关

css 复制代码

font-size: 18px;
font-weight: bold;
text-align: center;

📏 尺寸与边框

css 复制代码

width: 300px;
height: 100px;
border: 2px solid black;

📦 盒模型（Box Model）初识

导师画出一张神秘图纸：

+---------------------------+ | margin（外边距） | | +---------------------+ | | | border（边框） | | | | +---------------+ | | | | | padding | | | | | | +-----------+ | | | | | | | content | | | | | | | +-----------+ | | | | | +---------------+ | | | +---------------------+ | +---------------------------+

"所有元素都是一个盒子。理解这个模型，你将掌控网页的布局逻辑。"

对决升级：浮动乱码与堆叠鬼影

怪物退去，却遗留混乱的元素叠加和漂浮。导师开启下一课：

💠 布局基础

display 属性
css 复制代码
```
div {
  display: block;
}

span {
  display: inline;
}
```
"块级元素（block）独占一行，行内元素（inline）紧凑排列。"
margin 与 padding
css 复制代码
```
.container {
  margin: 20px;
  padding: 10px;
}
```
"外距是对外扩展，内距是给自己留呼吸空间。"
box-sizing
css 复制代码
```
* {
  box-sizing: border-box;
}
```
"设定这个，可以让宽高包含 padding 与 border，不再出现超出宽度的混乱。"

世界初现秩序

林昊在《styles.css》中编写如下内容：

css 复制代码

body {
  background-color: #eef2f5;
  font-family: 'Segoe UI', sans-serif;
  color: #333;
  padding: 40px;
}

.container {
  width: 600px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.title {
  font-size: 32px;
  color: #2c3e50;
}

原本混乱的网页，如今变成一个精致的虚拟控制台，文字居中排布，页面有边距、结构分明，颜色温润。

🛠️ 练习任务

在 HTML 页面基础上，创建一个外部 CSS 文件，完成以下任务：

页面背景色改为浅灰；
主体容器居中并设置宽度；
添加一组 .card 样式，带有圆角、阴影；
所有标题字体为蓝色，段落字体为灰色。

🔮 预告：第三章《JavaScript引擎 · 行为之火》

随着布局稳定，世界却仍然静止。林昊必须掌握行为逻辑------通过 JavaScript 为页面注入交互、动态变化与逻辑判断。

即将迎战：静态世界的沉默守卫者------死页（Dead Page）