使用CSS格式化显示XML文件.ppt

第5章使用CSS格式化显示XML文件 5 1CSS技术简介 5 2XML与CSS结合的方式 5 3CSS格式化XML文件 XML是一种数据存储语言 没有任何数据显示样式 因此 浏览器不能直接显示其中的文本数据 如果想让浏览器只显示其中的数据 就需要借助于其它方法 本章主要介绍CSS技术及CSS与XML的结合应用 CSS CascadingStyleSheet 层叠样式表 是由W3C在1996年正式推出的 最初的版本是CSS1 1998年W3C又正式推出了CSS2 现在正在使用的是CSS2 1 CSS3现在还处于开发中 CSS是一种样式控制语言 用来设置字体样式等内容 最初是为弥补HTML的不足而出现的 后来 又应用在XML 用来格式化XML数据内容 CSS就是一组规则的集合 5 1CSS技术简介 CSS语法非常简单 组成CSS语法的元素只有CSS选择符与CSS属性 每个CSS选择符由一个或多个CSS属性组成 基本格式如下 选择符 属性 属性值 返回 5 2XML与CSS结合的方式 5 2 2将样式语句嵌入到XML文件 5 2 1调用独立样式文件 5 2 3混合方法指定样式 5 2 4使用多个样式文件 返回 一个独立的CSS样式文件是一个文本文件 扩展名是 css 可以用记事本编辑 将XML文件和独立的CSS文件结合的方法是在XML文件中加入下面一条处理指令 调用独立样式文件 CSS文件的URI必须是一个有效的资源 如果CSS文件与XML文件位于同一目录下 CSS文件的URI可以是CSS文件名 否则必须是CSS文件的路径 返回 将样式语句嵌入到XML文件 1 CSS语句还可以直接写在XML文件内部 例如 persion display block font size 25pt color red 将样式语句嵌入到XML文件 2 另外还有一种方法 在标记内使用 style 属性来定义样式 例如 xiaolimale25xiaowangfemale24 说明 这种方法可以灵活地设置各标记的样式 但会使XML文件变得不够简洁 不建议使用 返回 混合方法指定样式 综合应用内部CSS样式和外部CSS样式 例如 persion display block font size 20pt color red 省略的XML代码 说明 如果内部样式表和外部样式表之间发生冲突 则以内部的样式为准 返回 使用多个样式文件 一个XML文件也可以同时调用多个样式表文件 例如 说明 一个XML文件同时引用多个外部样式表文件时 如果样式表文件中的内容发生冲突 则以声明靠后的样式表文件中所定义的样式为准 返回 5 3CSS格式化XML文件 5 3 1定义样式 5 3 2文本显示方式设置 5 3 7环绕文本 5 3 3文本属性设置 5 3 4设置元素 5 3 5元素定位显示 5 3 6图片设置 返回 定义样式 CSS语法简单 一个标记内容的样式的定义由选择符 属性和属性值组成 选择符 属性 属性值 为XML定义样式时 选择符通常是 标记的名称 这样 所有同名的标记都具有相同的显示样式 如果对于相同名称的标记想使用不同的显示样式 则选择符可以是 加该名称的ID属性值 如果想对不同名称的标记使用相同的样式 则选择符可以是点号 加标记的CLASS属性值 返回 文本显示方式设置 1 文本显示方式是指文本内容在浏览器中以何种形式来显示 文本的显示方式有4种方式 块显示方式 行显示方式 列表显示方式和不显示方式 通过display属性来设置 块显示方式 块显示方式是指文本内容以块的方式来显示 块的大小取决于文本内容的大小 文本内容默认为左对齐 定义块显示方式是将display属性的值指定为block 还可以通过position width和height属性值设置块的大小 例如 有下面的XML文件 文本显示方式设置 2 水浒传 施耐庵52 30全书以描写农民战争为主要题材 塑造了李逵 武松 林冲 鲁智深等梁山英雄 揭示了当时的社会矛盾 故事曲折 语言生动 人物性格鲜明 具有很高的艺术成就 文本显示方式设置 3 将其设置成块显示方式 CSS文件代码如下 title display block background color yellow author display block background color cyan price display block background color yellow discretion display block background color cyan position absolute width 300px height 60px 用IE浏览器打开XML文件 得到的结果如图所示 文本显示方式设置 4 行显示方式 行显示方式是指文本内容以行的方式来显示 各标记内容按先后顺序首尾相连 行显示将display属性值设置为line 例如 title display line author display line price display line discretion display line 用IE浏览器打开前面的XML文件 得到的结果如图所示 文本显示方式设置 5 列表显示方式 列表显示方式是指文本内容在浏览器中以列表的方式显示 通过将display属性值指定为list item来实现 例如 book display list item list style type square margin left 100px author display list item list style type circle margin left 110px price display list item list style type circle margin left 110px discretion display list item list style type circle margin left 110px 用IE浏览器打开XML文件 得到的结果如图所示 文本显示方式设置 6 列表显示方式 在列表显示方式中 list style type属性用来指定项目符号的外观 可取的值有 disc 圆盘circle 圆圈square 方块decimal 十进制数lower roman 小写的罗马数字upper roman 大写的罗马数字lower alpha 小写英文字母upper alpha 大写英文字母none 无符号 返回 文本属性设置 1 文本属性设置包括 文字的属性设置和文本样式设置 文字的属性设置 文本属性包括文字大小 字体 颜色等 下面详细介绍各个有关的属性 1 设置文字的大小 设置文字的大小通过font size属性来完成 属性值是一个具体的数值 单位为pt pt的中文译为磅或点 用来表示文字的大小 其他的单位还有px cm或mm 例如 font size 15pt 文本属性设置 2 2 设置文字的颜色和背景色 设置文字的颜色通过设置color属性来完成 它的属性值可以为颜色的英文名称 也可以是颜色的16进制RGB的值 例如 color green color 00ff00 3 设置文字的字体 设置文字的字体使用属性font family 属性值是系统的字体名称 如果名称中含有空格 需要用双引号括起来 为了防止用户缺少某种字体 font family属性的值最好列出多个字体 用逗号分隔 在显示的时候 浏览器会从前向后依次匹配用户已安装的字体 并以该字体显示 例如 font family TimeNewRomar font family arial TimeNewRomar sans serif 文本属性设置 3 4 其它文字样式设置 其它的文字样式的属性还包括 font style font weight和font variant font style属性用来表示文字是否使用斜体 属性值可以是normal 不使用斜体 或italic 使用斜体 font weight属性用来表示文字的粗细 属性的值可以是extra light lighter light normal bold bolder或extra bold 上面的顺序由细到粗 font weight属性值还可以是具体的数值 数值越大文字越粗 font variant属性用来表示是否使用小型的大写字母来显示 属性值可以是normal或small caps 文本属性设置 4 文本样式设置 文本样式指的是一段文字的样式 与之相关的书信包括 text align vertical align line height text transform text decoration和text indent 1 text align属性用来设置文本的对齐方式 该属性的值可以为 left right center或justify 2 vertical align属性用来设置文本垂直对齐方式 属性的值可以为 baseline sub super top text top middle bottom或text bottom 3 line height属性用来设置文本的行间距 属性值是一个具体的数值 文本属性设置 5 文本样式设置 4 text transform属性用来设置是否将文本中的字母全部大写或全部小写或首字母大写 属性的值可以是uppercase lowercase capitalize或none 5 text decoration属性用来设置是否给文本加划线 属性值可以取none underline overline line through或blink 6 text indent属性用来设置文本的首行缩进 属性值是具体的数字值 单位为px或pt 文本属性设置 6 一个实例 XML文件代码如下 氢气燃烧产生水 2h2 o2 2h2o这一反应过程中有大量热放出 火焰呈淡蓝色 文本属性设置 7 CSS文件代码如下 chemistry display block font size 15pt text decoration underline text transform uppercase bottom display line font size 10pt vertical align bottom discretion display block font size 12pt text align center background color yellow font style italic bold font weight bolder 用IE浏览器打开XML文件 得到的结果如图所示 返回 设置元素 1 一个网页元素包含4个部分 元素内容 边框 border 内容与边框之间填充 padding 和边框与周围元素的边距 margin 如图所示 元素内容可以是一段文字 一张图片或其它的内容 设置元素 2 设置边框 border 与边框有关的属性有 1 border style 用来设置元素的边框 并且四周的边框具有相同的样式和宽度 该属性可以取的值有 none 无 dotted 点虚线 dash 短线虚线 solid 普通边框 double 双实线 groove 3D沟状边框 ridge 3D脊状边框 inset 3D内嵌边框 和outset 3D外嵌边框 2 border right border bottom和border left 这3个属性可用来单独设置右边 底边和左边的边框样式 这3个属性的取值同border style属性的取值 设置元素 3 设置边框 border 3 border top width border right width border bottom width和border left width这4个属性用来设置边框4边的宽度 属性值为具体的数值 4 border color属性用来设置边框的颜色 这个属性的值可以设置成1个 2个或4个 如果该属性有一个值 表示边框的4个边都为这个颜色 如果有两个值 表示边框的上边和下边为第一个颜色 左边和右边为第二个颜色 如果有4个值 按顺序依次为上 右 底 左的颜色 注意 只有设置了border style属性后才能设置其它的属性 设置元素 4 设置边框 border 例 XML文件 边框1边框2边框3 CSS文件 frame1 display block border style double border color blue width 200 height 130 frame2 display block border style dotted border color redgreen width 150 height 100 frame3 display block border style ridge border top width 10 width 100 height 70 显示效果如图所示 设置元素 5 设置填充 padding 与填充有关的属性有 padding top padding right padding bottom和padding left 分别表示上 右 下 左的填充 如果4个填充的大小一样 则可以只写padding属性 该属性的值是具体的数值 单位是像素 例如 frame1 display line border style inset padding left 15 frame2 display line border style inset padding top 10 frame3 display line border style inset padding 10 设置元素 6 设置填充 padding 下面的XML文件使用前面的CSS样式 显示的效果如图所示 padding left 20padding top 10padding 10 设置元素 7 设置边距 margin 与边距有关的属性有 margin top margin right margin bottom和margin left 分别代表上 右 下 左的距离 如果4个边距的大小一样 则可以只写margin属性 该属性的值是具体的数值 单位是像素 例如 frame1 display line border style inset width 100 height 50 margin bottom 20 frame2 display line border style inset width 100 height 50 margin left 20 margin top 20 frame3 display block border style inset width 200 height 50 margin 20 设置元素 8 设置边距 margin margin bottom 20margin left 20margin top 20margin 20 利用前面的CSS样式显示下面的XML文件 效果如图所示 返回 元素定位显示 1 元素的定位是指指定元素的显示位置 CSS中定位分为两种 绝对定位和相对定位 元素定位通过position属性设置 该属性有两种取值 absolute或relative 分别代表绝对定位法和相对定位法 绝对定位是以自身父元素的左上角为原点 通过偏移量来决定显示的位置 相对定位是指相对于自身的偏移量来决定显示的位置 偏移量通过left属性和top属性来决定 left属性值代表元素距离坐标远点的向右水平距离 top属性的值代表元素距离坐标远点的向下垂直距离 元素定位显示 2 实例 XML文件 root元素1元素2元素3 root display block background color yellow width 300 height 200 position absolute top 25 left 50 frame1 display block background color blue width 200 height 120 position absolute top 25 left 50 frame2 display block background color green width 100 height 50 position relative top 25 left 50 frame3 display block background color red width 100 height 50 position relative top 25 left 50 CSS样式 元素定位显示 3 显示效果 在图中看到 元素1和元素3发生了重叠 要决定重叠元素前后需要借助于属性z index z index值大的元素会覆盖z index值小的元素 只有同级的元素才具有可比性 不同级的元素不