02 Stylesheet Contents

CSS网页布局权威指南02 样式表内容

Inside a stylesheet, you’ll find a number of rules that look a little something like this:

在样式表中，你会发现许多规则看起来有点像这样:

h1 {color: maroon;}
body {background: yellow;}

Styles such as these make up the bulk of any stylesheet—simple or complex, short or long. But which parts are which, and what do they represent?

诸如此类的样式构成了样式表的主体——简单的或复杂的，短的或长的。但是哪一部分是哪一部分，它们代表什么?

Rule Structure

规则的结构

To illustrate the concept of rules in more detail, let’s break down the structure.

为了更详细地说明规则的概念，让我们分解结构。

Each rule has two fundamental parts: the selector and the declaration block. The declaration block is composed of one or more declarations, and each declaration is a pairing of a property and a value. Every stylesheet is made up of a series of these rules. Figure 1-1 shows the parts of a rule.

每条规则都有两个基本部分:选择器和声明块。声明块由一个或多个声明组成，每个声明都是属性和值的一对。每个样式表都由一系列这样的规则组成。规则的组成如图1-1所示。

The selector, shown on the left side of the rule, defines which piece of the document will be selected for styling. In Figure 1-1,

(heading level 1) elements are selected. If the selector were p , then all

(paragraph) elements would be selected.

显示在规则左侧的选择器定义将选择文档的哪一部分进行样式化。在图1-1中，选择

(标题级别1)元素。如果选择器是p，那么所有

(段落)元素都将被选中。

The right side of the rule contains the declaration block, which is made up of one or more declarations. Each declaration is a combination of a CSS property and a value of that property. In Figure 1-1, the declaration block contains two declarations. The first states that this rule will cause parts of the document to have a color of red , and the second states that part of the document will have a background of yellow . So, all of the

elements in the document (defined by the selector) will be styled in red text with a yellow background.

规则的右侧包含声明块，它由一个或多个声明组成。每个声明都是CSS属性和该属性值的组合。在图1-1中，声明块包含两个声明。第一个声明该规则将导致文档的某些部分具有红色，第二个声明文档的某些部分将具有黄色背景。因此，文档中的所有

元素(由选择器定义)都将被设置为红色文本和黄色背景。

Vendor Prefixing

供应商加前缀

Sometimes you’ll see pieces of CSS with hyphens and labels in front of them, like this: -oborder-image . These vendor prefixes were a way for browser vendors to mark properties, values, or other bits of CSS as being experimental or proprietary (or both). As of early 2023, a few vendor prefixes are in the wild, with the most common shown in Table 1-1.

有时你会看到CSS的前面有连字符和标签，像这样:- border-image。这些供应商前缀是浏览器供应商将属性、值或其他CSS标记为实验性或专有(或两者兼而有之)的一种方式。截至2023年初，一些供应商的前缀还在使用，最常见的如表1-1所示。

Prefix Vendor
-epub- International Digital Publishing Forum ePub format
-moz- Gecko-based browsers (e.g., Mozilla Firefox)
-ms- Microsoft Internet Explorer
-o- Opera-based browsers
-webkit- WebKit-based browsers (e.g., Apple Safari and Google Chrome)

Prefix Vendor
-epub- 国际数字出版论坛ePub格式
-moz- 基于gecko的浏览器(例如，Mozilla Firefox)
-ms- Microsoft Internet Explorer
-o- 欧鹏浏览器
-webkit- 基于webkit的浏览器(例如Apple Safari和Google Chrome)

As Table 1-1 indicates, the generally accepted format of a vendor prefix is a hyphen, a label, and a hyphen, although a few prefixes erroneously omit the first hyphen.

如表1-1所示，通常接受的供应商前缀格式是一个连字符、一个标签和一个连字符，尽管少数前缀错误地省略了第一个连字符。

The uses and abuses of vendor prefixes are long, tortuous, and beyond the scope of this book. Suffice to say that they started out as a way for vendors to test out new features, thus helping speed interoperability without worrying about being locked into legacy behaviors that were incompatible with other browsers. This avoided a whole class of problems that nearly strangled CSS in its infancy. Unfortunately, prefixed properties were then publicly deployed by web authors and ended up causing a whole new class of problems.

供应商前缀的使用和滥用是冗长而曲折的，超出了本书的范围。可以说，它们最初是作为供应商测试新功能的一种方式，从而帮助加快互操作性，而不必担心被锁定在与其他浏览器不兼容的遗留行为中。这避免了几乎扼杀CSS婴儿期的一系列问题。不幸的是，带前缀的属性随后被web作者公开部署，最终导致了一系列全新的问题。

As of early 2023, vendor-prefixed CSS features are nearly nonexistent, with old prefixed properties and values being slowly but steadily removed from browser implementations. You’ll quite likely never write prefixed CSS, but you may encounter it in the wild or inherit it in a legacy codebase. Here’s an example:

到2023年初，供应商前缀的CSS特性几乎不存在，旧的前缀属性和值正在缓慢但稳步地从浏览器实现中删除。您很可能永远不会编写带前缀的CSS，但您可能会在野外遇到它，或者在遗留代码库中继承它。这里有一个例子:

-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;

That’s saying the same thing four times: once each for the WebKit, Gecko (Firefox), and Opera browser lines, and then finally the CSS-standard way. Again, this is no longer necessary. We’re including it here only to give you an idea of what it might look like, should you come across this in the future.

同样的事情说了四遍:WebKit、Gecko (Firefox)和Opera浏览器各一次，最后是css标准方式。同样，这不再是必要的。我们把它包括在这里只是为了让你知道它可能是什么样子，如果你将来遇到它。

Whitespace Handling

空白处理

CSS is basically insensitive to whitespace between rules, and largely insensitive to whitespace within rules, although a few exceptions exist.

CSS基本上对规则之间的空白不敏感，基本上对规则内的空白不敏感，尽管存在一些例外。

In general, CSS treats whitespace just like HTML does: any sequence of whitespace characters is collapsed to a single space for parsing purposes. Thus, you can format this hypotheticalrainbow rule in the following ways,

一般来说，CSS对待空白的方式和HTML一样:任何空白字符序列都被压缩成一个空格，以便进行解析。因此，你可以用以下方式格式化这个假想的rainbow规则:

rainbow: infrared red orange yellow green blue indigo violet ultraviolet;

rainbow:
infrared red orange yellow green blue indigo violet ultraviolet;

rainbow:
infrared
red
orange
yellow
green
blue
indigo
violet
ultraviolet
;

as well as any other separation patterns you can think up. The only restriction is that the separating characters be whitespace: an empty space, a tab, or a newline, alone or in combination, as many as you like.

以及其他你能想到的分离模式。唯一的限制是分隔字符是空白:空格、制表符或换行符，可以单独使用，也可以组合使用，随你喜欢。

Similarly, you can format series of rules with whitespace in any fashion you like. These are just five examples out of an effectively infinite number of possibilities:

类似地，您可以以任何喜欢的方式用空格格式化一系列规则。这些只是无数可能性中的五个例子:

html{color:black;}
body {background: white;}
p {
    color: gray;}
h2 {
    color : silver ;
}
ol
{
    color
    :
        silver
        ;
}

As you can see from the first rule, whitespace can be largely omitted. Indeed, this is usually the case with minified CSS, which is CSS that’s had every last possible bit of extraneous whitespace removed, usually by an automated server-side script of some sort. The rules after the first two use progressively more extravagant amounts of whitespace until, in the last rule, pretty much everything that can be separated onto its own line has been.

正如您从第一条规则中看到的，空格在很大程度上可以省略。实际上，这种情况通常出现在小型化CSS中，小型化CSS删除了所有可能的无关空白，通常是通过某种类型的自动化服务器端脚本。在前两个规则之后的规则使用越来越多的空白，直到最后一个规则中，几乎所有可以单独分隔到一行的内容都被分隔开了。

All of these approaches are valid, so you should pick the formatting that makes the most sense— that is, is easiest to read—in your eyes, and stick with it.

所有这些方法都是有效的，所以您应该选择最有意义的格式——也就是说，最容易在您的眼睛中阅读，并坚持使用它。

CSS Comments

CSS的注释

CSS does allow for comments. These are very similar to C/C++ comments in that they are surrounded by / * and * /:

CSS允许注释。这些注释与C/ c++注释非常相似，它们被/ *和* /包围:

/* This is a CSS comment */

Comments can span multiple lines, just as in C++:

注释可以跨越多行，就像c++一样:

/* This is a CSS comment, and it
can be several lines long without
any problem whatsoever. */

It’s important to remember that CSS comments cannot be nested. So, for example, this would not be correct:

重要的是要记住，CSS注释不能嵌套。所以，例如，这是不正确的:

/* This is a comment, in which we find
another comment, which is WRONG
/* Another comment */
and back to the first comment, which is not a comment.*/

One way to create “nested” comments accidentally is to temporarily comment out a large block of a stylesheet that already contains a comment. Since CSS doesn’t permit nested comments, the “outside” comment will end where the “inside” comment ends.

意外创建“嵌套”注释的一种方法是临时注释掉样式表中已经包含注释的大块内容。由于CSS不允许嵌套注释，所以“外部”注释将在“内部”注释结束的地方结束。

Unfortunately, there is no “rest of the line” comment pattern such as // or # (the latter of which is reserved for ID selectors anyway). The only comment pattern in CSS is / * * /. Therefore, if you wish to place comments on the same line as markup, you need to be careful about how you place them. For example, this is the correct way to do it:

不幸的是，没有像//或#这样的“其余行”注释模式(后者是为ID选择器保留的)。CSS中唯一的注释模式是/ * * /。因此，如果希望将注释放置在与标记相同的行上，则需要小心放置注释的方式。例如，这是正确的做法:

h1 {color: gray;} /* This CSS comment is several lines */
h2 {color: silver;} /* long, but since it is alongside */
p {color: white;} /* actual styles, each line needs to */
pre {color: gray;} /* be wrapped in comment markers. */

Given this example, if each line isn’t marked off, most of the stylesheet will become part of the comment and thus will not work:

在这个例子中，如果每一行都没有被标记，大多数样式表将成为注释的一部分，因此将无法工作:

h1 {color: gray;} /* This CSS comment is several lines
h2 {color: silver;} long, but since it is not wrapped
p {color: white;} in comment markers, the last three
pre {color: gray;} styles are part of the comment. */

In this example, only the first rule ( h1 {color: gray;} ) will be applied to the document. The rest of the rules, as part of the comment, are ignored by the browser’s rendering engine.

在本例中，只有第一条规则(h1 {color: gray;})将应用于文档。其余的规则，作为注释的一部分，被浏览器的呈现引擎忽略。

CSS comments are treated by the CSS parser as if they do not exist at all, and so do not count as whitespace for parsing purposes. This means you can put them into the middle of rules—even right inside declarations!

CSS注释被CSS解析器当作根本不存在的注释来处理，因此在解析时不会将其视为空白。这意味着您可以将它们放在规则中间——甚至就在声明中!

Markup

标记

There is no markup in stylesheets. This might seem obvious, but you’d be surprised. The one exception is HTML comment markup, which is permitted inside

样式表中没有标记。这似乎是显而易见的，但你会感到惊讶。唯一的例外是HTML注释标记，由于历史原因可以在

<style><!--
h1 {color: maroon;}
body {background: yellow;}
--></style>

That’s it, and even that isn’t recommended anymore; the browsers that needed it have faded into near oblivion.

就是这样，即使这样也不再被推荐;需要它的浏览器已经几乎被遗忘了。

Speaking of markup, it’s time to take a very slight detour to talk about the elements that our CSS will be used to style, and how those can be affected by CSS in the most fundamental ways.

说到标记，现在是时候稍微绕一下弯路来讨论CSS将用于设置样式的元素，以及CSS如何以最基本的方式影响这些元素。