跟着 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 结构h1CSS 很棒/h1p你可以为文本添加样式。/pp你还可以创建布局和特效。/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 属性值。这在需要颜色一致性的地方非常有用比如让边框颜色与文字颜色保持统一。divstylecolor:blue;border:1px dashed currentcolor;这个文本的颜色是蓝色。divstylebackground: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 高效简写、兼容适配方案、经典布局案例、样式避坑干货从基础样式到实战排版一站式学透快速提升前端页面编写能力