第4章 XML与CSS

第四章 XML与CSS主要内容主要内容介绍规范 CSS(Cascading Style Sheets 层叠样式表)讲述怎样用CSS规范在浏览器中来显示XML标记中的文本内容。XML关心的是数据的结构关心的是数据的结构,并能很好并能很好的、方便的描述数据的、方便的描述数据,但是不提供数但是不提供数据的显示功能据的显示功能.如果想让浏览器显示如果想让浏览器显示xml文件中标记内容文件中标记内容,那么必须以某那么必须以某种方式告诉浏览器如何显示种方式告诉浏览器如何显示.W3C提供提供了两个建议规范了两个建议规范:CSS(层叠样式表层叠样式表)和和XSL(可扩展样式语言可扩展样式语言),XML与样式表 在XML中内容和表现形式是分开的，XML文档中没有关于显示数据样式的信息。我们在编写XML文件时，仍然只需要关注文件中的数据和数据结构，至于它的显示则交给CSS（层叠样式表）和XSL（可扩张样式语言）来完成。CSS的发展史1 CSS是Cascading Style Sheet（层叠样式表）的英文缩写。它是HTML网页标准语言制定者W3C万维网联盟制定并发布的一个网页排版样式标准，用来对HTML有限的表现功能进行补充。CSS的发展史2 CSS1（CSS Level 1）是 CSS的第一层次标准，它正式发布于1996年12月17日。后来1999年1月11日进行了修改。该标准提供简单的样式表机制，使的网页的制作者通过附属的样式对HTML文档的表现进行描述。CSS的发展史3 CSS2（CSS Level 2）1998年 5月 12日被正式作为标准发布，CSS2基于 CSS1，包含CSS1的所有的特色和功能，并在多个领域进行完善，把表现样式文档和文档内容进行分离。CSS2支持多媒体样式表，使得我们能够根据不同的输出设备来给文档制定不同的表现形式。CSS技术优势1 数据重用：编写好的样式（CSS）文档；可以用于多个XML文档，从而数据就达到了重用的目的，节省了编写代码的时间，统一了多个XML文档的风格。2 轻松地增加网页的特殊效果：使用CSS标记，可以非常简单地对图片、文本信息进行修饰，设置相关属性。3 使元素更加准确定位：使显示的信息按我们自己的意愿出现在指定的地方。4.1 使用CSS 为了让XML使用CSS,XML文件必须使用操作指令 将当前XML文件关联到某个层叠样式表。样式表的URI如果是一个文件的名字，该文件必须和XML文件在同一目录中，如果是一个链接，该链接必须是有效的可访问的。CSS样式的基本语法样式的基本语法标志标志标志属性：标志值；标志属性：标志值；标志属性：标志值；标志属性：标志值；如：如：RootColor:red;font-size:12pt;注意：注意：标记的标记的在在CSS中没有中没有“”标志已标志已“”开始，以开始，以“”结束结束每个属性中以每个属性中以“；”断开断开CSS常用属性常用属性文字属性文字属性说明说明color颜色颜色font-weight字体粗细字体粗细font-size字体大小字体大小left左边左边top上端上端width宽度宽度height高度高度4.2 标记与样式表 一个XML文件在浏览器中所显示的效果4.2 标记与样式表对XML应用CSS规范后显示的效果 在在CSSCSS中，最重要的概念是样式表。样式中，最重要的概念是样式表。样式表由一组样式规则组成，表由一组样式规则组成，通过这组样式规则来通过这组样式规则来告诉告诉浏浏览器用什么样的样式来显示文本览器用什么样的样式来显示文本。比如，。比如，告诉告诉浏浏览器使用什么样的字体、颜色和页边距览器使用什么样的字体、颜色和页边距来显示文本。来显示文本。一个样式规则由三部分组成：一个样式规则由三部分组成：选择符选择符(selector)(selector)(文本代表文本代表)、属性属性(properties)(properties)和属性的取值和属性的取值(value).(value).4.2 标记与样式表标记与样式表4.2 标记与样式表 其语法为：selectorproperty:value;(文本代表属性:值;)文本代表可以有多种形式，可以是自定义的标记。属性和值要用冒号隔开，每种属性之间用分号隔开。在XML文档中通常是下面的形式：XML自定义元素属性:属性值;。4.2 标记与样式表 例如：有一个XML文档，该文档中有这个自定义标记，对这个标记修饰，其格式如下，studentdisplay:block;font-size:35pt;font-weight:bold;，这个样式表主要用来显示标记“student”中所含有的文本内容，其中“display:block;”告知浏览器将标记“”中的内容显示在一个块区域；“font-size:35pt;”设定该区域的文本字体的大小为35磅；“font-weight:bold;”的作用是让文本加重显示。4.2 标记与样式表1.如果有多个标记的内容需要由完全一样的方式来显示，“文本代表”就是把这些标记的名称用逗号分隔的字符串。例如：name,sex,agedisplay:block;font-size:35pt;font-weight:bold;4.2 标记与样式表2.当xml文件中有许多标记具有相同的名字,我们要使用不同的外观来显示他们的内容时,在CSS文件中,”文本代表”使用”标记名称”+”#”+”ID属性值”来指定规范某个标记。例子1（P76）Cha4_1.xml 北京时间:12点 56分 格林威治时间:4点 56分 Show1.csstime display:block;font-size:20pt;font-weight:bold;time#beijing display:block;font-size:20pt;font-weight:bold;color:rgb(255,0,0);hour display:line;font-size:16pt;color:rgb(0,255,0);minute display:line;font-size:8pt;color:rgb(255,30,120);4.2 标记与样式表标记与样式表3.一个一个CSS就是由若干个样式表组成的文本文就是由若干个样式表组成的文本文件，该件，该文本文件可以使用文本文件可以使用ANSI和和UTF-8来保来保存。存。4.关联样式表关联样式表CSS 的编码方式与的编码方式与XML文件必文件必须一致。须一致。5.当浏览器打开当浏览器打开XML文件时，所有的标记将文件时，所有的标记将根据样式表给出的显示规则、按照标记在根据样式表给出的显示规则、按照标记在XML文件中出现的顺序显示自己标记中内容。文件中出现的顺序显示自己标记中内容。张三 男 1970.12.28 李四 女 1977.11.25 showStudent.cssstudent display:block;font-size:20pt;font-weight:bold;color:red;sex display:block;font-size:20pt;color:rgb(0,255,0);birthday display:block;font-weight:bold;color:green;4.3 设置文本的显示方式1.块方式 通过将属性display的值指定为block display:block;使得文本在浏览器的一个块区域中显示例如time display:block;4.3 设置文本的显示方式设置文本的显示方式注意：注意：1.块的大小依赖于显示在文本中字符的数量和字块的大小依赖于显示在文本中字符的数量和字符的大小符的大小,位置默认是靠左对齐位置默认是靠左对齐.如果有若干个如果有若干个”文本代表文本代表”都指定自己代表的文本在块区域中显都指定自己代表的文本在块区域中显示示,那么这些块区域将按照先后顺序靠左对齐那么这些块区域将按照先后顺序靠左对齐.2.如果为父标记指定的显示方式为如果为父标记指定的显示方式为”block”;那那么么,当子标记指定的显示方式也是当子标记指定的显示方式也是”block”时时,子标记的显示区域就是包含于父标记的显示块区子标记的显示区域就是包含于父标记的显示块区域中的一个块区域域中的一个块区域.4.3 设置文本的显示方式 如果想设置文本块在浏览器中显示的大小,通过设置position,left,top,width和height属性的值来准确地设置块区域的位置和大小。namedisplay:block;position:absolute;left:100;top:120;width:200;height:120;例子2（P78）Cha4_2.xml 刘德华说：“我是第一块！靠左对齐！”郭德刚说：“我是第二块！靠左对齐！”芙蓉姐姐说：“我是第三块！靠左对齐！”范伟说：“我牛！我距左面180像素，距离上面16像素！”Show2.cssname#01 display:block;background-color:yellow;width=160;height=100;name#02 display:block;background-color:cyan;width=140;height=100;name#03name#03 display:blockdisplay:block;color:rgb(255,255,255);color:rgb(255,255,255);background-background-color:bluecolor:blue;width=120;width=120;height=100;height=100;name#04name#04 display:blockdisplay:block;background-background-color:pinkcolor:pink;position:absoluteposition:absolute;top=16;top=16;left=180;left=180;width=140;width=140;height=200;height=200;4.3 设置文本的显示方式设置块方式显示的效果图2.行方式 通过将属性display的值指定为line display:line;使得文本以行的方式在浏览器中显示time display:line;4.3 设置文本的显示方式4.3 设置文本的显示方式注意：1.如果有许多“文本代表”都指定自己代表的文本按行的方式在浏览器中显示，那么各行按先后顺序首尾相接来显示。2.如果为父标记指定的显示方式是“block”,那么,当为子标记指定的方式是”line”时,子标记是指在父标记的”block”区域中的”line”。例子3（P79）Cha4-3.xml 这里是现代电影院！班级里的女同学先入座了 男同学尾随着入座吧 这是马路，不在电影院里哦！Show3.csscinema display:block;font-size:18pt;color:black;position:absolute;left=100;top=10;width=250;height=100;girl,boygirl,boy display:linedisplay:line;font-size:12pt;font-size:12pt;color:redcolor:red;roadroad display:linedisplay:line;font-size:22pt;font-size:22pt;color:bluecolor:blue;position:absoluteposition:absolute;left=30;left=30;top=100;top=100;4.3 设置文本的显示方式设置行方式显示的效果图4.3 设置文本的显示方式3.按列表方式 通过将属性display的值指定为list-item display:list-item;使得文本按列表的方式在浏览器中显示。timedisplay:list-item;4.3 设置文本的显示方式 和list-item属性有关的属性是list-style-type,例如:list-style-type:lower-roman;通过设置该属性可以更改项目符号的外观,项目符号的默认外观是disc(实心圆)。4.3 设置文本的显示方式list-style-type属性值和具体的含义disc实心圆circle圆圈square方块decimal十进制数lower-roman小写罗马数字upper-roman大写罗马数字lower-alpha小写英文字母upper-alpha大写英文字母4.3 设置文本的显示方式列表方式各个属性值显示的效果图4.3 设置文本的显示方式注意：1.如果若干个“文本代表”都指定自己代表的文本按列表的方式在浏览器中显示，那么各个列表按先后顺序独行显示，如果list-style-type属性值设置为decimal,lower-roman,upper-roman,lower-alpha和upper-alpha,则这些列表的项目符号会按先后顺序递增。4.3 设置文本的显示方式2.如果为父标记指定的显示方式是“block”，那么当为子标记指定的方式是“list-item”时，子标记的列表是指在父标记的块区域中的列表。3.如果为父标记指定的显示方式是“list-item”，那么当为子标记指定的方式是“list-item”时，子标记的列表是指在父标记列表中的子标记。例子4（P81）Cha4_4.xml 液晶电视机 三种价格：21寸1500元/台 25寸2500元/台 29寸3500元/台 生产日期：2007.8 软件学院硬件部 Show4.csstvdisplay:block;font-size:20pt;color:black;price display:list-item;font-size:18pt;list-style-type:decimal;margin-left:30;color:red;item1 display:list-item;font-size:18pt;list-style-type:square;margin-left:60;color:red;item2 display:list-item;font-size:18pt;list-style-type:square;margin-left:60;color:red;item3 display:list-item;font-size:18pt;list-style-type:square;margin-left:60;color:red;date display:list-item;font-size:18pt;list-style-type:decimal;margin-left:30;color:blue;made display:list-item;font-size:18pt;list-style-type:decimal;margin-left:30;color:rgb(150,10,80);4.3 设置文本的显示方式设置列表方式显示的效果图4.3 设置文本的显示方式4.不显示 通过将属性display的值指定为none display:none;在浏览器中不显示该文本。timedisplay:none;4.4 字体与字体有关的属性及取值情况与字体有关的属性及取值情况:1.font-family（字体）（字体）font-family:Arial;font-family:”Time New Roman”;2.font-style：normal或或italic。（是否斜体）（是否斜体）font-style:italic;4.4 字体3.font-variant：normal和和small-caps。（字形变体）（小写字母变形成小的大写字母）（字形变体）（小写字母变形成小的大写字母）font-variant:small-caps;4.font-weight：normal、bold、bolder、lighter、100、200、300、400、500、600、700、800、900。（文本的粗细（文本的粗细）font-weight:bold;5.font-size：单位是：单位是pt（磅）。（磅）。（字体大小）（字体大小）font-size:12pt;4.4 字体字体各个属性值显示的效果图 4.5 文本样式与文本样式有关的属性及取值情况:1.text-align：left、right、center和justify。（对齐方式）（对齐方式）例如:text-align:left;2.text-indent：单位是像素px或磅pt。（文本首行缩进）（文本首行缩进）例如:text-indent:16pt;4.5 文本样式文本样式3.text-transform3.text-transform：uppercaseuppercase、lowercaselowercase、capitalizecapitalize和和none none。none none 默认。定义带有小写字母和默认。定义带有小写字母和大写字母的标准的文本。大写字母的标准的文本。capitalize capitalize 文本中的每个单词以大写字文本中的每个单词以大写字母开头。母开头。uppercase uppercase 定义仅有大写字母。定义仅有大写字母。lowercase lowercase 定义无大写字母，仅有小写定义无大写字母，仅有小写字母。字母。例如例如 text-transform:uppercase;text-transform:uppercase;4.5 文本样式4.text-decoration：none、underline、overline、line-through和和blink。例如例如 text-decoration:underline;none 默认。定义标准的文本。默认。定义标准的文本。underline 定义文本下的一条线。定义文本下的一条线。overline 定义文本上的一条线。定义文本上的一条线。line-through 定义穿过文本下的一条线。定义穿过文本下的一条线。blink 定义闪烁的文本（无法运行在定义闪烁的文本（无法运行在 IE 和和 Opera 中中）baseline:与参照物的基准线对齐；sub：以下标形式显示；super：以上标形式显示；top：与参照物的最高部对齐；text-top：与参照物文字顶部对齐；middle：与参照物对象中间对齐；bottom：与参照物对象底部对齐；text-bottom：与参照物文字底部对齐。4.5 文本样式5.vertical-align：baseline、top等等例如例如 vertical-align:baseline;4.5 文本样式文本样式各个属性值显示的效果图4.5 文本样式6.line-height例如例如 line-height:2;注意注意:如果子标记的样式表中不指定文本的样如果子标记的样式表中不指定文本的样式属性式属性,子标记就会使用父标记样式表中的有子标记就会使用父标记样式表中的有关文本样式的属性关文本样式的属性.例子5（P85）Cha4_5.xmI 请看一个数学公式：(A+B)2=A2+2AB+B2 请看二个化学分子式：H2O,CO2.Show5.cssmath display:block;font-size:16pt;font-style:italic;color:black;chemistry display:block;font-size:16pt;color:green;supsup display:linedisplay:line;font-size:10pt;font-size:10pt;font-font-weight:boldweight:bold;font-font-style:italicstyle:italic;color:redcolor:red;vertical-vertical-align:superalign:super;lowlow display:linedisplay:line;font-size:10pt;font-size:10pt;font-font-weight:boldweight:bold;color:bluecolor:blue;vertical-vertical-align:bottomalign:bottom;4.5 文本样式设置文本样式显示的效果图XML文档(练习1)要求写出其CSS文件 下面是四种文本的显示方式 块方式显示：我的显示方式是块，靠左对齐 行显示方式：我是第一行语句，请注意 行显示方式：我是第二行语句，请详细观察 列表方式显示：第一个列表 第二个列表 第三个列表 我不显示吗 效果图titletitle position:absoluteposition:absolute;width=200;width=200;background-background-color:pinkcolor:pink;font-size=20;font-size=20;title1title1 display:blockdisplay:block;font-size=26;font-size=26;font-font-weight:boldweight:bold;color:yellowcolor:yellow;title2#01title2#01 font-size=16;font-size=16;color:yellowcolor:yellow;title2#02title2#02 display:blockdisplay:block;font-size=26;font-size=26;font-font-weight:boldweight:bold;color:bulecolor:bule;item1item1 display:listdisplay:list-item;-item;list-style-list-style-type:squaretype:square;margin-left:60;margin-left:60;font-size=16;font-size=16;item2item2 display:listdisplay:list-item;-item;list-style-list-style-type:squaretype:square;margin-left:60;margin-left:60;font-size=16;font-size=16;item3item3 display:listdisplay:list-item;-item;list-style-list-style-type:squaretype:square;margin-left:60;margin-left:60;font-size=16font-size=16title3title3margin-left:20;margin-left:20;font-size=26;font-size=26;font-font-weight:boldweight:bold;color:bulecolor:bule;title4title4 display:nonedisplay:none 4.6 边框边框属性的含义：border-style border-top-width border-right-width border-bottom-width border-left-width border-right border-bottom border-left border-color 按文本的显示形式为文本添加边框按文本的显示形式为文本添加边框按文本的显示形式为文本添加边框按文本的显示形式为文本添加边框.如果文本是块显示如果文本是块显示如果文本是块显示如果文本是块显示,边框就是块的边框边框就是块的边框边框就是块的边框边框就是块的边框.如果是行显示如果是行显示如果是行显示如果是行显示,边框就是行的边框边框就是行的边框边框就是行的边框边框就是行的边框.如果如果如果如果是列表显示是列表显示是列表显示是列表显示,边框就是列表项的边框边框就是列表项的边框边框就是列表项的边框边框就是列表项的边框4.6 边框注意：1.必须首先设置border-style属性，使得文本具有边框，然后再设置其他属性。2.border-style的属性值用来设置文本具有边框，并且边框四条边的宽度、样式和颜色都相同，该属性可以取值为none、dotted、dashed、solid、double、groove、ridge、inset、outset。4.6 边框边框各个属值的具体含义：dotted 定义点状边框。在大多数浏览器中呈现为实线。dashed 定义虚线。在大多数浏览器中呈现为实线。solid 定义实线。double 定义双线。双线的宽度等于 border-width 的值。groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。inset 定义 3D inset 边框。其效果取决于 border-color 的值。outset 定义 3D outset 边框。其效果取决于 border-color 的值。4.6 边框边框各个属性值显示的效果图4.6 边框3.border-top-width、border-bottom-width、border-right-width、border-left-width等属性用来设置边框的上边、底边、右边和左边的宽度，例如：border-bottom-width:12;border-right-width:12;4.6 边框4.border-right、border-left、border-bottom、border-right 等属性可用来单独设置边框的右边、左边和底边的样式。即，在设置了border-style属性后，可以再单独设置这些属性，修改边框的某个边的样式。该3个属性的取值范围和border-style的相同。4.6 边框5.border-color 设置1个颜色值时，4个边的颜色与设置的颜色相同；设置2个颜色值时，那么上边和底边的颜色与设置的第一个颜色相同，左边和右边的颜色与设置的第二个颜色相同；设置4个颜色值时，那么按：上、右、底、左的顺序指定各边的颜色4.6 边框例如：颜色也可以是一个三元组构成的颜色border-color:rgb(12,255,220);border-color：上、右、底、左：上、右、底、左例子6（P87）Cha4_6.xml 我是最大的点边框:我是其中的双线小边框:我是其中的3D小边框:Show6.cssbigFrame display:block;border-style:dotted;border-top-width:15;font-size:18pt;color:red;width=260;height=150;smallFrame#01 display:block;border-style:double;font-size:12pt;color:blue;width=180;height=60;smallFrame#02 display:block;border-style:ridge;font-size:8pt;color:green;width=130;height=30;4.6 边框设置边框显示的效果图4.7 边缘 和边缘有关的属性：margin-top,margin-right,margin-bottom,margin-left 例如:margin-top:20 margin-right:40边缘是文本周围不可见的区域边缘是文本周围不可见的区域边缘是文本周围不可见的区域边缘是文本周围不可见的区域.例子7（P89）Cha3_7.xmI 高级灌水师 姓名：刘德华 发证单位：白宫 初级灌水师 姓名：华德刘 发证单位：宫白 Show7.cssgrade1 display:block;border-style:ridge;border-top-width:15;margin-top:2;margin-left:2;margin-right:2;text-align:center;font-size:12pt;color:red;width=230;height=100;grade2 display:block;border-style:dotted;border-top-width:15;margin-top:12;margin-left:2;margin-right:2;text-align:center;font-size:18pt;color:blue;width=230;height=100;name,authorized display:list-item;margin-left:22;text-align:center;font-size:18pt;color:green;4.7 边缘设置边框的边缘显示的效果图4.8 颜色和背景1.如果需要指定文本的字符颜色，可以设置color 属性，例如 color：rgb（100，255，23）；color：red；2.如果需要指定文本的背景颜色，可以设置 background-color属性，例如 background-color：rgb（150，205，223）；background-color：yellow；4.9 显示图像 1.可以通过background-image属性的值为文本指定一幅背景图像。例如 background-image：URL（文件名字）2.可以通过设置background-repeat属性设置图像是否通过重复出现来平铺，例如 background-repeat：repeat、repeat-x、repeat-y、no-repeat3.为了单独显示一幅图像，只要形式上为一个空标记指定一幅背景图像即可，由于空标记没有文本内容，其背景的大小为0*0，所以必须用block来组织文本，并使用width和height属性指定块区域的大小。例子8（P91）Cha4_8.xmI 俺是著名的演员潘江江，很多人使用俺的形象 Show8.csstom display:block;position:absolute;top:10;left:10;width:180px;height:300px;text-align:center;font-size:18pt;font-weight:bold;color:blue;border-style:double;background-image:URL(1.jpg);background-repeat:no-repeat;image display:block;position:absolute;top:10;left:200;width:300px;height:300px;border-style:groove;background-image:URL(2.gif);background-repeat:repeat;zi display:block;position:absolute;top:200;left:0;width:180px;height:200px;text-align:center;font-size:18pt;font-weight:bold;color:blue;4.9 显示图像 设置图象显示的效果图 4.10 设置鼠标的形状 可以通过cursor属性的值来指定鼠标指针在文字显示区域上面的形状,其属性值可以为：crosshair、hand、wait、default、help、text、move、auto等。Cha4_9.xml 鼠标在我上面是手的形状 鼠标在我上面是运动的形状 Show9.cssmouse#Aldisplay:block;cursor:hand;font-size:l6pt;color:red;width=l30;height=l00;border-style:double;mouse#A2mouse#A2 display:blockdisplay:block;cursor:movecursor:move;font-size:l6pt;font-size:l6pt;color:bluecolor:blue;width=l30;width=l30;height=l00;height=l00;bordeI-style:doublebordeI-style:double;4.11 处理层叠 以设置display：block为例，样式表所代表的文本将在浏览器的一个块区域中显示，那么样式表设置的显示区域就有可能发生重叠。我们通过设置z-index属性的值来规定一个样式表所在层，z-index取值可以是正整数，称为样式表的层数。当发生重叠时，层数大的样式表的显示区域将遮挡层数小的样式表的显示区域。注意:如果我们不使用z-index属性的值,后被使用的样式表的显示区域将遮挡先被使用的样式表的显示区域.当然当然当然当然,也可也可也可也可以是负数等以是负数等以是负数等以是负数等例子10（P94）Cha4_10.xml 站排要求：小个在前，大个在后。身高160厘米，在前面。身高170厘米，在后面。Show10.csspai display:block;font-size:15pt;color:rgb(10,10,100);position:absolute;top:15;left:40;width:500;height:500;xiao display:block;position:absolute;top:160;left:30;width:150px;height:150px;color:rgb(20,100,20);border-style:double;background-color:yellow;z-index:10;da display:block;position:absolute;top:60;left:120;width:150px;height:150px;color:rgb(255,100,255);border-style:double;background-color:rgb(128,255,255);z-index:5;4.11 处理层叠处理层叠显示的效果图本章总结CSS的介绍关联方式保存编码样式表各种显示样式