第4章 CSS修饰XML文档
层叠样式表CSS（Cascading Style Sheet，简称样式表），一般用于控制HTML和XHTML的排版格式，但也可以用于控制XML文档在浏览器上的显示效果。XML文档本身只包含数据，而不指示浏览器如何呈现文档数据。通过使用CSS来控制XML文档中各个元素的呈现方式。在本章将详细介绍CSS的基本知识以及如何在XML文档中使用CSS来控制元素在浏览器上的呈现方式。
本章知识要点：
了解CSS发展历史
掌握CSS基本语法规则
掌握CSS常用属性的作用及使用方法
掌握引用CSS文档的基本方法
4.1 CSS简介
在制作网页时采用CSS技术，可以精确地设置文字的大小、文字的间距、行距、图层重叠、绝对定位和相对定位等，但其最强大的功能还在于它的可随时插入性和易操作性。只要对CSS文档中相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同页面的外观和格式。CSS通过定义样式的方式来辅助XML，为XML文档制定显示样式效果。
4.1.1 CSS基本知识
万维网联盟（W3C），这个非营利的标准化联盟，在1996年制定并发布的一个网页排版样式标准，即层叠样式表，用来对HTML有限的表现功能进行补充。CSS并不是一种程序设计语言，而只是一种用于网页排版的标记性语言，其全部信息都是以纯文本的形式存在一个文档中，因此我们可以利用任何一个文本编辑工具去编写CSS文档。
4.1.2 CSS创建与应用
使用CSS仅能控制浏览器显示XML元素的文本内容，无法将属性、处理指令等内容指定显示样式。CSS采用元素匹配模式，将样式套用到对应的XML元素上，从而使各个元素呈现出不同的表现风格。
一个样式规则有三部分组成：选择符（selector）、属性（properties）和属性的取值（value）。
4.2 CSS基本语法
在本节将详细介绍CSS选择器的有关知识，包括CSS选择器语法结构、CSS属性与CSS属性值等内容。
4.2.1 CSS语法概述
CSS样式表是由若干条样式规则组成，这些样式规则可以应用到不同的元素或文档来定义它们显示的外观。每一条样式规则由三部分构成：选择符（selector）、属性（properties）和属性的取值（value）。
4.2.2 CSS选择器
选择器也被称为选择符。选择器不只是选择文档中的元素标记，它还可以是类（Class，这不同于Java或C＋＋中的类）、ID（给予元素特殊的名称，也便于在脚本中使用）或是元素的某种状态（如：a:link）。根据CSS选择符用途可以把选择器分为标记选择器、类选择器、层次选择器、ID选择器和伪类选择器等。
4.3 CSS属性设置
上面一节介绍了选择器的定义以及选择器的种类，在本节将按照属性的用途来分别介绍属性的作用以及使用方法。
4.3.1 设置显示属性
设置显示的属性有两个visibility属性和display属性。visibility属性用来设定定元素是显示还是隐藏。该属性取值为visible或hidden。visible表示显示，hidden表示隐藏。当visibility被设置为hidden的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
4.3.2 设置字型属性
在HTML中的字体标记<font>只能提供字体颜色color、字体大小size和字体类型face三种设置，而CSS样式表则提供了多个字体属性使设计者对字体有更详细的设置，从而能够更加丰富页面效果。
4.3.3 设置色彩属性
任何美观的网页都离不开背景的修饰，以及丰富的色彩。没有色彩的网页是没有生机的，这就意味着一个优秀的网页设计者不仅要能够合理的安排页面布局，而且还要具有一定的色彩视觉和色彩的搭配能力，这样才能够使网页更加精美也具表现力，并给浏览者以亲切感。
|
属性值 |
描述 |
|
repeat |
背景图片水*和垂直方向都重复*铺 |
|
repeat-x |
背景图片水*方向重复*铺 |
|
repeat-y |
背景图片垂直方向重复*铺 |
|
no-repeat |
背景图片不重复*铺 |
4.3.4 设置边框属性
页面元素的边框就是将元素内容及间隙包含在其中的边线，类似于表格的外边线。每一个页面元素的边框可以从三个方面来描述：宽度、样式和颜色，这三个方面决定了边框所显示出来的外观。CSS中分别使用border-style、border-width和border-color这三个属性设定边框的三个方面。
|
属性 |
描述 |
|
border-top-style |
设定上边框的样式 |
|
border-right-style |
设定右边框的样式 |
|
border-bottom-style |
设定下边框的样式 |
|
border-left-style |
设定左边框的样式 |
4.3.5 设置布局属性
在进行页面设计时，要保证页面元素出现在其适当的位置，常常需要使用div完成。然而div布局需要与CSS属性一起使用才可以完成布局设置。CSS中的边距和间隙属性就提供了这样一种功能，能够为页面元素定义边框，并修饰内容距离，从而优化文本内容的显示效果。
4.3.6 设置文本属性
文本表示的是页面所包含的内容，文本的放置与效果的显示会直接影响到页面的布局及风格。CSS样式表提供了文本属性来实现对页面中文本的控制，本节将对几种重要的文本属性进行介绍。
|
属性值 |
描述 |
|
baseline |
默认值，与上级标记基线对齐。 |
|
sub |
垂直对齐文本的下标 |
|
super |
垂直对齐文本的上标 |
|
top |
将标记内容顶端对齐 |
|
text-top |
将标记文本顶端对齐 |
|
middle |
将标记内容中部对齐 |
|
bottom |
将标记内容底部对齐 |
|
text-bottom |
将标记文本底端对齐 |
4.4 CSS链接
在前面主要介绍了如何定义CSS选择器和设置CSS属性，以及适合于XML文档的CSS属性。在本节中将介绍如何在XML引用CSS。
4.4.1 使用一般链接指令
在XML中使用CSS样式有两种方式，一种是嵌入式，就是把CSS代码直接放到XML中；一种引入式，就是把CSS代码做成独立的文件，引入到XML中。
<?xml-stylesheet type="text/css"?>
<student xmlns:HTML="http://www.org.com">
<HTML:STYLE>
<!-- -->
student{
display:block;
background-color:#A9A9A9;
}
name{
display:line;
font-size:20pt;
color:red;
}
sex{
display:block;
text-indent:50px;
font-size:12pt;
font-style:italic;
}
<!-- -->
</HTML:STYLE>
<name>许世宽</name>
<sex>男</sex>
<name>王娟</name>
<sex>女</sex>
</student>
4.4.2 使用@import指令
通过@import指令可以把具有逻辑层次关系的一组样式表组合成一个较高层次的CSS文件，从而达到CSS样式表的模块化，提高CSS样式表的复用程度，而且方便对CSS进行管理和维护。
|
设备类型 |
版本 |
兼容性 |
概述 |
|
all |
CSS2 |
IE4+ |
用于所有设备类型 |
|
aural |
CSS2 |
NONE |
用于语音和音乐合成器 |
|
braille |
CSS2 |
NONE |
用于触觉反馈设备 |
|
embossed |
CSS2 |
NONE |
用于凸点字符（盲文）印刷设备 |
|
handheld |
CSS2 |
NONE |
用于小型或手提设备 |
|
|
CSS2 |
IE4+ |
用于打印机 |
|
projection |
CSS2 |
NONE |
用于投影图像，如幻灯片 |
|
screen |
CSS2 |
IE4+ |
用于计算机显示器 |
|
tty |
CSS2 |
NONE |
用于使用固定间距字符格的设备。如电传打字机和终端 |
|
tv |
CSS2 |
NONE |
用于电视类设备 |
4.4.3 样式应用说明
在本章前面内容中详细介绍有关CSS的基本语法和使用方法，在本节将通过一个具体实例来演示如何综合使用这些知识来设置XML元素的呈现样式。
@import url(div_text.css);