# Advanced CSS and Sass - 高级 CSS 和 Sass：Flexbox、网格、动画（中英文字幕） p05 006 Building the Header - Part 1

## 目录

- ## 课程目标与准备工作 [原片 @ 00:00](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=0)
- ## HTML 结构设计 [原片 @ 01:55](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=115)
- ## CSS 基础重置 (Reset) [原片 @ 03:07](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=187)
- ## 全局字体设置 [原片 @ 04:57](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=297)
- ## Header 背景与尺寸设置 [原片 @ 07:36](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=456)
- ## 线性渐变叠加效果 [原片 @ 12:18](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=738)
- ## 页面整体边距调整 [原片 @ 16:25](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=985)
- ## 使用 Clip-Path 裁剪形状 [原片 @ 17:05](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=1025)
- ## AI 总结

## 课程目标与准备工作 [原片 @ 00:00](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=0)

本节课主要学习以下三个核心内容：
1.  **基本重置 (Basic Reset)**：使用通用选择器 (`universal selector`) 进行最基础的样式重置。
2.  **全局字体设置**：如何设置项目级别的字体定义，利用 CSS 的继承机制。
3.  **Clip-Path**：如何使用现代 CSS 属性 `clip-path` 对元素进行裁剪，制作非矩形的形状（如本节的楔形底部）。

**准备工作：**
*   打开 `index.html` 文件。
*   打开参考的最终网页版本以便对照。
*   当前只需关注 Header 部分的背景图片和底部的斜切形状。

## HTML 结构设计 [原片 @ 01:55](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=115)

为了构建 Header，需要在 `index.html` 中添加 HTML5 语义化标签。

*   使用 `<header>` 标签。
*   赋予类名 `class="header"`。
    *   *注意：虽然可以使用标签选择器 `header {}`，但在实际项目中，通常建议给每个元素都加上类名，以便于后续的 CSS 架构管理和扩展性（这一点将在课程后续讲解）。*
*   暂时放入一些占位文本 `Some text...`。

```html
<header class="header">
    Some text...
</header>
```

## CSS 基础重置 (Reset) [原片 @ 03:07](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=187)

在编写具体样式之前，先进行基本的 CSS 重置。

1.  **通用选择器 (`*`)**：
    *   选中页面上所有元素。
    *   设置 `margin: 0;` 和 `padding: 0;`。
    *   *目的*：消除浏览器默认应用的 margin 和 padding（例如 h1 标签默认的间距），提供一个干净的起点。

2.  **盒模型设置 (`box-sizing`)**：
    *   设置 `box-sizing: border-box;`。
    *   *原理*：改变盒模型的计算方式。默认情况下，width/height 只包含内容区域，padding 和 border 会额外增加总尺寸。设置为 `border-box` 后，width/height 包含了 content + padding + border。这使得布局和尺寸计算更加直观和方便。

```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
```

## 全局字体设置 [原片 @ 04:57](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=297)

字体相关的属性通常具有继承性，因此最佳实践是在 `body` 元素上设置，而不是在通用选择器 `*` 中设置。

*   **Font Family**: 设置为 `"Lato", sans-serif`。
    *   *说明*：`Lato` 是通过 Google Fonts 引入的。如果字体加载失败，则回退到无衬线字体。
*   **Font Weight**: 设置为 `400`（正常粗细）。
*   **Font Size**: 设置为 `16px`（后续可能会改用更现代的度量单位，但目前先用 px）。
*   **Line Height**: 设置为 `1.7`。
    *   *说明*：行高是字体大小的 1.7 倍，使阅读更舒适。
*   **Color**: 设置为 `#777`（一种灰色）。

```css
body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #777;
}
```

## Header 背景与尺寸设置 [原片 @ 07:36](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=456)

现在开始编写 `.header` 类的具体样式。

1.  **高度 (`height`)**：
    *   设置为 `95vh`。
    *   *说明*：`vh` 代表 viewport height（视口高度）。`95vh` 表示元素高度为屏幕可见高度的 95%，留出 5% 的空间（后续会看到这是为了配合整体布局留出的白边）。

2.  **背景图片 (`background-image`)**：
    *   使用 `url()` 函数引用图片路径。
    *   路径：`../img/hero.jpg`（因为 CSS 文件夹在 img 文件夹的上一级）。
    *   *技巧*：在编辑器中输入 `back` 然后按回车，VS Code 会自动补全为 `background-image`。

3.  **背景大小 (`background-size`)**：
    *   设置为 `cover`。
    *   *作用*：保持图片纵横比，同时尽可能大地覆盖整个容器。如果图片比例不符，多余部分会被裁剪。

4.  **背景位置 (`background-position`)**：
    *   设置为 `top`。
    *   *作用*：确保当图片被裁剪时，始终保留图片的顶部内容（这对于风景照很重要，通常顶部是天空或山峰）。
    *   *对比*：如果设为 `center`，则上下左右都可能被裁剪；如果设为 `bottom`，则底部内容固定。

```css
.header {
    height: 95vh;
    background-image: url(../img/hero.jpg);
    background-size: cover;
    background-position: top;
}
```

## 线性渐变叠加效果 [原片 @ 12:18](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=738)

为了实现 Header 上的绿色半透明渐变遮罩，需要在背景中叠加一个 `linear-gradient`。

1.  **多重背景图像**：
    *   CSS 允许在一个元素上指定多个背景图像，用逗号分隔。
    *   **顺序**：写在最前面的图层在最上层。因此，渐变必须写在图片 URL 的前面。

2.  **Linear Gradient 设置**：
    *   方向：`to right bottom`（从左上角向右下角渐变）。
    *   颜色：
        *   起始颜色：浅绿色 (`#7ed56f`)。
        *   结束颜色：深绿色 (`#28b463`)。
    *   **透明度处理**：
        *   为了让底层的图片透出来，需要降低渐变的透明度。
        *   将 Hex 颜色转换为 `RGBA` 格式。
        *   Alpha 通道（透明度）设置为 `0.8`（即 80% 不透明，20% 透明）。
        *   颜色值变为：`rgba(126, 213, 111, 0.8)` 和 `rgba(40, 180, 131, 0.8)`。

```css
.header {
    /* ... 其他属性 ... */
    background-image: linear-gradient(to right bottom, 
                                      rgba(126, 213, 111, 0.8), 
                                      rgba(40, 180, 131, 0.8)), 
                      url(../img/hero.jpg);
}
```

## 页面整体边距调整 [原片 @ 16:25](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=985)

为了让页面看起来更有呼吸感，并在边缘形成白色的边框效果：

*   回到 `body` 选择器。
*   添加 `padding: 30px;`。
*   *注意*：Padding 不会被子元素继承，它直接作用于 body 元素本身，从而在页面的四周创造出 30px 的内边距（视觉上表现为白边）。

## 使用 Clip-Path 裁剪形状 [原片 @ 17:05](https://www.bilibili.com/video/BV1n94y1o7yS_p5?t=1025)

最后一步是实现 Header 底部的斜切效果。这需要使用现代 CSS 属性 `clip-path`。

1.  **原理**：
    *   `clip-path` 定义了一个剪切区域，只有该区域内的内容可见，区域外的内容被隐藏。
    *   这里使用 `polygon()` 函数来定义一个多边形。

2.  **坐标系统**：
    *   原点 `(0, 0)` 位于元素的左上角。
    *   X 轴向右为正，Y 轴向下为正。
    *   坐标可以是百分比 (%) 或像素 (px)。

3.  **定义四边形的四个顶点（顺时针）**：
    *   **第1个点 (左上)**: `0 0`。
    *   **第2个点 (右上)**: `100% 0`。
    *   **第3个点 (右下)**: `100% 200px`。
        *   *解释*：X 轴到了最右边 (100%)，Y 轴向下移动了 200px。这决定了斜线的终点高度。
    *   **第4个点 (左下)**: `0 100%`。

```css
.header {
    /* ... 其他属性 ... */
    clip-path: polygon(0 0, 100% 0, 100% 200px, 0 100%);
}
```

4.  **练习三角形**：
    *   如果需要做一个居中的三角形，坐标可以是：`50% 0`, `100% 100%`, `0 100%`。

5.  **实用工具推荐**：
    *   **Clippy (CSS Clip-path maker)**: 一个可视化工具，可以通过点击鼠标绘制形状并生成对应的 CSS 代码。

6.  **最终优化**：
    *   为了保持响应式设计，第3个点的 Y 轴坐标不应使用固定的 `200px`，而应使用视口高度单位 `vh`。
    *   调整为：`100% 75vh`。这样无论屏幕高度如何变化，斜切的比例都会保持一致。

```css
.header {
    /* ... 其他属性 ... */
    clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}
```

## AI 总结

本节课详细讲解了构建网页 Header 的基础步骤。首先进行了必要的 CSS Reset 和盒模型设置，确保了跨浏览器的一致性。接着，通过 `body` 选择器利用继承性设置了全局字体。在 Header 的具体实现上，使用了 `vh` 单位控制高度，并通过 `background-image` 的多重叠加实现了图片与线性渐变的结合，同时利用 `rgba` 控制透明度。最后，重点介绍了 `clip-path` 属性的用法，通过定义多边形的坐标点成功实现了 Header 底部的斜切视觉效果，并强调了使用 `vh` 单位以保证响应式布局的重要性。