CSS 的结构如何

现在你已经开始了解 CSS 的目的和用途，让我们检查一下 CSS 的结构。

¥Now that you are beginning to understand the purpose and use of CSS, let's examine the structure of CSS.

先决条件：	基本软件已安装、处理文件基础知识和 HTML 基础知识（学习 HTML 简介）。
目标：	详细学习 CSS 的基本语法结构。

将 CSS 应用到 HTML

¥Applying CSS to HTML

首先，我们来看看将 CSS 应用到文档的三种方法：使用外部样式表、使用内部样式表以及使用内联样式。

¥First, let's examine three methods of applying CSS to a document: with an external stylesheet, with an internal stylesheet, and with inline styles.

外部样式表

¥External stylesheet

外部样式表在具有 .css 扩展名的单独文件中包含 CSS。这是将 CSS 引入文档的最常见和最有用的方法。你可以将单个 CSS 文件链接到多个网页，并使用相同的 CSS 样式表对所有网页进行样式设置。在 CSS 入门中，我们将外部样式表链接到我们的网页。

¥An external stylesheet contains CSS in a separate file with a .css extension. This is the most common and useful method of bringing CSS to a document. You can link a single CSS file to multiple web pages, styling all of them with the same CSS stylesheet. In the Getting started with CSS, we linked an external stylesheet to our web page.

你从 HTML <link> 元素引用外部 CSS 样式表：

¥You reference an external CSS stylesheet from an HTML <link> element:

html

<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

CSS 样式表文件可能如下所示：

¥The CSS stylesheet file might look like this:

css

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

<link> 元素的 href 属性需要引用文件系统上的文件。在上面的示例中，CSS 文件与 HTML 文档位于同一文件夹中，但你可以将其放置在其他位置并调整路径。以下是三个例子：

¥The href attribute of the <link> element needs to reference a file on your file system. In the example above, the CSS file is in the same folder as the HTML document, but you could place it somewhere else and adjust the path. Here are three examples:

html

<!-- Inside a subdirectory called styles inside the current directory -->
<link rel="stylesheet" href="styles/style.css" />

<!-- Inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory -->
<link rel="stylesheet" href="styles/general/style.css" />

<!-- Go up one directory level, then inside a subdirectory called styles -->
<link rel="stylesheet" href="../styles/style.css" />

内部样式表

¥Internal stylesheet

内部样式表驻留在 HTML 文档中。要创建内部样式表，请将 CSS 放置在 HTML <head> 中包含的 <style> 元素内。

¥An internal stylesheet resides within an HTML document. To create an internal stylesheet, you place CSS inside a <style> element contained inside the HTML <head>.

内部样式表的 HTML 可能如下所示：

¥The HTML for an internal stylesheet might look like this:

html

<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

在某些情况下，内部样式表可能很有用。例如，也许你正在使用内容管理系统，但你无法修改外部 CSS 文件。

¥In some circumstances, internal stylesheets can be useful. For example, perhaps you're working with a content management system where you are blocked from modifying external CSS files.

但对于具有多个页面的网站，内部样式表成为一种效率较低的工作方式。要使用内部样式表将统一的 CSS 样式应用到多个页面，你必须在每个将使用该样式的网页中都有一个内部样式表。效率损失也会影响到现场维护。使用内部样式表中的 CSS 时，即使是一项简单的样式更改也可能需要对多个网页进行编辑。

¥But for sites with more than one page, an internal stylesheet becomes a less efficient way of working. To apply uniform CSS styling to multiple pages using internal stylesheets, you must have an internal stylesheet in every web page that will use the styling. The efficiency penalty carries over to site maintenance too. With CSS in internal stylesheets, there is the risk that even one simple styling change may require edits to multiple web pages.

内联样式

¥Inline styles

内联样式是影响单个 HTML 元素的 CSS 声明，包含在 style 属性中。HTML 文档中内联样式的实现可能如下所示：

¥Inline styles are CSS declarations that affect a single HTML element, contained within a style attribute. The implementation of an inline style in an HTML document might look like this:

html

<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">
      Hello World!
    </h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

尽可能避免以这种方式使用 CSS。这与最佳实践相反。首先，它是维护效率最低的 CSS 实现。一项样式更改可能需要在单个网页中进行多次编辑。其次，内联 CSS 还将 (CSS) 表示代码与 HTML 和内容混合在一起，使所有内容都更难以阅读和理解。分离代码和内容使所有在网站上工作的人都更容易维护。

¥Avoid using CSS in this way, when possible. It is the opposite of a best practice. First, it is the least efficient implementation of CSS for maintenance. One styling change might require multiple edits within a single web page. Second, inline CSS also mixes (CSS) presentational code with HTML and content, making everything more difficult to read and understand. Separating code and content makes maintenance easier for all who work on the website.

在某些情况下，内联样式更为常见。如果你的工作环境非常严格，你可能不得不求助于使用内联样式。例如，也许你的 CMS 只允许你编辑 HTML 正文。你可能还会在 HTML 电子邮件中看到许多内联样式，以实现与尽可能多的电子邮件客户端的兼容性。

¥There are a few circumstances where inline styles are more common. You might have to resort to using inline styles if your working environment is very restrictive. For example, perhaps your CMS only allows you to edit the HTML body. You may also see a lot of inline styles in HTML email to achieve compatibility with as many email clients as possible.

使用本文中的 CSS

¥Playing with the CSS in this article

对于下面的练习，请在你的计算机上创建一个文件夹。你可以随意命名该文件夹。在文件夹内，复制以下文本以创建两个文件：

¥For the exercise that follows, create a folder on your computer. You can name the folder whatever you want. Inside the folder, copy the text below to create two files:

索引.html：

¥index.html:

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My CSS experiments</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>Create your test HTML here</p>
  </body>
</html>

样式.css：

¥styles.css:

css

/* Create your test CSS here */

p {
  color: red;
}

当你找到要试验的 CSS 时，将 HTML <body> 内容替换为一些 HTML 样式，然后将测试 CSS 代码添加到 CSS 文件中。

¥When you find CSS that you want to experiment with, replace the HTML <body> contents with some HTML to style, and then add your test CSS code to your CSS file.

作为替代方案，你还可以使用下面的交互式编辑器。

¥As an alternative, you can also use the interactive editor below.

继续阅读并享受乐趣！

¥Read on and have fun!

选择器

¥Selectors

选择器以 HTML 为目标，将样式应用于内容。我们已经在 CSS 入门教程中发现了多种选择器。如果 CSS 没有按预期应用于内容，你的选择器可能不会按照你认为应该匹配的方式匹配。

¥A selector targets HTML to apply styles to content. We have already discovered a variety of selectors in the Getting started with CSS tutorial. If CSS is not applying to content as expected, your selector may not match the way you think it should match.

每个 CSS 规则都以一个选择器（或选择器列表）开头，以便告诉浏览器该规则应应用于哪个或哪些元素。下面的所有示例都是有效的选择器或选择器列表。

¥Each CSS rule starts with a selector — or a list of selectors — in order to tell the browser which element or elements the rules should apply to. All the examples below are valid selectors or lists of selectors.

css

h1
a:link
.manythings
#onething

* .box p
.box p:first-child
h1, h2, .intro

尝试创建一些使用上面选择器的 CSS 规则。添加由选择器设置样式的 HTML。如果上面的任何语法不熟悉，请尝试搜索 MDN。

¥Try creating some CSS rules that use the selectors above. Add HTML to be styled by the selectors. If any of the syntax above is not familiar, try searching MDN.

注意：你将在下一个模块中了解有关选择器的更多信息：CSS 选择器。

¥Note: You will learn more about selectors in the next module: CSS selectors.

特异性

¥Specificity

你可能会遇到两个选择器选择相同 HTML 元素的情况。考虑下面的样式表，其中有一个 p 选择器将段落文本设置为蓝色。然而，还有一个类将选定元素的文本设置为红色。

¥You may encounter scenarios where two selectors select the same HTML element. Consider the stylesheet below, with a p selector that sets paragraph text to blue. However, there is also a class that sets the text of selected elements to red.

css

.special {
  color: red;
}

p {
  color: blue;
}

假设在我们的 HTML 文档中，我们有一个类为 special 的段落。两条规则均适用。哪个选择器占上风？你希望看到蓝色或红色的段落文本吗？

¥Suppose that in our HTML document, we have a paragraph with a class of special. Both rules apply. Which selector prevails? Do you expect to see blue or red paragraph text?

html

<p class="special">What color am I?</p>

CSS 语言有规则来控制在发生冲突时哪个选择器更强。这些规则称为级联和特异性。在下面的代码块中，我们为 p 选择器定义了两条规则，但段落文本将为蓝色。这是因为将段落文本设置为蓝色的声明稍后出现在样式表中。后面的样式会替换样式表中较早出现的冲突样式。这就是级联规则。

¥The CSS language has rules to control which selector is stronger in the event of a conflict. These rules are called cascade and specificity. In the code block below, we define two rules for the p selector, but the paragraph text will be blue. This is because the declaration that sets the paragraph text to blue appears later in the stylesheet. Later styles replace conflicting styles that appear earlier in the stylesheet. This is the cascade rule.

css

p {
  color: red;
}

p {
  color: blue;
}

然而，在我们前面的示例中，类选择器和元素选择器之间发生冲突，类优先，将段落文本渲染为红色。即使样式表中稍后出现冲突的样式，怎么会发生这种情况？类被评为更具体，因为比元素选择器具有更多的特异性，因此它取消了其他冲突的样式声明。

¥However, in the case of our earlier example with the conflict between the class selector and the element selector, the class prevails, rendering the paragraph text red. How can this happen even though a conflicting style appears later in the stylesheet? A class is rated as being more specific, as in having more specificity than the element selector, so it cancels the other conflicting style declaration.

亲自尝试一下这个实验！添加 HTML，然后将两个 p { } 规则添加到样式表中。接下来，将第一个 p 选择器更改为 .special，看看它如何改变样式。

¥Try this experiment for yourself! Add HTML, then add the two p { } rules to your stylesheet. Next, change the first p selector to .special to see how it changes the styling.

特异性和级联的规则乍一看似乎很复杂。当你对 CSS 更加熟悉时，这些规则就会更容易理解。下一个模块中的级联和继承部分详细解释了这一点，包括如何计算特异性。

¥The rules of specificity and the cascade can seem complicated at first. These rules are easier to understand as you become more familiar with CSS. The Cascade and inheritance section in the next module explains this in detail, including how to calculate specificity.

现在，请记住特异性是存在的。有时，CSS 可能不会按你的预期应用，因为样式表中的其他内容具有更多特殊性。认识到多个规则可以适用于一个元素是解决此类问题的第一步。

¥For now, remember that specificity exists. Sometimes, CSS might not apply as you expected because something else in the stylesheet has more specificity. Recognizing that more than one rule could apply to an element is the first step in fixing these kinds of issues.

属性和值

¥Properties and values

在最基本的层面上，CSS 由两个组件组成：

¥At its most basic level, CSS consists of two components:

特性：这些是人类可读的标识符，指示你要修改哪些风格特性。例如，font-size、width、background-color。
价值观：每个属性都被分配一个值。该值指示如何设置属性的样式。

下面的示例高亮了单个属性和值。属性名称为 color，值为 blue。

¥The example below highlights a single property and value. The property name is color and the value is blue.

A declaration highlighted in the CSS

当属性与值配对时，这种配对称为 CSS 声明。CSS 声明位于 CSS 声明块中。在下面的示例中，高亮标识了 CSS 声明块。

¥When a property is paired with a value, this pairing is called a CSS declaration. CSS declarations are found within CSS Declaration Blocks. In the example below, highlighting identifies the CSS declaration block.

A highlighted declaration block

最后，CSS 声明块与选择器配对以生成 CSS 规则集（或 CSS 规则）。下面的示例包含两条规则：一个用于 h1 选择器，一个用于 p 选择器。彩色高亮标识了 h1 规则。

¥Finally, CSS declaration blocks are paired with selectors to produce CSS rulesets (or CSS rules). The example below contains two rules: one for the h1 selector and one for the p selector. The colored highlighting identifies the h1 rule.

The rule for h1 highlighted

将 CSS 属性设置为特定值是定义文档布局和样式的主要方法。CSS 引擎计算哪些声明适用于页面的每个元素。

¥Setting CSS properties to specific values is the primary way of defining layout and styling for a document. The CSS engine calculates which declarations apply to every single element of a page.

CSS 属性和值不区分大小写。属性-值对中的属性和值由冒号 (:) 分隔。

¥CSS properties and values are case-insensitive. The property and value in a property-value pair are separated by a colon (:).

查找下面列出的属性的不同值。编写将样式应用于不同 HTML 元素的 CSS 规则：

¥Look up different values of properties listed below. Write CSS rules that apply styling to different HTML elements:

警告：如果属性未知，或者值对于给定属性无效，则声明将被视为无效。它被浏览器的 CSS 引擎完全忽略。

¥Warning: If a property is unknown, or if a value is not valid for a given property, the declaration is processed as invalid. It is completely ignored by the browser's CSS engine.

警告：在 CSS（和其他网络标准）中，人们一致认为美国拼写是存在语言变化或不确定性的标准。例如，colour 应拼写为 color，因为 colour 不起作用。

¥Warning: In CSS (and other web standards), it has been agreed that US spelling is the standard where there is language variation or uncertainty. For example, colour should be spelled color, as colour will not work.

函数

¥Functions

虽然大多数值是相对简单的关键字或数值，但也有一些值采用函数的形式。

¥While most values are relatively simple keywords or numeric values, there are some values that take the form of a function.

calc() 函数

¥The calc() function

一个例子是 calc() 函数，它可以在 CSS 中进行简单的数学运算：

¥An example would be the calc() function, which can do simple math within CSS:

html

<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>

css

.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

这呈现为：

¥This renders as:

函数由函数名称和括住函数值的括号组成。在上面的 calc() 示例中，这些值将该框的宽度定义为包含块宽度的 90%，减去 30 像素。计算结果不是可以提前计算并作为静态值输入的结果。

¥A function consists of the function name, and parentheses to enclose the values for the function. In the case of the calc() example above, the values define the width of this box to be 90% of the containing block width, minus 30 pixels. The result of the calculation isn't something that can be computed in advance and entered as a static value.

变换函数

¥Transform functions

另一个示例是 transform 的各种值，例如 rotate()。

¥Another example would be the various values for transform, such as rotate().

html

<div class="box"></div>

css

.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}

上述代码的输出如下所示：

¥The output from the above code looks like this:

查找下面列出的属性的不同值。编写将样式应用于不同 HTML 元素的 CSS 规则：

¥Look up different values of properties listed below. Write CSS rules that apply styling to different HTML elements:

transform
background-image，特别是梯度值
color，特别是 rgb 和 hsl 值

@rules

CSS @rules（发音为 "at-rules"）提供了有关 CSS 应该执行什么操作或者应该如何表现的说明。一些@rules 很简单，只有一个关键字和一个值。例如，@import 将一个样式表导入到另一个 CSS 样式表中：

¥CSS @rules (pronounced "at-rules") provide instruction for what CSS should perform or how it should behave. Some @rules are simple with just a keyword and a value. For example, @import imports a stylesheet into another CSS stylesheet:

css

@import "styles2.css";

你可能遇到的一个常见@规则是 @media，它用于创建媒体查询。媒体查询使用条件逻辑来应用 CSS 样式。

¥One common @rule that you are likely to encounter is @media, which is used to create media queries. Media queries use conditional logic for applying CSS styling.

在下面的示例中，样式表为 <body> 元素定义了默认的粉红色背景。但是，如果浏览器视口宽于 30em，则接下来的媒体查询会定义蓝色背景。

¥In the example below, the stylesheet defines a default pink background for the <body> element. However, a media query follows that defines a blue background if the browser viewport is wider than 30em.

css

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

在这些教程中你将遇到其他@rules。

¥You will encounter other @rules throughout these tutorials.

看看是否可以添加根据视口宽度更改样式的媒体查询。更改浏览器窗口的宽度以查看结果。

¥See if you can add a media query that changes styles based on the viewport width. Change the width of your browser window to see the result.

速记

¥Shorthands

某些属性（如 font、background、padding、border 和 margin）称为简写属性。这是因为简写属性在一行中设置了多个值。

¥Some properties like font, background, padding, border, and margin are called shorthand properties. This is because shorthand properties set several values in a single line.

例如，这一行代码：

¥For example, this one line of code:

css

/* 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;

相当于这四行代码：

¥is equivalent to these four lines of code:

css

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

这一行：

¥This one line:

css

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

相当于这五行：

¥is equivalent to these five lines:

css

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

在本课程的后面，你将遇到许多其他简写属性的示例。MDN 的 CSS 参考是一个很好的资源，可以获取有关任何简写属性的更多信息。

¥Later in the course, you will encounter many other examples of shorthand properties. MDN's CSS reference is a good resource for more information about any shorthand property.

尝试在你自己的 CSS 练习中使用声明（上面），以更加熟悉它的工作原理。你还可以尝试不同的值。

¥Try using the declarations (above) in your own CSS exercise to become more familiar with how it works. You can also experiment with different values.

警告：使用 CSS 速记法的一个不太明显的方面是如何重置省略的值。CSS 速记中未指定的值将恢复为其初始值。这意味着 CSS 简写中的省略可能会覆盖之前设置的值。

¥Warning: One less obvious aspect of using CSS shorthand is how omitted values reset. A value not specified in CSS shorthand reverts to its initial value. This means an omission in CSS shorthand can override previously set values.

¥Comments

与任何编码工作一样，最佳实践是与 CSS 一起编写注释。这有助于你在稍后回来进行修复或增强时记住代码的工作原理。它还可以帮助其他人理解代码。

¥As with any coding work, it is best practice to write comments along with CSS. This helps you to remember how the code works as you come back later for fixes or enhancement. It also helps others understand the code.

CSS 注释以 /* 开始，以 */ 结束。在下面的示例中，注释标记了不同代码部分的开始。当代码库变大时，这有助于导航。有了这种注释，在代码编辑器中搜索注释就成为有效查找代码段的一种方法。

¥CSS comments begin with /* and end with */. In the example below, comments mark the start of distinct sections of code. This helps to navigate the codebase as it gets larger. With this kind of commenting in place, searching for comments in your code editor becomes a way to efficiently find a section of code.

css

/* Handle basic element styling */
/* ---------------------------- */
body {
  font:
    1em/150% Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-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 的规则被 "注释掉" 代码禁用。

¥"Commenting out" code is also useful for temporarily disabling sections of code for testing. In the example below, the rules for .special are disabled by "commenting out" the code.

css

/*.special {
  color: red;
}*/

p {
  color: blue;
}

尝试在 CSS 中添加注释。

¥Try adding comments in your CSS.

空白区域

¥White space

空白意味着实际的空格、制表符和换行符。正如浏览器会忽略 HTML 中的空白一样，浏览器也会忽略 CSS 内的空白。空白的价值在于它可以提高可读性。

¥White space means actual spaces, tabs and new lines. Just as browsers ignore white space in HTML, browsers ignore white space inside CSS. The value of white space is how it can improve readability.

在下面的示例中，每个声明（以及规则开始/结束）都有自己的行。这可以说是编写 CSS 的好方法。它使维护和理解 CSS 变得更加容易。

¥In the example below, each declaration (and rule start/end) has its own line. This is arguably a good way to write CSS. It makes it easier to maintain and understand CSS.

css

body {
  font:
    1em/150% Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

下一个示例显示了更压缩格式的等效 CSS。尽管这两个示例的工作原理相同，但下面的示例更难以阅读。

¥The next example shows the equivalent CSS in a more compressed format. Although the two examples work the same, the one below is more difficult to read.

css

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body { font-size: 130%;}}

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; border-radius: 3px;}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

对于你自己的项目，你将根据个人喜好格式化代码。对于团队项目，你可能会发现团队或项目有自己的风格指南。

¥For your own projects, you will format your code according to personal preference. For team projects, you may find that a team or project has its own style guide.

警告：尽管空格在 CSS 声明中分隔值，但属性名称永远不会有空格。

¥Warning: Though white space separates values in CSS declarations, property names never have white space.

例如，这些声明是有效的 CSS：

¥For example, these declarations are valid CSS:

css

margin: 0 auto;
padding-left: 10px;

但这些声明是无效的：

¥But these declarations are invalid:

css

margin: 0auto;
padding- left: 10px;

你看到间距错误了吗？首先，0auto 未被识别为 margin 属性的有效值。条目 0auto 意味着两个单独的值：0 和 auto。其次，浏览器无法将 padding- 识别为有效属性。正确的属性名称 (padding-left) 由错误的空格分隔。

¥Do you see the spacing errors? First, 0auto is not recognized as a valid value for the margin property. The entry 0auto is meant to be two separate values: 0 and auto. Second, the browser does not recognize padding- as a valid property. The correct property name (padding-left) is separated by an errant space.

你应该始终确保将不同的值彼此至少用一个空格分隔开。将属性名称和属性值作为单个完整字符串保存在一起。

¥You should always make sure to separate distinct values from one another by at least one space. Keep property names and property values together as single unbroken strings.

要了解间距如何破坏 CSS，请尝试在测试 CSS 中使用间距。

¥To find out how spacing can break CSS, try playing with spacing inside your test CSS.

概括

¥Summary

至此，你应该对 CSS 的结构有了更好的了解。了解浏览器如何使用 HTML 和 CSS 来显示网页也很有用。下一篇文章 CSS 的工作原理将解释该过程。

¥At this point, you should have a better idea about how CSS is structured. It's also useful to understand how the browser uses HTML and CSS to display a webpage. The next article, How CSS works, explains the process.