XML使用CSS格式化XML
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
chap03/HelloCSS.xml
xsampdoc { color:navy; display:block } greeting { font-family: Arial;font-size: 32pt; width: 30em; color: red } question { font-size: x-large;color: black } answer.ans { font-size: 20pt;color: blue chap03/Hello.css }
• • • • • • • • • items#01 { display:block; left=100; top=100; width=200; height=100; } #02
行方式Display:line example3
个行将按顺序按行显示,也可以指定position属性值,子标记从属于父标记的 显示格式设置,如果父标记为 块方式,则子标记为块中的行. • items • { • display:block; • left=100; top=100; • width=200; height=100; • color:red; • } • name,desc • { display:line; size:22pt; color:blue; }
显示图象 example6
• 可以通过设置background-image属性的值为文本指 定一幅背景图片; • URL(图象文件名字); • 例如: • background-image:URL(pic1.gif); • 可以使用background-repeat属性设置图象是否通过 重复出现来平铺背景; • background-repeat的取值如下: • repeat,repeat-x,repeat-y,no-repeat; • 例如: • background-repeat:no-repeat;
边框-----3
• 其中color属性可以设置多个值, • 如果设置一个值,那么四条边框颜色值相 同; • 如果设置两个值,那么上,下边框的颜色值 和颜色值1相同,左右边框颜色和颜色2相 同; • 如果设置4个值,按上,右,下,左的顺序分配 颜色; • 如:border-style:inset;bordercolor:rgb(12,255,220);
按列表方式:display:list-item example4
• List-item相关属性:list-style-type用来更改符号外 观 • disc 圆盘 • circle 圆圈 • square 方块 • decimal 十进制数字` • lower-roman 小写罗马数字 • upper-roman 小写罗马数字 • lower-alpha 小写英文字母 • upper-alpha 大写英文字母
命名空间用于避免命名冲突应用css和xsl显示xml文档数据识别书写简单的css样式表为什么需要样式表xml数据本身并不包含数据显示的信息chap03cssexample1xmlexample1css什么是样式表描述结构文档表现方式的文档使用样式表的意义数据或内容与表示层分开writeoncepublisheverywherewriteoncepublisheverywherew3c推荐的样式表标准
边缘
• 边缘是文本周围不可见的区域,如果文本按 块显示,边缘就是块的边缘; • 如果文本按行显示,边缘就是行的边缘,列表 项也是如此; • 和边缘有关的属性包括: • margin-top,margin-right,margin-bottom,marginleft; • 如: • margin-top:20;设置有边缘的大小,单位是像素;
边框---1 example5
• • • • • • • 设置边框的属性包括: border-style,border-top-width, boder-right-width, border-bottom-width, border-left-width,border-right, border-left,border-bottom,border-top, border-color.
字体
与字体相关的属性: font-family,font-style,font-variant,fontweight,font-size font-family可以是系统的字体名称,如果名称 中有空格,则属性值需要用””括起 来:font-family:”Times New Roman” font-variant属性的值用来指定是否使用小型 的大写字母来显示文字.该属性能取的值 只有normal和small-caps. font-weight属性的值用来设置文字的对比度
级联样式表CSS
• 什么是级联样式表CSS
– Cascading Style Sheets – 针对HTML提出的样式表语言，现在同样可以很 好地应用于描述XML文档的显示。 – 利用CSS，可以定义XML文档中元素的显示效果。
• 如何引用CSS显示XML文档
<?xml-stylesheet type="text/css" href="CSS文件路径"?>
处理分层层叠
z-index属性 如: 当不同区域文本显示发生重叠时,层数大的显示区域将 覆盖层数小的显示区域. z-index:10; z-index:5;(和z-index为10的区域重叠部分将被覆盖)
边框---2
• 如果要设置边框,必须首先设置borderstyle属性,使得文本具有边框,然后再设置 其它边框属性. • none;无边框; • dotted;边框是由点组成的虚线; • dash;边框是由短线组成的虚线; • double;边框是双线; • groove;3D沟槽状边框; • ridge;3D脊状边框; • inset;3D内嵌边框; • outset;3D外嵌边框;
颜色和背景
设置文本的字符颜色和背景颜色,使用属性color和 background-color. 两种设置方法: 设置字体: color:rgb(120,225,220); color:red; 设置背景: background-color:rgb(10,225,220); background-color:yellow;
样式表CSS—设置文本的显示方式
文本显示方式分四类: 块方式 display:block 行方式 display:line 列表方式 display:list-item 不显示 display:none
块方式 display:block---1
块方式具有以下属性:example2 position,left,right,width,height,top 子元素将继承父元素的显示格式
文本样式:与文本样式有关的属性包括:
• text-align; 文本对齐方式 left,right,center,justify) 如text-align:left; • text-indent;设置文本首行缩进量,单位是像素 (px)或磅值(pt), 如:text-indent:16pt; • text-transform;设置是否将文本中的字母全部 大写/小写/首字母大写, 取值范围 uppercase,lowercase,capitalize,none • text-decoration;是否将文本加下划线 取值范围:none,underline,overline,linethrough,blink • vertical-align;文本的垂直对齐方式 取值范围:baseline,sub,super,top,text-
• • • • • • • • items { display:block; left=100; top=120; width=200; height=120; }
块方式 display:block----2
position:absolute; 此时将重叠显示区域,可以根据属性值设置每 个块的显示; 元素名#属性值
CSS示例HelloCSS.xml
<?xml version="1.0"?> <xsampdoc> <greeting>Heon> </greeting> <answer class="ans"> <extension> Good morning! </extension> <question> How are you? </question> </answer> </xsampdoc>
本章目标
应用CSS和XSL显示XML文档数据 识别、书写简单的CSS样式表
样式表简介
为什么需要样式表 XML数据本身并不包含数据显示的信息chap03css\example1.xml/example1.css 什么是样式表 描述结构文档表现方式的文档 使用样式表的意义 数据或内容与表示层分开 write once and publish everywhere W3C推荐的样式表标准： CSS级联样式表 XSL可扩展样式表
第5章CSS部分
用CSS显示XML文档
内容回顾
• 一个合法的XML文档必然是结构完整的，结构 完整的XML文档不一定是合法的。 • DTD包含一套用来描述并限制XML文档结构的语 法规则。
– – – – 元素的定义规则 元素之间的关系规则 属性的定义规则 可使用的实体或符号规则
• 命名空间用于避免命名冲突
设置鼠标形状 example6
• 如果希望控制鼠标指针运动到文字的显示 区域时的形状可以使用cursor属性 • 该属性取值如下: • auto,crosshair,default,hand,move,e-resize,neresize,nw-resize, • n-resize,se-resize,s-resize,wresize,text,wait,help; • 如:cursor:hand;
xsampdoc { color:navy; display:block } greeting { font-family: Arial;font-size: 32pt; width: 30em; color: red } question { font-size: x-large;color: black } answer.ans { font-size: 20pt;color: blue chap03/Hello.css }
• • • • • • • • • items#01 { display:block; left=100; top=100; width=200; height=100; } #02
行方式Display:line example3
个行将按顺序按行显示,也可以指定position属性值,子标记从属于父标记的 显示格式设置,如果父标记为 块方式,则子标记为块中的行. • items • { • display:block; • left=100; top=100; • width=200; height=100; • color:red; • } • name,desc • { display:line; size:22pt; color:blue; }
显示图象 example6
• 可以通过设置background-image属性的值为文本指 定一幅背景图片; • URL(图象文件名字); • 例如: • background-image:URL(pic1.gif); • 可以使用background-repeat属性设置图象是否通过 重复出现来平铺背景; • background-repeat的取值如下: • repeat,repeat-x,repeat-y,no-repeat; • 例如: • background-repeat:no-repeat;
边框-----3
• 其中color属性可以设置多个值, • 如果设置一个值,那么四条边框颜色值相 同; • 如果设置两个值,那么上,下边框的颜色值 和颜色值1相同,左右边框颜色和颜色2相 同; • 如果设置4个值,按上,右,下,左的顺序分配 颜色; • 如:border-style:inset;bordercolor:rgb(12,255,220);
按列表方式:display:list-item example4
• List-item相关属性:list-style-type用来更改符号外 观 • disc 圆盘 • circle 圆圈 • square 方块 • decimal 十进制数字` • lower-roman 小写罗马数字 • upper-roman 小写罗马数字 • lower-alpha 小写英文字母 • upper-alpha 大写英文字母
命名空间用于避免命名冲突应用css和xsl显示xml文档数据识别书写简单的css样式表为什么需要样式表xml数据本身并不包含数据显示的信息chap03cssexample1xmlexample1css什么是样式表描述结构文档表现方式的文档使用样式表的意义数据或内容与表示层分开writeoncepublisheverywherewriteoncepublisheverywherew3c推荐的样式表标准
边缘
• 边缘是文本周围不可见的区域,如果文本按 块显示,边缘就是块的边缘; • 如果文本按行显示,边缘就是行的边缘,列表 项也是如此; • 和边缘有关的属性包括: • margin-top,margin-right,margin-bottom,marginleft; • 如: • margin-top:20;设置有边缘的大小,单位是像素;
边框---1 example5
• • • • • • • 设置边框的属性包括: border-style,border-top-width, boder-right-width, border-bottom-width, border-left-width,border-right, border-left,border-bottom,border-top, border-color.
字体
与字体相关的属性: font-family,font-style,font-variant,fontweight,font-size font-family可以是系统的字体名称,如果名称 中有空格,则属性值需要用””括起 来:font-family:”Times New Roman” font-variant属性的值用来指定是否使用小型 的大写字母来显示文字.该属性能取的值 只有normal和small-caps. font-weight属性的值用来设置文字的对比度
级联样式表CSS
• 什么是级联样式表CSS
– Cascading Style Sheets – 针对HTML提出的样式表语言，现在同样可以很 好地应用于描述XML文档的显示。 – 利用CSS，可以定义XML文档中元素的显示效果。
• 如何引用CSS显示XML文档
<?xml-stylesheet type="text/css" href="CSS文件路径"?>
处理分层层叠
z-index属性 如: 当不同区域文本显示发生重叠时,层数大的显示区域将 覆盖层数小的显示区域. z-index:10; z-index:5;(和z-index为10的区域重叠部分将被覆盖)
边框---2
• 如果要设置边框,必须首先设置borderstyle属性,使得文本具有边框,然后再设置 其它边框属性. • none;无边框; • dotted;边框是由点组成的虚线; • dash;边框是由短线组成的虚线; • double;边框是双线; • groove;3D沟槽状边框; • ridge;3D脊状边框; • inset;3D内嵌边框; • outset;3D外嵌边框;
颜色和背景
设置文本的字符颜色和背景颜色,使用属性color和 background-color. 两种设置方法: 设置字体: color:rgb(120,225,220); color:red; 设置背景: background-color:rgb(10,225,220); background-color:yellow;
样式表CSS—设置文本的显示方式
文本显示方式分四类: 块方式 display:block 行方式 display:line 列表方式 display:list-item 不显示 display:none
块方式 display:block---1
块方式具有以下属性:example2 position,left,right,width,height,top 子元素将继承父元素的显示格式
文本样式:与文本样式有关的属性包括:
• text-align; 文本对齐方式 left,right,center,justify) 如text-align:left; • text-indent;设置文本首行缩进量,单位是像素 (px)或磅值(pt), 如:text-indent:16pt; • text-transform;设置是否将文本中的字母全部 大写/小写/首字母大写, 取值范围 uppercase,lowercase,capitalize,none • text-decoration;是否将文本加下划线 取值范围:none,underline,overline,linethrough,blink • vertical-align;文本的垂直对齐方式 取值范围:baseline,sub,super,top,text-
• • • • • • • • items { display:block; left=100; top=120; width=200; height=120; }
块方式 display:block----2
position:absolute; 此时将重叠显示区域,可以根据属性值设置每 个块的显示; 元素名#属性值
CSS示例HelloCSS.xml
<?xml version="1.0"?> <xsampdoc> <greeting>Heon> </greeting> <answer class="ans"> <extension> Good morning! </extension> <question> How are you? </question> </answer> </xsampdoc>
本章目标
应用CSS和XSL显示XML文档数据 识别、书写简单的CSS样式表
样式表简介
为什么需要样式表 XML数据本身并不包含数据显示的信息chap03css\example1.xml/example1.css 什么是样式表 描述结构文档表现方式的文档 使用样式表的意义 数据或内容与表示层分开 write once and publish everywhere W3C推荐的样式表标准： CSS级联样式表 XSL可扩展样式表
第5章CSS部分
用CSS显示XML文档
内容回顾
• 一个合法的XML文档必然是结构完整的，结构 完整的XML文档不一定是合法的。 • DTD包含一套用来描述并限制XML文档结构的语 法规则。
– – – – 元素的定义规则 元素之间的关系规则 属性的定义规则 可使用的实体或符号规则
• 命名空间用于避免命名冲突
设置鼠标形状 example6
• 如果希望控制鼠标指针运动到文字的显示 区域时的形状可以使用cursor属性 • 该属性取值如下: • auto,crosshair,default,hand,move,e-resize,neresize,nw-resize, • n-resize,se-resize,s-resize,wresize,text,wait,help; • 如:cursor:hand;