4.2 CSS 语法

CSS用于定义HTML元素的布局和样式，所以语法格式首先选定元素，然后设定键值对（1个或多个）：

/* A CSS rule */
选择器（selector）{ 属性（property）: 值（value）;}

你可以理解为是一个谁{什么：怎么样}的三元组：

who{ what: how;}

• 选择器定义谁，也就是哪个HTML元素
• 属性定义元素的什么特征
• 值定义怎么样改变这个元素的特征

这整个三元组（选择器/属性/值）就构成所谓的 CSS规则（rule）。

简单的例子

比如你想改变块引用（blockquotes）的颜色

<blockquote>Something quoted</blockquote>

CSS的选择器可以按标签名称（标签中去除尖括号的部分）来选择，比如上例中的“blockquote”。

blockquote{ background: lightgreen;}

这将改变块引用中文本的颜色，接着我们再改变下块引用的背景色来和文本颜色搭配：

blockquote{
  background: lightgreen;
  color: darkgreen;
}

从上面的代码中，你可以看到：

• 一个选择器中可以添加多个属性/值对。
• 一般我们把每个属性/值对放在单独的一行，而多个空格和HTML文档中一样是会被忽略的。

<blockquote> 是块元素，它有一个相应的内联版本：<q>。 如果我们想把这两个元素设置成相同的风格，我们可以分别编写上述的代码，但实际上有一个简洁的方法，即多个选择器可以共享样式，具体写法就是使用逗号把选择器分开，如下所示：

q,
blockquote{
  background: lightgreen;
  color: darkgreen;
}

在一条CSS规则中，我们可以有多个选择器，多个属性，甚至可以有多个值（尽管比较少见）。

注释（Comments）

和HTML的注释语法不同，CSS的注释风格类似C语言的多行注释：

/* 这是一个CSS注释 */
q,
blockquote{
  background: lightgreen;
  color: darkgreen;
}
/*
注释是给开发人员理解代码用的，
会被计算机忽略。
*/

上面我们讲到了CSS三元组，第一个就是选择器，我们接下来就详细介绍选择器。