第一章：CSS 基础核心

第一章：CSS 基础核心

摘要: 本章将系统讲解构成 CSS 的三大基石：引入方式、继承规则 与 尺寸单位。我们将学习如何将样式代码应用到 HTML 中，理解样式是如何在元素间传递的，并掌握用于精确控制布局和字体的各种单位。本章所有知识点均为后续学习 SCSS 高级特性打下坚实基础。

在本章中，我们将像搭建建筑一样，从最基础的材料和规则开始：

  1. 首先，我们将 认识 CSS，了解它的全称和作为网页“造型师”的核心职责。
  2. 接着，我们将学习 CSS 的三种引入方式，并从工程化的角度确立最佳实践。
  3. 然后，我们将掌握它的一个核心规则——样式的继承性，理解样式的传递机制。
  4. 最后，我们将深入 尺寸单位 的世界，学会如何用代码精确度量页面上的一切。

1.1. CSS 简介：认识层叠样式表

CSS (Cascading Style Sheets) 是“层叠样式表”的缩写。如果说 HTML 是网页的骨架，那么 CSS 就是网页的皮肤和服装。它是一种专门用于定义 HTML 元素视觉表现的语言，负责控制页面的布局、颜色、字体、间距等一切外观相关的样式。

“层叠”（Cascading）的含义: 这个词是 CSS 的核心之一。它意味着样式规则可以从多个来源层层叠加，并且存在一套明确的优先级规则来解决冲突。例如，一个你亲自设置的样式，可以覆盖掉浏览器的默认样式。我们将在后续章节深入学习这套规则。

1.2. CSS 的三种引入方式：行内、内嵌与外链

将 CSS 应用于 HTML 共有三种方式。了解它们的区别并选择正确的方式，是编写可维护代码的第一步。

使用场景
只想给某个唯一元素快速加一条简单样式。

1
2
3
<p style="color: blue; font-size: 20px;">
  这段文字将显示为蓝色，20 px。
</p>

不推荐：结构与表现混杂，难以维护。仅作临时调试。

使用场景
样式只服务于当前页面，不对外复用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
  <title>内嵌样式示例</title>
  <style>
    h1 { color: green; text-align: center; }
    p  { color: grey; }
  </style>
</head>
<body>
  <h1>绿色居中的标题</h1>
  <p>灰色段落。</p>
</body>
</html>

使用场景
多页面共享统一视觉风格，实现完全复用。

css/main.css

1
2
3
4
h1 {
  color: purple;
  text-align: center;
}

index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
  <title>外链样式示例</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <h1>紫色居中的标题</h1>
</body>
</html>

工程化视角：外链样式是现代 Web 的唯一标准。我们写的 .scss 最终会被编译成 .css，再由 <link> 引入，彻底分离结构、表现与行为。

优劣势对比总结

样式表优点缺点使用情况
行内样式书写方便，权重高没有实现结构与样式分离，无法复用极少，仅用于调试
内嵌样式部分分离，仅作用于当前页无法在多页面间复用一般，用于单页应用或特定页面样式
外链样式(推荐) 完全分离，易于维护，可复用需额外维护 .css 文件最多，所有项目的标准实践

1.3. 核心规则：样式的继承性

定义: 继承性是 CSS 的一个基本特性，指的是应用在父元素上的某些 CSS 属性会自动被其内部的子元素所继承，从而无需为每个子元素重复设置相同的样式。

范围: 并非所有属性都可以被继承。

  • 可继承的: 通常是与 文字排版相关的属性，例如：color, font-family, font-size, font-weight, line-height, text-align 等。
  • 不可继承的: 通常是与 元素尺寸、布局和背景相关的属性，例如：width, height, padding, margin, border, background-color 等。

痛点背景: 你希望整个页面的基础字体和颜色保持统一，只需在顶层元素设置一次即可，而不必为每个段落、列表都单独指定。

解决方案: 在 body 标签上设置通用文字样式，利用继承性将其传递给页面内的所有子元素。同时，可以为特定元素（如 h1）设置更具体的样式来覆盖继承值。

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
<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS 继承性示例</title>
    <style>
        /* 在 body 元素上设置样式 */
        body {
            color: blue; /* 文本颜色将被子元素继承 */
            font-family: Arial, sans-serif; /* 字体将被子元素继承 */
            font-size: 16px;
        }

        /* h1 将覆盖继承来的 color 属性 */
        h1 {
            color: purple;
            /* h1 的 font-family 和 font-size 也会被浏览器默认样式覆盖 */
            font-size: 32px; 
        }

        /* p 元素将完全继承 body 的样式 */
        p {
            /* 无需额外设置，自动继承 */
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。它继承了body元素的蓝色文本、Arial字体和16px的字号。</p>
    <div>
        <p>即使在 div 内部，这个段落依然能继承来自 body 的样式。</p>
    </div>
</body>
</html>

1.4. 尺寸单位：绝对单位与相对单位

在 CSS 中，单位是用来精确度量长度、尺寸和间距的标尺。它们主要分为两大类。

绝对长度单位

绝对单位的长度是固定的，不会因为其他元素的变化而改变。

  • `px` (像素): Pixel，像素。它是屏幕显示的基本单位，也是 Web 开发中最常用、最基础的绝对单位。对于需要精确控制尺寸的场景非常有用。
  • 其他: cm (厘米), mm (毫米), in (英寸) 等，这些多用于打印样式，在网页开发中极少使用。

相对长度单位 (Relative Length Units)

相对单位的长度不是固定的，它会根据其他元素的尺寸（例如父元素的字体大小或视口宽度）进行计算。这是实现响应式设计的核心。

  • %: 百分比。相对于其父元素的同一属性的值。例如，width: 50% 表示宽度是其父元素宽度的一半。
  • em: 相对于 当前元素 的字体大小 (font-size)。如果当前元素未设置，则相对于 父元素 的字体大小。
  • rem: (重点推荐) Root EM。这是 CSS3 新增的单位，它只相对于 根元素 (<html>) 的字体大小进行计算。这使得它成为构建可伸缩、响应式布局的理想选择，因为我们只需改变根元素的字体大小，就能等比例地缩放整个页面的尺寸。
  • vw: 视口宽度的 1%。10vw 等于视口宽度的 10%。
  • vh: 视口高度的 1%。10vh 等于视口高度的 10%。

痛点背景: 你需要创建一个元素，它的尺寸能始终根据用户浏览器窗口的大小变化而自适应，例如，一个宽度永远是屏幕宽度一半的盒子。

解决方案: 使用 vw 和 vh 单位。

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
<!DOCTYPE html>
<html lang="en">
<head>
    <title>相对单位 vw/vh 示例</title>
    <style>
        body {
            margin: 0;
            font-family: sans-serif;
            text-align: center;
        }
        .box-vw {
            width: 50vw; /* 宽度为视口宽度的50% */
            height: 100px;
            background-color: #3498db;
            color: white;
            line-height: 100px;
            margin: 20px auto;
        }
        .box-vh {
            height: 30vh; /* 高度为视口高度的30% */
            width: 200px;
            background-color: #e74c3c;
            color: white;
            line-height: 30vh;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div class="box-vw">宽度是 50vw</div>
    <div class="box-vh">高度是 30vh</div>
    <p>请尝试缩放你的浏览器窗口，观察盒子的变化。</p>
</body>
</html>

1.5. 本章核心速查总结

分类关键项核心描述
核心定义CSS层叠样式表，负责定义 HTML 的视觉表现。
引入方式行内样式 (style="")(不推荐) 破坏结构与表现分离，仅用于调试。
内嵌样式 (<style>)适用于单页面特定样式。
外链样式 (<link>)(推荐) 项目开发标准，实现完全分离和复用。
核心规则继承性子元素会自动继承父元素与 文字排版相关 的属性。
核心单位px(绝对单位) 像素，最基础的单位，用于精确尺寸。
%(相对单位) 相对于父元素。
rem(推荐) 相对于根元素(<html>)字体大小，响应式布局利器。
vw / vh(相对单位) 相对于视口宽/高，适用于全屏或自适应布局。