第3章 使用CSS格式化XML页面.ppt

第3章使用CSS格式化XML页面本章重点讨论使用CSS格式化XML标记的方法,本章重点3.1CSS技术简介3.2CSS文档的基本语法3.3将CSS和XML结合的方法3.4CSS格式化XML文档3.5在XML中使用HTML的标记3.6在XML文档中添加脚本语言3.7学生选课管理系统样式设计,3.1CSS技术简介,CSS的英文全称是CascadingStyleSheet（层叠样式表）用来为HTML或XML中的标记定义在IE中的显示样式,包括颜色、字体、大小和位置。允许样式层叠定义允许相同标记样式的重复定义重复定义的标记样式中，距离标记近的样式起作用。下面的样式优先级依次降低：标记Style属性的优先级标记中定义的样式外部样式文件定义的样式,CSS标记格式化原理,3.2CSS文档的基本语法3.2.1样式的直接定义法3.2.2成组选择符3.2.3利用CLASS来定义样式3.2.4在CSS文件中使用ID3.2.5STYLE属性的使用3.2.6CSS中的继承特性3.2.7使用import结合样式表单3.2.8!important声明,3.2.1样式的直接定义法直接的指定某一个标记的各种样式属性值,booksdisplay:block;bookdisplay:block;background-color:#aabbcc,lisongtaotheapplicationofASP,3.2.2成组选择符把一组属性应用于多个元素，可以用逗号将选择符中的所有元素分开，然后再定义属性的具体值,schooldisplay:block;color:blue;class,monitordisplay:block;color:red;font-size:17pt;,list1list2,schooldisplay:block;color:blue;classdisplay:block;color:red;font-size:17pt;monitordisplay:block;color:red;font-size:17pt;,3.2.3利用CLASS来定义样式,.listclasscolor:red;font-size:26pt.listsmallcolor:blue;font-size:15pt,lisongtaozhongguo,独立于标记定义了一种样式，该样式刻画了多个标记的共性,3.2.4在CSS文件中使用ID使用ID定义某一标记特有的属性,#listfont-size:28pt;color:red;display:block#list1font-size:14pt;color:bluedisplay:block,lisongtaolisongtao,3.2.5STYLE属性的使用将特定的样式一次性应用在一个特定的元素上,HelloXML!,3.2.6CSS中的继承特性,如果没有指定元素的具体样式规则，该元素就会继承其父元素对应样式属性。,schoolfont-size:30pt;color:red;display:blocklisongtao上面程序中，标记具有和标记完全相同的样式,3.2.7使用import结合样式表单提供了一种将多个CSS文件集成一个CSS文件的途径import指令必须出现在样式单的开头，并出现在任何规则之前导入样式单中的规则总要覆盖被导入样式单中的规则禁止循环导入CSS2CSS1CSS3,3.2.8!important声明,!important声明与属性连结起来，则该属性将不被覆盖。!important禁止了默认的优先级规则。schoolfont-size:36pt;color:red!importantschoolcolor:blue上面程序中，第一行在定义标记样式时，将颜色定义为非覆盖型。第2行程序对标记的属性进行了覆盖。此处这种覆盖失效，标记还是红色，而非蓝色。,3.3将CSS和XML结合的方法3.3.1独立样式文件3.3.2将样式语句嵌入到XML文件当中3.3.3混合方法指定样式3.3.4使用多个样式文件,3.3.1独立样式文件,通过xml-stylesheet指令，XML文件加载CSS样式定义文件。,3.3.2将样式语句嵌入XML文件,调用HTML语言中的style标记，在XML文件中嵌入样式。booksdisplay:block;width:30em;HTML标记语言的名称空间为：/Profiles/XHTML-transitional上面程序中标记前缀HTML是为名称空间所起的一个短名称,3.3.3混合方法指定样式,1.可以混合使用，外部文件法和嵌入样式法为XML文件定义样式。内部嵌入样式的优先级要比外部样式高。2.XML可以同时加载多个样式文件在XML中存在多个样式文件时，后引用的样式文件中定义的样式优先级高。,3.4CSS格式化XML文档3.4.1与文字相关的属性3.4.2定位相关属性3.4.3版式相关属性,3.4.1与文字相关的属性color属性,authorcolor:red,authorcolor:#ff0000,表示字型的属性authorfont-family:arial决定字体大小的属性font-sizeauthorfont-size:17pt决定字型风格的属性font-styleauthorfont-size:17pt字体对齐方式的属性text-alignAuthoralign:center,3.4.1与文字相关的属性,字体装饰特色的属性text-decorationAuthortext-decoration:overline字体大小写转换的属性text-transformAuthortext-transform:capitalize,3.4.2定位相关属性1Position属性:absolute,relative2.absolute坐标原点：父标记左上角3.relative坐标原点：标记的默认位置，具体位置不重要。,定位位置和大小属性,1Height,weight属性表示标记的高和宽，对应标记大小。2。Left和top对应标记左上角的位置，对应了标记的位置。booksdisplay:block;height:100px;width:200px;left:100px;top:100px;position:absolute;,3.4.3版式相关属性,1display属性None表示隐藏不显示任何信息。Inline表示所要显示的信息，在一行内依次排列，不会独占一行。Block表示所要显示的信息要独占一行（即成为一个段落）2.display:none和visibility：hidden的差异3.背景属性的设置4.框架在XML文档显示中的应用,3.5在XML中使用HTML的标记3.5.1在XML文档中显示图形3.5.2在XML文档中使用超链接3.5.3XML中的换行分段标记3.5.4在XML文档中实现表格3.5.5在XML文档中显示表单,3.5.1在XML文档中显示图形,listASP及其应用TsinghuaUniversity12.30,通过HTML语言中的标记，可以将特定图片显示在XML类型的文件中。这种模式中，必须使用禁用XML文件的默认样式。并使用HTML名称空间调用HTML标记。,3.5.2在XML中使用其它标记,在XML文档中使用超链接263中国在线XML中的换行分段标记在XML文档中实现表格在XML文档中显示表单,3.6在XML文档中添加脚本语言,通过S