XML实用教程_第6章_层叠样式表

1、第第6章章 层叠样式表层叠样式表丁跃潮张涛叶文来丁跃潮张涛叶文来 刘韵华刘韵华 程旭曼程旭曼 丁潇丁潇 张天桥张天桥概述n教学提示：XML为存储结构化数据提供了强大的方法，但是它没有提供关于数据如何显示的信息，这实际上是XML的优点：数据的结构完全与数据表示无关。当有必要表示格式化XML文件中的数据时，格式化的详细信息放置在层叠样式表CSS中。n教学目标：理解层叠样式表CSS的概念，掌握层叠样式表CSS的方法，掌握CSS与XML结合的方法，学会综合运用CSS。6.1 CSS简介6.2 设置字体属性6.3 设置色彩和背景图象属性 6.4 设置边界属性6.5 CSS2新增功能6.6 综合实例6.1

2、 CSS简介nCSS 是用于为XML数据定义显示参数的一种技术，它利用简单的规则来控制元素内容在浏览器中的表现方式。CSS最初是被开发来为HTML文档指定显示的，同时也适合于XML数据。样式表中的显示规范与XML数据分离，这意味着相同的数据通过应用不同的样式表可以以不同的方式显示。同样，相同的样式表可以应用到多个XML文件。 6.1.1 CSS的概念nCSS（Cascading Style Sheet）层叠样式表，也称为级联样式表，是用来进行网页风格设计的。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以

3、改变同一页面的不同部分，或者页数不同的网页的外观和格式。 6.1.2 CSS的使用n1. CSS基本语法n2. 一个无CSS样式表XML文件n3. 一个使用CSS样式表XML文件1. CSS基本语法nCSS的规则是通过属性与属性值来共同设定。属性名称是CSS的关键字，如font-family(字体)、font-size(文字大小)、display(显示属性)、color(颜色)等。属性用语指定元素某一方面的特性，而属性值则用于指定元素的特性的具体特征。n样式表的建立要符合CSS规则，它们一般被定义成以下形式的句法：n标志标志属性1:属性值1;标志属性2:属性值2;标志属性3:属性值3;.2.

4、一个无CSS样式表XML文件n【例6.1】这是一个没有应用层叠样式表的XML文档，code6_1.xml 望庐山瀑布 唐.李白 日照香炉升紫烟 遥看瀑布挂前川 飞流直下三千尺 疑是银河落九天2. 一个无CSS样式表XML文件3. 一个使用CSS样式表XML文件n在XML文档的开头部分写一个关于样式单的如下声明语句：n也可以使用完整的URL指定CSS样式表文件，像下面这个例子：一个使用CSS样式表XML文件charset gb2312;namedisplay:block; font-family: 黑体; font-size: 20pt; letter-spacing:10pt; text-al

5、ign:center; writerdisplay:block; font-family: 魏碑; font-size:10pt; font-weight:bold; letter-spacing:10pt; line-height:40pt; text-align:center; color: Black; contentdisplay:block; font-family: 隶书; font-size: 20pt; font-weight:bold; line-height: 30pt; letter-spacing:10pt; text-align:center; color: Blac

6、k;一个使用CSS样式表XML文件6.2.1 font属性集。n1. font属性的分类 font属性通常用于设置指定字体的风格、大小、亮度等参数。该属性在XML样式表分类中属于通用字体类，由CSS样式表定义。font属性的常见子属性见表6.1表6.1 font属性的常见子属性font属性属性说说 明明font-family指定字体的字型font-style指定字体的风格font-weight指定字体的亮度font-variant指定字体全为大写字母font-size指定字体的大小font-stretch指定字体的压缩或拉伸方式2. font属性的用法n和常见的CSS属性设置类似，font属性

7、使用示例如下：elementfont-style:italic;font-size: 20pt; font-family: 楷体_gb2312;3. 字体字型font-family属性nfont-family属性用于指定字体名称，属性值使用逗号分隔的字体名称。如果字体名称中出现空格，必须使用双引号将字体括起来，如“Times New Roma”。nfont-family属性可用的值取决于用户系统中已经安装了的字体，在Windows系统的安装目录下单位的“fonts”文件夹中保存了系统安装的所有字体。nfont-family属性的参数值可以有几个，在指定font-family属性的时候，可以同时

8、指定几个字符集。这样，在浏览器找不到第1个字符集的时候可以按顺序使用第2个字符集显示字体。4. 字体风格font-style属性font-style属性属性说说 明明Normal表示不使用斜体，该参数是font-style属性的默认值Italic表示使用斜体显示文字Oblique表示使用倾斜幅度不大的斜体显示文字5. 字体亮度font-weight属性nfont-weight属性设置字体的粗体程度，用于决定文本以多黑(粗)或多浅(细)显示文本。5. 字体亮度font-weight属性font-weight属性属性说说 明明Normal表示使用标准字体（没有加深色彩），该参数是font-vari

9、ant属性的默认值Bold表示使用标准的黑体文本Bolder表示使用比标准黑体还要深的颜色显示文字（为相对参数）Lighter表示使用比标准黑体稍浅的颜色显示文字（为相对参数）6. 设置为大写字母font-variant属性 font-variant属性属性说说 明明Normal表示在打印中大写字母没有变化，该参数是font-variant属性的默认值small-caps表示设定用大写字母代替文本中的小写字母。font-variant属性值设置为small-caps将会用比主体文本字号小一些的大写字母代替小写字母7. 设置字体大小font-size属性font-size属属性性说说 明明整数+

10、“pt” 表示使用指定的像素大小显示字体，“pt”表示像素（如20pt、35pt）整数+“%”表示当前元素使用字体大小是前一个元素大小的百分倍数（如40%、150%）Large表示使用比父元素大一号的字体x-small表示使用字体比small字体小1.2倍xx-small表示使用字体比x-small字体小1.2倍x-large表示使用字体比large字体大1.2倍xx-large表示使用字体比x-large字体大1.2倍Medium表示使用标准字体大小显示8. 文本属性文本属性文本属性说说 明明letter-spacing设置字母间隔，可以增加或减少字母之间的间距Word-spacing设置文

11、字间隔。其使用方法和letter-spacing类似vertical-align确定一个内部元素的相对于它的上级元素或相对与元素行纵向位置text-align作用于块元素，用来设置块中文本的对齐方式，取值为：left(左对齐)、right(右对齐)、center(居中)、justify(两端对齐)text-indent设置第一行缩进距离。如：nametext-indent:2em,表示第一行缩进两个字的长度inline-height控制文本连续行之间的距离，可以用来调整文本的垂直线的距离。text-transform设置显示文本的字母大小写的显示形式。取值关键字为：capitalize，首字母

12、大写；uppercase，所有字母都大写；lowercase，所有字母都小写；none，不改变字母的大小写状态text-decoration声明文本是否有划线，常用来装饰链接。取值关键字为：overline，文本有上划线；line-through，穿过文本的删除线；blink，使文字闪烁；underline，有下划线；none,则是表示没有任何划线。9. 在CSS样式表中显示中文n在XML文档中使用中文元素名称时，我们需要在文档序文部分添加encoding=“gb2312”的XML指令声明。但是在CSS中，要对目标元素进行格式指定，则要求目标元素只能是由XML的标准命名字符命名（例如大小英文字

13、母、数字、下划线等），而绝对不能使用中文元素名称。n由于CSS1在支持非字母文字方面表现很不尽如人意，所以在CSS2中针对这个问题进行了改善。CSS2标准中对于多语言功能的支持是通过关键字“charset”再加上需要使用的语言字符集名称实现的，例如要使用的是中文国标字符集，就要在CSS文件的第1行加入语句： charsetgb23126.3 设置色彩和背景图象属性n在互联网中，没有色彩的页面即便做得再精致也缺乏吸引力。CSS样式表中对于色彩和图像的设定功能也是比较完善和强大的，接下来就让我们学习在样式表中添加色彩属性的定义。6.3.1 定义前景色n1.color属性颜颜色色十进制十进制RGB十

14、六进十六进制制RGBRGB百分百分数数纯红rgb(255,0,0)#FF0000rgb(100%,0%,0%)纯蓝rgb(0,0,255)#0000FFrgb(0%,0%,100%)纯绿rgb(0,255,0)#00FF00rgb(0%,100%,0%)白色rgb(255,255,255)#FFFFFFrgb(100%,100%,100%)黑色Rgb(0,0,0)#000000rgb(0%,0%,0%)2.color属性的用法n现在，定义code6_4.css文件。charsetgb2312;namedisplay:block; font-size:22pt; color:blue;write

15、rdisplay:block; color:red;contentAdisplay:block; color:#FOF;contentBdisplay:block; color:rgb(100%,50%,50%);contentCdisplay:block; color:rgb(000,000,256);contentDdisplay:block; color:rgb(000,256,256); 2.color属性的用法6.3.2 定义背景色n1.background属性集background属性属性说说 明明background-color用于对指定元素设置背景颜色background-im

16、age 用于对指定元素设置背景图案background-repeat在背景图案小于指定元素的情况下，是否使用重复填充图案background-attachment用于指定设置的背景图案在元素滚动时是否一起滚动background-position用于指定背景图案的起始位置2.设置背景颜色n（1）#RGBn（2）#RRGGBBn（3）rgb（RRR，GGG，BBB）n（4）rgb（R%，G%，B%）n（5）颜色名称 3.设置背景图案n（1）background-image：定义背景图形。取值为none、url，当取值为none时表示不用图形作背景，url表示提供图形文件的URL地址。n（2）直接

17、的图像文件名称（如image001.gif），这里是指和CSS样式表文件在同一目录下的文件。4.设置背景图案重复方式n（1）repeat：使用背景图案完全填充元素大小的空间。n（2）repeat-x：使用背景图案在水平方向从左到右填充元素大小的空间。n（3）repeat-y：使用背景图案在竖直方向从上到下填充元素大小的空间。n（4）no-repeat：不使用背景图案重复填充元素。5.设置背景图案滚动方式n（1）scroll：表示在文字页面滚动时，背景一起滚动。n（2）Fixed：表示在文字页面滚动时，背景固定不滚动。6.设置背景图案起始位置n（1）top：表示背景图案位于指定元素的顶部。n（2

18、）center：表示背景图案位于指定元素的中部。n（3）bottom：表示背景图案位于指定元素的底部。n（4）left：表示背景图案位于指定元素的左部。n（5）right：表示背景图案位于指定元素的右部。6.4 设置边界属性n设置元素在文件中的位置。n在元素周围添加边框，并设置边框的样式，大小。n控制相邻元素的位置。6.4.1 设置边框属性border-style属性属性描述描述None不显示边框，为缺省值Dotted点线Dashed虛线Solid实线Double双线Groove3D陷入线Ridge3D山脊狀线Inset使页面有沉入感6.4.2 设置填充属性n给元素与顶，底，左，右边框添加填充 padding-toppadding-bottompadding-leftpadding-right6.4.3 设置大小属性n在CSS中设置边框大小的属性为width、height。取值为auto、指定大小或父元素宽度的百分比。当width、height取值为auto时，表示根据元素大小自动调整width、height的取值。6.4.4 设置定位属性定位属性定位属性描述描述float设置文本相对于元素的位置。取值为：l