CSS基础教程： 语法
Hudson 译 原文
CSS由样式规则组成，这些规则由浏览器解释，然后应用于文档中的相应元素。 样式规则由三个部分组成：
- 选择器：指定应用样式的HTML标签。可以是任何标签，如
<h1>或<table>等。 - 属性：HTML标签的一种属性类型。简单来说，所有HTML属性都转换为CSS属性。它们可以是颜色、边框等。
- 值：分配给属性的值。例如，颜色属性可以有红色或
#F1F1F1等值。
可以按照以下语法规则编写CSS：
selector { property: value }
示例 比如可以定义表格边框如下 ：
table { border: 1px solid #C00; }
这里table是选择器，border是属性，属性值1px solid #C00是该属性的值。
可以根据自己的喜好以各种简单的方式定义选择器。CSS 支持众多类型的选择器，下面分别介绍 。
类型选择器
与前面示例中的选择器相同。再举一个例子，为所有一级标题设置颜色：
h1 { color: #36CFFF; }
通用选择器
与选择特定类型的元素不同，通用选择器简单地匹配任何元素类型:
* { color: #000000; }
上述规则使文档中的每个元素内容都以黑色显示。
后代选择器
假设只想将样式规则应用于特定元素，当它位于另外一个特定元素内时，可以用后代选择器。如以下示例所示，样式规则仅当<em>元素位于<ul>标签内时才起作用。
ul em {
color: #000000;
}
类选择器
可以根据元素的类属性定义样式规则。具有该类的所有元素将根据定义的规则进行格式化。
.black {
color: #000000;
}
上述规则使文档中所有具有类属性为black的元素的内容呈黑色。也可以使其更具体。例如：
h1.black {
color: #000000;
}
此规则仅使具有类属性设置为black的<h1>元素的内容呈黑色。
可以对给定元素应用多个类选择器。考虑以下示例 :
<p class="center bold">
此段落将由类center和bold样式化。
</p>
ID选择器
可以根据元素的id属性定义样式规则。具有该id的所有元素将根据定义的规则进行格式化。
#black {
color: #000000;
}
此规则使文档中所有具有id属性设置为black的元素内容呈黑色。可以使其更具体。例如:
h1#black {
color: #000000;
}
此规则仅使具有id属性设置为black的<h1>元素的内容呈黑色。
ID选择器的真正威力在于它们可用作后代选择器的基础，例如：
#black h2 {
color: #000000;
}
在此示例中，当<h2>位于具有id属性设置为black的标签内时，将以黑色显示。
子代选择器
了解了后代选择器后，下面介绍子代选择器。 它与后代非常相似，但功能不同，它匹配直接子元素。考虑以下示例:
body > p {
color: #000000;
}
此规则将所有段落呈黑色，如果它们是 <body>元素的直接子元素。放置在其他元素内部的其他段落，例如<div>或<td>，不会受到此规则的影响。
属性选择器
还可以将样式应用于具有特定属性的HTML元素。下面的样式规则将匹配所有具有值为"text"的type属性的输入元素 -
input[type = "text"] {
color: #000000;
}
这种方法的优点是<input type = "submit" />元素不受影响，颜色只应用于所需的文本字段。
属性选择器具有下面一些匹配规则：
- p[lang] − 选择所有具有lang属性的段落元素。
- p[lang="fr"] − 选择所有具有lang属性值为"fr"的段落元素。
- p[lang~="fr"] − 选择所有具有lang属性包含单词"fr"的段落元素。
- p[lang|="en"] − 选择所有具有lang属性值为"en"或以"en-"开头的段落元素。
多个样式规则
有时可能需要为单个元素定义多个样式规则。可以将多个属性和对应值组合成一个单独规则块，如下例所示：
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
这里所有的属性和值对都由分号;分隔。可以将这些规则放在一行或多行中。为了更好的可读性，建议将它们放在单独的行中。
暂时不要担心上述规则块中提到的属性。这些属性将在接下来的章节中解释。也可以在CSS参考中找到关于属性的完整详细信息。
组合选择器
如果需要，可以将样式应用于多个选择器。只需用逗号分隔选择器，如下例所示 -
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
这样定义的样式规则适用于h1、h2和h3元素。列表的顺序不重要,选择器中的所有元素都具有相同的样式规则。
可以将各种id选择器组合在一起，如下所示：
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
