作者选择了Diversity in Tech Fund作为Write for DOnations计划的一部分接受捐赠。
简介
层叠样式表（Cascading Style Sheets)，又称 CSS，是网络视觉样式和设计语言。CSS 在网络上的历史可以追溯到 1994 年的最初想法。从那时起，CSS 已成为一种功能丰富的语言，能够布局网页、创建复杂的动画等。
CSS 是网页的样式语言，因此了解 CSS 的工作原理和使用方法是网页开发的基础。要有效地使用超文本标记语言（HTML) 和JavaScript，了解 CSS 尤为重要。本教程将重点介绍如何将 CSS 应用于 HTML、级联和特定性，这些都是 CSS 的基础知识，可帮助您在网络项目中有效使用 CSS。
CSS 并非传统的编程语言。虽然 CSS 具有其他编程语言中的一些功能，如 variables 和 math 等，但 CSS 的工作完全依赖于 HTML。CSS 的目的是对 HTML 进行可视化修改。CSS 语言更像是浏览器的待办事项列表：你要对浏览器说，这里有一份我希望你找到的清单。一旦浏览器找到了这些内容，CSS 就会指示浏览器查看子集列表，并对这些内容进行修改。
浏览器自上而下毫无疑问地遵循这份指令列表，因此在编写 CSS 时需要考虑到这一点。层叠样式表的_cascade_部分说明了浏览器是如何读取列表的。由于浏览器是不偏不倚的，因此它会在遇到样式变化时进行更改。如果 CSS 中说要将某些 HTML 元素变为红色，而 CSS 的后面又说要将这些元素变为蓝色，那么结果就是蓝色。
对元素应用样式变得有点复杂，因为有很多方法可以让浏览器在 HTML 中找到某个元素。HTML 中的每个元素都有一组_属性_，可用于查找特定元素。由于浏览器会不偏不倚地从上到下读取指令，因此所提供的指令必须是具体的。这就是所谓的_specificity_，即开发人员必须编写精确的标准，以便浏览器准确找到他们希望应用样式的元素。
在本教程中，您将通过多个实际操作示例，了解样式应用于 HTML 元素的不同方式，以及层叠和特定性如何影响样式的编写。
先决条件
- 在本地计算机上保存一个 HTML 文件，文件名为 "index.html"，你可以通过文本编辑器和浏览器访问该文件。要开始学习，请查看我们的 如何设置 HTML 项目 教程，并按照 如何使用和理解 HTML 元素 了解如何在浏览器中查看 HTML。如果你是 HTML 的新手，可以试试整个 如何用 HTML 创建网站 系列。
使用 HTML 样式属性
在第一步中，你将使用 style 属性直接为 HTML 元素应用样式。这种方法也称为_inline styling，它使用 HTML 元素属性接受 CSS 属性作为值，然后将其直接应用到元素上。
要熟悉 CSS 的一些概念，首先在文本编辑器中打开 index.html 文件。在该文件中，设置<html>、<head>和<body>标记的基本 HTML 结构。在<body>标记内添加一个<div>，其中包含一小段文字：
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 <title>Sammy Shark</title>
6 </head>
7 <body>
8 <div>Sammy is the greatest shark in the ocean.</div>
9 </body>
10</html>
接下来，在浏览器中打开 index.html。您将在浏览器窗口左上角的"
要开始设计样式，请在开头的 <div> 标记中添加一个空值属性：
1[label index.html]
2...
3<div style="">Sammy is the greatest shark in the ocean.</div>
4...
style 属性是 HTML 的一个特殊属性，包含 CSS 属性和值。浏览器会将这些样式应用于该元素。
在这种情况下，请使用color属性将句子的颜色改为navy。CSS 属性和值的格式以属性名称开头，然后是冒号":"，接着是属性值，最后在值后面加上分号";"，告诉浏览器这就是该值的全部内容：
1[label index.html]
2...
3<div style="color: navy;">Sammy is the greatest shark in the ocean.</div>
4...
保存 index.html，返回浏览器并刷新。如下图所示，文本颜色已从浏览器默认的黑色变为深蓝色：
你可以在style属性中尝试使用许多 CSS 属性，如background-color或font-family。通常，浏览器的默认字体是衬线字体，如 Times New Roman。要将字体更改为_无衬线字体_，如 Arial 或 Helvetica，请在 color 属性的分号后添加一个空格，然后键入 font-family 属性，后面跟一个冒号，并将 sans-serif 作为值：
1[label index.html]
2...
3<div style="color: navy; font-family: sans-serif;">Sammy is the greatest shark in the ocean.</div>
4...
保存文件并刷新浏览器，查看句子字体的变化。现在，字体将是浏览器的_无衬线字体_，如 Helvetica 或 Arial，而不是默认字体。下图显示了 font-family 属性如何将颜色更改为海军蓝。
现在你已经编写了几个 CSS 属性，用 <strong>元素 包住句子中的一个单词，然后返回浏览器：
1[label index.html]
2...
3<div style="color: navy; font-family: sans-serif;">Sammy is the <strong>greatest</strong> shark in the ocean.</div>
4...
在浏览器中，""标记内的单词会比句子中的其他单词更醒目，如下图所示。
带有<strong>元素的单词保留了其内部 HTML 元素（也称为_parent_)的color和font-family属性。这是继承的一个例子，即_子_元素（另一个元素内部的 HTML 元素)继承父元素上的样式。<strong>元素还添加了浏览器默认样式 "font-weight: bold;"，使文本变粗。此外，元素还可以有一个style` 属性，以赋予该元素自定义外观：
1[label index.html]
2...
3<div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
4...
保存文件并刷新浏览器，即可看到不同之处：""元素中的单词现在变成了蓝色，与句子其余部分的海军蓝形成鲜明对比。这一变化如下图所示：
在本节中，您将使用 HTML style 属性为<div>和<strong>元素应用样式。在下一节中，您将把为这些特定元素编写的样式应用到页面上的所有 <div> 和 <strong> 元素。
使用 <style> 标记编写 CSS
接下来，您将利用上一节所写的内容，将样式应用到页面上的所有类似元素。您将从使用 style 属性转向使用 <style> HTML 元素。<style> 是一个特殊的元素，它允许你在其中编写 CSS，并将这些样式应用到整个页面。
在 HTML 元素上使用 style 属性非常方便，但仅限于该元素或其后代元素。要了解其工作原理，请在另一个 <div> 元素上添加一个新句子：
1[label index.html]
2...
3<div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div>
4<div>They like to swim with their friends.</div>
5...
打开浏览器，重新加载页面。您可能会在浏览器或下图中注意到，第一个句子使用了您之前编写的所有样式，而新句子则使用了浏览器的默认样式：
第一句文字使用自定义样式呈现，而第二句则使用浏览器默认样式呈现。除了 标记中的文字是浅蓝色加粗字体外，第一句话的字体是海军蓝色无衬线字体。第二句为黑色衬线字体。](assets/67516/1-6.png)
您可以在每个单独的元素上应用相同的 style 属性，但如果您想让许多句子看起来都一样，这就变得非常麻烦。您需要的是一种同时针对许多同类元素的方法。这可以通过 HTML <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>