《第6章 XML与CSS教程文件》由会员分享，可在线阅读，更多相关《第6章 XML与CSS教程文件（51页珍藏版）》请在金锄头文库上搜索。
1、第6章 XML与CSS,6.1 CSS简介,6.1.1 CSS基本概念 CSS即层叠样式表（Cascading Style Sheet, CSS），是目前在浏览器上按一定格式显示XML文档内容的主要方法之一。 CSS样式表中包含了一组设置元素显示样式的规则，最初被用来控制HTML文档内容的显示格式，同样能够用来控制XML文档内容的显示格式。,XML和HTML所采用的CSS语法是相通的，都是通过一组特定的属性设置来规定某个元素内容的显示格式。可设置的元素显示属性包括：文字的字型、字体、大小和颜色，元素内容在页面中的位置、是否分段、对齐方式，是否添加边框、背景、下划线等等。,创建专门的样式表文件，
2、把控制元素显示格式的相关指令放在其中，使其与XML文档的数据内容分开，可以大大提高控制XML文档显示方式的灵活性，并可使得样式表本身更加容易维护。 相对于XSL（可扩展样式表语言）技术而言，采用CSS技术来显示XML文档的做法还是有局限性的。,3链接样式表到XML文档,为了引用创建好的样式表文件来格式化显示XML文档的内容，必须将相应的样式表文件链接到这个XML文档中。对于上面的范例，只需在Cha4_1.xml文档中增加下面的链接语句即可： ,6.2 CSS基本语法,1CSS语句的基本格式 CSS语句的基本格式如下： 选择符 属性1:属性值1;属性2:属性值2 ,其中：选择符（selector
3、）用来指定该规则所适用的元素，由一个或多个元素名或特定的标识构成；紧跟其后的是用花括号“ ”括起来的若干对属性名与相应的属性值，用来对选择符所指定的元素设置具体的显示样式。 注意：花括号中的每一个属性名与相应的属性值之间须用冒号“:”分隔；而各对属性之间则须用分号“;”隔开。,样式表文件也可以包含注释语句，添加注释文字有助于样式表更具可读性。注释语句由斜线加上星号“/*”作为开始，以星号加斜线“*/”作为结束，在这两个特定标记之间可以输入任何想要说明的文字。,2CSS中的注释,对于IE 浏览器而言，CSS中字母的大小写是不加区分的。但当CSS应用于XML文档时，忽略字母的大小写将会带来一定的问
4、题。如果想使用CSS来显示XML文档，就应该让文档中各种元素的名称都完全不同，而不仅仅是字母大小写的不同。,3CSS中字母的大小写,4CSS中属性的继承,通常情况下，在CSS中为某个元素所设置的显示格式属性会影响到该元素所包含的所有子元素，除非这些子元素重新设置了不同的格式属性。,5在CSS使用中文,由于CSS1在支持多种字符集方面表现不佳，在CSS2中针对此问题作了改进。如果要在CSS中使用中文简体字符集，需要在CSS文件的第一行加上如下指令： charset gb2312;,6.3 CSS属性的设置,6.3.1 设置显示属性 元素的display属性控制了浏览器显示该元素文字的基本方法。可
5、为display属性指定下面4种属性值中的任何一种。 block将元素以块方式显示，通过换行与其他元素分开显示； inline在同一行显示元素； list-item以列表方式显示元素； none隐藏元素，使元素在页面中不可见。,6.3.2 设置字型属性,1font-family属性 2font-size属性 3font-style属性 4font-weight 属性 5font-variant 属性 6font 属性,设置字型属性示例：, ,XML文件：, XML基础教程 耿祥义 清华大学出版社 21.00元 ,CSS文件：,book background:#F0F2FF; color:Bla
6、ck; font:normal small-caps bolder 15pt Cambria,Times New Roman,宋体,楷体_GB2312,新宋体,幼圆; name font-family:楷体_GB2312; font-size:30pt; display:block; ,author font-family:新宋体; color:#7B7CFF; display:block; publisher color:#7B7B7B; display:block; price font-size:13pt; display:block; ,效果：,6.3.3 设置色彩属性,与色彩设置有关
7、的属性包括color、background-color和border-color等，其中应用最多的是color属性。可以使用英文的颜色名称，也可以使用任何一种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属
8、性 4border属性,6.3.6 设置布局属性,1设置元素位置与大小 2margin属性 3padding属性,布局属性示例：,css文件： p display:block; .txt margin-top:15mm; margin-bottom:15mm; margin-left:25mm; margin-right:25mm; ,xml文件：, 奥林匹克格言(Olympic Motto)亦称奥林匹克口号。奥林匹克运动有一句著名的格言:“更快、更高、更强。”这一格言是顾拜旦的好友、巴黎阿奎埃尔修道院院长迪东(Henri Didon)在他的学生举行的一次户外运动会上,鼓励学生们时说过的一句话
9、，他说：“在这里，你们的口号是：更快、更高、更强。”这句口号的希腊语是：“citius，altius，fortius. 2005年6月26日，在北京工人体育馆举行的发布仪式上，北京奥组委宣布“同一个世界、同一个梦想”(Oneworld、One dream)成为北京2008年奥运会中英文主题口号。 ,效果：,6.3.7 设置背景属性,1background-color属性 2background-image属性 3background-repeat属性 4background-position属性 5background-attachment属性,6.3.8 设置鼠标形状,cursor:hand
10、;,6.3.9 处理层叠,z-index:5;,6.4 CSS选择器,1元素选择器 2通配选择器 3CLASS选择器 4ID选择器 5伪类选择器 6层次选择器 7子选择器 8相邻兄弟选择器 9属性选择器,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通配选择器（*）,它为页面中所
11、有元素添加样式，就像是一个通配符，举例： * color:blue;/* 通配选择器，等价于列出了文档中所有元素的color属性均为blue，它的优先级很低 */ *.p font-weight:bold;/* 类选择器，运用到所有类为p的元素上，可以忽略(*)号，等价于.p */,3CLASS选择器,基本格式： tagName.classValue property:value 例： .p font-weight:bold;/* 类选择器，运用到所有类为p的元素上 */,4ID选择器,基本格式： tagName#idValue property:value 例： #div color:red
12、; #div.div color:red;/* ID选择器与类选择器的结合，可以这么写的，且先后顺序可以颠倒 */,5伪类选择器,作用是对链接的不同状态定义不同的呈现样式。IE6.0部分不支持。 基本格式： a:link a:visited a:hover a:active ,举例,p width:500px;/* 使用:first-line前先设置元素宽度，如果未指定对象的width属性，首行的内容长度随窗口宽度而定 */ p:first-line color:red;/* 不管是否设置了p的宽度，p元素内第一段文字总是以红色显示 */ p:first-letter font-size:2e
13、m;,6使用层次选择器,表明一个元素是另一个元素的后代结点。 例： time hour display:inline; font-size:56pt; color:rgb(0,255,0); ,7子选择器（IE6.0不支持）,语法： parent child property:value,8相邻兄弟选择器（IE6.0不支持）,语法： firstTagName + secondTagName property:value,9属性选择器（IE6.0不支持）,基本格式： tagNameattribute property:value 例： ahref color:yellow;/* 匹配所有具有hr
14、ef属性的a元素 */ *title font-weight:bold;/* 匹配所有具有title属性的元素 */ ahreftitle color:red;/* 匹配所有有title属性且有href属性的的a元素 */,6.5 CSS的链接,6.5.1 使用一般链接指令 一般可以在XML文档的开头使用xml-stylesheet处理指令将指定的CSS样式表链接进来。其格式为： 其中： ?xml-stylesheet表示当前XML文档在显示时需要使用样式单； type=text/css表示使用CSS类型的样式单； href=url用来指定样式单文件的URL。,6.5.2 使用import指令
15、,允许在样式表中使用 import 指令来引入一个或多个独立保存的样式表，即将这些样式表包含的规则添加到当前样式表中来。其格式为： import url(StyleSheetURL); 其中StyleSheetURL 表示想要引入的样式表文件的URL，可以是本地或网络上样式表文件的绝对路径或相对路径。 注意：本指令必须放置在CSS样式表的开头，且尾部的分号“；”不能少。,示例：,import url(show1.css);,6.5.3 样式应用说明,如果XML文档中的某些元素添加了STYLE属性，则浏览器将根据这个STYLE属性设定的属性值来显示这些元素，而不管在CSS样式表中作了何种设置。
16、在CSS中的上下文选择符，比一般的选择符具有更高的优先权。 如果没有为子元素设置特定的样式规则，将会自动继承父元素的规则。,示例:, import url(outCss.css); 张三 男 ,如果在样式表中并没有为某个元素设置样式规则，也没有父元素的样式规则可以继承，则浏览器将使用自己设定的规则。 如果在同一个层级中，某个元素的属性被赋予了冲突的属性值，则浏览器将会采用所处理的最后属性设定。 可以使用 !important 关键字来特别声明该规则是重要的和必需使用的。, 学校概况机构设置教育教学关于我们联系我们 Supercars for the super-richHome 河北师范大学是一所具有百年历史和光荣传统的省属重点大学。学校起源于1902年创建于北京的顺天府学堂和1906年创建于天津的北洋女师范学堂。1996年6月，原河北师范大学、河北师范学院与创建于1952年的河北教育学院、创建于1984年的河北职业技术师范学院合并，组建成新的河北师范大学，是我国较早建立、目前规模较大的高等师范院校之一。校友中有老一代革命家邓颖超、刘清扬、郭隆真、杨秀峰
