CSS 入门
在本文中，我们将引导你使用一个简单的 HTML 文档并为其应用 CSS，在此过程中学习该语言的一些实用细节。我们还将回顾你尚未了解的一些额外 CSS 语法特性。
从一些 HTML 开始
我们的起点是一个 HTML 文档。如果你想在自己的电脑上工作，可以从下面复制代码。将下面的代码保存为 index.html 在你机器上的一个文件夹中。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Getting started with CSS</title>
</head>
<body>
<h1>I am a level one heading</h1>
<p>
This is a paragraph of text. In the text is a
<span>span element</span> and also a
<a href="https://example.com">link</a>.
</p>
<p>
This is the second paragraph. It contains an <em>emphasized</em> element.
</p>
<ul>
<li>Item <span>one</span></li>
<li>Item two</li>
<li>Item <em>three</em></li>
</ul>
</body>
</html>
渲染效果如下：
注意：如果你在无法轻松创建文件的设备或环境中阅读此内容，请不要担心 — 点击上面实时示例中的“播放”按钮，在 MDN Playground 中打开它。在那里，你可以按照说明编辑 CSS 和 HTML 代码，并实时查看组合结果。
向我们的文档添加 CSS
我们要做的第一件事是告诉 HTML 文档，我们有一些 CSS 规则要它使用。将 CSS 应用于 HTML 文档的方法有三种，你通常会遇到 — 外部样式表、内部样式表和内联样式。现在让我们看看这些。
如果你正在使用 MDN Playground 阅读本文，你将无法像在本地计算机上编写代码的人那样以相同的方式执行本节中详述的步骤。这是因为 MDN Playground 在后台隐式处理将 CSS 添加到 HTML。但是，你仍然应该通读本节以了解内容。
外部样式表
外部样式表包含一个单独的 .css 扩展名文件中的 CSS。这是将 CSS 引入文档最常见和最有用的方法。你可以将单个 CSS 文件链接到多个网页，使用相同的 CSS 样式表为所有网页设置样式。
在与你的 HTML 文档相同的文件夹中创建一个文件，并将其保存为 styles.css。
要将 styles.css 链接到 index.html，请在 HTML 文档的 <head> 内部的某个位置添加以下行
<link rel="stylesheet" href="styles.css" />
这个 <link> 元素使用 rel 属性告诉浏览器我们有一个样式表，并使用 href 属性的值指示该样式表的位置。你可以通过向 styles.css 添加规则来测试 CSS 是否有效。使用你的代码编辑器，将以下内容添加到你的 CSS 文件中
h1 {
color: red;
}
保存你的 HTML 和 CSS 文件，并在 Web 浏览器中重新加载页面。文档顶部的 H1 标题现在应该是红色的。如果发生这种情况，恭喜你 — 你已成功将一些 CSS 应用于 HTML 文档。如果未发生这种情况，请仔细检查你是否正确输入了所有内容。
在不同位置定位样式表
在上面的示例中，CSS 文件与 HTML 文档在同一个文件夹中，但你可以将其放置在其他位置并调整路径（与 HTML 图像 相同）。以下是三个示例
<!-- In a subdirectory called styles in the current directory -->
<link rel="stylesheet" href="styles/style.css" />
<!-- In a subdirectory called general, which is in a subdirectory called styles, in the current directory -->
<link rel="stylesheet" href="styles/general/style.css" />
<!-- Go back one directory level, then in a subdirectory called styles -->
<link rel="stylesheet" href="../styles/style.css" />
内部样式表
内部样式表包含在 <style> 元素中，这些元素位于 HTML <head> 中。现在让我们创建一个。
在你的 HTML 文档中，在 <head> 和 </head> 标签之间添加以下代码片段
<style>
p {
color: purple;
}
</style>
保存并刷新，你应该会看到所有段落都变成紫色。
在某些情况下，内部样式表可能很有用。例如，也许你正在使用内容管理系统，但你无法修改外部 CSS 文件。
然而，对于多页站点，内部样式表不如外部样式表高效。要使用内部样式表对多个页面应用统一的 CSS 样式，你必须在每个网页上重复内部样式表。这种效率损失也会延伸到站点维护。对于内部样式表中的 CSS，即使一个简单的样式更改也可能需要编辑多个网页。
在你继续之前，从你的示例 HTML 中删除 <style> 元素及其内容。
内联样式
内联样式是影响单个 HTML 元素的 CSS 声明，包含在 style 属性中。现在让我们尝试实现一个。
在你的 HTML 中为 <span> 元素添加一个 style 属性，使其看起来像以下内容
<span style="color: purple; font-weight: bold">span element</span>
保存并刷新，你应该会看到只有 <span> 中的文本变成紫色和粗体。尝试在你的 style 属性中添加更多声明（用分号分隔），或者在其他元素中添加一些额外的 style 属性。
完成实验后，删除所有 style 属性。
如果可能，请避免以这种方式使用 CSS。这是一种不好的做法。首先，它是维护 CSS 效率最低的实现。一个样式更改可能需要在单个网页中进行多次编辑。其次，内联 CSS 还将（CSS）表现代码与 HTML 和内容混合在一起，使一切都更难阅读和理解。分离代码和内容使所有网站开发人员的维护工作更容易。
如果你的工作环境非常严格，你可能不得不使用内联样式。例如，你的 CMS 可能只允许你编辑 HTML 主体。你可能还会看到 HTML 电子邮件中大量使用内联样式，以实现与尽可能多的电子邮件客户端的兼容性。在使用 JavaScript 动态应用样式时，设置内联样式也相当常见。
使用常见选择器
在本节中，我们将简要介绍一些你将遇到的更常见的选择器类型。
选择 HTML 元素
通过将标题设置为红色，我们已经演示了我们可以定位和样式化 HTML 元素。我们通过定位元素选择器（也称为类型选择器）来做到这一点 — 这是一种直接匹配 HTML 元素名称的选择器。要定位文档中的所有段落，你将使用选择器 p。要将所有段落变为绿色，你将使用
p {
color: green;
}
你可以通过用逗号分隔选择器来同时定位多个选择器。如果你想让所有段落和所有列表项都变为绿色，你的规则将如下所示
p,
li {
color: green;
}
在下面的示例中（点击“播放”）或在你的本地副本中尝试一下
h1 {
color: red;
}
p,
li {
}
添加一个类
到目前为止，我们已经根据 HTML 元素名称对元素进行了样式设置。只要你希望文档中所有相同类型的元素看起来都一样，这就可以正常工作。要选择元素的子集而不更改其他元素，你可以向 HTML 元素添加一个 class 并在你的 CSS 中定位该类。
-
在你的 HTML 文档中，向第二个列表项添加一个 class 属性。你的列表现在将如下所示
html<ul> <li>Item one</li> <li class="special">Item two</li> <li>Item <em>three</em></li> </ul> -
在你的 CSS 中，你可以通过创建一个以句点开头的选择器来定位
special类。将以下内容添加到你的 CSS 文件中css.special { color: orange; font-weight: bold; } -
保存并刷新以查看结果。
现在，你可以将 special 类应用于页面上你希望具有与此列表项相同外观的其他元素。在段落内的 <span> 中添加一个 special 类，然后重新加载页面：它现在也应该是橙色和粗体。
根据文档中的位置设置样式
有时你会希望某个元素根据其在文档中的位置显示不同的外观。有许多选择器可以帮助你解决这个问题，但现在我们只看几个。在我们的文档中，有两个 <em> 元素 — 一个在段落内，另一个在列表项内。要仅选择嵌套在 <li> 元素内的 <em>，你可以使用一个名为后代组合器的选择器，它以两个其他选择器之间的空格形式出现。
将以下规则添加到你的样式表中
li em {
color: rebeccapurple;
}
此选择器将选择任何作为 <li> 后代的所有 <em> 元素。因此，在你的示例文档中，你应该会发现第三个列表项中的 <em> 现在是紫色的，但段落内的那个没有改变。
你可能还想尝试在 HTML 中紧跟标题并在相同层次结构级别的段落设置样式。为此，请在选择器之间放置一个 +（一个相邻兄弟选择器）。
尝试将此规则也添加到你的样式表中
h1 + p {
font-size: 200%;
}
下面的实时示例包含以上两条规则。尝试添加一条规则，使 span 在段落内部时变为红色。如果第一个段落中的 span 变为红色，但第一个列表项中的 span 不变色，则说明你做对了。
li em {
color: rebeccapurple;
}
h1 + p {
font-size: 200%;
}
注意：如你所见，CSS 为我们提供了多种定位元素的方式，而我们到目前为止只触及了表面！我们将在课程的稍后阶段深入研究所有这些选择器以及更多选择器。
根据状态设置样式
在本教程中我们将要了解的最后一种样式类型是根据元素状态进行样式设置的能力。一个简单的例子是为链接设置样式。当我们为链接设置样式时，我们需要定位 <a>（锚点）元素。它具有不同的状态，具体取决于它是未访问、已访问、被悬停、通过键盘聚焦还是正在被点击（激活）。你可以使用 CSS 来定位这些不同的状态 — 下面的 CSS 将未访问的链接样式设置为粉红色，将已访问的链接样式设置为绿色。
a:link {
color: pink;
}
a:visited {
color: green;
}
你可以更改用户悬停时链接的外观，例如通过删除下划线，这可以通过下一条规则实现
a:hover {
text-decoration: none;
}
在下面的示例中，你可以尝试链接不同状态的不同值。我们已经添加了上面的规则，现在意识到粉红色相当浅，难以阅读 — 为什么不将其更改为更好的颜色呢？你能让链接加粗吗？
a:link {
color: pink;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}
我们已经删除了悬停时链接的下划线。你可以从链接的所有状态中删除下划线。然而，值得记住的是，在实际网站中，你需要确保访问者知道链接是链接。保留下划线对于人们意识到段落中的某些文本可以点击是一个重要的线索 — 这是他们习惯的行为。与 CSS 中的所有内容一样，你的更改可能会使文档的可访问性降低 — 我们将尝试在适当的地方强调潜在的陷阱。
注意：你经常会在这些课程和 MDN 中看到有关可访问性的提及。当我们谈论可访问性时，我们指的是我们的网页必须对所有人来说都易于理解和使用，无论他们是使用带鼠标或触控板的计算机、带触摸屏的手机、仅使用键盘导航，还是通过屏幕阅读器（它会朗读文档内容）导航。
组合选择器和组合器
值得注意的是，你可以将多个选择器和组合器组合在一起。例如
/* selects any <span> that is inside a <p>, which is inside an <article> */
article p span {
}
/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1> */
h1 + ul + p {
}
你也可以将多种类型组合在一起。尝试将以下内容添加到你的代码中
h1 + p .special {
color: yellow;
background-color: black;
padding: 5px;
}
这将样式化具有 special 类且位于 <p> 内部且紧跟在 <h1> 之后的任何元素。呼！这应该会定位你代码中的 <span class="special">span element</span> 元素。
如果这目前看起来很复杂，请不要担心 — 随着你编写更多 CSS，你很快就会开始掌握它。
其他 CSS 语法特性
现在我们已经玩了一些 CSS 特性，我们将带你粗略了解一下你在课程中会遇到的其他一些 CSS 语法特性。如果你想了解其中任何一个的更多详细信息，你可以尝试在本页顶部的搜索字段中输入特性名称，或者浏览 MDN CSS 参考。
为了试验每个代码片段，你可以将提供的 HTML 和 CSS 添加到你上面使用的本地示例或 MDN Playground 实例中。
函数
虽然大多数值都是相对简单的关键字或数值，但也有一些值采用函数的形式。
calc() 函数
一个例子是 calc() 函数，它可以在 CSS 中进行简单的数学运算
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>
.outer {
border: 5px solid black;
}
.box {
padding: 10px;
width: calc(90% - 30px);
background-color: rebeccapurple;
color: white;
}
这呈现为
函数由函数名称和用于括住函数值的括号组成。在上面的 calc() 示例中，这些值定义了此框的宽度为包含块宽度的 90%，减去 30 像素。
变换函数
另一个例子是 transform 属性的各种值，例如 rotate()。
<div class="box"></div>
.box {
margin: 30px;
width: 100px;
height: 100px;
background-color: rebeccapurple;
transform: rotate(0.8turn);
}
上述代码的输出如下所示
查找下面列出的属性的不同值。尝试编写 CSS 规则，使用以下函数将样式应用于不同的 HTML 元素
transformbackground-image，尤其是渐变值color，尤其是 rgb 和 hsl 值
@规则
CSS @规则（读作“at-rules”）提供有关 CSS 应如何表现的说明。你可能会遇到的一个常见 @规则是 @media，它用于创建媒体查询。媒体查询使用条件逻辑来应用 CSS 样式。
在下面的示例中，样式表为 <body> 元素定义了一个默认的粉红色背景。然而，随后的媒体查询会在浏览器视口宽度大于 30em 时，为 <body> 元素设置蓝色背景。
body {
background-color: pink;
}
@media (width >= 30em) {
body {
background-color: blue;
}
}
简写属性
某些属性，如 font、background、padding、border 和 margin，被称为简写属性。这是因为简写属性在一行中设置多个值。
例如，这一行代码
/* In 4-value shorthands like padding and margin, the values are applied
in the order top, right, bottom, left (clockwise from the top). There are also other
shorthand types, for example 2-value shorthands, which set padding/margin
for top/bottom, then left/right */
padding: 10px 15px 15px 5px;
等效于这四行代码
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
这一行
background: red url("bg-graphic.png") 10px 10px repeat-x fixed;
等效于这五行
background-color: red;
background-image: url("bg-graphic.png");
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
在课程的后面，你将遇到许多其他简写属性的示例。现在，尝试在你的代码中使用上述声明（或你可能知道的其他声明）来更熟悉它们的工作原理。
CSS 注释
与任何编码工作一样，在你的 CSS 中编写注释是最佳实践。这有助于你在以后进行修复或增强时记住代码的工作原理。它还有助于其他人理解代码。
CSS 注释以 /* 开头，以 */ 结尾。在下面的示例中，注释标记了不同代码部分的开始。这有助于在代码库变大时进行导航。通过这种注释方式，在代码编辑器中搜索注释成为高效查找代码部分的一种方法。
/* Handle basic element styling */
/* ---------------------------- */
body {
font:
1em/150% "Helvetica",
"Arial",
sans-serif;
padding: 1em;
margin: 0 auto;
max-width: 33em;
}
@media (width >= 70em) {
/* Increase the global font size on larger screens or windows
for better readability */
body {
font-size: 130%;
}
}
h1 {
font-size: 1.5em;
}
/* Handle specific elements nested in the DOM */
div p,
#id::first-line {
background-color: red;
border-radius: 3px;
}
div p {
margin: 0;
padding: 1em;
}
div p + p {
padding-top: 0;
}
“注释掉”代码也适用于暂时禁用部分代码进行测试。在下面的示例中，通过“注释掉”代码来禁用 .special 的规则。
/* .special {
color: red;
} */
p {
color: blue;
}
尝试向你的 CSS 添加注释。
CSS 中的空白
空白是指实际的空格、制表符和换行符。就像浏览器忽略 HTML 中的额外空白一样，浏览器也会忽略 CSS 中的额外空白。空白的好处是它让你更容易阅读代码。
在下面的示例中，每个声明（以及规则的开始/结束）都有自己的一行。这可以说是编写 CSS 的好方法。它使 CSS 更容易维护和理解。
body {
font:
1em/150% "Helvetica",
"Arial",
sans-serif;
padding: 1em;
margin: 0 auto;
max-width: 33em;
}
@media (width >= 70em) {
body {
font-size: 130%;
}
}
h1 {
font-size: 1.5em;
}
下一个示例以更压缩的格式显示相同的 CSS，删除了所有额外的空白。虽然这两个示例的工作方式相同，但下面的示例更难阅读。
body{font:1em/150% "Helvetica","Arial",sans-serif;padding:1em;margin:0 auto;max-width:33em;}
@media(width>=70em){body{font-size:130%;}}
h1{font-size:1.5em;}
请记住，某些空白更改可能会导致错误。属性名永远不包含空白，而预期在多个值之间有空白的属性值如果删除了该空白将无效。例如，这些声明是有效的 CSS
margin: 0 auto;
padding-left: 10px;
但这些声明无效
margin: 0auto;
padding- left: 10px;
你看到空格错误了吗？首先，0auto 未被识别为 margin 属性的有效值。条目 0auto 应该是两个单独的值：0 和 auto。其次，浏览器无法识别 padding- 为有效属性。正确的属性名（padding-left）不包含空格。
你应该始终确保用至少一个空格将不同的值彼此分开。将属性名称和属性值作为单个连续字符串放在一起。
要了解空格如何破坏 CSS，请尝试在测试 CSS 中玩弄空格。
总结
在本文中，我们探讨了多种使用 CSS 样式化文档的方法。在接下来的课程中，我们将继续深化这方面的知识。然而，你现在已经掌握了足够的知识来样式化文本，并根据文档中定位元素的不同方式应用 CSS。
接下来，我们将为你提供一个挑战来测试你新获得的知识。