CSS与XML.ppt

《CSS与XML.ppt》由会员分享，可在线阅读，更多相关《CSS与XML.ppt（51页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第6 6章章 XMLXML与与CSSCSSCSSCSS简介简介6.1CSSCSS基本语法基本语法6.2CSSCSS属性的设置属性的设置6.3CSSCSS的链接的链接 6.5CSSCSS选择器选择器6.46.1 CSS6.1 CSS简介简介6.1.1 CSS基本概念基本概念CSS即层叠样式表（即层叠样式表（Cascading Style Sheet,CSS），是目前在浏览器上按一定格式显示），是目前在浏览器上按一定格式显示XML文档内容的主要方法之一。文档内容的主要方法之一。CSS样式表中包含了一组设置元素显示样式的规样式表中包含了一组设置元素显示样式的规则，最初被用来控制则，最初被用来控制H

2、TML文档内容的显示格式，文档内容的显示格式，同样能够用来控制同样能够用来控制XML文档内容的显示格式。文档内容的显示格式。XML和和HTML所采用的所采用的CSS语法是相通的，语法是相通的，都是通过一组特定的属性设置来规定某个都是通过一组特定的属性设置来规定某个元素内容的显示格式。可设置的元素显示元素内容的显示格式。可设置的元素显示属性包括：文字的字型、字体、大小和颜属性包括：文字的字型、字体、大小和颜色，元素内容在页面中的位置、是否分段、色，元素内容在页面中的位置、是否分段、对齐方式，是否添加边框、背景、下划线对齐方式，是否添加边框、背景、下划线等等。等等。创建专门的样式表文件，把控制元素

3、显示创建专门的样式表文件，把控制元素显示格式的相关指令放在其中，使其与格式的相关指令放在其中，使其与XML文文档的数据内容分开，可以大大提高控制档的数据内容分开，可以大大提高控制XML文档显示方式的灵活性，并可使得样文档显示方式的灵活性，并可使得样式表本身更加容易维护。式表本身更加容易维护。相对于相对于XSL（可扩展样式表语言）技术而（可扩展样式表语言）技术而言，采用言，采用CSS技术来显示技术来显示XML文档的做法文档的做法还是有局限性的。还是有局限性的。6.1.2 CSS的创建与应用的创建与应用1建立建立XML文档文档例如，可建立一个如书中所示的例如，可建立一个如书中所示的XML范例文档范

4、例文档Cha4_1.xml。2创建样式表文件创建样式表文件CSS样式表是一个以样式表是一个以.css为文件扩展名的纯文本文为文件扩展名的纯文本文件，可以使用件，可以使用“记事本记事本”等文本编辑器来建立等文本编辑器来建立CSS样式表文件。样式表文件。例如，可创建一个名为例如，可创建一个名为show1.css的简单的简单CSS样式样式表文件，用来设置上述表文件，用来设置上述Cha4_1.xml文档的显示格文档的显示格式。式。3链接样式表到链接样式表到XML文档文档为了引用创建好的样式表文件来格式化显为了引用创建好的样式表文件来格式化显示示XML文档的内容，必须将相应的样式表文档的内容，必须将相应

5、的样式表文件链接到这个文件链接到这个XML文档中。对于上面的文档中。对于上面的范例，只需在范例，只需在Cha4_1.xml文档中增加下面文档中增加下面的链接语句即可：的链接语句即可：6.2 CSS6.2 CSS基本语法基本语法1CSS语句的基本格式语句的基本格式CSS语句的基本格式如下：语句的基本格式如下：选择符选择符 属性属性1:属性值属性值1;属性属性2:属性值属性值2 其中：选择符（其中：选择符（selector）用来指定该规则所适用）用来指定该规则所适用的元素，由一个或多个元素名或特定的标识构成；的元素，由一个或多个元素名或特定的标识构成；紧跟其后的是用花括号紧跟其后的是用花括号“”括

6、起来的若干对属括起来的若干对属性名与相应的属性值，用来对选择符所指定的元性名与相应的属性值，用来对选择符所指定的元素设置具体的显示样式。素设置具体的显示样式。注意：花括号中的每一个属性名与相应的属性值注意：花括号中的每一个属性名与相应的属性值之间须用冒号之间须用冒号“:”分隔；而各对属性之间则须分隔；而各对属性之间则须用分号用分号“;”隔开。隔开。样式表文件也可以包含注释语句，添加注样式表文件也可以包含注释语句，添加注释文字有助于样式表更具可读性。注释语释文字有助于样式表更具可读性。注释语句由斜线加上星号句由斜线加上星号“/*”作为开始，以星作为开始，以星号加斜线号加斜线“*/”作为结束，在这

7、两个特定作为结束，在这两个特定标记之间可以输入任何想要说明的文字。标记之间可以输入任何想要说明的文字。2CSS中的注释中的注释对于对于IE 浏览器而言，浏览器而言，CSS中字母的大小写中字母的大小写是是不加区分不加区分的。但当的。但当CSS应用于应用于XML文档文档时，忽略字母的大小写将会带来一定的问时，忽略字母的大小写将会带来一定的问题。如果想使用题。如果想使用CSS来显示来显示XML文档，就文档，就应该让文档中各种元素的名称都完全不同，应该让文档中各种元素的名称都完全不同，而不仅仅是字母大小写的不同。而不仅仅是字母大小写的不同。3CSS中字母的大小写中字母的大小写4CSS中属性的继承中属性

8、的继承通常情况下，在通常情况下，在CSS中为某个元素所设置中为某个元素所设置的显示格式属性会影响到该元素所包含的的显示格式属性会影响到该元素所包含的所有子元素，除非这些子元素重新设置了所有子元素，除非这些子元素重新设置了不同的格式属性。不同的格式属性。5在在CSS使用中文使用中文由于由于CSS1在支持多种字符集方面表现不佳，在支持多种字符集方面表现不佳，在在CSS2中针对此问题作了改进。如果要在中针对此问题作了改进。如果要在CSS中使用中文简体字符集，需要在中使用中文简体字符集，需要在CSS文文件的第一行加上如下指令：件的第一行加上如下指令：charset gb2312;6.3 CSS6.3

9、CSS属性的设置属性的设置6.3.1 设置显示属性设置显示属性 元素的元素的display属性控制了浏览器显示该元素属性控制了浏览器显示该元素文字的基本方法。可为文字的基本方法。可为display属性指定下面属性指定下面4种种属性值中的任何一种。属性值中的任何一种。block将元素以块方式显示，通过换行与其将元素以块方式显示，通过换行与其他元素分开显示；他元素分开显示；inline在同一行显示元素；在同一行显示元素；list-item以列表方式显示元素；以列表方式显示元素；none隐藏元素，使元素在页面中不可见。隐藏元素，使元素在页面中不可见。6.3.2 设置字型属性设置字型属性1font-f

10、amily属性属性2font-size属性属性3font-style属性属性4font-weight 属性属性5font-variant 属性属性6font 属性属性设置字型属性示例：设置字型属性示例：XML文件：文件：XML基础教程基础教程耿祥义耿祥义清华大学出版社清华大学出版社21.00元元CSS文件：文件：bookbackground:#F0F2FF;color:Black;font:normal small-caps bolder 15pt Cambria,Times New Roman,宋体宋体,楷体楷体_GB2312,新宋体新宋体,幼圆幼圆;namefont-family:楷体楷体

11、_GB2312;font-size:30pt;display:block;authorfont-family:新宋体新宋体;color:#7B7CFF;display:block;publishercolor:#7B7B7B;display:block;pricefont-size:13pt;display:block;效果：效果：6.3.3 设置色彩属性设置色彩属性 与色彩设置有关的属性包括与色彩设置有关的属性包括color、background-color和和border-color等，其中等，其中应用最多的是应用最多的是color属性。可以使用英文的属性。可以使用英文的颜色名称，也可以使

12、用任何一种颜色名称，也可以使用任何一种RGB 格式格式来作为色彩属性值。来作为色彩属性值。6.3.4 设置文本属性设置文本属性1letter-spacing属性属性2word-spacing属性属性3vertical-align属性属性4text-align属性属性5text-indent属性属性6line-height属性属性7text-transform属性属性8text-decoration属性属性6.3.5 设置边框属性设置边框属性1border-style属性属性2border-color属性属性3border-width属性属性4border属性属性6.3.6 设置布局属性设置布局

13、属性1设置元素位置与大小设置元素位置与大小2margin属性属性3padding属性属性布局属性示例：布局属性示例：css文件：文件：pdisplay:block;.txtmargin-top:15mm;margin-bottom:15mm;margin-left:25mm;margin-right:25mm;xmlxml文件：文件：奥林匹克格言奥林匹克格言(Olympic Motto)亦称奥林匹克口号。奥林匹克运动亦称奥林匹克口号。奥林匹克运动有一句著名的格言有一句著名的格言:“更快、更高、更强。更快、更高、更强。”这一格言是顾拜旦的好友、巴黎阿奎埃尔这一格言是顾拜旦的好友、巴黎阿奎埃尔修道

14、院院长迪东修道院院长迪东(Henri Didon)在他的学生举行的一次户外运动会上在他的学生举行的一次户外运动会上,鼓励学生们时说过鼓励学生们时说过的一句话，他说：的一句话，他说：“在这里，你们的口号是：更快、更高、更强。在这里，你们的口号是：更快、更高、更强。”这句口号的希腊这句口号的希腊语是：语是：“citius，altius，fortius.2005年年6月月26日，在北京工人体育馆举行的发布仪式上，北京奥日，在北京工人体育馆举行的发布仪式上，北京奥组委宣布组委宣布“同一个世界、同一个梦想同一个世界、同一个梦想”(Oneworld、One dream)成为北京成为北京2008年奥运年奥运

15、会中英文主题口号。会中英文主题口号。效果：效果：6.3.7 设置背景属性设置背景属性1background-color属性属性2background-image属性属性3background-repeat属性属性4background-position属性属性5background-attachment属性属性6.3.8 设置鼠标形状设置鼠标形状cursor:hand;6.3.9 处理层叠处理层叠z-index:5;6.4 CSS选择器选择器1元素选择器元素选择器2通配选择器通配选择器3CLASS选择器选择器4ID选择器选择器5伪类选择器伪类选择器6层次选择器层次选择器7子选择器子选择器8相邻

16、兄弟选择器相邻兄弟选择器9属性选择器属性选择器1 1元素选择器元素选择器基本格式：基本格式：tagName1,tagName2 property:value例：例：h1,h2,h3 color:#000000;background-color:#FFFFFF;font-family:arial,verdana,sans-serif;font-weight:bold;h3 font-style:italic;2 2通配选择器（通配选择器（*）它为页面中所有元素添加样式，就像是一它为页面中所有元素添加样式，就像是一个通配符，举例：个通配符，举例：*color:blue;/*通配选择器，等价于列出了

17、文档中所有通配选择器，等价于列出了文档中所有元素的元素的color属性均为属性均为blue，它的优先级很低，它的优先级很低*/*.p font-weight:bold;/*类选择器，运用到所有类为类选择器，运用到所有类为p的的元素上，可以忽略元素上，可以忽略(*)号，等价于号，等价于.p*/3 3CLASSCLASS选择器选择器基本格式：基本格式：tagName.classValue property:value例：例：.p font-weight:bold;/*类选择器，运用到所有类为类选择器，运用到所有类为p的元的元素上素上*/4 4IDID选择器选择器基本格式：基本格式：tagName#

18、idValue property:value例：例：#div color:red;#div.div color:red;/*ID选择器与类选择选择器与类选择器的结合，可以这么写的，且先后顺序可器的结合，可以这么写的，且先后顺序可以颠倒以颠倒*/5 5伪类选择器伪类选择器作用是对链接的不同状态定义不同的呈现作用是对链接的不同状态定义不同的呈现样式。样式。IE6.0部分不支持。部分不支持。基本格式：基本格式：a:link a:visited a:hover a:active 举例举例p width:500px;/*使用使用:first-line前先设置前先设置元素宽度，如果未指定对象的元素宽度，如

19、果未指定对象的width属性，属性，首行的内容长度随窗口宽度而定首行的内容长度随窗口宽度而定*/p:first-line color:red;/*不管是否设置了不管是否设置了p的宽度，的宽度，p元素内第一段文字总是以红色元素内第一段文字总是以红色显示显示*/p:first-letter font-size:2em;6 6使用层次选择器使用层次选择器表明一个元素是另一个元素的后代结点。例：time hour display:inline;font-size:56pt;color:rgb(0,255,0);7 7子选择器（子选择器（IE6.0IE6.0不支持）不支持）语法：parent child

20、 property:value8 8相邻兄弟选择器（相邻兄弟选择器（IE6.0IE6.0不支持）不支持）语法：firstTagName+secondTagName property:value9 9属性选择器（属性选择器（IE6.0IE6.0不支持）不支持）基本格式：基本格式：tagNameattribute property:value例：例：ahref color:yellow;/*匹配所有具有匹配所有具有href属性的属性的a元素元素*/*title font-weight:bold;/*匹配所有具有匹配所有具有title属属性的元素性的元素*/ahreftitle color:red;

21、/*匹配所有有匹配所有有title属性且属性且有有href属性的的属性的的a元素元素*/6.5 CSS6.5 CSS的链接的链接6.5.1 使用一般链接指令使用一般链接指令 一般可以在一般可以在XML文档的开头使用文档的开头使用xml-stylesheet处理指令将指定的处理指令将指定的CSS样式表链接进来。样式表链接进来。其格式为：其格式为：其中：其中：?xml-stylesheet表示当前表示当前XML文档在显示时需文档在显示时需要使用样式单；要使用样式单；type=text/css 表示使用表示使用CSS类型的样式单；类型的样式单；href=url用来指定样式单文件的用来指定样式单文件的

22、URL。6.5.2 使用使用import指令指令 允许在样式表中使用允许在样式表中使用 import 指令来引入指令来引入一个或多个独立保存的样式表，即将这些样式表一个或多个独立保存的样式表，即将这些样式表包含的规则添加到当前样式表中来。其格式为：包含的规则添加到当前样式表中来。其格式为：import url(StyleSheetURL);其中其中StyleSheetURL 表示想要引入的样式表表示想要引入的样式表文件的文件的URL，可以是本地或网络上样式表文件的，可以是本地或网络上样式表文件的绝对路径或相对路径。绝对路径或相对路径。注意：本指令必须放置在注意：本指令必须放置在CSS样式表的开

23、头，样式表的开头，且尾部的分号且尾部的分号“；”不能少。不能少。示例：示例：import url(show1.css);6.5.3 样式应用说明样式应用说明如果如果XML文档中的某些元素添加了文档中的某些元素添加了STYLE属性，则浏览器将根据这个属性，则浏览器将根据这个STYLE属性设属性设定的属性值来显示这些元素，而不管在定的属性值来显示这些元素，而不管在CSS样式表中作了何种设置。样式表中作了何种设置。在在CSS中的上下文选择符，比一般的选择中的上下文选择符，比一般的选择符具有更高的优先权。符具有更高的优先权。如果没有为子元素设置特定的样式规则，如果没有为子元素设置特定的样式规则，将会自

24、动继承父元素的规则。将会自动继承父元素的规则。示例示例:import url(outCss.css);张三张三男男如果在样式表中并没有为某个元素设置样如果在样式表中并没有为某个元素设置样式规则，也没有父元素的样式规则可以继式规则，也没有父元素的样式规则可以继承，则浏览器将使用自己设定的规则。承，则浏览器将使用自己设定的规则。如果在同一个层级中，某个元素的属性被如果在同一个层级中，某个元素的属性被赋予了冲突的属性值，则浏览器将会采用赋予了冲突的属性值，则浏览器将会采用所处理的最后属性设定。所处理的最后属性设定。可以使用可以使用!important 关键字来特别声明该关键字来特别声明该规则是重要的

25、和必需使用的。规则是重要的和必需使用的。学校概况学校概况机构设置机构设置教育教学教育教学关于我们关于我们联系联系我们我们Supercars for the super-richHome河北师范大学是一所具有百年历史和光荣传统的省属重点大学。河北师范大学是一所具有百年历史和光荣传统的省属重点大学。学校起源于学校起源于1902年创建于北京的顺天府学堂和年创建于北京的顺天府学堂和1906年创建于天津的北洋女师范学堂。年创建于天津的北洋女师范学堂。1996年年6月，原月，原河北师范大学、河北师范学院与创建于河北师范大学、河北师范学院与创建于1952年的河北教育学院、创建于年的河北教育学院、创建于198

26、4年的河北职业技术师范学年的河北职业技术师范学院合并，组建成新的河北师范大学，是我国较早建立、目前规模较大的高等师范院校之一。校友中有院合并，组建成新的河北师范大学，是我国较早建立、目前规模较大的高等师范院校之一。校友中有老一代革命家邓颖超、刘清扬、郭隆真、杨秀峰、康士恩、荣高棠等，有学界名人梁漱溟、张申府、老一代革命家邓颖超、刘清扬、郭隆真、杨秀峰、康士恩、荣高棠等，有学界名人梁漱溟、张申府、汤用彤等，有中科院院士严陆光、郝柏林等，也有许绍发、蔡振华等一批体育界精英。新中国成立以汤用彤等，有中科院院士严陆光、郝柏林等，也有许绍发、蔡振华等一批体育界精英。新中国成立以来，学校共为国家培养了来，

27、学校共为国家培养了19万余名专业人才。万余名专业人才。more.tag_boxwidth:405px;height:206px;border:1px solid#B0BEC7;font:12px Arial,Helvetica,sans-serif;margin:10px;overflow:hidden;display:block;.tag_box ul.menulist li acolor:#18397C;text-decoration:none;display:line;width:80px;border-bottom:1px solid#93A6B4;background:url(tag

28、_pipe.gif)no-repeat right 1px;.tag_box ul.menulist li a.curMenubackground:url(tag_pipe_gif)repeat-x;border:1px solid#91A7B4;border-bottom:none;width:80px;color:#c63;font-weight:bold;height:21px;z-index:100;.tag_content img.bigConImgbackground-image:url(hebtu.GIF);width:119px;height:105px;margin-top:5px;margin-left:5px;border:1px solid#788a98;display:block;float:left;效果：效果：