CSS 入门

在本文中，我们将以一个简单的 HTML 文档为例，并应用 CSS，在此过程中学习一些有关该语言的实用知识。

先决条件 已安装基本软件，了解有关文件操作的基本知识，以及 HTML 基础知识（学习HTML 简介。）
目标 了解将 CSS 文档链接到 HTML 文件的基本知识，并能够使用 CSS 进行简单的文本格式化。

从一些 HTML 开始

我们的起点是一个 HTML 文档。如果想在自己的电脑上操作，可以复制下面的代码。将下面的代码保存为index.html，并保存在您机器上的某个文件夹中。

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>

注意：如果您在无法轻松创建文件的设备或环境中阅读本文，请不要担心——下面提供了实时代码编辑器，允许您直接在页面中编写示例代码。

将 CSS 添加到我们的文档中

首先，我们需要告诉 HTML 文档，我们有一些 CSS 规则要它使用。有三种常见的将 CSS 应用于 HTML 文档的方法，但现在，我们将重点介绍最常用且最有效的方法——从文档的头部链接 CSS。

在与 HTML 文档相同的文件夹中创建一个文件，并将其保存为styles.css。.css 扩展名表明这是一个 CSS 文件。

要将styles.css 链接到index.html，请在 HTML 文档的 <head> 中添加以下行

html
<link rel="stylesheet" href="styles.css" />

此 <link> 元素告诉浏览器我们有一个样式表，使用rel 属性，以及样式表的位置作为href 属性的值。您可以通过在styles.css 中添加规则来测试 CSS 是否有效。使用您的代码编辑器，将以下内容添加到您的 CSS 文件中

css
h1 {
  color: red;
}

保存 HTML 和 CSS 文件，并在网页浏览器中重新加载页面。文档顶部的第一级标题现在应该变成红色。如果成功了，恭喜您——您已成功将 CSS 应用于 HTML 文档。如果没有成功，请仔细检查您是否正确输入了所有内容。

您可以继续在本地styles.css 中工作，或者可以使用下面的交互式编辑器来继续本教程。交互式编辑器充当第一个面板中的 CSS 已链接到 HTML 文档，就像我们在上面的文档中所做的那样。

为 HTML 元素设置样式

通过将标题变为红色，我们已经证明可以定位和设置 HTML 元素的样式。我们通过定位元素选择器来实现这一点——这是一种直接匹配 HTML 元素名称的选择器。要定位文档中的所有段落，可以使用选择器p。要将所有段落变为绿色，可以使用

css
p {
  color: green;
}

您可以通过逗号分隔选择器来同时定位多个选择器。如果您希望所有段落和所有列表项都变为绿色，您的规则将如下所示

css
p,
li {
  color: green;
}

在下面的交互式编辑器（编辑代码框）或本地 CSS 文档中尝试一下。

更改元素的默认行为

当我们查看一个标记良好的 HTML 文档时，即使是像我们的示例这样简单的文档，我们也可以看到浏览器如何通过添加一些默认样式使 HTML 可读。标题很大且粗体，列表带有项目符号。这是因为浏览器具有包含默认样式的内部样式表，它们默认情况下会应用于所有页面；如果没有它们，所有文本都会堆在一起，我们必须从头开始设置所有样式。所有现代浏览器都以几乎相同的方式默认显示 HTML 内容。

但是，您通常会想要其他东西，而不是浏览器选择的东西。这可以通过选择您要更改的 HTML 元素并使用 CSS 规则更改其外观来实现。一个很好的例子是<ul>，无序列表。它有列表项目符号。如果您不想要这些项目符号，可以像这样删除它们

css
li {
  list-style-type: none;
}

现在尝试将其添加到您的 CSS 中。

list-style-type 属性是一个值得在 MDN 上查看的属性，了解哪些值受支持。查看list-style-type 的页面，您将在页面顶部找到一个交互式示例，可以在其中尝试一些不同的值，然后所有允许的值将在页面下方详细介绍。

查看该页面，您会发现除了删除列表项目符号之外，您还可以更改它们——尝试使用square 值将它们更改为方形项目符号。

添加类

到目前为止，我们已经根据 HTML 元素名称对元素进行了样式设置。只要您希望文档中所有此类类型的元素看起来都一样，这就可以实现。要选择元素的子集而不更改其他元素，可以在 HTML 元素中添加一个类，并在 CSS 中定位该类。

  1. 在您的 HTML 文档中，将 class 属性 添加到第二个列表项。您的列表现在将如下所示
    html
    <ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>
  2. 在 CSS 中，可以通过创建以句点开头的选择器来定位special 类。将以下内容添加到您的 CSS 文件中
    css
    .special {
  color: orange;
  font-weight: bold;
}
  3. 保存并刷新以查看结果。

您可以将special 类应用于页面上任何您希望具有与该列表项相同外观的元素。例如，您可能希望段落中的<span> 也变为橙色和粗体。尝试将special 类添加到它，然后重新加载页面并查看发生了什么。

有时您会看到带有选择器的规则，该选择器列出了 HTML 元素选择器以及类

css
li.special {
  color: orange;
  font-weight: bold;
}

此语法表示“定位任何具有 special 类的li 元素”。如果您要这样做，那么您将无法通过将类添加到它来将类应用于<span> 或其他元素；您必须将该元素添加到选择器列表中

css
li.special,
span.special {
  color: orange;
  font-weight: bold;
}

您可以想象，一些类可能会应用于许多元素，您不想每次需要添加新样式时都必须编辑 CSS。因此，有时最好绕过元素并引用类，除非您知道要为某个元素创建一些特殊规则，并且可能希望确保它们不应用于其他元素。

根据元素在文档中的位置设置样式

有时您希望根据元素在文档中的位置进行不同的样式设置。有一些选择器可以帮助您完成此操作，但现在我们只关注其中几个。在我们的文档中，有两个<em> 元素——一个在段落内，另一个在列表项内。要仅选择嵌套在<li> 元素内的<em>，可以使用称为后代组合器的选择器，其形式是两个其他选择器之间的空格。

将以下规则添加到您的样式表中

css
li em {
  color: rebeccapurple;
}

此选择器将选择任何位于（后代）<li> 内部的<em> 元素。因此，在您的示例文档中，您应该发现第三个列表项中的<em> 现在是紫色，但段落内的<em> 则保持不变。

您可能还想尝试在段落直接位于 HTML 中相同层次结构级别的标题之后时对其进行样式设置。为此，请在选择器之间放置一个+（下一个兄弟组合器）。

尝试将此规则也添加到您的样式表中

css
h1 + p {
  font-size: 200%;
}

下面的实时示例包含上面的两个规则。尝试添加一条规则，如果跨度位于段落内，则将其变为红色。您将知道是否正确，因为第一个段落中的跨度将变为红色，但第一个列表项中的跨度不会改变颜色。

注意：正如您所见，CSS 为我们提供了多种定位元素的方法，而我们目前只是触及了皮毛！我们将在本课程的后面部分的选择器 文章中详细介绍所有这些选择器以及更多选择器。

根据状态设置样式

在本教程中，我们要介绍的最后一种样式类型是根据元素状态对其进行样式设置的能力。一个简单的例子是链接的样式设置。当我们设置链接的样式时，我们需要定位 <a>（锚）元素。它具有不同的状态，具体取决于它是未访问、已访问、悬停、键盘聚焦还是正在被点击（激活）的过程中。您可以使用 CSS 来定位这些不同的状态——下面的 CSS 将未访问的链接设置为粉红色，已访问的链接设置为绿色。

css
a:link {
  color: pink;
}

a:visited {
  color: green;
}

您可以更改用户悬停时链接的外观，例如通过删除下划线，这可以通过下一条规则实现

css
a:hover {
  text-decoration: none;
}

在下面的实时示例中，您可以玩弄链接各种状态的不同值。我们已经为它添加了上面的规则，现在意识到粉红色太淡了，难以阅读——为什么不将其更改为更好的颜色？您可以使链接变为粗体吗？

我们已在悬停时从链接中删除了下划线。您可以从链接的所有状态中删除下划线。但是，值得记住的是，在实际站点中，您需要确保访问者知道链接是链接。保留下划线对于让人们意识到段落中的某些文本可以点击非常重要——这是他们习惯的行为。与 CSS 中的所有内容一样，有可能会通过更改使文档的可访问性降低——我们将努力在适当的地方突出潜在的陷阱。

注意：在这些课程以及整个 MDN 中，您会经常看到提到无障碍性。当我们谈论无障碍性时，我们指的是网页必须让每个人都能理解和使用的要求。

您的访问者可能使用带有鼠标或触控板的电脑，也可能使用带有触摸屏的手机。或者他们可能使用屏幕阅读器，它会朗读文档内容，或者他们可能需要使用更大的文本，或者仅使用键盘浏览网站。

一个普通的 HTML 文档通常对每个人来说都是无障碍的——当您开始设置该文档的样式时，重要的是不要降低其可访问性。

组合选择器和组合符

值得注意的是，您可以将多个选择器和组合器组合在一起。例如

css
/* 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 {
}

您也可以将多种类型组合在一起。尝试将以下内容添加到您的代码中

css
body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

这将为任何具有 special 类且位于 <h1> 之后、位于 <body> 内的 <p> 内的元素设置样式。呼！

在我们提供的原始 HTML 中，唯一设置样式的元素是 <span class="special">。

如果您现在觉得这很复杂，请不要担心 - 随着您编写更多 CSS，您将很快开始上手。

总结

在本文中，我们已经介绍了使用 CSS 为文档设置样式的几种方法。在接下来的课程中，我们将继续学习这些知识。但是，您现在已经了解了足够的内容来设置文本样式、根据不同的元素定位方法应用 CSS，以及在 MDN 文档中查找属性和值。

在下一课中，我们将了解 CSS 的结构。