本文是系列文章的一部分：Web 基础知识
本文将介绍层叠样式表，详细说明它们是什么、它们允许什么，以及如何使用它们来弯曲和设置 HTML 样式，从而以有效的方式构成美观且响应迅速的设计。
我们不要浪费时间，立即开始吧。
CSS简介
在上一篇文章中，我们讨论了 HTML 如何构成 Web 的骨架。这个描述非常贴切，因为它为我们的布局和元素提供了必要的结构。而 CSS 则让我们能够控制 CSS 提供的所有属性，从而构建任何我们想要的内容。
CSS 定义了用于设置组件主题和构建界面的样式机制。它是 Web 开发中必不可少的工具。闲话少叙，让我们深入了解它的功能。
选择器
CSS 选择器在文件内部使用.css，以定位 HTML 元素并允许应用 CSS 规则。
有五种基本的 CSS 选择器：
| 选择器 | 用法 | 目标 | 使用示例 |
|---|---|---|---|
| 普遍的 | * {} |
所有元素 | 将间距或 alpha 值应用于所有元素 |
| 班级 | .example {} |
所有具有给定类的 | 将相同的样式应用于多个元素 |
| ID | #example {} |
所有具有给定 ID 的 | 将样式应用于特定元素 |
| 类型 | h1 {}或者button {} |
所有具有给定类型的 | 将样式应用于原生 HTML 元素 |
| 属性 | [type="submit"] {} |
所有具有给定属性的 | 仅对"提交"类型的按钮应用样式 |
🤓 我建议使用
.class选择器，#id因为 ID 属性是唯一的
分组选择器
您可以使用逗号将选择器分组到一条 CSS 规则下，以便在多个选择器之间共享属性：
css
.foo { color: red;}#bar { color: blue;}// The padding will apply to both selectors.foo, #bar { padding: 1rem;}组合选择器
您还可以使用各种语法组合选择器来定位从后代到兄弟的任何内容：
css
/* 这将针对所有<h1>，它们是<section>标记的后代，不管它们是如何嵌套的. */
section h1 { color: red;}
/* 这将针对所有<h2>标签，它们是<section>标签的直接子标签。一旦它们嵌套在另一个标签中，它将不再适用. */
section > h2 { color: orange;}
/* 这将只针对紧跟在<section>标签之后的下一个<h3>标签. */
section + h3 { color: yellow;}
/* 这将针对所有与<section>标签具有相同父元素的<h4>标签. */
section ~ h4 { color: green;}选择器还可以用于定位浏览器伪元素：
css
/* 它的目标是标准HTML输入字段中的占位符文本 */
input::placeholder { color: #ddd;}使用多种组合器和选择器，您可以轻松地设置 Web 文档任何部分的样式。
⚡**实例：选择器**
选择器非常广泛要详细了解您可以使用它们实现什么，请点击下面的链接。
📚 MDN：选择器
级联、继承和特异性
CSS 中存在一组明确的层级结构，这些结构可能难以解析。由于这些主题需要的解释比本文的平均章节要多，因此我们选择将其单独列出！
单位和值类型
CSS 包含许多单元。然而，就 Web 而言，你通常会遇到以下这些单元：
绝对单位
虽然 CSS 包含多个绝对单位，但它们主要用于打印。然而，在 Web 上，你只会找到一个：
| 单元 | 行为 |
|---|---|
px |
最常见的单位。它是一个静态值，不会自行调整大小。 |
关于绝对单位的警告
网络是响应式的。网站和应用程序必须适应多种外形尺寸，因此
px不应在需要根据用户环境（即视口、缩放级别或字体大小）调整大小的元素中使用值。
相对单位复制链接
相对单位在网络上占据主导地位。这是最常见的单位类型，理由很充分；它们使我们能够设计响应式、动态的应用程序和网站。让我们来看看它们！
父母大小单位复制链接
| 单元 | 行为 |
|---|---|
% |
相对于父元素。将内部元素的高度设置为50%将使其达到父元素高度的 50%。 |
视口单位复制链接
| 单元 | 行为 |
|---|---|
vw |
相对于视口的宽度。更改窗口的宽度将导致元素的宽度发生变化。 |
vh |
相对于视口的高度。更改窗口的高度将导致元素的高度发生变化。 |
既然我们已经了解了这两种类型的单元，我认为有必要以实际的方式强调一下它们之间的区别。在下面的演示中，您可以在它们之间切换，并查看它们在框架内的行为。
字体大小单位复制链接
| 单元 | 行为 |
|---|---|
em |
相对于父元素的font-size。 |
rem |
相对于的。我们很快会讨论更多关于:root的。font-size``:root |
印刷单位复制链接
| 单元 | 行为 |
|---|---|
ch |
等于字体"0"字符的宽度。 |
ex |
等于当前字体的 x 高度。x高度是指小写字符基线到顶部之间的高度。 |
价值观复制链接
某些 CSS 属性仅接受特定的语法和类型。例如color：
css
.foobar_keyword { color: red; }
.foobar_hex { color: #ff0000; }
.foobar_rgb { color: rgba(255, 0, 0, 1); }
.foobar_integer { color: 12; }同样的情况也发生在padding，它只接受数值：
css
.foobar { padding: "Hello"; }确保值的格式也很重要。将数值放在引号内会将其转换为字符串值！
css
.foobar { padding: 12px; }
.foobar { padding: "12px"; }了解更多
我们只是粗略地介绍了一下现有功能。如需了解更多信息，请访问以下链接。
📚 MDN：单位和值
速记
在 CSS 中，一些属性可以组合成简写属性，这样可以同时采用多个值。
这样可以保持 CSS 的优化，并从长远来看节省几行代码。border属性就是一个简写属性的很好例子。
然后我们可以将其缩短为：
最后一个例子同样易读，但占用的空间更少。
变量
CSS 变量允许我们定义任意、可重复使用的值。
在下面的例子中，我们只需改变--green值即可自动将这些改变传播到.foo和.bar元素。
css
:root { --green: #00ff00;}
.foo { background-color: var(--green);}
.bar { color: var(--green);}使用变量是提高项目可维护性和一致性的好方法，因为它允许您从单个点更新值，而不是使用原始值。
任何有效值都可以成为变量，但你必须谨慎使用它们，并且要小心谨慎。不过别担心，这就是我们要教你的！
声明变量
变量通常在中声明，:root并在其他任何内容之前声明。
css
:root { --green: #00ff00; --icon-size: 24px; --border-width-xl: 8px; --heading-1-size: 2rem;}当然，这只是一个过于简单的例子。真正的样式表会包含数十甚至数百个标记，以支持更复杂的用例。
后备方案
现在，var()s 的一个很棒的特性是允许使用 fallbacks。如果由于某种原因某个变量无法加载，开发者可以声明将要使用的原始值。
您最常看到的是字体声明，因为它们的加载可能很麻烦。
css
:root { --brand-font: "Figtree", Arial, sans-serif;}特别是对于字体，这意味着布局可以首先加载后备字体，然后在加载后更新为所需的字体。
明显的警告
回退是设计上的最后一搏，仅用作在发生大规模故障时能够显示网页的安全措施。
与它们所替换的变量不同，这些是原始值，并且不是动态的，也不容易被批量编辑。
尽管如此，请务必尽可能添加后备措施，以确保无论出现什么问题，您仍然可以向用户显示内容。
嵌套
在设计系统中，所有事物都有变量是很常见的------颜色、不透明度、边框厚度等等。
这意味着 CSS 需要支持可扩展的变量集，这些变量有时相互依赖，以减少样式声明。
在前面的例子中，我们看到了如何在 中声明变量。为了优化变量的使用，:root我们可以在 CSS 文件的 中嵌套变量。:root
css
:root {
--green80: #00ff00;
--brand-default: var(--green80);
--button-bg: var(--brand-default);
}优化rgba()价值
一个很好的例子就是这个rgba()函数。它接受一个红色、绿色、蓝色和一个 alpha 值，并以逗号分隔，如下所示。
然而，像这样进行原始颜色声明是不可持续的，因为如果没有变量就很难维护。
值得庆幸的是，CSS 允许我们将这个函数的值分隔开来！
我们可以从函数中分离出rgb和，并创建这两个值的变量。a
在下图中，函数的第一部分是它自己的颜色声明，然后是 alpha 变量。
这意味着它们的价值可以独立且动态地进行管理。
但我们可以走得更远！
如果我们想重用这个rgba()值怎么办？我们可以再次将其包装在变量中！
查看下面的示例来了解变量的实际使用情况！
⚡**实例：CSS 变量**
了解有关变量的更多信息CSS 广泛支持变量。请务必阅读以下文档了解更多信息。
功能
在 CSS 中，函数内嵌套变量很常见。你经常会看到calc()函数被频繁使用。
用于自动化布局的函数的一个很好的例子calc()如下：
你有一排头像。规范规定它们的高度和宽度均为40px，边距为**-20px**，因此它们会重叠。头像可以改变大小，并且该行在缩放时必须保持其外观。
我们从这个开始：
css
:root { --avatar-size: 40px; --avatar-offset: -20px;}
.avatar { height: var(--avatar-size); width: var(--avatar-size); }
.avatar-row { display: flex; gap: var(--avatar-offset);}但是，这个解决方案不是动态的，并且不支持头像大小的变化。我们可以使用该calc()函数来自动化这个过程，如下所示：
css
:root { --avatar-size: 40px; --avatar-offset: calc(0px - var(--avatar-size) / 2); }
.avatar { height: var(--avatar-size); width: var(--avatar-size); }
.avatar-row { display: flex; gap: var(--avatar-offset);}现在，无论头像大小如何，头像行都会自适应，以保持所需的对齐方式。当我们将其尺寸加倍时，结果正如我们预期的那样：
了解更多
CSS 拥有丰富的函数，在您的前端开发之旅中，您会遇到其中的几种。想要了解更多，请点击下方链接。
定位
CSS 属性position决定了文档内部的元素流。
CSS 属性top、bottom、left、right用于定位元素以控制偏移。
元素位置有五种类型：
| 定位类型 | 行为 |
|---|---|
| 静止的 | - 默认位置。- 不受偏移和顺序的影响。 |
| 绝对 | - 该元素从文档流中移除并相对于最近的position: relative父元素进行定位。- 可以相对于父容器进行偏移和排序。 |
| 固定的 | - 该元素从文档流中移除并相对于初始容器定位。- 可以相对于初始容器进行偏移和排序。 |
| 相对的 | - 元素正常流动并为子元素提供相对定位。- 可以相对于自身偏移并排序。 |
| 黏 | - 元素正常流动并"粘"到最近的容器上。- 根据滚动机制，位置relative之间的混合。fixed- 可以相对于父容器进行偏移和排序。 |
css
.root { position: relative; width: 768px; height: 272px;}
.container { position: absolute; left: 224px; top: 100px; width: 320px; height: 145px; z-index: 90;}
.item { position: absolute; bottom: 50px; right: 90px; width: 213px; height: 65px; z-index: 100;}z-index控制元素的顺序，将其置于前面或后面。
什么时候使用定位？
- 用于灯箱、移动菜单、模态窗口和类似的覆盖元素；
- 主要用于从文档流中删除元素；
例如，我们自己的标题是固定的，以便它始终保持在屏幕顶部，位于所有其他元素的顶部。
实时代码示例
我们还有很多东西要学
在本系列 CSS 的第二部分中，我们将讨论 CSS 的继承、层次结构和特异性。内容比较多，所以我们决定把它们分开！
我会在那里和你见面。