27. CSS 基础知识

详细资料: 发布于 2012年9月18日; 点击数：4415

序言

在本教程前面的文章中，我们讨论了网站的内容以及如何通过 HTML 来对网站内容进行组织。HTML 是非常重要的，因为这意味着我们给文档赋予了意义，并为与其它技术的紧密结合提供了便利。接下来将要讨论的重要 web 技术是 CSS（层叠样式表），该技术是用来样式化 HTML，并在网页中对其进行定位的。在本文中，我将向你们介绍 CSS——什么是 CSS，如何将其应用于 HTML，以及基础的 CSS 语法是怎样的。本文的结构如下：

什么是 CSS？
定义样式规则
- CSS 注释
- 对选择器进行分组
高级 CSS 选择器
CSS 缩写
将 CSS 应用到 HTML
总结
练习题

什么是 CSS？

在使用 HTML 对文件进行结构化，并告诉浏览器某个元素的功能时（这是到其它页面的链接吗？是标题吗？），CSS 向浏览器发出如何显示特定元素的指示——比如样式，空格和定位，如果说 HTML 是构建房屋结构的梁柱和砖块，CSS 就是装修用的灰泥和涂料。

这是通过一套规则体系来实现的，接下来你将学到更多关于这些规则的具体的语法。这些规则指定了哪些 HTML 元素应该添加样式，然后在每个规则内列出它们想要对其进行操作的 HTML 元素的属性（比如颜色，大小，字体等等），以及它们想要将这些属性改成什么样的值。比如，某条 CSS 规则可能表示“我想要找出所有的 h2 元素，并将它们全部涂成绿色”，或者“我想要找出所有类名为 author-name 的段落，将它们的背景设为红色，并将里面的文本大小设为普通段落文本的两倍，然后给每个这样的段落加 10 个像素的间距。

CSS 不是 JacaScript 那样的程序语言，也不是 HTML 那样的标记语言——实际上没有可以和它相对比的语言。在早期的 web 开发中，那些用于对界面进行定义的技术总是把外观和结构混为一谈，但在网络这种时常变化的环境中，这可不是一个明智的做法，这也就是发明 CSS 的原因。

定义样式规则

闲话少说，我们先来看一段 CSS 代码示例，然后对其进行分析：


selector {
  property1:value;
  property2:value;
  property3:value;
}

CSS 注释

你从一开始就应该知道如何在 CSS 中进行注释。你可以在 /* 和 */ 之间添加注释。注释可以占好几行，而且浏览器将忽略它们：


/* These are basic element selectors */
selector{
  property1:value;
  property2:value;
  property3:value;
}

你既可以在规则之间，也可以在属性模块内部添加注释，比如，在下面的 CSS 中，第二个和第三个属性都在注释分隔符中，因此它们将被浏览器忽略。在检查 CSS 的某个部分对网页有什么影响时，这一招很管用。你只需要将它们标记为注释，保存 CSS，重新加载 HTML 就可以了。


selector{
  property1:value;
  /* 
  property2:value;
  property3:value;
  */
}

与其它语言不同的是，CSS 仅有块级注释——单行注释是不存在的。当然如果你愿意，你也可以强制使用单行注释，但你还是需要用到开头和结尾的注释分隔符（/* 和 */）。

对选择器进行分组

你同样可以对不同的选择器进行分组，如果你想将同样的样式应用到 h1 和 p 元素上——你可以编写如下的 CSS：


h1 {color:red}

p {color:red}

但这不是很理想，因为你重复了同样的信息。因此你可以通过使用一个逗号来将选择器分组，从而简化 CSS——花括号内的规则将应用到两个选择器中：


h1, p {color:red}

选择器有许多不同的类型，每个都与标记的不同部分相匹配。最常遇到的三种基本选择器如下：

p {}：元素选择器: 与页面上所有叫该名称的元素相匹配（比如示例中的 p 元素）
.example{}：类选择器: 与所有 class 属性为指定值的元素相匹配，因此上面可以匹配 <p class="example">, <li class="example"> 或者 <div class="example">，或者其它 class 值为 example 的元素。注意，类选择器不会对任何特定的元素名称进行测试。
#example{}：id选择器: 与所有具有特定 id 属性值的元素相匹配，因此上面的例子可以匹配 <p id="example">, <li id="example"> 或者 <div id="example"> 或者其它 id 值为 example 的元素。注意 ID 选择器不会对任何元素名称进行测试，而且每个 ID 值在一个 HTML 文档中只能出现一次——它们对每个页面都是独一无二的。

你可以在下面的例子中看到上述选择器的使用方法。注意，当你在浏览器中打开该示例的时候，warning 样式会被应用到列表项和段落上（如果项目符号消失了，那是因为你在白色背景上设置了白色文本）。

你可以将一些选择器联合起来定义更具体的规则：

p.warning{}: 匹配 class 值为 warning 的所有段落
div#example{}: 匹配 id 属性值为 example 的元素，但只适用于 div 元素
p.info, li.highlight{}: 匹配 class 值为 info 的段落元素以及 class 值为 highlight 的列表元素

在下面的例子中我会用它们来区分各种警告样式：

高级 CSS 选择器

在上面的章节中，我向你们介绍了最基本的 CSS 选择器，元素，类和 ID 选择器。有了这些选择器，你可以完成许多任务，但这当然不是全部的选择器——还有其它选择器可以让你用更具体的标准来样式化所选定的元素。

通配选择器：通配选择器可以用于选择页面内的任何元素。
属性选择器：就如它们的名称所指的那样，属性选择器让你能根据属性选择元素。
子对象选择器：如果你想选择某个特定元素，而该元素又是其它特定元素的子元素，你就可以使用这种选择器。
派生选择器：如果你想选择某个特定元素，而该元素又是其它特定元素所派生出的元素（不仅是直接子对象，也可以是树形目录中更下层的对象），你就可以用这个类型的选择器。
邻接选择器：如果你想选择跟在其它特定元素后面的特定元素，可以用这些选择器。
伪类：它们使你能够不基于元素的性质，而是基于更复杂的因素来样式化页面元素—比如链接状态（比如，当它们处于鼠标悬停状态，或是已经被访问过）。
伪元素：它们让你能样式化元素的特定部分，而不是整个元素（比如该某个元素内的第一个字母）；它们也能让你在特定元素的前后插入内容。

随着对本教程剩下部分的深入学习，你将看到一些更加复杂的选择器的相关资料，如果你不能马上理解全部的内容，也不必担心——随着你对样式化网页的经验积累，你一定会取得成功的！最好是从上面提到的 3 个基本选择器开始学习，随着你信心的增加，再深入到其它的选择器。

通配选择器

简而言之，通配选择器选择页面的所有元素进行样式化。比如说，下面的规则将对页面的每个元素都添加一个 1 像素的实心黑色边框。

* {
  border: 1px solid #000000;
}

属性选择器

属性选择器让你能基于元素所包含的属性来对它们进行选择。比如，你可以用下面的选择器来选择所有具有 alt 属性的 img 元素：

img[alt] {

  border: 1px solid #000000;

}

请注意方括符。

使用以上选择器，你就可以对具有 alt 属性的所有图像都添加一个黑色边框，并对其它图像设置一个亮红色边框——这招对可访问性测试很有用。

当你通过属性值，而不仅仅是属性名称来进行选择的时候，属性选择器会变得更加有用。下面的规则适用于所有 src 属性值为 alert.gif 图像：

img[src="/alert.gif"] {

  border: 1px solid #000000;

}

你可能不会觉得这非常有用，但是，在调试方面它是很管用的。更有用的是它能够选择属性的特定部分，比如文件扩展名。而且这项功能正在完善中——实际上，CSS3 引入了 3 种新类型的属性选择器，可以基于属性值中的文本串（可以位于属性值中开始、结束或任何的地方）来进行选择。点此阅读 Christopher Schmitt 关于 CSS3 属性选择器的文章。

子对象选择器

你可以用一个子对象选择器来选择作为其它特定元素子对象的元素。比如，下面的规则会把作为 h3 元素子对象的 strong 元素中的文本转换为蓝色，但不会转换其它的 strong 元素。

h3 > strong {

  color: blue;

}

IE6 及以下版本的浏览器不支持子对象选择器。

派生选择器

派生选择器与子对象选择器非常相似，只是子对象选择器仅选择直接派生元素；派生选择器则可以选择元素层级中的任何适当元素，而不仅仅是直接派生元素。让我们更仔细的看看它的含义，细想以下 HTML 片断:

<div>
  <em>hello</em>
  <p>In this paragraph I will say 
    <em>goodbye</em>.
  </p>

</div>

在这个片断里，div 元素是所有其它元素的父对象。它有两个子对象，一个 em 和一个 p，p 元素还有一个独生的子元素，即另一个 em。

你可以用一个子对象选择器来选择紧接在 div 里面的那个 em，像这样：

div > em {

 ...

}

如果你换用一个派生选择器，就成了这样了：

div em {

 ...

}

这样两个 em 元素都将被选中。

邻接选择器

这种选择器让你能在同一层级的元素层次中，选择跟在其它特定元素后的某个特定元素。比如，如果你想选择紧跟在 h2 元素后面的所有 p 元素，而非其它 p 元素，你可以使用以下规则：

h2 + p {

 ...

}

IE6 及以下版本的浏览器不支持邻接选择器

伪类

伪类不是用来为元素提供样式的，而是为元素的各种状态提供样式。最常见的用法就是样式化链接状态，因此我们先看看这部分。下面的列表给出了各种伪类，以及它们所选择的链接状态的描述：

:link —链接的一般默认状态，就是你刚刚看到它们时所处的状态。
:visited —在你正在使用的浏览器已经访问过的链接。
:focus —目前键盘光标正位于其中的链接（或表单域，或其它元素）。
:hover —鼠标指针目前正悬停于其上的链接。
:active —目前正在点击的链接。

以下 CSS 规则将默认状态下的链接设置为蓝色（大多数浏览器的默认设置）。如果鼠标悬停的话，默认的链接下划线就会消失。我们希望在键盘光标聚焦于该链接上的时候，能有同样的效果，因此我们将 :hover 规则复制到 :focus 一起。如果某个链接已经被访问过，它会变成灰色。最后，如果某个链接处于激活状态，它就会被加粗，作为某些事情将要发生的一个特别提示。

a:link{

 color: blue;

}

a:visited{

 color: gray;

}

a:hover a:focus{

text-decoration: none;

}

a:active{

 font-weight: bold;

}

如果你没有按照以上所示的相同顺序来制定规则，那你可要注意了。因为它们可能不会按照你的期望来工作。这是因为特异性会造成样式表中后面的规则覆盖之前的规则。你可以在下一篇文章中学到更多关于特异性的内容。

伪类 :focus 同样是表单中的有用工具。比如，你可以用下面的规则将光标闪烁的输入区变成高亮：

input:focus {

 border: 2px solid black;
 background color: lightgray;
 
}

下面，我们来看看 :first-child——该伪类会选择父对象的第一子元素实例。比如，下面的规则选择了所有列表中的第一列表项（带有项目符号或编号），并将其文本变成粗体。

li:first-child {

 font-weight: bold;
 
}

最后，我简要提一下伪类 :lang，它会选择那些由 lang 属性将其语言设置为特定语言的元素。

<p lang="en-US">A paragraph of American text, gee whiz!<p>

可以用下面的规则来进行选择：

p:lang(en-US) {

 ...
 
}

伪元素

伪元素有两个用途：首先，你可以使用它们来选择既定元素内文本的首字母或首行，从而方便地给你文档中的每个段落创建一个首字下沉效果，你可以使用如下规则：

p:first-letter {

  font-weight: bold;
  font-size: 300%
  background-color: red;

}

每个段落的首字母都会被加粗，并比于段落的其它部分大 300%，而且带有红色背景。

要将每个段落的首行变成粗体，你可以使用如下规则：

p:first-line {

  font-weight: bold;
  
}

伪元素的第二个用途是通过 CSS 生成页面内容，这更加复杂。你可以使用伪元素 :before 或 :after，来指定应该在所选元素的前面还是后面插入内容。然后你就可以指定想要插入的内容是什么。比如，你可以使用如下规则在页面的每个链接后面插入一个装饰图片：

a:after{

  content: " " url(flower.gif);

}

你还可以使用 attr() 功能在元素后面插入其属性值。比如，你可以使用以下规则，在文档里每个链接后面的括号中插入它们的链接目标：

a:after{

  content: "(" attr(href) ")";

}

这样的规则对于打印样式表来说是非常棒的，打印样式表也是你可以编写的样式表，并会在用户打印某个页面时自动应用。这种规则对用户的好处在于，你可以隐藏用户在打印出的资料中无法跟踪的导航，而且通过使用上述的技术，读者就可以看到某个页面上所有引用的URL。

你还可以使用 counter() 功能，将递增数值插入到重复元素后面（如项目符号或段落）——在 dev.opera.com 关于 CSS counters 的文章中有更加详细的说明。

IE6 及更早版本的浏览器不支持这些选择器。同样须注意，你不应当用 CSS 来插入重要信息，否则，如果用户选择不用你的样式表的话，这些内容对辅助技术来说将不可用。CSS 的黄金规则就是：CSS 是用来进行样式化操作的，而 HTML 则用于结构化内容。

CSS 缩写

本教程中你经常会遇到的另外一个东西就是 CSS 缩写。可以将若干个相关的 CSS 属性结合为一个属性，以节省你的时间和精力。在这一部分中我们将学习缩写的可用类型。

其实在本文中我已经使用了缩写，只是没有提及。border: 2px solid black; 规则就是缩写的，分别指定了 border-width: 2px;，border-style: solid; 以及 border-color: black;。

属性值全写与缩写的对比

请看下面的边距规则（填充距和边框的缩写操作是一样的）：

div.foo {
  margin-top: 1em;
  margin-right: 1.5em;
  margin-bottom: 2em;
  margin-left: 2.5em;
}

这样的规则也可以写成：

div.foo {
	margin: 1em 1.5em 2em 2.5em;
}

缩写的属性可以不必将四个值全都写出来

根据以下所列内容，一个缩写的属性值可以少于四个。以下内容按照所列出值的数量进行排序：

四个边全都应用相同的值，比如 margin: 2px;。
第一个值针对顶部和底部，第二个值针对左侧和右侧，比如 margin: 2px 5px;。
第一个和第三个值分别应用到顶端和底部，第二个值应用到左侧和右侧，比如margin: 2px 5px 1px;。
根据 CSS 源顺序，属性值分别应用到顶端、右侧、底部和左侧，如上例所示。

一般说来，为了保证易读性，最明智的办法还是将缩写属性的四个值全部列出来。这个建议也同样适用于 padding 的缩写特性。

列出所有属性值还是使用缩写

缩写 margin 和 padding 属性是为了达到最佳的使用效率，但是在某些情况下最好避免使用缩写，或至少慎重考虑，比如以下情况：

只需设置一个边距。在只需要设定一个属性的情况下，同时设定多个属性通常会违反 KISS（保持简单、易懂）原则，该原则在词汇表中有解释。
某些属性所使用的选择器从属于多种边界的情况。如果这种情况发生的话——而它迟早都会发生——在修订或更改你的布局时，你将难以跟踪那一大堆缩写值。
你正在编写的样式表将由技术不精通的人来维护。如果你相信他们会读到这篇文章，那你就不必担心这种情况了，但最好还是不要做出任何假设。
你需要换掉一个值来解决某种边界情况。这往往意味着一个设计不佳的 HTML 文档或样式表……而且这种情况也不是从来没有出现过。

其它缩写参考

各种属性的边框缩写：这一点已经在本章的开头说明过了。你甚至可以对一个元素的单侧边框设置边框属性值，其方法如下：
```
border-left-width: 2px;
border-left-style: solid;
border-left-color: black;
```
同一属性的边距、填充距和边框缩写：它们的缩写方式都相同；如上面的属性值全写与缩写的对比部分所示。
字体缩写：你可以使用一行缩写来指定字体大小，粗细，样式，字体体系和行高。比如，请看下面的 CSS：
```
font-size: 1.5em;
line-height: 200%;
font-weight: bold;
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
```
你可以用下面这一行代码来对它们进行全部指定：
```
font: 1.5em/200% bold italic Georgia,"Times New Roman",serif;
```
背景缩写：你可以用一行 CSS 代码来指定背景颜色、背景图像、图像重复和图像位置。请看下面的代码：
```
background-color: #000;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position; top left;
```
上述代码这可以用以下缩写方式来表示：
```
background: #000 url(image.gif) no-repeat top left;
```
列表缩写：可以用同样的办法来处理列表属性，你可以用单行代码来设置列表项目符号类型，位置和图像。看看下面的 CSS 代码：
```
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);
```
这等同于：
```
list-style: circle inside url(bullet.gif);
```

注意 #000 是一个缩写的十六进制色彩值；等同于 #000000 的普通写法，这一点之前我们已经讲过。让我们来看一个更复杂的例子：#6c9 与 #66cc99 是一样的。

将 CSS 应用到 HTML

有三种方法可以将 CSS 应用到 HTML 文档：内联样式，嵌入样式和外部样式表。除非你有很好的理由要使用前两者中的其中一种，否则请使用第三种选择。很快你就会知道这是为什么，但我们要先回顾一下这几个选项。

内联样式

你可以通过 style 属性将样式应用到一个元素，像这样：

<p style="background:blue; color:white; padding:5px;">Paragraph</p>

在这个属性内部你列出了所有的 CSS 属性和它们的值（每个属性/值对之间都用分号隔开，每对中的属性与自己的值都用冒号隔开）。通过这种方式你就可以使用 CSS 来定义样式。点此查看本示例。

如果你在浏览器中打开这个例子，你会发现应用了该 style 属性的段落是蓝色的，而文本则是白色的，并且与其它段落的文本大小不一样，如图 1 所示。

Screenshot of the Opera browser showing an applied inline style sheet

图1：Opera 中应用了内联样式的段落与其它段落的外观有所不同。

内联样式的优点在于可以强制命令浏览器应用这些设置。在其它样式表中定义的样式，甚至那些在文档的 head 部分插入的样式都将被这些样式覆盖。

内联样式最大的问题在于它们会大大增加维护 HTML 文档困难。CSS 主要是将文档的展示方式从其架构中分离出来，但内联样式所做的却是这样——将表达规则分散到整个文档中去。

除了维护的问题之外，你也没有用到 CSS 最强大的功能，那就是：层叠。在下篇文章中我们将对层叠进行详细探讨，不过，现在你只需要知道这一点就可以了：使用层叠意味着你在一个地方定义了某种外观，而浏览器会将其应用到所有符合某个规则的元素。

嵌入样式

嵌入样式处于文件 head 部分的 style 元素中，如下面的例子所示：

<style type="text/css" media="screen">
  p {
    color:white; 
    background:blue; 
    padding:5px;
  }
</style>

如果你在浏览器中打开上述链接，就会看到该 HTML 文档的所有段落都应用了这里所定义的样式，如图 2 所示。同样地，你可以查看范例页面的源代码，看看 head 里面的 CSS。

Screenshot of the Opera browser showing how an embedded style sheet affects a lot of elements

图2：在 Opera 中可以看到通过嵌入样式定义了的所有段落

使用嵌入样式的优点在于你不必在每个段落上都添加一次 style 属性——你可以用一个定义来样式化全部的段落。这也意味着如果你要改变所有段落的外观，就只需要在一个地方进行处理，但是这也只能对一个 HTML 文档有效——如果你想一口气对整个网站所有的段落外观进行定义的话，又该怎么办呢？下面我们就来看看外部样式表。

外部样式表

所谓的外部样式表就是将所有 CSS 定义放在一个文件中，然后将其另存为一个扩展名为 CSS 的文件，然后通过在文档的 head 部分中插入 link 元素，来将其应用到你的 HTML 文档中。你可以在我们的范例页面中查看源代码，注意在这个文档的 head 部分中包含了一个 link 元素，该元素引用了这个外部 CSS 文件,你可以检查看看外部 CSS 文件中定义的样式是否被应用到了该 HTML 文档中。下面我们来详细分析一下 link 元素：

<link rel="stylesheet" href="/styles.css" type="text/css" media="screen">

在本教程的前面部分我们已经讲过 link 元素了。现在我们简短地概括一下：href 属性指向 CSS 文件，media 属性定义了这些样式应当被应用到哪些媒体上（本例中是 screen，因为我们不想让打印效果也像这样），而 type 则定义了资源链接是什么（仅仅只有文件扩展名还不足以决定这一点）。

Screenshot of the Opera browser showing how an external style sheet affects a lot of elements

图3：在 Opera 中可以看到外部样式表所定义的样式，该表是通过 HTML 文档中的 link 元素链接的。

最好的办法是：将你的外观定义保存在一个单独的文件中，这样你就可以通过修改一个文件来修改整个网站，浏览器可以立即加载该文件，然后将其下载到本地缓存中，所有引用了该文件的 HTML 文档都可以访问它，这样就可以减少下载量。

@importing 样式表

实际上还有另一种将外部式样表导入到 HTML 文件的方法——那就是 @import 属性。该属性是插入在一个嵌入样式表中的，跟上面的嵌入式 CSS 一样。其语法如下：

<style type="text/css" media="screen">
  @import url("styles.css");

  ...other import statements or CSS styles could go here...
   
</style>

有时你会遇到没有加括号的导入声明，但它的作用是一样的。你还需要意识到另外一件事，就是 @import 应当总是位于嵌入样式表的最前面。最后，你可以通过在导入声明的结尾写上一些媒体类型，来规定导入的样式表只能应用在某些类型的媒体上（除了 IE6 及更早版本的浏览器，这种办法对其它所有浏览器都能有效）。下面的代码跟上一个代码示例是一回事：

<style type="text/css">
  @import url("styles.css") screen;

  ...other import statements or CSS styles could go here...
   

</style>

你可能会问的第一个问题就是“我干嘛非得要用另外一种方式，来将外部样式表应用到我的 HTML 文档中去？”你当然可以不必这样——为了保证完整性，在这里我主要介绍的是关于 @import 的信息。与 link 元素比起来，使用 @import 是有一些小优点/缺点，但它们是非常微小的，因此要选择怎样的方式由你自己决定。link 元素是目前公认的用来链接外部样式表的最佳方式。

老式浏览器无法识别 @import，因此会完全忽略它（如果你省略了文件名前后的括符，Netscape 4 及更老版本的浏览器，还有 IE4 及更老版本的浏览器将无法识别该文件）。因此在有漏洞的老式浏览器中，你可以使用 @import 声明来隐藏那些可能无法正确应用的样式。你可以将最新的样式放在一个外部样式表中，并用 @import 来导入它们，然后在嵌入样式表中编写一些不会造成 IE/Netscape4 卡壳的基础样式。这招非常管用，不过目前你很少用得着保证 IE/Netscape4 的兼容性。
在前面我们提到过，IE6 不支持在 @import 的尾部加入 media 类型，因此如果你想针对不同媒体插入多个样式表，这条路就行不通了。
你可能会争辩说多个 @import 声明的代码要比多个 link 元素的代码少，但这一点实在是可以忽略不计的。

总结

在这篇教程里，你了解了怎样将 CSS 应用到 HTML 文档中，既可以通过 style 属性作为内联样式加载，也可以通过在文件的 head 部分的 style 元素中作为嵌入样式加载，还可以通过一个单独的文件作为外部样式而加载。你还学到了用最后那种方式——通过 link 元素来链接外部样式表——来使维护和缓存的效率更高。我们还讨论了 CSS 的基础语法并对注释、各种选择器类型，以及选择器分组进行了讲解。

在下一篇教程中我们将进一步深入到 CSS 的细节中，详细地探讨层叠和选择器的特异性。

练习题

内联样式的优点和问题有哪些？你是怎样将它们应用到元素中的？
什么是样式规则？描述一下各种组成部分和语法。
如果你有一串样式规则，该怎样将它们放入外部样式表？
下面的 CSS 选择器与什么相匹配：ul#nav{}？
对选择器进行分组的好处是什么？
你怎样对一份打印样式表进行定义？