使用CSS格式化XML.docx
- 文档编号:28414685
- 上传时间:2023-07-13
- 格式:DOCX
- 页数:23
- 大小:47.15KB
使用CSS格式化XML.docx
《使用CSS格式化XML.docx》由会员分享,可在线阅读,更多相关《使用CSS格式化XML.docx(23页珍藏版)》请在冰豆网上搜索。
使用CSS格式化XML
使用CSS格式化XML
第5章使用CSS格式化XML
XML文档的特点是将数据和数据的样式进行了分离,XML文档侧重于数据的存储和传输,数据的显示需通过其它的技术来实现,即层叠样式表CSS(CascadingStyleSheets)和可扩展样式表语言XSL。
5.1CSS技术简介
CSS最初是用于制定HTML文档显示格式的,现在用来对XML文档进行简单的样式规划。
CSS的主要作用是定义一个标记或一类标记的显示样式,以便实现对于一个页面样式的独立管理。
CSS称为“层叠样式表”的“层叠”的意义:
当一个文档的两种或多种样式发生矛盾时,执行的效果要按照“层叠规则”来判断。
层叠规则:
如果标记的样式定义发生冲突时,靠近标记的定义将生效。
一个CSS样式表就是一组规则。
每个规则给出此规则所适用的元素的名称,和一组适用于此元素具体属性的值。
例:
book.css
5.2链接CSS和XML文档
5.2.1使用xml:
stylesheet处理指令
使用css:
stylesheet需要按照如下步骤:
(1)创建XML文档;
(2)创建格式化XML文档的样式表;
(3)将CSS文档和XML文档结合起来,查看结果。
一、外部样式文件(样式的直接指定法)
:
即直接指定某一标记的属性值。
例5.1四大名著.xml
xmlversion="1.0"encoding="gb2312"?
>
主要人物:
贾宝玉,林黛玉,薛宝钗
主要人物:
唐僧,孙悟空,猪八戒,沙僧
主要人物:
关羽,诸葛亮,曹操
主要人物:
李逵,鲁智深,高球
例5.2四大名著.CSS
books{display:
block;font-size:
22pt;}
book
{
display:
block;
background-color:
#ffbb11;
color:
blue;
margin-top:
10px
}
name
{
display:
block;
color:
black;
}
author{display:
block;color:
red;}
price{display:
block;}
最后:
将CSS文档和XML文档结合起来,查看结果:
在XML头部加一条处理指令:
xml-stylesheettype="text/css"href="四大名著.css"?
>
xml-stylesheet?
>:
处理指令,也可以:
xml:
stylesheet?
>
Type:
指定样式文档的类型。
Href:
指定CSS文档的URL,该URL可以是本地路径或Internet的相对路径或绝对路径。
绝对路径:
注意:
应用样式表的处理指令只能放在XML文档序言中的XML声明之后。
提示:
xml-stylesheettype="text/css"href="四大名著.css"?
>的作用:
(1)告诉IE这里不再使用XML文件的默认样式(树状结构图)。
(2)告诉IE使用href指定的样式。
问:
提示:
如果XML文档中有一个标记没有定义样式,则该标记将使用它的父标记样式,这种机制称为样式的继承。
提示:
如果没有指定子元素的字号、颜色等属性,则该元素将继承其父元素的属性,不备继承的属性一般有背景、边框等。
二、将样式语句嵌入到XML文件当中
即直接将样式语句写在XML文档内部。
例:
四大名著内部样式.xml
xmlversion="1.0"encoding="gb2312"?
>
xml:
stylesheettype="text/css"?
>
html="http: //www.w3.org/Profiles/XHTML-transitional"> style> @charset"GB2312" books{display: block;font-size: 22pt;} book { display: block; color: blue; margin-top: 40px } Name { display: block; color: red; font-family: 楷体; } Author{display: block;color: green;} price{display: block;} style> 主要人物: 贾宝玉,林黛玉,薛宝钗 …… 说明: style>: 表示style来自于html标准。 @charset"GB2312",@charset规则用来指定样式表使用的字符集,此处为Windows下的汉字字符集GB2312。 要设置汉字字体必须有该指令,否则全部为浏览器默认字体,如IE默认汉字字体为宋体(用户也可以自定义)。 @charset规则只在外部样式表文件内使用,只允许使用一次,且必须为样式表的第一行。 三、混合的方法指定样式 可以综合使用上面两种方法给XML文档添加样式,当所添加的样式中有些规则发生矛盾时,以内部方法定义的为主。 例: 四大名著混合样式.xml 5.2.2使用@import指令和! important声明 一、使用@import指令 Import语句是一种文件包含功能,提供了一种将多个CSS文件集成一个CSS文件的途径。 语法格式: @importurl(URL); 其中: URL为被引用的样式单地址。 注意: @import指令必须放在文件的开头,即任何规则之前。 如果被引用的样式表中的格式与引用者的格式冲突,则引用者中的格式优先。 如果引用的多个外部样式表格式冲突,则就近使用其中的格式。 @import指令末尾的分号(;)不能少。 例import示例.xml xmlversion="1.0"encoding="gb2312"? > xml: stylesheettype="text/css"href="importschool.css"? > 信管061的帅哥 例importschool.css school{display: block; font-size: 20pt; color: blue; margin-top: 40px } 例importclass.css @importurl(importschool.css) Class{display: block;} monitor{display: block; color: black;} 二、! important声明 “! important”声明用于将规则声明为重要的。 其作用是: 可以改变默认样式的层叠规则。 如把! important声明与属性连接起来,则该属性将不被覆盖。 例importschoolimportant.css school{font-size: 20pt;color: red! important} school{color: blue;} 注意: 属性与! important之间紧密相连。 三、使用多个样式文件 一个样式文件可以被多个XML文档调用,同时一个XML文档也能够调用多个样式文件。 例使用多个样式文件1.css school{font-size: 20pt;color: red;} 例使用多个样式文件2.css class{display: block;} monitor{display: block;color: green;} 修改import示例.xml为 例使用多个样式文件.xml xmlversion="1.0"encoding="gb2312"? > xml: stylesheettype="text/css"href="使用多个样式文件1.css"? > xml: stylesheettype="text/css"href="使用多个样式文件2.css"? > 信管061的帅哥 5.3CSS样式的使用 CSS样式表语法格式: 选择符{属性1: 属性值1;[属性2: 属性值2;…]} 说明: 选择符: 可以是多个元素、带有特定CLASS或ID特性的元素以及其它与元素内容相关的特殊选择符; 属性: 控制元素的各种特性。 5.3.1选择元素 1、同时选择多个元素 例刘心武.xml xmlversion="1.0"encoding="gb2312"? > xml: stylesheettype="text/css"href="刘心武.css"? > html="http: //www.w3.org/profiles/XHTML-transtional"> 45 imgsrc="11.jpg"/> imgsrc="zhuxun.jpg"/> imgsrc="xiaoya.jpg"/> 例刘心武.css students{display: block;} student{display: block;} stuid,name{display: block;font-size: 20pt;color: blue;} name: first-letter{font-size: 200%;color: black;} sex,age{font-style: italic;} sex{font-size: 200%;} (1)将一个规则同时用于多个元素,元素之间用逗号分隔。 stuid,name{display: block;font-size: 20pt;color: blue;} (2)为同一个元素指定多个规则 sex,age{font-style: italic;} sex{font-size: 200%;} 2、伪元素 伪元素通常是元素内容的第一个字符或第一行,对伪元素可以使用不同的格式。 (1)特殊化首字符,使用first-letter选择 name: first-letter{font-size: 200%;color: black} 表示: 该元素内容的第一个字符以父元素字号的两倍大小显示。 (2)特殊化首行,使用first-line选择 3、伪类 使用CLASS属性(伪类)为相同元素的不同内容指定不同的格式。 即是说,使用CLASS方法,是独立于标记定义了一种样式,哪个标记调用了该样式,哪个标记就会具有使用CLASS所定义的样式。 第一种方法: (1)在student.css文件中增加: .nameclass{font-size: 200%;color: red;text-align: center;} .femaleclass{text-decoration: underline;color: green;} (2)在欲使用该样式的元素中增加属性: class="nameclass" 或class="femaleclass" 例: 具体见student.xml 4、ID属性 ID与CLASS属性类似,用于选择同一元素的不同对象。 但ID侧重于定义一个元素的独有特性,CLASS侧重于定义一类元素的公有样式。 (1)在刘心武.css文件中增加: #nameid{font-size: 200%;color: purple;text-align: center;} #sexid{text-decoration: underline;color: purple;} (2)在欲使用该样式的元素中增加属性: id="nameid" 或id="sexid" 如刘心武.xml中改为: 45 imgsrc="11.jpg"/> 注意: 在同时使用CLASS和ID属性时,如果遇到冲突的情况,将优先选择ID属性指定的方式。 5、STYLE属性 使用style属性可以将元素格式属性直接放在XML文档中格式化元素。 xmlversion="1.0"encoding="gb2312"? > xml: stylesheettype="text/css"href="E: \2006-2007-1-xml\examples\刘心武.css"? > html="http: //www.w3.org/profiles/XHTML-transtional"> purple;text-align: right;"> imgsrc="11.jpg"/> …… 提示: 当STYLE的显示样式与CSS样式单中的样式冲突时,STYLE样式优先。 5.3.2在CSS样式单中使用注释 语法格式: /*…*/ 例: /*这是注释*/ /*stuid,name{display: block;font-size: 20pt;color: blue;}*/ 5.3.3CSS中的属性和属性值 CSS规则通过属性的名-值对设定。 属性名称: 都是CSS的关键字。 属性值: 分为关键字、颜色、URL和长度共4类。 1、CSS关键字 一些属性值可以使用关键字来设置,如italic、xx-small等。 注意: CSS不区分关键字的大小写。 2、颜色值 使用颜色值的属性有: Color(文字颜色) Background-color(背景色) Border-color(边框颜色) 设置颜色值的4种方式: 名称: 如red、black、gray、green、fuchsia等 十进制RGB: rgb(255,0,0)、rgb(255,255,255)、rgb(255,0,0)等 十六进制RGB: #FFFFFF,#AABB22,#FFCC00等 百分数: rgb(0%,0%,0%)、rgb(20%,60%,60%)、rgb(100%,30%,50%)等 注意: color属性值允许被其子元素继承。 3、URL值 使用属性值为URL值的属性有: Background-image(背景图片) List-style-image(列表样式图片) List-style(列表样式) URL值通常放在“url()”的括号之内。 4、长度属性值 长度属性值可以使用3种方式表示: 绝对长度: 英寸(in)、厘米(cm)、毫米(mm)、磅(pt) 相对长度: 像素单位(px) 百分数: 是一种相对表示方式。 例: sex{font-size: 200%;}表示sex元素内容以其父元素字号的两倍大小显示。 5.3.4设置display属性 display属性: 设置元素内容的显示方式。 display属性的4个属性: none: 用于隐藏元素,不显示任何信息。 block: 表示所要显示的信息要独占一行(即成为一个段落)。 inline: 所要显示的信息在一行内排列,为默认方式。 list-item: 以列表方式显示。 注意: display属性不能被继承。 与list-item相关联的几个属性: 例、studentdisplay.css 1.list-style-type: 列表项前面的项目符号类型 默认值为disc(点)。 另外有circle、square、decimal、lower-roman、uper-roman、lower-alpha、uper-alpha等。 例: student{display: list-item;list-style-type: circle;} 2.list-style-image: 指定图片作为项目符号 例: student{display: list-item;list-style-image: url(zhaolin.jpg)} 3.list-style-image: 指定项目符号出现的位置 通过属性值inside、outside指定项目符号出现在文本块内和文本块外。 4.list-style: 简洁方式设定list-item的各种属性 例: student{display: list-item;list-style: noneinsideurl(03.gif)} 5.3.5设置whitespace属性 : 设置文本中的空白(包括空格、制表符和换行符)。 其属性值有: Normal: 默认值,将文本中的空白压缩成一个空格。 Pre: 将文本中的所有空白全部保留。 Nowrap: 将连串空白压缩成衣俄空格,但强调文本中的换行符号。 提示: 具体情况根据IE的版本号不同而不同。 5.3.6设置字体属性 CSS1支持六种字体属性: 1.font-family(字体的显示风格)属性,例: student{font-family: 隶书;} 2.font-style(字型风格)属性: normal(正常)、italic(斜体)、oblique(倾斜体)。 3.font-size(字体大小)属性: 可以使用关键字、相对大小、相对百分比和绝对大小设置属性值。 (1)font-size关键字 使用xx-small、x-small、small、medium(默认值,)、x-largex-large、xx-large关键字表示字号的绝对大小。 (2)相对大小: 指相对于父元素而言。 使用smaller(比父元素大一些)或large(比父元素小一些),并没有具体的数字可量化。 (3)相对百分比: 相对于父元素的百分数设置字号大小。 如: sex{font-size: 200%;} (4)绝对大小: 使用英寸、厘米、像素和磅等长度值设置字号的绝对大小。 Sex{font-size: 30;} 4.font-weight(字体粗细)属性 属性值有: Lighter、Normal、Bold、Bolder等。 5.font-variant 属性值: normal(默认值)、small-caps(全部转变为大写) 6.font: 用于简洁地以一条规则设置字体样式 5.3.7设置color属性 5.3.8设置背景属性 用于为元素内容的背景设置一种颜色或一幅图像。 1.background-color: 设置背景颜色,同color 2.background-image: 设置背景图片。 3.background-repeat: 指定背景图像的平铺属性。 Repeat: 在水平和垂直方向同时平铺。 Repeat-x: 仅在水平方向平铺。 Repeat-y: 仅在垂直方向平铺。 No_repeat: 图像不平铺。 例背景.xml 背景.css 3.background属性: 在一条规则中同时设置多种属性。 另外还有: background-repeat、background-attachment、background-attachposition属性。 5.3.9设置文本属性 1.text-decoration(装饰特色)属性,属性值有: None: 默认值 Underline: 加下划线 Overline: 加上划线 Line-through: 加删除线 Blink: 使文本闪烁 2.text-align(文本块的对齐方式): left、right、center、justify(两端对齐) 注意: 在规则中必须将文本以块显示才能使用text-align属性。 3.text-transform(大小写转换)的属性,属性值有: Uppercase: 元素中的文本全部大写 Lowercase: 元素中的文本全部大写 Capitalize: 单词的首字母大写 5.3.10设置边框属性 1.设置页边距的属性有: margin-top、margn-bottom、margn-left、margn-right和margn,它们分别为设置上
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用 CSS 格式化 XML