什么是 CSS？

¥What is CSS for?

正如我们之前提到的，CSS 是一种用于指定如何向用户呈现文档的语言 - 它们的样式、布局等。

¥As we have mentioned before, CSS is a language for specifying how documents are presented to users — how they are styled, laid out, etc.

文档通常是使用标记语言构建的文本文件 - HTML 是最常见的标记语言，但你也可能会遇到其他标记语言，例如 SVG 或 XML。

¥A document is usually a text file structured using a markup language — HTML is the most common markup language, but you may also come across other markup languages such as SVG or XML.

向用户呈现文档意味着将其转换为受众可用的形式。Browsers 与 Firefox、Chrome 或 Edge 一样，旨在以可视方式呈现文档，例如在计算机屏幕、投影仪或打印机上。

¥Presenting a document to a user means converting it into a form usable by your audience. Browsers, like Firefox, Chrome, or Edge, are designed to present documents visually, for example, on a computer screen, projector, or printer.

注意：浏览器有时被称为 user agent，它基本上意味着代表计算机系统内的人的计算机程序。浏览器是我们在谈论 CSS 时想到的主要用户代理类型，但它们并不是唯一的类型。还有其他可用的用户代理，例如将 HTML 和 CSS 文档转换为要打印的 PDF 的用户代理。

¥Note: A browser is sometimes called a user agent, which basically means a computer program that represents a person inside a computer system. Browsers are the main type of user agents we think of when talking about CSS, however, they are not the only ones. There are other user agents available, such as those that convert HTML and CSS documents into PDFs to be printed.

CSS 可用于非常基本的文档文本样式 - 例如，用于更改标题和链接的 color 和 size。它可用于创建布局 - 例如，带有主要内容区域和相关信息侧边栏的 将单列文本转换为布局。它甚至可以用于 animation 等效果。查看本段中的链接以获取具体示例。

¥CSS can be used for very basic document text styling — for example, for changing the color and size of headings and links. It can be used to create a layout — for example, turning a single column of text into a layout with a main content area and a sidebar for related information. It can even be used for effects such as animation. Have a look at the links in this paragraph for specific examples.

¥CSS syntax

CSS 是一种基于规则的语言 - 你可以通过指定应应用于网页上的特定元素或元素组的样式组来定义规则。

¥CSS is a rule-based language — you define the rules by specifying groups of styles that should be applied to particular elements or groups of elements on your web page.

例如，你可以决定将页面上的主标题显示为大红色文本。以下代码显示了一个非常简单的 CSS 规则，可以实现上述样式：

¥For example, you can decide to have the main heading on your page to be shown as large red text. The following code shows a very simple CSS rule that would achieve the styling described above:

h1 {
  color: red;
  font-size: 5em;
}

• 在上面的示例中，CSS 规则以 selector 开头。这将选择我们要设置样式的 HTML 元素。在本例中，我们设置一级标题 (h1) 的样式。
• 然后我们就有了一组大括号 { }。
• 大括号内是一个或多个声明，采用属性和值对的形式。我们在冒号之前指定属性（上例中的 color），并在冒号之后指定属性的值（本例中为 red）。
• 此示例包含两个声明，一个用于 color，另一个用于 font-size。每对指定我们选择的元素的属性（在本例中为 h1），然后指定我们想要为该属性提供的值。

CSS properties 有不同的允许值，具体取决于指定的属性。在我们的示例中，我们有 color 属性，它可以采用各种 颜色值。我们还有 font-size 属性。该属性可以取各种 尺寸单位 作为值。

¥CSS properties have different allowable values, depending on which property is being specified. In our example, we have the color property, which can take various color values. We also have the font-size property. This property can take various size units as a value.

CSS 样式表将包含许多这样的规则，一个接一个地编写。

¥A CSS stylesheet will contain many such rules, written one after the other.

h1 {
  color: red;
  font-size: 5em;
}

p {
  color: black;
}

你会发现你可以快速了解一些值，而其他值则需要查找。当你忘记或想知道还有什么可以用作值时，MDN 上的各个属性页面为你提供了一种快速查找属性及其值的方法。

¥You will find that you quickly learn some values, whereas others you will need to look up. The individual property pages on MDN give you a quick way to look up properties and their values when you forget or when you want to know what else you can use as a value.

注意：你可以找到 MDN CSS 参考 上列出的所有 CSS 属性页（以及其他 CSS 功能）的链接。或者，每当你需要查找有关 CSS 功能的更多信息时，你都应该习惯在你最喜欢的搜索引擎中搜索 "mdn css-功能名称"。例如，尝试搜索 "mdn 颜色" 和 "mdn 字体大小"！

¥Note: You can find links to all the CSS property pages (along with other CSS features) listed on the MDN CSS reference. Alternatively, you should get used to searching for "mdn css-feature-name" in your favorite search engine whenever you need to find out more information about a CSS feature. For example, try searching for "mdn color" and "mdn font-size"!

¥CSS modules

由于你可以使用 CSS 设计很多内容，因此该语言被分解为模块。当你探索 MDN 时，你将看到对这些模块的引用。许多文档页面都是围绕特定模块组织的。例如，你可以查看 MDN 对 背景和边框 模块的引用，以了解其用途以及它包含的属性和功能。在该模块中，你还将找到定义技术的规范的链接（另请参阅下面的部分）。

¥As there are so many things that you could style using CSS, the language is broken down into modules. You'll see reference to these modules as you explore MDN. Many of the documentation pages are organized around a particular module. For example, you could take a look at the MDN reference to the Backgrounds and Borders module to find out what its purpose is and the properties and features it contains. In that module, you will also find a link to Specifications that defines the technology (also see the section below).

在这个阶段，你不需要过多担心 CSS 是如何构造的；但是，例如，如果你知道某个属性可能会在其他类似事物中找到，因此可能处于同一规范中，则它可以使查找信息变得更加容易。

¥At this stage, you don't need to worry too much about how CSS is structured; however, it can make it easier to find information if, for example, you are aware that a certain property is likely to be found among other similar things, and is therefore, probably in the same specification.

对于一个具体的示例，让我们回到背景和边框模块 - 你可能认为在此模块中定义 background-color 和 border-color 属性具有逻辑意义。你是对的。

¥For a specific example, let's go back to the Backgrounds and Borders module — you might think that it makes logical sense for the background-color and border-color properties to be defined in this module. And you'd be right.

¥CSS specifications

所有 Web 标准技术（HTML、CSS、JavaScript 等）都在称为规范（或 "specs"）的巨型文档中定义，这些文档由标准组织（例如 W3C、WHATWG、ECMA 或 Khronos）发布，并精确定义了这些技术如何 技术应该发挥作用。

¥All web standards technologies (HTML, CSS, JavaScript, etc.) are defined in giant documents called specifications (or "specs"), which are published by standards organizations (such as the W3C, WHATWG, ECMA, or Khronos) and define precisely how those technologies are supposed to behave.

CSS 也不例外 - 它是由 W3C 内一个名为 CSS 工作组 的小组开发的。该小组由浏览器供应商和其他对 CSS 感兴趣的公司的代表组成。还有其他人，称为特邀专家，充当独立的声音；他们与成员组织没有联系。

¥CSS is no different — it is developed by a group within the W3C called the CSS Working Group. This group is made of representatives of browser vendors and other companies who have an interest in CSS. There are also other people, known as invited experts, who act as independent voices; they are not linked to a member organization.

新的 CSS 功能是由 CSS 工作组开发或指定的 - 有时是因为特定浏览器对拥有某些功能感兴趣，有时是因为 Web 设计者和开发者需要某种功能，有时是因为工作组本身已经确定了一项要求。CSS 不断发展，新功能不断涌现。然而，CSS 的一个关键点是，每个人都非常努力地工作，永远不会以破坏旧网站的方式进行更改。一个建于 2000 年的网站，使用当时有限的 CSS，今天应该仍然可以在浏览器中使用！

¥New CSS features are developed or specified by the CSS Working Group — sometimes because a particular browser is interested in having some capability, other times because web designers and developers are asking for a feature, and sometimes because the Working Group itself has identified a requirement. CSS is constantly developing, with new features becoming available. However, a key thing about CSS is that everyone works very hard to never change things in a way that would break old websites. A website built in 2000, using the limited CSS available then, should still be usable in a browser today!

作为 CSS 的新手，你可能会发现 CSS 规范让人不知所措 - 它们旨在供工程师用来实现对用户代理中功能的支持，而不是供 Web 开发者阅读以理解 CSS。许多经验丰富的开发者更愿意参考 MDN 文档或其他教程。尽管如此，了解这些规范的存在并了解你正在使用的 CSS、浏览器支持（见下文）和规范之间的关系是值得的。

¥As a newcomer to CSS, it is likely that you will find the CSS specs overwhelming — they are intended for engineers to use to implement support for the features in user agents, not for web developers to read to understand CSS. Many experienced developers would much rather refer to MDN documentation or other tutorials. Nevertheless, it is worth knowing that these specs exist and understanding the relationship between the CSS you are using, the browser support (see below), and the specs.

¥Browser support information

当一个 CSS 特性被指定后，只有一个或多个浏览器实现了该特性，它才对我们开发网页有用。这意味着代码已被编写为将 CSS 文件中的指令转换为可以输出到屏幕的内容。我们将在第 CSS 的工作原理 课中详细介绍这个过程。所有浏览器同时实现一项功能的情况并不常见，因此通常会存在间隙，即你可以在某些浏览器中使用 CSS 的某些部分，而在其他浏览器中则不能。因此，能够检查实现状态非常有用。

¥After a CSS feature has been specified, then it is only useful for us in developing web pages if one or more browsers have implemented the feature. This means that the code has been written to turn the instruction in our CSS file into something that can be output to the screen. We'll look at this process more in the lesson How CSS works. It is unusual for all browsers to implement a feature at the same time, and so there is usually a gap where you can use some part of CSS in some browsers and not in others. For this reason, being able to check implementation status is useful.

浏览器支持状态显示在每个 MDN CSS 属性页面上名为 "浏览器兼容性" 的表中。请查阅该表中的信息，检查该属性是否可以在你的网站上使用。有关示例，请参见 CSS font-family 属性的浏览器兼容性表。

¥The browser support status is shown on every MDN CSS property page in a table named "Browser compatibility". Consult the information in that table to check if the property can be used on your website. For an example, see the browser compatibility table for the CSS font-family property.

根据你的要求，你可以使用浏览器兼容性表来检查各种浏览器如何支持此属性，或者检查你的特定浏览器和你拥有的版本是否支持该属性，或者是否有任何你应该注意的注意事项 你正在使用的浏览器和版本。

¥Based on your requirements, you can use the browser compatibility table to check how this property is supported across various browsers, or check if your specific browser and the version you have support the property, or if there are any caveats you should be aware of for the browser and version you are using.

¥Summary

你已完成文章的结尾！现在你已经对 CSS 是什么有了一些了解，让我们继续学习 CSS 入门，你可以开始自己编写一些 CSS。

¥You made it to the end of the article! Now that you have some understanding of what CSS is, let's move on to Getting started with CSS, where you can start to write some CSS yourself.