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

最新推荐文章于 2025-05-16 11:01:34 发布

蓝婷儿

最新推荐文章于 2025-05-16 11:01:34 发布

阅读量1.1k

点赞数 31

分类专栏：代码之门：前端纪元文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_51798265/article/details/147962208

版权

代码之门：前端纪元专栏收录该内容

3 篇文章

订阅专栏

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

林昊穿过 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;
}