练习 - 使用 CSS 设置 HTML 样式

10 分钟

使用级联样式表 (CSS) 可以指定页面外观。基本思想就是定义在 HTML 页面中使用的元素的样式。 HTML 元素定义内容，而 CSS 样式定义此内容的样式。

例如，可应用圆角或为元素提供渐变背景，也可使用 CSS 来指定超链接在你与它们交互时的样式和响应方式。你还可以执行复杂的页面布局和动画效果。

你可以将样式应用于特定元素、特定类型的所有元素，或使用类来设置许多不同元素的样式。

在本练习中，你将对 HTML 页面元素应用 CSS 样式并添加一些 CSS 代码来定义你的浅色和深色主题。然后，将在浏览器的开发人员工具中检查结果。

外部 CSS

在关于 HTML 的上一个单元中，你已从 HTML 链接到外部 CSS 文件。

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

外部 CSS 的一个优势就是多个 HTML 页面可以链接到同一 CSS 文件。如果对 CSS 进行了更改，则每个页面的样式都将更新。当将 HTML 文件用于页面内容、将 CSS 文件用于样式设置、将 JavaScript 文件用于交互时，这称为“关注点分离”。

如前所述，还可以直接在 HTML 中编写名为“内部 CSS”的 CSS。即使是基础网站，也存在很多能够使 HTML 页面很快变得混乱的 CSS 规则。如果是多个页面，通常会重复使用同一个 CSS 并且难以管理。

CSS 规则

CSS 规则是你将样式应用于 HTML 元素的方式。 CSS 规则有一个选择器，用于表示应将样式应用于哪个元素（或哪些元素）。

在 Visual Studio Code 中，打开 main.css 文件并输入以下内容：

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

此代码片段包含两个规则。每个规则都有：

一个选择器。 body 和 ul 是两个规则的选择器，用于选择将样式应用于哪个或哪些元素。
左大括号 ({)。
一个样式声明列表，用于确定所选元素的样式。
右大括号 (})。

例如，ul 选择器选择页面中的 <ul> HTML 元素，以对其应用样式。 “声明”为 font-family: helvetica，并确定样式类型。 “属性名称”为 font-family，“值”为 helvetica。

接下来你将注意到，你可以为元素自定义名称。

选择器

使用 ID 和类选择器，可在 HTML 中为自定义的属性名称应用样式。使用 ID 为一个元素设置样式，而使用类为多个元素设置样式。

复制以下代码并将其添加到 CSS 文件。将其粘贴到前面添加的 ul 选择器的右大括号后面。
```
li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}
```
前面的代码包含三个 CSS 规则，最后两个规则使用自定义属性来选择元素：.list 和 #msg。
- .list 是一个类选择器。每个包含设置为 list 的 class 属性的 HTML 元素都将获得在此选择器中定义的样式。
- #msg 是一个 ID 选择器。包含设置为 msg 的 id 属性的 HTML 元素将获得在此选择器中定义的样式。
用于选择器的名称可以是任意的，只要与 HTML 中的已定义名称匹配即可。
在 Windows 上选择 Control+S，或在 macOS 上选择 Command+S 来保存工作。

在浏览器中查看

若要使用 Visual Studio Code 进行预览，请在资源管理器中右键单击 index.html 文件，然后选择“在默认浏览器中打开”。

重要

即使只是在编辑 main.css 文件，若要预览更改，你也应选择 index.html 文件。

使用默认浏览器打开网页。

字体样式是你所希望看到的类型吗？有趣的是，应用于 <body> 的样式是如何在 <h1> 元素上继承的。我们没有为 <h1> 定义任何内容，但它仍然获得了在 <body> 上定义的字体。这种从父元素到子元素的继承机制是 CSS 的关键方面之一。但是，元素 <li> 具有不同的字体。 <li> 元素的样式将覆盖为 <body> 设置的样式，因为 <li> 元素是为其定义了样式的 <ul> 元素的后代。

在 Visual Studio Code 中使用“在默认浏览器中打开”时，每次都会在浏览器中打开一个新标签页。要避免打开新标签页，可以重新加载已包含网站的标签页。

要重新加载标签页，请按 F5，这是刷新键盘快捷方式，或者在 Windows 或 Linux 上按 Ctrl+R，在 Mac 上按 Command+R。

添加浅色主题

接下来，为你的网站添加对颜色主题的支持。首先使用十六进制颜色代码定义浅色主题。

在 CSS 文件 (main.css) 中，将下面的代码添加到文件末尾。
```
.light-theme {
  color: #000000;
  background: #00FF00;
}
```
在本示例中，#000000 指定字体颜色为黑色，#00FF00 指定背景色为绿色。
在 HTML 文件 (index.html) 中，使用类名 light-theme 更新 <body> 元素。现在，浅色主题的类选择器可正确应用样式。
```
<body class="light-theme">
```

在浏览器中查看

要使用 Visual Studio Code 进行预览，请右键单击 index.html，然后选择“在默认浏览器中打开”或按 F5 重新加载上一个标签页。

请注意，会出现使用绿色背景的浅色主题。

查看应用的 CSS

在浏览器视图中，打开“开发人员工具”。

右键单击页面并选择“检查”，或者选择快捷方式 F12 或 Ctrl+Shift+I。
选择“元素”选项卡，并在“元素”选项卡中选择“样式”选项卡（默认应该已经选中）。
将鼠标悬停在各种 HTML 元素上，当你选择一些元素时，请注意开发人员工具如何在“样式”中显示应用到它们的样式。
选择 <body> 元素。请注意应用的 light-theme。
选择无序列表 <ul> 元素。请注意 font-family: helvetica; 的自定义样式，该样式将覆盖 <body> 元素的样式。

要了解有关在开发人员工具中查看 CSS 样式的更多信息，请查看开始查看和更改 CSS 一文。

添加深色主题

对于深色主题，需要设置基础结构以为下一个单元做好准备，在该单元中，将在网页上启用主题切换。

若要向 CSS 添加对深色主题的支持，请使用以下步骤。

在 CSS 文件 (main.css) 中，将一些常量添加到文件开头的页面根目录。
```
:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}
```
:root 选择器表示 HTML 页面中的 <html> 元素。对于此类任务，最佳做法是使用 :root 选择器在 CSS 规则中定义一组全局 CSS 变量。在本例中，你定义了三个颜色变量。现在，可以在其他 CSS 规则中使用这些变量。
在 CSS 文件的末尾，将 light-theme 规则替换为以下代码，以更新它并添加 dark-theme 选择器。
```
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}
```
在上面的代码中，你定义了 bg 和 fontColor 这两个新变量，它们指定背景和字体颜色。这些变量使用 var 关键字将其属性值设置为之前在 :root 选择器中指定的变量。
接下来，在 CSS 文件中，将当前的 body 选择器替换为以下代码。
```
body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}
```
在此示例中，你使用 body 选择器来设置 background 和 color 属性，并且由于网页上可见的元素都在 <body> 元素内，它们将继承 <body> 上设置的颜色。
在 CSS 文件中，使用 #msg 和 ul 选择器删除规则，让它们也从 <body> 继承相同的字体。

请记得通过选择 Control+S 或 Command+S 来保存文件。

CSS 文件 (main.css) 现在应如以下示例所示：

:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

若要查看深色主题，请打开 index.html 文件并将 <body> 类属性中的默认主题编辑为深色主题 (dark-theme)。保存文件，并在浏览器中重新加载页面。
编辑 <body> 类属性以将默认值切换回浅色主题。

在下一个单元中，你将使用 JavaScript 来提供交互性，并支持主题切换。

练习 - 使用 CSS 设置 HTML 样式

外部 CSS

CSS 规则

选择器

在浏览器中查看

添加浅色主题

在浏览器中查看

查看应用的 CSS

添加深色主题

反馈