一、CSS 是什么：网页的"视觉设计师"

在系列第一篇文章中我们建立了这个类比：

技术 角色
HTML 结构骨架——定义"是什么"
CSS 视觉表现——定义"长什么样"
JavaScript 交互行为——定义"能做什么"

CSS（Cascading Style Sheets，层叠样式表）的职责就是把浏览器默认的"素颜"HTML 变成你想要的任何视觉效果。

先看一个直观对比——同样一份 HTML，不加 CSS 和加了 CSS 的差异：

1
2
3
4
<!-- 没有 CSS：浏览器默认样式——黑白分明，毫无美感 -->
<h1>我的博客首页</h1>
<p>欢迎来到我的技术博客。</p>
<a href="#">阅读更多</a>
1
2
3
4
<!-- 有了 CSS：字体、颜色、间距、背景——焕然一新 -->
<h1 style="font-size: 2em; color: #2c3e50;">我的博客首页</h1>
<p style="color: #555; line-height: 1.8;">欢迎来到我的技术博客。</p>
<a href="#" style="color: #3498db; text-decoration: none;">阅读更多</a>

CSS 学习的第一原则：不要被花样繁多的属性吓到。90% 的日常开发只用到了 20% 的 CSS 属性。掌握核心概念，其他属性随用随查。

二、CSS 的三种引入方式

在正式开始盒模型之前，你需要知道 CSS 如何与 HTML 关联。

2.1 内联样式（Inline Style）

1
<p style="color: red; font-size: 16px;">这是一段红色文字。</p>
  • 优点：直接、无需额外文件
  • 缺点：样式与结构混杂，无法复用，维护噩梦
  • 适用场景：临时调试、极少量的一次性样式
  • 不推荐在生产代码中使用

2.2 内部样式表（Internal Style Sheet）

1
2
3
4
5
6
7
8
<head>
    <style>
        p {
            color: red;
            font-size: 16px;
        }
    </style>
</head>
  • 优点：样式集中在 <head> 中，当前页面复用
  • 缺点：无法跨页面共享
  • 适用场景：单页面演示、小型原型

2.3 外部样式表（External Style Sheet）⭐ 推荐

1
2
3
<head>
    <link rel="stylesheet" href="style.css">
</head>

style.css：

1
2
3
4
p {
    color: red;
    font-size: 16px;
}
  • 优点：HTML 与 CSS 完全分离，跨页面复用，浏览器可缓存
  • 缺点：需要额外 HTTP 请求（但现代构建工具可优化）
  • 适用场景：所有正式项目

工程实践：永远首选外部样式表。结构（HTML）与表现（CSS）的分离，是前端工程化的第一块基石。

2.4 CSS 语法快速入门

1
2
3
4
5
6
7
8
9
10
11
选择器 {
    属性: 值;
    属性: 值;
}

/* 示例 */
h1 {
    color: #2c3e50;       /* 属性:值; —— 每个声明以分号结尾 */
    font-size: 24px;
    margin-bottom: 16px;
}
  • 选择器：指定要"选中"哪些 HTML 元素
  • 声明块：{} 包裹的样式规则集合
  • 声明：属性: 值; 的键值对，每个声明以 ; 结束

三、盒模型——CSS 最核心的概念

3.1 什么是盒模型？

在 CSS 眼中，页面上的每一个 HTML 元素都是一个矩形的"盒子"。

理解盒模型，就是理解这个盒子由哪几层构成。从内到外：

1
2
3
4
5
6
7
8
9
10
11
12
13
┌──────────────────────────────────┐
│          margin（外边距）          │
│   ┌──────────────────────────┐   │
│   │      border（边框）        │   │
│   │   ┌──────────────────┐   │   │
│   │   │  padding（内边距）  │   │   │
│   │   │   ┌──────────┐   │   │   │
│   │   │   │ content  │   │   │   │
│   │   │   │ （内容区） │   │   │   │
│   │   │   └──────────┘   │   │   │
│   │   └──────────────────┘   │   │
│   └──────────────────────────┘   │
└──────────────────────────────────┘

四层结构：

层次 属性 说明 类比
content width / height 内容本身的尺寸 相框里的照片
padding padding 内容到边框之间的填充区域 照片与相框之间的留白卡纸
border border 包围内边距的边框线 相框的木边
margin margin 当前盒子与其他盒子之间的距离 墙上相框之间的间距

3.2 两种盒模型：content-box vs border-box

这是 CSS 中最容易踩的坑之一。当你设置 width: 300px 时，这个 300px 到底指什么？

标准盒模型（box-sizing: content-box，浏览器默认）

1
2
3
4
5
6
.box {
    box-sizing: content-box;  /* 默认值 */
    width: 300px;
    padding: 20px;
    border: 5px solid #333;
}

计算公式：实际占用宽度 = width + padding-left + padding-right + border-left + border-right

1
实际宽度 = 300 + 20×2 + 5×2 = 350px

你期望盒子占 300px，实际却占了 350px——这就是布局"莫名其妙"超出预期的根源。

替代盒模型（box-sizing: border-box，现代开发推荐）

1
2
3
4
5
6
.box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid #333;
}

计算公式：width 已包含 padding 和 border，内容区自动缩小

1
2
内容区宽度 = 300 - 20×2 - 5×2 = 250px
盒子总宽度 = 300px（完全符合你设置的 width）

几乎所有现代 CSS 框架（Tailwind、Bootstrap）和重置样式表，都会在第一行写下：

1
2
3
*, *::before, *::after {
    box-sizing: border-box;
}

养成习惯，每个项目的 CSS 文件开头都加上这一行——它将为你省去无数调试盒模型的时间。

3.3 盒模型各属性详解

margin — 外边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 四种写法——按顺时针方向：上 右 下 左 */
margin: 10px;                  /* 四边都是 10px */
margin: 10px 20px;             /* 上下10px，左右20px */
margin: 10px 20px 30px;        /* 上10px，左右20px，下30px */
margin: 10px 20px 30px 40px;   /* 上10px，右20px，下30px，左40px */

/* 单边设置 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

/* 水平居中——最经典的用法 */
margin: 0 auto;  /* 上下0，左右自动（块级元素水平居中） */

padding — 内边距

1
2
3
4
5
6
7
padding: 16px;                  /* 四边相同 */
padding: 16px 24px;             /* 上下16px，左右24px */

/* 内边距会增加盒子的可点击区域——对按钮来说很有用 */
button {
    padding: 12px 24px;  /* 按钮不会太"挤"，点击更舒适 */
}

border — 边框

1
2
3
4
5
6
7
8
9
10
/* 简写：宽度 样式 颜色 */
border: 2px solid #3498db;

/* 展开写法 */
border-width: 2px;
border-style: solid;   /* solid | dashed | dotted | none */
border-color: #3498db;

/* 单边设置 */
border-bottom: 2px solid #eee;

3.4 块级元素 vs 行内元素

盒模型的行为还与元素的显示类型密切相关：

特性 块级元素（block） 行内元素（inline）
常见标签 <div>, <p>, <h1>-<h6>, <section> <span>, <a>, <strong>, <em>
独占一行 ✅ 是 ❌ 否，与同行元素排列
可设置 width/height ✅ 是 ❌ 否（由内容撑开）
margin/padding 上下 ✅ 生效 ⚠️ 上下 margin 不生效 
1
2
3
4
5
6
7
8
9
10
11
12
/* 修改显示类型 */
span {
    display: inline-block;  /* 行内排列，但可以设置宽高 */
}

div {
    display: inline;  /* 变成行内——失去宽高控制 */
}

.hidden {
    display: none;  /* 完全从页面中移除 */
}

四、CSS 选择器——精确定位你要装饰的元素

选择器决定了样式应用在哪些元素上。掌握以下四种，足以应对 90% 的场景。

4.1 基础选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 1. 标签选择器——按 HTML 标签名选中 */
p {
    line-height: 1.8;
}

/* 2. 类选择器——按 class 属性选中（最常用） */
.highlight {
    background-color: yellow;
}

/* 3. ID 选择器——按 id 属性选中（唯一） */
#main-title {
    font-size: 2em;
}

4.2 组合选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 后代选择器——选中 article 内部所有的 p */
article p {
    color: #333;
}

/* 子代选择器——只选中 article 的直接子元素 p */
article > p {
    margin-bottom: 16px;
}

/* 并集选择器——同时选中 h1 和 h2 */
h1, h2 {
    font-family: "Microsoft YaHei", sans-serif;
}

4.3 伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 鼠标悬停状态 */
a:hover {
    color: #e74c3c;
}

/* 第一个子元素 */
li:first-child {
    font-weight: bold;
}

/* 最后一个子元素 */
li:last-child {
    border-bottom: none;
}

/* 奇偶行——表格斑马条纹 */
tr:nth-child(odd) {
    background-color: #f9f9f9;
}
tr:nth-child(even) {
    background-color: #fff;
}

五、常用样式属性速览

5.1 文字与字体

1
2
3
4
5
6
7
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;          /* 基准字号 */
    line-height: 1.6;         /* 行高——无单位的数字是推荐写法 */
    color: #333;              /* 文字颜色 */
    text-align: left;         /* 文字对齐：left | center | right | justify */
}

5.2 背景

1
2
3
4
5
6
header {
    background-color: #2c3e50;
    background-image: url('header-bg.jpg');
    background-size: cover;        /* 覆盖整个区域，保持比例 */
    background-position: center;
}

5.3 圆角与阴影

1
2
3
4
.card {
    border-radius: 8px;                     /* 圆角 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 阴影：X偏移 Y偏移 模糊 颜色 */
}

六、完整代码实例：为博客首页添加样式

还记得第一篇文章中那个语义化的博客首页 HTML 吗？现在给它穿上衣服：

style.css：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/* ==================== 全局重置 ==================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #2c3e50;
    background-color: #f5f6fa;
}

/* ==================== 页眉 ==================== */
header {
    background-color: #2c3e50;
    color: #fff;
    padding: 40px 20px;
    text-align: center;
}

header h1 {
    font-size: 2em;
    margin-bottom: 8px;
}

header p {
    font-size: 1.1em;
    opacity: 0.8;
}

/* ==================== 导航 ==================== */
nav {
    background-color: #34495e;
    padding: 0 20px;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
}

nav li {
    margin: 0;
}

nav a {
    display: block;
    color: #ecf0f1;
    text-decoration: none;
    padding: 14px 20px;
    transition: background-color 0.3s;
}

nav a:hover {
    background-color: #2c3e50;
}

/* ==================== 主体布局 ==================== */
.page-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 30px 20px;
    display: flex;
    gap: 30px;
}

main {
    flex: 1;
}

/* ==================== 文章卡片 ==================== */
article {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

article h2 {
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 1.4em;
}

article h3 {
    color: #34495e;
    margin: 20px 0 10px;
    font-size: 1.1em;
}

article p {
    margin-bottom: 12px;
    color: #555;
}

article ul, article ol {
    margin: 10px 0 10px 24px;
}

article li {
    margin-bottom: 6px;
}

article hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 20px 0;
}

/* ==================== 侧边栏 ==================== */
aside {
    width: 280px;
    flex-shrink: 0;
}

aside h3 {
    font-size: 1.1em;
    color: #2c3e50;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #3498db;
}

aside p {
    color: #666;
    margin-bottom: 20px;
    font-size: 14px;
}

/* ==================== 页脚 ==================== */
footer {
    text-align: center;
    padding: 30px 20px;
    color: #95a5a6;
    font-size: 14px;
    border-top: 1px solid #ddd;
    background-color: #fff;
    margin-top: 40px;
}

对应的 HTML 结构（在前一篇的基础上增加了布局容器）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <h1>🚀 小明的技术博客</h1>
        <p>记录学习心得，分享技术成长</p>
    </header>

    <nav>
        <ul>
            <li><a href="#">🏠 首页</a></li>
            <li><a href="#">📝 文章</a></li>
            <li><a href="#">🏷️ 分类</a></li>
            <li><a href="#">💬 关于我</a></li>
        </ul>
    </nav>

    <div class="page-container">
        <main>
            <article>
                <h2>📖 HTML5 语义化标签初体验</h2>
                <p>作者：小明 | 发布时间：2025-04-21</p>
                <hr>
                <h3>什么是语义化？</h3>
                <p>语义化就是用正确的标签描述内容……</p>
            </article>
        </main>

        <aside>
            <h3>👤 关于我</h3>
            <p>一名热爱技术的编程初学者。</p>
            <h3>🏷️ 标签云</h3>
            <p>HTML5 · CSS3 · JavaScript · 语义化</p>
        </aside>
    </div>

    <footer>
        <p>&copy; 2025 小明的技术博客. 保留所有权利。</p>
    </footer>

</body>
</html>

七、CSS 调试技巧

浏览器开发者工具（F12）是你最好的老师

  1. 在任意元素上右键 → 检查，可以实时看到该元素的盒模型示意图
  2. 在 Styles 面板中，可以直接修改 CSS 值并立即看到效果
  3. 被划掉（删除线）的样式，说明被更高优先级的规则覆盖了

临时调试利器——红色边框

1
2
3
4
/* 想知道某个元素的实际占地范围？加个红色边框 */
.suspect-element {
    border: 2px solid red !important;
}

八、小结

知识点 核心要点
CSS 引入方式 外部样式表（<link>）是工程化首选
盒模型 content → padding → border → margin 四层结构
box-sizing 始终使用 border-box，避免尺寸计算陷阱
基本选择器 标签、类（最常用）、ID、后代、伪类
显示类型 block（独占一行）、inline（行内排列）、inline-block（两者兼得）
调试 F12 开发者工具 + 红色边框法

如果 HTML 是骨骼，CSS 就是皮肤和衣服。下一篇文章，我们将学习 Flexbox 布局——如何让这些盒子"排列成你想要的样子"，而不是被默认的文档流牵着鼻子走。