作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。
介绍
层叠样式表，俗称 CSS，是用于 Web 视觉样式和设计的语言。 CSS 在网络上的悠久历史可以追溯到 1994 年，最初的想法。 从那以后，CSS 已经成为一种功能丰富的语言，能够布局网页、创建复杂的动画等等。
由于 CSS 是 Web 的样式语言，因此了解它的工作原理以及如何使用它是 Web 开发的基础。 为了有效地使用超文本标记语言（HTML）和JavaScript，理解这一点特别有价值。 本教程将重点介绍将 CSS 应用于 HTML、cascade 和 specificity，它们是 CSS 的基础方面，将为您在 Web 项目中有效使用 CSS 做好准备。
CSS 不是传统的编程语言。 虽然它确实具有其他编程语言中的一些功能，例如 variables 和 math，但 CSS 完全依赖于 HTML 才能工作。 CSS 的目的是提供对 HTML 的可视化修改。 CSS 语言更像是浏览器的待办事项列表：你是在对浏览器说，这里是我希望你找到的事情的列表。 一旦浏览器找到这些东西，CSS 就会指示浏览器遍历子集列表并对这些东西进行更改。
浏览器毫无疑问地从上到下遵循这个指令列表，并且在编写 CSS 时需要牢记这一点。 Cascading Stylesheets 的 cascade 部分说明了浏览器如何读取列表。 由于浏览器是不偏不倚的，它会在遇到样式时更改样式。 如果 CSS 说要让一些 HTML 元素变成红色，那么稍后在 CSS 中它说要让这些元素变成蓝色，结果是蓝色的。
将样式应用于元素会有点复杂，因为有很多方法可以告诉浏览器在 HTML 中查找元素。 HTML 中的每个元素都有一组 属性 可用于查找特定元素。 由于浏览器从上到下公正地读取指令的级联，因此提供的指令必须是具体的。 这被称为 specificity，开发人员必须为浏览器编写精确的标准，以找到他们希望应用样式的确切元素。
在本教程中，您将通过多个动手示例来了解样式应用于 HTML 元素的不同方式以及级联和特异性如何影响样式的编写方式。
先决条件
- 在本地计算机上保存为
index.html的 HTML 文件，您可以从文本编辑器和选择的 Web 浏览器访问该文件。 要开始使用，请查看我们的 如何设置您的 HTML 项目 教程，并按照 如何使用和理解 HTML 元素 获取有关如何在浏览器中查看 HTML 的说明。 如果您是 HTML 新手，请尝试整个 如何用 HTML 构建网站系列。
使用 HTML 样式属性
在这第一步中，您将使用 样式属性 直接将样式应用于 HTML 元素。 此方法也称为 内联样式 ，它使用 HTML 元素属性接受 CSS 属性作为值，然后将其直接应用于元素。
要熟悉 CSS 的一些概念，首先在文本编辑器中打开 index.html 文件。 在该文件中，设置 <html>、<head> 和 <body> 标签的基本 HTML 结构。 在 <body> 标签内添加一个带有短句文本的 <div>：
索引.html
<!doctype html>
<html>
<head>
<title>Sammy Shark</title>
</head>
<body>
<div>Sammy is the greatest shark in the ocean.</div>
</body>
</html>
接下来，在浏览器中打开 index.html。 您将在浏览器窗口左上角的 <div> 中看到您的文本。 在视觉上，文本应该类似于下图，使用 serif 字体 的白色背景上的黑色文本，例如 Times New Roman：
要开始设置样式，请在开始的 <div> 标记中添加一个具有空值的属性：
索引.html
... <div style="">Sammy is the greatest shark in the ocean.</div> ...
style 属性是 HTML 的一个特殊属性，它包含 CSS 属性和值。 浏览器会将这些样式应用于该元素。
在这种情况下，使用 color 属性将句子的颜色更改为 navy。 CSS 属性和值的格式以属性名称开头，然后是冒号 :，然后是属性值，最后是分号 ; 在值之后告诉浏览器这就是全部对于值：
索引.html
... <div style="color: navy;">Sammy is the greatest shark in the ocean.</div> ...
保存index.html，返回浏览器，刷新。 文本已从浏览器默认颜色黑色更改为海军蓝，如下图所示：
您可以在 style 属性中尝试许多 CSS 属性，例如 background-color 或 font-family。 通常，浏览器的默认字体是衬线字体，例如 Times New Roman。 要将字体更改为 无衬线字体 ，例如 Arial 或 Helvetica，请在 color 属性的分号后添加一个空格，然后键入 font-family 属性，然后输入冒号，以 sans-serif 作为值：
索引.html
... <div style="color: navy; font-family: sans-serif;">Sammy is the greatest shark in the ocean.</div> ...
保存您的文件并刷新您的浏览器，看看您的句子的字体是如何变化的。 字体现在将是浏览器的 sans-serif 字体，例如 Helvetica 或 Arial，而不是默认字体。 下图显示了 font-family 属性如何建立在颜色更改为海军蓝的基础上。
现在你已经写了几个 CSS 属性，在你的句子中用元素并返回您的浏览器：
索引.html
... <div style="color: navy; font-family: sans-serif;">Sammy is the <strong>greatest</strong> shark in the ocean.</div> ...
在您的浏览器中，<strong> 标签内的单词会比句子中的其他单词更粗，如下图所示。
带有 <strong> 元素的单词保留了它所在的 HTML 元素的 color 和 font-family 属性，也称为 parent。 这是一个继承示例，其中 child 元素（另一个元素内的 HTML 元素）继承放置在父元素上的样式。 <strong> 元素还添加了浏览器默认样式 font-weight: bold;，使文本变为粗体。 此外，<strong> 元素也可以具有 style 属性，以使该元素具有自定义外观：
索引.html
... <div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div> ...
保存文件并刷新浏览器以查看差异，因为 <strong> 元素中的单词现在是蓝色的，与句子其余部分的海军蓝形成鲜明对比。 此更改如下图所示：
在本节中，您使用 HTML style 属性将样式应用于 <div> 和 <strong> 元素。 在下一节中，您将采用为这些特定元素编写的样式并将它们应用于页面上的所有 <div> 和 <strong> 元素。
使用 <style> 标签编写 CSS
接下来，您将采用上一节中编写的内容并将样式应用于页面上的所有相似元素。 您将从使用 style 属性转移到使用 <style> HTML 元素。 <style> 是一个特殊元素，允许您在其中编写 CSS 并将这些样式应用于整个页面。
在 HTML 元素上使用 style 属性非常方便，但仅限于该元素或其后代。 要查看这是如何工作的，请添加另一个带有新句子的 <div> 元素：
索引.html
... <div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div> <div>They like to swim with their friends.</div> ...
转到您的浏览器并重新加载页面。 正如您在浏览器或下图中可能注意到的那样，第一句获取了您之前编写的所有样式，但新句子使用了浏览器默认样式：
您可以在每个单独的元素上应用相同的 style 属性，但是如果您有很多句子想要看起来相同，这会变得非常麻烦。 您需要的是一种同时针对许多相同类型元素的方法。 这可以通过 HTML <style> 元素来完成。
<style> 元素最常放置在 HTML 文档的 <head> 标记中。 这样，浏览器会在读取 HTML 之前读取样式，从而导致页面加载已设置样式。 当浏览器使用浏览器默认样式加载内容然后加载自定义样式时，反之可能会导致闪烁。 但是，请记住，<style> 标签不限于在 <head> 中使用，并且可以放置在 <body> 中的任何位置，这在某些情况下可能是有利的。
将 <style> 标签添加到 index.html 文件的 <head> 中：
索引.html
<!doctype html>
<html>
<head>
<title>Sammy Shark</title>
<style>
</style>
</head>
<body>
<div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
<div>They like to swim with their friends.</div>
</body>
</html>
在 <style> 元素中，您可以使用 选择器 定义要定位的元素类型，它标识要应用样式的 HTML 元素。 一旦选择器就位，您就可以将希望应用于该元素的样式分组到所谓的 选择器块 中。
要开始设置，请查看前面的示例。 这里有一个 <div> 有两个属性，color 和 font-family。
索引.html
... <div style="color: navy; font-family: sans-serif;">...</div> ...
要定位 index.html 页面上的所有 <div> 元素，请在 <style> 属性中添加所谓的 类型选择器，然后是一个开始和结束花括号大括号，它定义了选择器块。 这告诉浏览器找到页面上的所有 <div> 元素并应用在选择器块中找到的样式：
索引.html
<!doctype html>
<html>
<head>
<title>Sammy Shark</title>
<style>
div {
}
</style>
</head>
<body>
<div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
<div>They like to swim with their friends.</div>
</body>
</html>
接下来，从 style 属性中获取属性并将它们放在选择器块的花括号内。 为了使其更易于阅读，将每个属性放在单独的行上会有所帮助：
索引.html
<!doctype html>
<html>
<head>
<title>Sammy Shark</title>
<style>
div {
color: navy;
font-family: sans-serif;
}
</style>
</head>
<body>
<div>Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
<div>They like to swim with their friends.</div>
</body>
</html>
保存文件后，返回浏览器并刷新。 现在两个句子都应用了相同的样式，全部来自 <style> 元素中的单个选择器：
在 div 选择器块之后添加一个新选择器，以相同方式应用 <strong> 元素的样式。 此外，在第二句中的单词周围添加一个 <strong> 元素，以查看多个元素上的新 CSS：
索引.html
<!doctype html>
<html>
<head>
<title>Sammy Shark</title>
<style>
div {
color: navy;
font-family: sans-serif;
}
strong {
color: blue;
}
</style>
</head>
<body>
<div>Sammy is the <strong>greatest</strong> shark in the ocean.</div>
<div>They like to swim with their <strong>friends</strong>.</div>
</body>
</html>
保存文件并刷新浏览器，或查看下图，发现现在使用 <strong> 元素的两个单词都是蓝色：
在本节中，您在 <style> 元素中编写了 CSS 选择器，它将样式应用于页面上的所有匹配元素。 在下一部分中，您将移动这些样式，以便它们可以应用于网站的许多页面。
将外部 CSS 文档加载到 HTML 中
在本节中，您将开始使用加载到多个 HTML 页面上的 CSS 文件。 您会将样式从上一节移到 CSS 文件并创建一个新的 HTML 页面，以查看一个 CSS 文件如何设置多个页面的样式。
正如 style 属性仅限于设置单个元素的样式一样，<style> 元素中的 CSS 仅限于设置单个页面的样式。 网站通常是许多共享相同样式的网页的集合。 如果您有多个页面都需要看起来相同，并且您使用 <style> 元素来保存您的 CSS，那么对样式进行更改将需要在每个页面上进行大量重复工作。 这就是 CSS 文件的来源。
在您的编辑器中创建一个名为 styles.css 的新文件。 在该文件中，从 index.html 复制 <style> 元素的内容并将它们添加到您的 styles.css 文件中。 请务必排除 <style> 标签。
样式.css
div {
color: navy;
font-family: sans-serif;
}
strong {
color: blue;
}
现在您有了一个独立的 CSS 文件，是时候将该文件加载到页面上，以便浏览器可以应用样式。 首先从 <head> 中删除 <style> 标签。 然后在 <head> 标签内，编写一个具有两个属性的自闭合 <link /> 元素，href 和 rel。 href 值包含 style.css 文件的路径，因此浏览器可以引用 CSS。 rel 属性应该具有 stylesheet 的值，因为它定义了页面和被引用文档之间的关系类型：
索引.html
<!doctype html>
<html>
<head>
<title>Sammy Shark</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>Sammy is the <strong>greatest</strong> shark in the ocean.</div>
<div>They like to swim with their <strong>friends</strong>.</div>
</body>
</html>
现在转到您的浏览器并刷新 index.html。 在这种情况下，您不会发现任何更改，因为您所做的只是更改样式所在的位置。
为了演示 CSS 文件的用途，创建一个名为 about.html 的新 HTML 文件。 从 index.html 复制并粘贴 HTML，然后更改句子，或创建新句子：
about.html
<!doctype html>
<html>
<head>
<title>About Sharks</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>There are over <strong>500</strong> species of sharks.</div>
<div>The great white shark can grow up to <strong>6.1 meters</strong> long.</div>
</body>
</html>
接下来，在新的浏览器窗口中打开 about.html，这样您就可以同时查看和比较两个 HTML 文件。 这导致 about.html 对于 div 和 strong 元素具有相同的样式，如下图所示。
返回文本编辑器并打开 styles.css 并将 div 选择器的 color 属性值更改为 green：
样式.css
div {
color: green;
font-family: sans-serif;
}
strong {
color: blue;
}
在您的浏览器中，刷新 index.html 和 about.html 以查看更改 CSS 文件中的样式如何影响这两个 HTML 文件。 如下图所示，index.html 和 about.html 中的文本都从海军蓝变为绿色：
每个页面都有相同的样式，绿色文本和蓝色 <strong> 元素都来自一个中央 CSS 文件。
在本节中，您创建了一个 CSS 文件并将该 CSS 文件加载到多个 HTML 页面上。 您将 CSS 从 <style> 元素移动到 CSS 文件中，该文件将相同的样式应用于 index.html 和新的 about.html 页面。 接下来，您将开始使用 CSS 级联和特异性。
使用级联和特异性
本节将深入介绍介绍中提到的级联和特异性的 CSS 特性。 您将编写示例这些概念的 CSS，从级联开始，然后是特异性。 了解级联和特异性有助于解决您可能在代码中发现的问题。
就你到目前为止所取得的成就而言，级联是很短的。 随着 CSS 文件大小的增加，越来越有必要了解 CSS 选择器和属性的顺序。 考虑瀑布的一种方法是考虑水瀑布和穿越急流。 建议顺势而为，因为试图逆流而上需要付出巨大的努力才能取得一点进展。 CSS 也是如此：如果您的代码没有按预期工作，它可能与级联流程背道而驰。
要在实践中看到这一点，请打开之前的文件。 在文本编辑器中打开 styles.css，在浏览器中打开 index.html。 浏览器中的 <div> 元素当前为 green，粗体文本为 blue。 在 div 选择器中的 font-family 属性之后，添加另一个值为 orange 的 color 属性：
样式.css
div {
color: green;
font-family: sans-serif;
color: orange;
}
strong {
color: blue;
}
浏览器遍历级联，命中绿色样式，将div变为绿色。 然后浏览器点击橙色样式，并将颜色从绿色变为橙色。 在浏览器中刷新 index.html 可以看到绿色文本现在是橙色的，如下图所示：
在这种情况下，浏览器被赋予了两个 color 属性，并且由于级联的性质，浏览器将最后一个 color 属性应用于元素。 当级联更下方的属性否定先前的属性时，这会导致称为 覆盖 的情况。 随着 CSS 文件的大小和范围不断扩大，覆盖可能成为错误的来源以及问题的解决方案。
级联处理浏览器如何读取元素并将样式应用于元素，而特异性处理找到和设置样式的元素。
在浏览器中打开 about.html。 现在这两个句子有相同的风格。 接下来，将第二句中的 <strong> 元素的颜色更改为 red，但将第一个 <strong> 颜色设置为 blue。 要完成此更改需要更高的特异性选择器。 现在选择器是所谓的低特异性，因为它们针对页面上的所有 <strong> 元素，而不管它们的父元素。
更高的特异性可以通过几种不同的方式来实现，但最常见和最有效的方式是类选择器。 在第二个 <strong> 元素上，添加一个名为 class 的新属性，并为该属性赋予属性值 highlight：
about.html
<!doctype html>
<html>
<head>
<title>About Sharks</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>There are over <strong>500</strong> species of sharks.</div>
<div>The great white shark can grow up to <strong class="highlight">6.1 meters</strong> long.</div>
</body>
</html>
接下来，在文本编辑器中打开 styles.css 以创建类选择器。 首先，从您之前添加的 div 中删除 color: orange;。
在 CSS 中，元素选择器在没有标识符的情况下写出，但对于类选择器，在属性中找到的值之前有一个句点 (.)。 在这种情况下，使用选择器 .hightlight 应用值为 red 的 color 属性：
样式.css
div {
color: green;
font-family: sans-serif;
}
strong {
color: blue;
}
.highlight {
color: red;
}
保存对 styles.css 和 about.html 的更改并在浏览器中刷新 about.html。 您会发现第二个 <strong> 元素现在是 red，如下图所示：
要了解关于级联的特异性的稳健性，请交换 strong 和 .highlight 选择器块。 不同种类的选择器具有更高的特异性。 在这种情况下，类选择器比元素选择器具有更高的特异性：
样式.css
div {
color: green;
font-family: sans-serif;
}
.highlight {
color: red;
}
strong {
color: blue;
}
在浏览器中保存并刷新 about.html，你会发现没有任何变化。 下图显示，尽管对 CSS 进行了重新排序，但视觉上没有变化。
这是由于元素选择器的低特异性和类选择器的高特异性。 当浏览器不加考虑地从上到下读取列表时，您可以通过使用更高特异性的选择器来告诉浏览器在应用样式时要更加注意。
在本节中，您使用了级联和特异性的 CSS 特性。 您对一个元素应用了两次相同的属性，这显示了级联如何使用列表中的最后一个属性进行工作。 您还使用称为类选择器的更高特异性选择器创建了样式。 接下来，您将了解一个覆盖级联和特异性的特殊 CSS 规则。
使用 !important 规则
在最后一节中，您将了解 CSS !important 规则并编写一个如何使用它的示例。 此示例使用一个虚构的场景，您无法控制 HTML，因此必须仅使用 CSS 解决问题。
尽管 CSS 通常会与级联一起使用并且具有良好的特异性，但有时需要强制使用样式。 这是通过在属性值末尾的分号之前添加一个 !important 标志来完成的。 这不是一个可以轻易使用的规则，使用时最好包含一个代码注释来解释使用 !important 的原因。
警告： 由于 !important 规则的工作原理，只有在所有其他方法都失败时才应使用它。 使用该规则会覆盖所有匹配元素的值，这使得进一步覆盖变得困难或不可能。 这将使您的代码对其他开发人员不那么易读。
要查看其工作原理，请在编辑器中打开 index.html 并添加 style 属性，并将 color 设置为 red：
索引.html
<!doctype html>
<html>
<head>
<title>Sammy Shark</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div>Sammy is the <strong style="color: red;">greatest</strong> shark in the ocean.</div>
<div>They like to swim with their friends.</div>
</body>
</html>
在浏览器中加载 index.html，您会发现 style 属性用红色覆盖了蓝色，因为 style 属性比 CSS 选择器具有更高的特异性。 浏览器中的内容类似于下图：
在使用网站时，通常会加载可能会应用这样的内联样式的 Javascript。 具有 style 属性的元素位于级联的底部，这意味着即使使用将所有 strong 标签变为 blue 的样式，这一个也会是 red。 在 Javascript 创建 style 属性的情况下，它不能从 HTML 中删除。
要强制样式覆盖，请在编辑器中打开 styles.css，然后在 strong 选择器中的 blue 属性值之后添加 !important：
样式.css
...
strong {
color: blue !important;
}
现在返回浏览器并刷新 index.html。 您将再次看到蓝色，如下图所示：
尽管 style 属性将颜色定义为 red 它现在是 blue，这要归功于 !important 规则告诉浏览器这是更重要的样式采用。 添加解释 !important 原因的 CSS 代码注释很有帮助，以便未来的开发人员或未来您了解您使用它的原因。
样式.css
...
strong {
/* !imporant used here because of JavaScript applying a style attribute on the selector */
color: blue !important;
}
在本节中，您了解了 !important 规则并在实际场景中使用了它。 您还了解到 !important 规则是一个危险的工具，应该故意使用它，因为它会非常激烈地覆盖级联和特异性。 此外，您还编写了 CSS 注释，用于通知未来的开发人员查看您的代码，并在您稍后返回代码时提醒您。
结论
CSS 是一种用于操作和设置 HTML 样式的通用语言。 在本教程中，您通过各种应用样式的方法来设置 HTML 元素的样式。 您现在有了开始编写自己的样式的基础。 如果您想进一步了解 CSS 及其工作原理，CSS 的管理机构万维网联盟 (W3C) 提供了 各种有关该语言的信息 。
如果您想查看更多关于 CSS 的教程，请查看我们的 CSS 主题页面 。
