第二章：CSS — 给页面化妆

2.1 CSS 是什么

一句话版本：CSS 就是用来控制页面”长什么样”的语言。

你在第一章写的 HTML，是不是打开以后白底黑字、丑得像 Word 文档？这就对了——HTML 只管”页面上有什么内容”，至于好不好看，它不管。

类比：HTML 是毛坯房（墙、门、窗都有了），CSS 就是装修（刷墙漆、贴地砖、挂窗帘）。毛坯房能住，但你肯定想装修一下再住。

三种引入 CSS 的方式

方式一：行内样式 — 直接写在标签上

<p style="color: red; font-size: 20px;">我是红色的大字</p>

缺点：样式和内容混在一起，标签多了根本没法维护。不推荐日常使用。

方式二：style 标签 — 写在 <head> 里

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>我是蓝色的字</p>
</body>
</html>

适合写小 demo 练习，代码都在一个文件里，方便。

方式三：外部 CSS 文件 — 单独写一个 .css 文件，用 <link> 引入

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>我的样式来自外部文件</p>
</body>
</html>

/* style.css */
p {
  color: green;
  font-size: 18px;
}

这是正式开发的标准做法，推荐使用。 样式和结构分离，项目越大越好维护。

对比：没有 CSS vs 有 CSS

把下面的代码保存成 .html 文件，用浏览器打开看看效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS 对比</title>
  <style>
    .styled {
      background-color: #f0f0f0;
      padding: 20px;
      border-radius: 10px;
      font-family: "微软雅黑", sans-serif;
      color: #333;
      max-width: 400px;
      margin: 20px;
    }
    .styled h2 {
      color: #2196F3;
    }
  </style>
</head>
<body>
  <!-- 没有 CSS 的部分 -->
  <div>
    <h2>没有 CSS</h2>
    <p>这是一段普通的文字，白底黑字，毫无生气。</p>
  </div>

  <!-- 有 CSS 的部分 -->
  <div class="styled">
    <h2>有 CSS</h2>
    <p>同样的内容，加了背景色、圆角、间距，是不是好看多了？</p>
  </div>
</body>
</html>

小结：CSS 负责页面的视觉表现。推荐用外部文件引入，但练习阶段用 <style> 标签最方便。

2.2 选择器（只学三个就够）

选择器就是告诉浏览器：“我要给谁化妆”。

标签选择器

直接写标签名，会作用于页面上所有同名标签：

p {
  color: gray;
}

页面上每一个 <p> 都会变灰色。简单粗暴，但不够精确。

类选择器（最常用！）

用一个点 . 加上你自己起的名字。HTML 里用 class 属性对应：

.highlight {
  color: orange;
  font-weight: bold;
}

<p class="highlight">我是高亮的</p>
<p>我是普通的</p>
<p class="highlight">我也是高亮的</p>

类选择器的好处：想给谁加就给谁加，一个 class 可以用在多个元素上。 实际开发中 80% 的情况都用它。

ID 选择器

用 # 加上 ID 名。HTML 里用 id 属性对应：

#main-title {
  font-size: 32px;
  color: #2196F3;
}

<h1 id="main-title">页面标题</h1>

ID 是唯一的，一个页面里同一个 ID 只能出现一次。一般用于特殊的、独一无二的元素。

完整示例：三种选择器对比

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>选择器对比</title>
  <style>
    /* 标签选择器 —— 所有 p 标签都变灰 */
    p {
      color: gray;
    }

    /* 类选择器 —— 带 .important 的变红色加粗 */
    .important {
      color: red;
      font-weight: bold;
    }

    /* ID 选择器 —— #special 变蓝色大字 */
    #special {
      color: blue;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <p>我是普通段落（标签选择器 → 灰色）</p>
  <p class="important">我是重要段落（类选择器 → 红色加粗）</p>
  <p id="special">我是特殊段落（ID 选择器 → 蓝色大字）</p>
  <p class="important">我也是重要段落</p>
</body>
</html>

选择器优先级

如果多个选择器作用于同一个元素，谁说了算？记住一句话：

ID > class > 标签

比如同时有 p { color: gray; } 和 .important { color: red; }，带 class="important" 的段落会显示红色，因为 class 优先级高于标签。知道这个就够了，不用深入。

小结：日常开发主要用类选择器 .className，ID 选择器偶尔用，标签选择器做全局默认样式。

2.3 最常用的样式属性

文字相关

`color` — 文字颜色

颜色值有三种常见写法：

.demo1 { color: red; }              /* 英文单词 */
.demo2 { color: #FF5722; }          /* 十六进制，# 后面 6 位 */
.demo3 { color: rgb(33, 150, 243); } /* rgb(红, 绿, 蓝)，每个 0~255 */

日常推荐用十六进制，因为设计稿给的颜色值通常就是这种格式。不知道颜色代码？搜”颜色选择器”，一大堆在线工具。

`font-size` — 字体大小

p { font-size: 16px; }   /* 正文常用 14~16px */
h1 { font-size: 32px; }  /* 标题大一些 */

px 就是像素，屏幕上最小的显示单位。数字越大字越大，就这么简单。

`font-weight` — 加粗

.bold { font-weight: bold; }  /* 加粗 */
.thin { font-weight: 300; }   /* 用数字控制粗细，100~900，400 是正常，700 是加粗 */

`text-align` — 文字对齐

.left   { text-align: left; }    /* 左对齐（默认） */
.center { text-align: center; }  /* 居中 */
.right  { text-align: right; }   /* 右对齐 */

注意：text-align 是设在父元素上的，让里面的文字和行内元素居中。

`line-height` — 行高

p {
  font-size: 16px;
  line-height: 1.8;  /* 1.8 倍行高，阅读最舒服 */
}

行高就是每行文字的”占地高度”。设成 1.5~1.8 倍，文字不会挤在一起，读起来舒服很多。

盒模型（重点！）

每一个 HTML 元素，在浏览器眼里都是一个”盒子”。 这是 CSS 最重要的概念，没有之一。

盒子从里到外分四层：

┌───────────────────────────────────┐
│            margin（外边距）         │
│  ┌─────────────────────────────┐  │
│  │        border（边框）        │  │
│  │  ┌───────────────────────┐  │  │
│  │  │    padding（内边距）    │  │  │
│  │  │  ┌─────────────────┐  │  │  │
│  │  │  │                 │  │  │  │
│  │  │  │  content（内容） │  │  │  │
│  │  │  │                 │  │  │  │
│  │  │  └─────────────────┘  │  │  │
│  │  └───────────────────────┘  │  │
│  └─────────────────────────────┘  │
└───────────────────────────────────┘

类比：content 是你住的房间，padding 是房间里家具到墙的距离，border 是墙壁，margin 是你家和邻居家之间的距离。

`width` / `height` — 内容区宽高

.box {
  width: 200px;
  height: 100px;
}

`padding` — 内边距

内容到边框之间的留白：

.box {
  padding: 20px;           /* 上下左右都是 20px */
  padding: 10px 20px;      /* 上下 10px，左右 20px */
  padding: 10px 20px 30px 40px; /* 上 右 下 左（顺时针） */
}

`border` — 边框

.box {
  border: 2px solid #333;  /* 宽度 样式 颜色，一行搞定 */
}
/* 边框样式：solid（实线）、dashed（虚线）、dotted（点线） */

`margin` — 外边距

元素和元素之间的距离，写法和 padding 一样：

.box {
  margin: 20px;            /* 四周都留 20px */
  margin: 0 auto;          /* 上下 0，左右 auto → 水平居中（常用技巧！） */
}

`border-radius` — 圆角

.box {
  border-radius: 8px;    /* 小圆角 */
  border-radius: 50%;    /* 正方形变圆形 */
}

`box-sizing: border-box`

默认情况下，width 只包含 content，加上 padding 和 border 后盒子会变大，算起来很烦。加上这句，width 就包含 padding 和 border 了，省心很多：

* {
  box-sizing: border-box; /* 全局设置，建议每个项目都加上 */
}

记住就行，项目开头写一次，以后不用管了。

背景与其他

`background-color` — 背景色

.card {
  background-color: #fff;          /* 白色 */
  background-color: #f5f5f5;       /* 浅灰色，常用的背景色 */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色，rgba 最后一位是透明度 */
}

`background-image` — 背景图

.banner {
  background-image: url("bg.jpg");
  background-size: cover;       /* 图片铺满，不变形 */
  background-position: center;  /* 居中显示 */
}

背景图入门了解一下就行，后面做项目的时候会反复用到。

`cursor: pointer` — 鼠标变手指

.clickable {
  cursor: pointer;  /* 鼠标移上去变成小手，暗示"这个能点" */
}

`opacity` — 透明度

.ghost { opacity: 0.5; }  /* 0 完全透明，1 完全不透明 */

综合示例：做一个好看的卡片

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>好看的卡片</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #f0f0f0;
      font-family: "微软雅黑", sans-serif;
      padding: 40px;
    }

    .card {
      width: 300px;
      background-color: #fff;
      border-radius: 12px;
      padding: 24px;
      border: 1px solid #e0e0e0;
      cursor: pointer;
    }

    .card h3 {
      font-size: 20px;
      color: #333;
      margin-bottom: 8px;
    }

    .card p {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
    }

    .card .tag {
      font-size: 12px;
      color: #2196F3;
      font-weight: bold;
      margin-top: 16px;
    }
  </style>
</head>
<body>
  <div class="card">
    <h3>CSS 入门教程</h3>
    <p>学完这篇教程，你就能给页面化妆了。盒模型、选择器、Flex 布局一网打尽。</p>
    <p class="tag">前端入门</p>
  </div>
</body>
</html>

小结：掌握文字样式 + 盒模型 + 背景，你就能控制页面上 90% 元素的外观了。

2.4 Flex 布局（核心中的核心）

为什么要学 Flex？

前面学的都是”单个元素怎么好看”，但你一定会遇到这些问题：

怎么让几个元素横着排？
怎么让一个东西水平垂直居中？
怎么让导航栏 logo 在左、菜单在右？

一句话：Flex 就是解决”东西怎么排列”的问题。

`display: flex` — 开启 Flex 的钥匙

只要给父元素加上 display: flex，它的子元素就会自动横着排成一排：

<style>
  .container {
    display: flex;
    background-color: #eee;
    padding: 10px;
  }
  .item {
    width: 80px;
    height: 80px;
    background-color: #2196F3;
    color: white;
    text-align: center;
    line-height: 80px;
    margin: 5px;
    border-radius: 8px;
  }
</style>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

没加 display: flex 之前，三个 div 会从上到下竖着排（因为 div 是块级元素）。加上之后，自动横排。就这么一句话的事。

`flex-direction` — 主轴方向

控制子元素是横着排还是竖着排：

.container { display: flex; flex-direction: row; }    /* 横排（默认） */
.container { display: flex; flex-direction: column; }  /* 竖排 */

row：→ 从左到右排（默认值，不写就是这个）
column：↓ 从上到下排

类比：flex-direction 决定了”排队的方向”——横着站一排，还是竖着站一列。

`justify-content` — 主轴对齐

控制子元素在排列方向上怎么分布。假设是横排（row）：

.container { display: flex; justify-content: flex-start; }
/* [1][2][3]                    ← 全挤在左边（默认） */

.container { display: flex; justify-content: center; }
/*          [1][2][3]           ← 全部居中 */

.container { display: flex; justify-content: flex-end; }
/*                    [1][2][3] ← 全挤在右边 */

.container { display: flex; justify-content: space-between; }
/* [1]        [2]        [3]    ← 两端贴边，中间平分 */

.container { display: flex; justify-content: space-around; }
/*   [1]      [2]      [3]     ← 每个元素左右间距相等 */

.container { display: flex; justify-content: space-evenly; }
/*    [1]     [2]     [3]      ← 所有间距完全相等 */

最常用的是 center 和 space-between，记住这两个就够应付大部分场景。

`align-items` — 交叉轴对齐

如果主轴是横向的，交叉轴就是纵向的。align-items 控制子元素在纵向的位置：

.container { display: flex; align-items: flex-start; }
/* 子元素贴在顶部 */

.container { display: flex; align-items: center; }
/* 子元素垂直居中（超常用！） */

.container { display: flex; align-items: stretch; }
/* 子元素拉伸到跟父元素一样高（默认） */

`gap` — 子元素之间的间距

以前要给每个子元素加 margin，现在用 gap 一句话搞定：

.container {
  display: flex;
  gap: 16px;  /* 每个子元素之间间隔 16px */
}

干净利落，强烈推荐。

`flex-wrap: wrap` — 换行

默认情况下，Flex 会把所有子元素挤在一行。如果放不下，它会无限压缩。加上 flex-wrap: wrap，放不下的就自动换行：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

做卡片列表的时候必用。

经典布局示例一：水平垂直居中

这是前端最经典的需求——让一个东西在页面正中间。以前要写一堆 hack，现在三行搞定：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>水平垂直居中</title>
  <style>
    .center-box {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;  /* 水平居中 */
      align-items: center;      /* 垂直居中 */
      background-color: #f5f5f5;
      margin: 0;
    }

    .content {
      padding: 40px 60px;
      background-color: #2196F3;
      color: white;
      font-size: 24px;
      border-radius: 12px;
    }

    body { margin: 0; }
  </style>
</head>
<body>
  <div class="center-box">
    <div class="content">我居中了！</div>
  </div>
</body>
</html>

居中口诀：父元素 display: flex + justify-content: center + align-items: center，完事。

经典布局示例二：导航栏（logo 在左，菜单在右）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>导航栏</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    .navbar {
      display: flex;
      justify-content: space-between; /* 两端对齐：logo 推到左边，菜单推到右边 */
      align-items: center;
      padding: 0 24px;
      height: 60px;
      background-color: #fff;
      border-bottom: 1px solid #e0e0e0;
    }

    .logo {
      font-size: 20px;
      font-weight: bold;
      color: #333;
    }

    .menu {
      display: flex;
      gap: 24px;
    }

    .menu a {
      text-decoration: none;
      color: #555;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="logo">MyWebsite</div>
    <div class="menu">
      <a href="#">首页</a>
      <a href="#">关于</a>
      <a href="#">联系我们</a>
    </div>
  </nav>
</body>
</html>

核心就是 justify-content: space-between，把两个子元素分别推到两端。

经典布局示例三：等宽卡片列表

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>卡片列表</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background-color: #f5f5f5;
      padding: 40px;
      font-family: "微软雅黑", sans-serif;
    }

    .card-list {
      display: flex;
      flex-wrap: wrap;   /* 放不下就换行 */
      gap: 20px;
    }

    .card {
      width: 250px;
      background-color: #fff;
      border-radius: 8px;
      padding: 20px;
      border: 1px solid #e0e0e0;
    }

    .card h3 {
      font-size: 16px;
      color: #333;
      margin-bottom: 8px;
    }

    .card p {
      font-size: 13px;
      color: #888;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="card-list">
    <div class="card">
      <h3>卡片一</h3>
      <p>这是一段描述文字，说明卡片的内容。</p>
    </div>
    <div class="card">
      <h3>卡片二</h3>
      <p>这是一段描述文字，说明卡片的内容。</p>
    </div>
    <div class="card">
      <h3>卡片三</h3>
      <p>这是一段描述文字，说明卡片的内容。</p>
    </div>
    <div class="card">
      <h3>卡片四</h3>
      <p>这是一段描述文字，说明卡片的内容。</p>
    </div>
  </div>
</body>
</html>

flex-wrap: wrap + gap 就是卡片列表的标准写法。卡片多了自动换行，间距均匀。

小结：Flex 三板斧—— display: flex 开启，justify-content 管水平，align-items 管垂直。记住这三个就能解决大部分布局需求。

2.5 实战练习

下面是一个完整的卡片列表页面，包含导航栏 + 页面标题 + 多张带图片的卡片，用 Flex 布局排列。

直接复制保存为 .html 文件，浏览器打开就能看到效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 实战 — 卡片列表</title>
  <style>
    /* ====== 全局设置 ====== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "微软雅黑", "PingFang SC", sans-serif;
      background-color: #f3f4f6;
      color: #333;
      line-height: 1.6;
    }

    /* ====== 导航栏 ====== */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      padding: 0 32px;
      background-color: #fff;
      border-bottom: 1px solid #e5e7eb;
    }

    .navbar .logo {
      font-size: 20px;
      font-weight: bold;
      color: #111;
    }

    .navbar .nav-links {
      display: flex;
      gap: 20px;
    }

    .navbar .nav-links a {
      text-decoration: none;
      color: #555;
      font-size: 14px;
    }

    .navbar .nav-links a:hover {
      color: #2563eb;
    }

    /* ====== 页面主体 ====== */
    .page {
      max-width: 960px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    .page-title {
      font-size: 28px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 8px;
    }

    .page-desc {
      text-align: center;
      color: #888;
      font-size: 14px;
      margin-bottom: 32px;
    }

    /* ====== 卡片列表 ====== */
    .card-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 24px;
    }

    .card {
      width: 280px;
      background-color: #fff;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid #e5e7eb;
      cursor: pointer;
    }

    .card:hover {
      border-color: #2563eb;
    }

    .card img {
      width: 100%;
      height: 160px;
      object-fit: cover;
      display: block;
    }

    .card-body {
      padding: 16px;
    }

    .card-body h3 {
      font-size: 16px;
      color: #111;
      margin-bottom: 6px;
    }

    .card-body p {
      font-size: 13px;
      color: #666;
      line-height: 1.6;
    }

    .card-body .tag {
      display: inline-block;
      margin-top: 12px;
      padding: 2px 10px;
      background-color: #eff6ff;
      color: #2563eb;
      font-size: 12px;
      border-radius: 999px;
      font-weight: bold;
    }

    /* ====== 页脚 ====== */
    .footer {
      text-align: center;
      padding: 32px 0;
      color: #aaa;
      font-size: 13px;
    }
  </style>
</head>
<body>

  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="logo">前端入门</div>
    <div class="nav-links">
      <a href="#">首页</a>
      <a href="#">教程</a>
      <a href="#">关于</a>
    </div>
  </nav>

  <!-- 页面主体 -->
  <div class="page">
    <h1 class="page-title">推荐学习资源</h1>
    <p class="page-desc">精选前端学习卡片，点击查看详情</p>

    <!-- 卡片列表 -->
    <div class="card-list">

      <div class="card">
        <img src="https://picsum.photos/seed/html/400/200" alt="HTML">
        <div class="card-body">
          <h3>HTML 基础入门</h3>
          <p>学习网页的骨架结构，掌握常用标签和语义化。</p>
          <span class="tag">HTML</span>
        </div>
      </div>

      <div class="card">
        <img src="https://picsum.photos/seed/css/400/200" alt="CSS">
        <div class="card-body">
          <h3>CSS 样式美化</h3>
          <p>给页面化妆，学会选择器、盒模型和 Flex 布局。</p>
          <span class="tag">CSS</span>
        </div>
      </div>

      <div class="card">
        <img src="https://picsum.photos/seed/js/400/200" alt="JavaScript">
        <div class="card-body">
          <h3>JavaScript 入门</h3>
          <p>让页面动起来，学习变量、函数和 DOM 操作。</p>
          <span class="tag">JavaScript</span>
        </div>
      </div>

      <div class="card">
        <img src="https://picsum.photos/seed/flex/400/200" alt="Flex">
        <div class="card-body">
          <h3>Flex 布局实战</h3>
          <p>掌握现代页面布局的核心技术，告别浮动。</p>
          <span class="tag">布局</span>
        </div>
      </div>

      <div class="card">
        <img src="https://picsum.photos/seed/responsive/400/200" alt="响应式">
        <div class="card-body">
          <h3>响应式设计</h3>
          <p>让网页在手机和电脑上都好看，适配多种屏幕。</p>
          <span class="tag">进阶</span>
        </div>
      </div>

      <div class="card">
        <img src="https://picsum.photos/seed/project/400/200" alt="项目">
        <div class="card-body">
          <h3>实战小项目</h3>
          <p>动手做一个完整的个人主页，巩固所有知识点。</p>
          <span class="tag">项目</span>
        </div>
      </div>

    </div>
  </div>

  <!-- 页脚 -->
  <div class="footer">
    CSS 实战练习 · 零基础前端入门
  </div>

</body>
</html>

练习建议

试着动手修改上面的代码，感受 CSS 的变化：

改颜色：把 .tag 的背景色换成 #fef3c7，字色换成 #d97706，变成橙色标签
改间距：把 .card-list 的 gap 从 24px 改成 40px，看看卡片间距的变化
改排列：把 .card-list 的 justify-content 改成 space-between，看看效果
改圆角：把 .card 的 border-radius 改成 0px，直角卡片是什么感觉
改布局方向：给 .card-list 加上 flex-direction: column; align-items: center;，卡片就变成竖着排了

每改一个值就刷新页面看看效果，CSS 就是在不断尝试中学会的。动手比看十遍教程都有用！

第二章：CSS — 给页面化妆

2.1 CSS 是什么

三种引入 CSS 的方式

对比：没有 CSS vs 有 CSS

2.2 选择器（只学三个就够）

标签选择器

类选择器（最常用！）

ID 选择器

完整示例：三种选择器对比

选择器优先级

2.3 最常用的样式属性

文字相关

color — 文字颜色

font-size — 字体大小

font-weight — 加粗

text-align — 文字对齐

line-height — 行高

盒模型（重点！）

width / height — 内容区宽高

padding — 内边距

border — 边框

margin — 外边距

border-radius — 圆角

box-sizing: border-box