在传统的Web应用中，样式表提供了一种很有用的方法，可以在某个地方定义在很多页面中重用的样式。在Ajax应用中，我们不再将应用思考为快速切换的一系列页面，但是样式表仍然是很有帮助的，它可以用最少的代码动态地为元素设置预先定义的外观。在本节中我们将看到一些基本的CSS例子。不过首先我们来考察一下CSS规则是如何定义的。
CSS样式为一个文档定义显示规则，通常放在一个单独的文件中，由应用这些样式的Web页面来引用。当然，也可以在Web页面中定义样式规则，但这通常是一种很糟糕的做法。
一个样式规则由两部分组成：选择器（selector）和样式声明（style declaration）。选择器表明要为哪一个元素设置样式，样式声明则表明要应用哪些样式属性。例如我们想让文档中的一级标题（也就是标签）以红色显示，就可以这样定义CSS规则：
h1 { color: red }
这个例子中的选择器非常简单，文档中的所有标签都将应用这个样式。样式声明也很简单，仅仅设置了一个样式属性。在实际应用中，选择器和样式声明都要复杂得多。我们来分别考察一下它们的设置方法，就从选择器开始吧。
2.3.1 CSS选择器
除了为某种类型的HTML标签设置样式，我们还可以将规则限制在一个指定的上下文内。有几种方法可以指定上下文：通过HTML标签类型、通过已声明类的类型或者通过元素的唯一ID。
先看看标签类型的选择器。举例来说，如果我们只需要对位于标签中的标签应用上面的样式规则，那么就可以将CSS规则修改为：
div h1 { color: red; }
这也称作“基于元素的选择器”，因为一个DOM元素是否应用这个样式取决于它的元素类型。我们也可以定义样式类（style class），通过与HTML标签类型无关的样式类来设置样式。例如，如果我们定义一个名为callout的样式类，将其显示在一个彩色框中，就可以这样写：
.callout { border: solid blue 1px; background-color: cyan }
要将一个样式类分配给一个元素，我们只需要简单地在HTML标签中声明一个类属性，例如：
一个元素可以分配多个样式类。假设我们还定义了一个名为loud的样式类：
.loud { color: orange }
可以在文档中同时应用这两个样式，就像这样：
And I'll appear as an unappealing mixture of both!
第三个元素会显示为蓝色边框、青色背景和橙色文字。通过组合CSS样式类，我们可以创造出令人愉快的、和谐的设计。
我们也可以混合使用样式类和基于元素的规则，来定义一个仅仅针对特定标签类型的样式类。例如：
span.highlight { background-color: yellow }
这个规则仅仅会应用在声明了值为highlight的类属性的标签上。其他的标签或者其他有class='highlight'属性设置的标签将不受影响。
我们甚至可以与父子关系的选择器联合使用，创建在非常特定的场合下使用的规则：
div.prose span.highlight { background-color: yellow }
这个规则仅会应用在设置了prose样式类的标签中嵌套的、设置了highlight样式类的标签。
I'll appear as a callout
I'll be bright orange
And I'll appear as a callout!
I'll appear as a normal bit of text
也可以为单个元素指定规则，它需要有唯一ID，这是通过在HTML中加上id属性来完成的。HTML中只会有一个使用这个ID的元素，所以，这样一类选择器通常只用来选择页面中的一个元素。例如，为了突出显示页面中的关闭按钮，我们可以这样定义样式：
#close { color: red }
在CSS中我们还可以定义基于伪选择器（pseudo-selectors）的样式。浏览器定义了一些有限的伪选择器，这里展示一些最有用的，例如：
*:first-letter {
font-size: 500%;
color: red;
float: left;
}
通过这个选择器，我们可以将任何元素的第一个字母以很大的粗体红色字体来显示。我们还可以将这个规则收紧一些，就像这样：
p.illuminated:first-letter {
font-size: 500%;
color: red;
float: left;
}
这样的话，红色的效果只会应用在设置了illuminated样式类的元素上。其他有用的伪选择器包括first-line和hover。hover可以改变当鼠标光标停在超链接上时，超链接的显示效果。例如，当鼠标光标停在链接上时，链接显示为黄色，我们可以编写下列规则：
a:hover{ color: yellow; }
CSS选择器的基本内容就是这些了。在这些例子中，我们已经非正式地介绍了几种样式声明，现在我们就来仔细考察一下。
2.3.2 CSS样式属性
HTML页面中的每一个元素都可以通过很多方式来设置样式。对于那些最常见的元素（例如标签）来说，可能会有一大堆的样式应用在它们身上。我们来大致看一下。
对于元素的文本，可以设置它的颜色、字体大小、字体粗细、字体类型等样式。字体类型可以有多个选项，以便在客户端机器上并未安装希望使用的字体时，仍然能够通过使用其他的替代字体得到不错的显示效果。将一个段落的样式设置为灰色终端风格的文本，我们可以这样来定义：
.robotic{
font-size: 14pt;
font-family: courier new, courier, monospace;
font-weight: bold;
color: gray;
}
或者，使用更简捷的方式将所有字体元素合并在一起：
.robotic{
font: bold 14pt courier new, courier, monospace;
color: gray;
}
在上面的两种样式声明中，多个样式属性都以“键—值”对的形式来书写，使用分号来分隔。
通过设置margin和padding属性，CSS可以定义元素的布局和尺寸（常常称作盒模型），而且，上下左右每一边的属性都可以单独设置：
.padded{ padding: 4px; }
.eccentricPadded {
padding-bottom: 8px;
padding-top: 2px;
padding-left: 2px;
padding-right: 16px;
margin: 1px;
}
元素的尺寸可以通过width和height属性来指定。元素的位置则可以指定为绝对的或者相对的。绝对定位的元素可以通过设置top和left属性指定位置，而相对定位的元素则依赖于页面其他部分的布局情况。
通过使用background-color属性可以设置背景颜色，还可以通过background-image属性来设置背景图片：
.titlebar{ background-image: url(images/topbar.png); }
通过设置visibility:hidden或display:none可以将元素隐藏起来。如果是相对定位，在第一种情况下，元素仍会保留它在页面上的位置；而在第二种情况下则不会，元素会消失得无影无踪。
以上内容讨论了使用CSS建造Ajax应用用户界面所需要的基本样式属性。在下面一小节，我们来看一个例子，实际使用一下CSS。
2.3.3 简单的CSS例子
我们讨论了CSS的核心概念，现在来进行实战。CSS可以用于创建优雅的图形设计，但是在Ajax应用中，我们常常更加关注创建模仿桌面UI组件的用户界面。作为CSS这种用法的一个简单例子，图2-2展示了一个使用CSS来设置样式的文件夹UI组件。
在图2-2右边的截屏中，CSS对于创建窗口部件来说起到了两个作用。我们来逐个考察一下。
1. 使用CSS布局
CSS完成的第一个工作是对这些元素进行定位。最外面的元素显示了整个的窗口，它使用绝对定位的方式：
div.window{
position: absolute;
overflow: auto;
margin: 8px;
padding: 0px;
width: 420px;
height: 280px;
}
在内容区域中，使用float属性来设置图标的样式，使得它们在父元素的边界范围之内自动排列起来，并且在需要的时候可以自动换行。
div.item{
position: relative;
height: 64px;
width: 56px;
float: left;
padding: 0px;
margin: 8px;
}
嵌入在item元素内的itemName元素，通过将上边距设置为与图标相等的尺寸，将文本定位在图标的下方：
div.item div.itemName{
margin-top: 48px;
font: 10px verdana, arial, helvetica;
text-align: center;
}
2. 使用CSS设置样式
CSS执行的第二个工作是为元素加上视觉样式。文件夹中这些条目所使用的图片是通过类名来分配的，例如：
div.folder{
background:
transparent url(images/folder.png)
top left no-repeat;
}
div.file{
background:
transparent url(images/file.png)
top left no-repeat;
}
div.special{
background:
transparent url(images/folder_important.png)
top left no-repeat;
}
图标样式的background属性设置为：不重复显示图标，定位在元素的左上方，透明显示。（图2-2是在FireFox下的显示效果。IE对于透明.png图片的处理存在着很多bug，不过也有一些不太完善的变通解决方法。即将发布的IE 7已经修正了这些bug。如果你需要跨浏览器显示透明图片，我们建议你使用.gif图片。）
个别的条目声明了两个样式类：通用的条目定义它们在容器中的布局，第二个指定它所用到的图标，例如：
样式中的所有图片都是使用CSS来设置的背景图片。标题栏的样式使用只有一个像素宽、与标题栏等高的图片在水平方向上重复来实现：
div.titlebar{
background-color: #0066aa;
background-image: url(images/titlebar_bg.png);
background-repeat: repeat-x;
...
}
代码清单2-1是这个UI组件的完整HTML。
代码清单2-1 window.html
HTML标记定义了文档的结构，而不是外观。它同时也定义了文档中可以应用样式的位置，例如类名、唯一的ID，甚至是标签类型本身。阅读这段HTML，我们可以看到每个元素和其他元素之间的包含关系，而不是最终的视觉效果。编辑样式表可以在保持文档原有结构的情况下大幅度改变文档的外观，就像图2-2中展示的那样。UI组件完整的样式表展示在代码清单2-2中。
代码清单2-2 window.css
[img,234,320]http://book.csdn.
最新评论