跟着 MDN 学CSS day_1：（CSS 基石与色彩的艺术）

在网页开发的浩瀚宇宙中，HTML 构建了坚实的骨架与内容，而 CSS（层叠样式表）则赋予了这具骨架以血肉、灵魂与华美的外衣。没有 CSS 的 Web 世界将是单调而乏味的，所有的网站都将披着浏览器赋予的、千篇一律的基础样式。今天，我们将一同开启 CSS 学习之旅的第一天，深入探索其构建基石，并沉浸于其最直观的表达——色彩的艺术。

一、浏览器默认样式：世界的初始模样

在我们正式踏入 CSS 的殿堂之前，需要先理解一个概念：即使我们不编写任何 CSS 代码，网页在浏览器中也并非完全素颜。你有没有想过，为什么一个没有任何样式的

标题文字依然粗体且巨大，而

段落文字会独立成行并带有上下间距？这就是浏览器默认样式在起作用。

浏览器（如 Chrome、Firefox）内置了一套基础的 CSS 样式表，这套样式表会在页面作者未提供任何样式时被应用。它的设计初衷是为了保证网页在最原始的状态下也具备基本的可读性，让标题像标题，段落像段落。但这仅仅是“默认”而已，它千篇一律，无法满足我们对个性和精美设计的追求。CSS 的使命，正是要打破这种默认，让我们成为网页视觉的真正主宰。

二、CSS 的核心使命：从文档到视觉呈现

CSS 的作用是什么？简单来说，它是一种基于规则的语言，让我们能够精确控制 HTML 元素在浏览器中的外观，将一份结构化的文档（通常是 HTML），以我们期望的布局和设计呈现给用户。这个呈现过程，在浏览器中被称作“渲染”。

它的能力范围非常广泛，包括但不限于：

文本样式：更改字体、大小、颜色、间距等。

布局创建：构建单列、多列、网格等复杂页面结构。

特效制作：实现过渡、动画等动态视觉效果。

CSS 语言自身按模块组织，例如背景与边框、颜色、弹性盒子等，每个模块包含一组相关的属性。今天，我们将重点聚焦于其中最基础也最富表现力的模块之一：颜色。

三、CSS 语法基础：规则的结构之美

CSS 是一门基于规则的语言，一个完整的样式由一条或多条规则构成。理解一条规则的结构，是掌握 CSS 的第一步。

以下面这条简单的规则为例：

h1{color:red;font-size:2.5em;}

我们来解剖它的结构：

选择器 (Selector)：h1 就是一个选择器，它用于“选择”我们想要设置样式的 HTML 元素。这里，它选中了页面中所有的

一级标题元素。

声明块 (Declaration Block)：花括号 { } 及其内部的内容构成了声明块。里面包含了一条或多条声明。

声明 (Declaration)：每一条声明都由一个属性和一个值组成，两者用冒号 : 隔开，并以分号 ; 结束。

color: red; 是一条声明，color 是属性，表示前景色（通常是文字颜色），red 是它的值。

font-size: 2.5em; 是另一条声明，font-size 是属性，表示字体大小，2.5em 是它的值。

一个样式表通常包含多条这样的规则，依次排列，结构清晰。

h1{color:red;font-size:2.5em;}p{color:aqua;padding:5px;background:midnightblue;}

在这个例子中，我们为

元素添加了样式：将文字颜色设置为浅绿色 (aqua)，背景色设置为深蓝色 (midnightblue)，并增加了 5px 的内边距。

四、CSS 的应用机制：从 DOM 到渲染树

当我们用浏览器打开一个网页时，幕后发生了一系列复杂的操作，CSS 就是在此过程中被应用的。这个过程可以简化为以下几步：

浏览器加载并解析 HTML 文档，将其转换为一个树状结构，称为 DOM 树。这个树表示了文档的结构，每个 HTML 元素都是树上的一个节点。

浏览器解析所有找到的 CSS 规则（无论是 HTML 内嵌的，还是外部 .css 文件引用的）。它会根据规则的选择器，将这些规则“挂载”到 DOM 树中相应的元素节点上。

这些附加了样式信息的 DOM 树节点，组合在一起形成了另一个树状结构，称为渲染树。

浏览器最终根据渲染树，将每个节点的样式绘制或“绘制”到浏览器窗口中，用户就看到了美丽的网页。

下面我们用一个完整的示例来直观感受这个过程。假设我们有如下 HTML 结构：

<h1>CSS 很棒</h1><p>你可以为文本添加样式。</p><p>你还可以创建布局和特效。</p>

并应用我们之前的 CSS 代码：

h1{color:red;font-size:2.5em;}p{color:aqua;padding:5px;background:midnightblue;}

这段 CSS 的选择器会精确地命中 DOM 树中的元素：第一个规则只命中唯一的

，将其文字放大并变红；第二个规则则命中所有的

元素，为它们设置文本色、背景色和内边距。最终，这个 DOM 树带着这些样式规则，被渲染成了我们期望的视觉效果：一个醒目的红色大标题，下面跟随着两个有着深蓝背景和浅绿文字的段落。

五、深入颜色世界：多样的值类型与语法

前面我们初步接触了 red、aqua 这样的颜色值。在 CSS 中， 是一种非常丰富的数据类型，它远不止于命名颜色。一个 值还可以包含一个 alpha 通道（透明度），用于控制颜色与背景的混合方式。

CSS 提供了多种定义颜色的方法，以适应不同的设计需求和使用场景。

1. 关键字颜色：直观易懂

最简单的方式是使用预定义的命名颜色，如 blue、pink、rebeccapurple。此外，还有像 currentcolor 这样的特殊关键字，它能动态地继承元素的 color 属性值。这在需要颜色一致性的地方非常有用，比如让边框颜色与文字颜色保持统一。

<divstyle="color:blue;border:1px dashed currentcolor;">这个文本的颜色是蓝色。<divstyle="background:currentcolor;height:9px;"></div>这个块的边框也是蓝色。</div>

在这个例子中，内部 div 的背景色和外层 div 的虚线边框颜色，都动态地继承并使用了外层 div 的文字颜色 blue，无需重复指定。

2. 函数颜色：精确与强大

现代 CSS 更常用的是通过颜色函数来定义颜色，它们提供了对色彩更精细的控制。

RGB 与十六进制：基于红绿蓝三原色混合。#ff0099 和 rgb(255 0 153) 表示的是同一种颜色。现在也支持透明度，如 rgb(255 0 153 / 80%)。

HSL 函数：从“色相、饱和度、亮度”三个维度描述颜色，更符合人类直觉。

示例：生成完全饱和的 sRGB 颜色

div:nth-child(1){background-color:hsl(0 100% 50%);}/* 红色 */div:nth-child(7){background-color:hsl(180 100% 50%);}/* 青色 */div:nth-child(9){background-color:hsl(240 100% 50%);}/* 蓝色 */

通过固定饱和度为 100% 和亮度为 50%，仅改变色相值（0到360），我们就得到了12种鲜艳的纯色。

现代的 LCH、Oklab 与 Oklch：这些是基于人眼视觉感知的色彩空间，能提供更均匀、更宽广的色彩范围。例如 oklch(60% 0.15 50)，它们在处理复杂的设计系统时更为强大。

六、颜色的进阶玩法：相对颜色与透明度

CSS 颜色的强大之处还在于其动态生成能力。

相对颜色：可以基于一个已有的颜色，修改其特定通道的值来生成新颜色。这在创建设计系统变体时非常高效。

/* 基于红色，生成一个色相为240度的新颜色（蓝色） */background-color:hsl(from red 240deg s l);/* 基于绿色，生成一个透明度为50%的新颜色 */background-color:hwb(from green h w b / 0.5);

深浅模式适配：light-dark() 函数允许我们为元素定义一个在浅色模式下使用的颜色和另一个在深色模式下使用的颜色，极大地简化了暗黑模式的适配工作。

color:light-dark(black,white);background-color:light-dark(rgb(255 255 255),rgb(0 0 0));

这行代码声明了在浅色模式下使用黑字白底，而在深色模式下自动切换为白字黑底。

七、颜色的视觉呈现：色相、亮度和饱和度

理解颜色的三个维度，是运用好 HSL 色彩模式的关键。通过固定其中两个变量，我们可以创造出一系列和谐的色彩组。

不同亮度的红色（色相：0，饱和度：100%）

div:nth-child(2){background-color:hsl(0 100% 20%);}/* 暗红 */div:nth-child(4){background-color:hsl(0 100% 60%);}/* 亮红 */div:nth-child(6){background-color:hsl(0 100% 100%);border:solid;}/* 纯白（加边框以显示） */

此例展示了从纯黑到纯白之间，通过改变亮度值来获得不同深浅的红色。

不同饱和度的红色（色相：0，亮度：50%）

div:nth-child(1){background-color:hsl(0 0% 50%);}/* 灰色 */div:nth-child(3){background-color:hsl(0 40% 50%);}/* 淡红 */div:nth-child(5){background-color:hsl(0 80% 50%);}/* 较饱和的红 */

此例展示了从灰色到最鲜艳的红色之间，通过改变饱和度来实现颜色的鲜艳程度变化。

总结

今天，我们从 CSS 的构建基石开始，理解了它打破浏览器默认样式、实现个性化视觉呈现的核心使命。我们学习了 CSS 的语法规则、它在浏览器背后的应用机制，并深入探索了 数据类型的丰富世界。我们掌握了关键字、十六进制、RGB、HSL 等颜色定义方法，领略了相对颜色与浅深色适配的强大，并通过调整色相、亮度与饱和度，直观地感受到了色彩变化的规律。

这只是 CSS 之旅的起点。今天关于颜色和基础语法的知识，将成为我们未来构建复杂布局、创造精美特效的坚实根基。在接下来的学习中，我们将继续探索选择器的更多细节，以及盒模型、布局等更广阔的天地。请继续保持好奇心，动手实践，CSS 的世界将在你手中变得越来越清晰、越来越迷人。

还在纠结 CSS 样式写得杂乱无章、布局频频踩坑？收藏此文持续跟进，后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货，从基础样式到实战排版一站式学透，快速提升前端页面编写能力！