《CSS权威指南4》- Chapter2.1 - 基本样式规则

选择器

CSS 的主要优点之一就是它很容易将一组样式应用于同一类型的所有元素。还无动于衷？请考虑这种情况：只通过编辑一行 CSS，就可以改变所有标题的颜色。不喜欢现在用的蓝色？改变一行代码，它们可以时紫色、黄色、栗色或者任何你想要的其他颜色。这能让作为设计者的你，专注于设计，而非枯燥繁重的工作。下次开会时，如果有人希望标题带有绿色的阴影，只要编辑样式，然后点击重新加载，只需几秒中就可完成，每个人都可以看到结果了。
CSS 并不能解决所有问题。例如，你不能改变图片的颜色，至少现在还不能。但是 CSS 能更容易做些全局性的修改。所有先从选择器和结构开始介绍。

基本样式规则

如上所述，CSS 是一个核心特性是能将某些规则应用于文档中的整个的一组元素类型。例如，假设你想要让所有的h2元素的文本显示为灰色，如果使用老式的 HTML，必须在所有h2元素中插入<font color="gray">...</font>标签。使用style属性，这也是一种不好的做法，需要在所有的h2元素中包含style="color: gray;",如下所示：

<h2><font color="gray">h2  text</font></h2>
<h2 style="color: gray;">h2 text</h2>

如果文档中包含大量的h2元素，这将是一个冗长繁琐的过程。更糟糕的是，如果你后来又决定要让所有h2元素都是绿色而不是灰色，就必须重新再来一次，手动地设置标签。
CSS 则可以创建易于更改、编辑和应用于你定义的所有文本元素的规则。例如，编写以下规则一次，就能让 所有h2元素变成灰色 ：

h2 {
  color: gray;
}

如果想将所有h2文本变成其他颜色，如 银色，只需要改变 color 属性的值：

h2 {
  color: silver;
}

元素选择器

元素选择器通常是 HTML 元素，但也不完全如此。例如，如果 CSS 文件中包含 XML 文档的样式，选择器可能如下所示 ：

quote {
  color: gray;
}
bib {
  color: red;
}
booktitile {
  color: purple;
}
myElement {
  color: red;
}

换句话说，文档的元素充当了最基本的选择器。在 XML 中，选择器可以是任意的，因为 XML 允许创建新的标记语言，它可以包含任何元素名。另一方面，如是设置 HMTL 文档的样式，选择器 通常是众多 HTML 元素的一个。如p, h3, em, a，甚至可以是html本身。例如：

html {
  color: black;
}
h1 {
  color: gray;
}
h2 {
  color: silver;
}

一旦全局地将样式直接向应用于元素，就可以将这些样式从一个元素切换到另一个元素。假你决定段落文本设置成灰色，而不是h1元素，没问题 ，只需把h1选择器改成p：

html {
  color: black;
}
p {
  color: gray;
}
h2 {
  color: silver;
}

声明和关键字

声明块包含一个或多个声明。一个声明格式通常是一个属性后跟冒号，然后是值跟分号(property:value;)。冒号和分号后可以跟一个或多个空格。在几乎所以情况下，值可以是单个关键字，也可以是其属性允许的一个或多个关键字的空格分隔列表。如果在声明中使用的错误的属性或值，则整个规则将被忽略。因此，以下两个声明将失败：

brain-size: 2cm; /* 未知的属性-“brain-size” */
color: ultrviolet;/* 未知的值-“ultraviolet” */

在可以使用多个关键字表示属性值的情况下，关键字通常由空格分隔，由些情况下需要斜杠（/）或逗号（,）。并不是每个属性的值都可以接受多个关键字，但是有许多可以，比如font属性。假如想要为段落文本定义一个中等大小的 Helvetica 字体,样式规则如下:

p {
    font: medium Helvetica;
}

注意medium和Helvetica之间有空格，它们每一个都是关键字，第一个是字体大小，第二个是实际的字体名称。空格使得用户代理（浏览器）区分这两个关键字并正确的使用它们。冒号表示该声明已经结束了。
这些被空格分隔的单词被成为关键字，它们合在一起构成了所讨论的属性的值。例如，考虑以下虚构的规则：

rainbow: red orange yellow green blue indigo violet;

CSS 中并不存在rainbow这样的属性，但这个例子对于说明目有关概念很有用。 rainbow 的值是red orange yellow green blue indigo violet, 七个关键字加起来就是一个独特的值。我们可以重新定义 rainbow 的值：

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

现在我们 rainbow 有了一个新的值，它由九个关键字组成而不是七个了，尽管这两个值看起来很相似，但是它们是独特的、不同的，就像 0 和 1 一样。这似乎是一个抽象的观点，但它对于理解特性的一些微妙影响和继承性（cascade）是至关重要的。

正如我们所看到的，CSS 关键字通常由空格分隔。在 CSS2.1 中，有一个例外，在 CSS 字体（font）属性，只有一个地方可以用正斜杠（/）来分隔两个特定的关键字。

h2 {
    font: large/150% sans-serif;   /* font-ize and line-height */
}

正斜杠分隔了设置元素字体大小（font-size）和行高（line-height）的关键字。这是字体声明中唯一允许出现正斜杠的地方，其他所有允许用于字体的关键字都用空格分隔。
自此以后，斜杠进入了许多其他属性的值中，包括但不一定限于以下内容：

• background bg-color bg-image positon/bg-size bg-repeat bg-origin bg-clip bg-attachment
• border-radius 1-4 length|% / 1-4 length|% |intial|inherit;
• grid
• grid-area grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
• grid-column grid-column-start / grid-column-end;
• grad-row grid-row-start / grid-row-end;
• grid-template
• mask-border

还有一些用逗号分隔的关键字。在声明多个值时，例如多背景图像（background image），过渡属性（transition）、阴影（shadow）。此外，函数中的参数，例如线性梯度（linear gradient），变换（transform）是用逗号风格的。如下例所示：

.box {
    box-shadow: inset -1px -1px white,
                3px 3px 2px rgba(0,0,0,0.2);  /*多层次的阴影效果 */
    background-image: url(image.png),
                      linear-gradient(180deg,#fff,0%,#000,100%);
    transform: translate(100px, 200px);
}
a:hover {
    transition: color, background-color 200ms ease-in 50ms;
}

这些是简单声明的基础，但它们可能变得更加复杂。下一节向您展示 CSS 的强大功能。