CSS 语法

在本文章中

认识些新名词
语法之外：使 CSS 更具可读性
下一步做什么

接下来，我们将更详细的深入CSS语法，学习属性（peroperties）和属性值（value）如何组合成一个声明（declarations）, 多个声明构成的声明块（declaration blocks），以及声明块和选择器（selector）构成完整的 CSS 规则（CSS rules）。同时，我们也将介绍一些其他的CSS语法特征，例如注释和空白等，以令我们的介绍更加完整。

前提：	基本的计算机使用能力，已安装基本的软件，文件处理的基本知识，以及 HTML 基础（学习 HTML入门），以及CSS 如何工作的概念。
目标：	详细学习基本的 CSS 语法结构

注意：CSS 是一种声明式语言，这令其语法相当简单直观且易于理解。此外，CSS还有着相当不错的错误修复系统，这一特性允许你犯一些错误但并不会造成什么异常影响 —— 比如，有可能你的某些声明浏览器并不理解，这时浏览器会直接忽略掉这些内容并继续执行渲染。当然这一特性也可能导致一些问题，比如一些异常情况出现的时候，可能在定位问题原因上造成一些障碍。随着阅读的深入，这些优势和缺点都将逐渐清晰。

认识些新名词

从最基本的层次来看，CSS是由两块内容组合而成的：

属性（Properties）：一些人类可理解的标识符，这些标识符指出你想修改哪一些样式特征（stylistic features）（例如：font, width, background color) 。
属性值（Values）：每个指定的属性都需要给定一个值，这个值表示你想把那些样式特征修改成什么样（例如，你想把字体，宽度或背景颜色改成...）。

一个属性和其对应属性值一起组成的属性/值对被称作一个CSS声明（CSS declaration). CSS声明会被放置在一个CSS声明块（CSS Declaration Blocks）中。最终，一个CSS声明块与选择器（selectors）相结合形成一个CSS规则集（CSS Rulesets 又称 CSS Rules)。

在深入那些原理和书面解释之前，让我们先看一个具体的例子（和我们在上篇文章中看的非常相似）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
    <ul>
      <li>This is</li>
      <li>a list</li>
    </ul>
  </body>

以及对应的 CSS 文件：

h1 {
  colour: blue;
  background-color: yellow;
  border: 1px solid black;
}
p {
  color: red;
}
p, li {
  text-decoration: underline;
}

两者的结合得到了如下的效果:

让我们来看看语法的更多细节.

CSS 声明（CSS declarations）

给 CSS 属性设置特定的值是 CSS 语言的核心功能。CSS 引擎会通过计算，将对应的 CSS 声明应用到页面的每一个元素上，从而使得元素们以适当的方式布局，并展示出适当的样式。特别需要记住的是，CSS 的属性和属性值都是区分大小写的。属性和属性值之间，用英文半角冒号 (:) 隔离，如下图所示。

CSS 有超过300 个不同的属性以及几乎无穷无尽的属性值。属性和属性值不能任意组合：每个属性都有一个已经定义好的可用属性值范围。

重要: 如果使用了未知属性，或者给属性赋予了无效值，该声明会被视为无效，浏览器的 CSS 引擎会完全忽略它。

重要: 在 CSS（和其他网络标准）中，使用美式拼写作为单词的标准写法。例如，颜色（见于上述代码所见）应始终拼写为 color。写成 colour 会无法正常工作。

主动学习: 找出声明

在上面的例子里, 有五个独立的CSS声明。你能找出其中无效的声明，并找出它无效的原因吗？

CSS 声明块（CSS declaration blocks）

声明按 块（blocks）分组，每一组声明都用一对大括号包裹，用 ({) 开始，用 (}) 结束。

声明块 里的每一个声明必须用半角分号（;）分隔，否则代码会不生效（至少不会按预期结果生效）。声明块里的最后一个声明结束的地方，不需要加分号，但是最后加分号是个好习惯，因为可以防止在后续增加声明时忘记加分号。

注意：块有时候是可以嵌套的。这种情况下，每一对括号必须逻辑上嵌套，跟嵌套 HTML 元素的标签嵌套方式相同。最常见的例子是 @-rules，这是一种用 @ 标识开头的块，例如 @media, @font-face等（详见下述的 CSS 语句）。

注意：声明块的内容允许为空 —— 这完全有效。

主动学习：声明块在哪？

在上述的例子里，你能找到三个独立的 CSS 声明块吗？

CSS 选择器和规则（CSS selectors and rules）

我们的拼图还少了一块——我们需要讨论一下如何告知我们的声明块：哪些元素是它们需要应用的。通过在每个声明块前加上选择器（selector）来完成这一动作，选择器是一种模式（pattern），它能在页面上匹配一些元素。这使相关的声明将仅被应用到被选择的元素上。. 选择器加上声明块被称为规则集（ruleset），通常简称规则（rule）。

选择器可以很复杂 —— 你可以制作一个匹配多种元素的规则，这是通过把多个选择器囊括成用逗号分隔的选择器（一组,）来达成；选择器还可以被“链”在一起，例如我要选择所有 class 是 "blah" 的元素, 但是当且仅当它在 <article> 元素里、并且仅当鼠标指针悬停在这个元素上的时候。 别担心：随着你在CSS上的经验变的更丰富，事情会变的更清晰，并且我们将会在下一篇文章选择器里，详细地解释选择器。

一个元素可以被多个选择器所匹配，因此，一个给定的属性可能被多个规则设置多次。 CSS 定义了哪个规则比其它规则更具优先级，则更具优先级的规则必定被应用：这被称为层叠算法（cascade algorithm），关于层叠算法的更多内容和运作原理见《层叠和继承》.

重要：如果链或组中的某个选择器无效，比如使用了未知的伪元素或伪类，整个选择器组无效，因此，整个规则无效并被忽略。

主动学习：找出选择器组

在我们的例子中，你能找到能应用到两种不同类型的元素上的规则吗？

CSS 语句（CSS statements）

CSS 规则是样式表的主要组成块 —— 是你在 CSS 中最常见的块。但这有一些其它类型的块，你以后偶尔会碰上 —— CSS 规则只是被称为 CSS 语句中的一种。其它类型如下：

@-规则 CSS中使用@-规则来传递元数据、条件信息或其它描述性信息。它由（@）符号开始，紧跟着一个表明它是哪种规则的描述符，之后是这种规则的语法块，并最终由一个半角分号（;）结束。每种由描述符定义的@-规则，都有其特有的内部语法和语义。一些例子如下：
- @charset 和 @import （元数据）
- @media 或 @document （条件信息，又被称为嵌套语句，见下方。)
- @font-face （描述性信息）
具体语法示例：
```
@import 'custom.css';
```
该@-规则向当前 CSS 导入其它 CSS 文件
嵌套语句 是@-规则中的一种，它的语法是 CSS 规则的嵌套块，只有在特定条件匹配时才会应用到文档上。特定条件如下：
- @media 只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容；
- @supports 只有浏览器确实支持被测功能时才会应用该@-规则的内容；
- @document 只有当前页面匹配一些条件时才会应用该@-规则的内容。
具体语法示例
```
@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}
```
上述的嵌套语句只有在页面宽度超过801像素时才会应用。

你将会在本门课程的适当位置学习@-规则/嵌套语句的其他一些类型。

重要：任何不是规则集的语句，@-规则或嵌套语句会无效并因此被忽略。

语法之外：使 CSS 更具可读性

正如你所见的，CSS 语法并不难写：如果你写了一些错误的规则，它将仅被忽略。但是，即使有这样的机制，这也有一些值得了解的最佳实践，使您的CSS代码更易于使用和维护。

空格

空格实际上意味着一些空格，一些制表符以及一些新行。你可以通过添加空格使你的样式表更具可读性。

用与处理 HTML 的方式类似，浏览器会倾向于忽略你 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;
  background-style: none
}
div p {
  margin: 0;
  padding: 1em;
}
div p + p {
  padding-top: 0;
}

你可以编写像这样 —— 绝大多数空格被移除的 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; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

你选择的代码布局通常依据个人喜好，尽管当您开始在团队中工作时，您可能会发现团队已有自己的风格指导，其中规定了已经同意的惯例来遵守。

您在CSS中需要注意的空格是属性和属性值边上的空格。例如，以下是有效的CSS：

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

但以下是无效的：

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

因为 0auto 不被解析为 margin 属性的有效值（0和auto是两个单独的值），并且浏览器不会将 padding 解析为有效属性。因此，您应该始终确保至少用一个空格分隔不同的值，且保持属性名/值为一个连续的字符串。

注释

与HTML一样，我们鼓励您在CSS中使用注释，以帮助您在几个月后遇上代码时了解代码如何工作，并帮助他人理解该代码。它同样对暂时注释某些部分的代码进行测试很有用，例如当您尝试查找是代码的哪一部分导致错误时。

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) {
  /* Let's special case the global font size. On large screen or window,
     we increase the font size 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; background-style: none}
div p                 {margin          :   0; padding         : 1em;}
div p + p             {padding-top     :   0;                       }

速记（Shorthand）

一些属性比如 font，background，padding，border，和 margin 被称为速记属性 —— 这是由于它们允许你在一行设置多个属性，从而节省时间并使代码更整洁。

例如，像这行代码：

/* in shorthand like padding and margin, the values are applied
   in the order top, right, bottom, left. There are also other
   shorthand types, for example two values, which set for example
   the padding for top/bottom, then left/right */
padding: 10px 15px 15px 5px;

和以下的所有代码做了相同的工作：

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

而这一行：

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

和以下这些做了相同的事：

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

我们不会试图彻底全面地教导你这些东西 —— 你会在后续的课程中遇到很多例子，建议你通过速记属性的名称在我们的 CSS参考中查找以了解更多信息。

下一步做什么

到此为止，您应该已经了解编写一个易于维护的工作样式表所需的CSS语法的基本知识。在下一篇文章中，我们将深入CSS选择器，查看可用的不同选择器以及它们的工作原理。

上一页 Overview: Introduction to CSS 下一页

文档标签和贡献者

另见