当前位置：首页 > news >正文

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

news 2025/5/15 6:36:00

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

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

“这是失控的样式荒原。” 零号导师的声音再次响起，
“HTML 给了你骨架，CSS 是赋予世界色彩与形态的皮肤与血肉。”

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

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

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

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

第一场战斗：默认样式怪

林昊输入以下样式：

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

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

选择器三式

导师赐他三把“样式之刃”——

元素选择器
```
p {color: purple;
}
```
“直接命中所有该标签的元素。”

类选择器

<p class="highlight">高亮文字</p>

.highlight {background-color: yellow;
}

“你可以给多个元素加相同的类，批量施法。”

ID 选择器

<p id="title">我是唯一的标题</p>

#title {font-size: 24px;
}

“ID 是唯一标识，一击必中，但请勿滥用。”

CSS 属性魔法

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

🎨 颜色相关

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

🔠 字体相关

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

📏 尺寸与边框

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

📦 盒模型（Box Model）初识

导师画出一张神秘图纸：

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

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

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

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

💠 布局基础

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

世界初现秩序

林昊在《styles.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;
}