XML实用教程课件范立锋第5章节使用CSS格式化显示XML文件.pptVIP

第5章 使用CSS格式化显示XML文件 5.1 CSS技术简介 CSS（Cascading Style Sheet，层叠样式表）是由W3C在1996年正 式推出的，最初的版本是CSS1。1998年W3C又正式推出了CSS2，现 在正在使用的是CSS2.1。CSS3现在还处于开发中。CSS是一种样式控 制语言，用来设置字体样式等内容，最初是为弥补HTML的不足而出 现的。后来，又应用在XML，用来格式化XML数据内容。CSS就是 一组规则的集合。 5.2 XML与CSS结合的方式 调用独立样式文件 一个独立的CSS样式文件是一个文本文件，扩展名是“.css”，可 以用记事本编辑。将XML文件和独立的CSS文件结合的方法是在 XML文件中加入下面一条处理指令： 将样式语句嵌入到XML文件 (1) 将样式语句嵌入到XML文件 (2) 混合方法指定样式 使用多个样式文件 5.3 CSS格式化XML文件 定义样式 文本显示方式设置 （1） 文本显示方式设置 （2） 文本显示方式设置 （3） 文本显示方式设置 （4） 文本显示方式设置 （5） 文本显示方式设置 （6） 文本属性设置（1） 文本属性设置（2） 文本属性设置（3） 文本属性设置（4） 文本属性设置（5） 文本属性设置（6） 文本属性设置（7） 设置元素 （1） 设置元素 （2） 设置元素 （3） 设置元素 （4） 设置元素 （5） 设置元素 （6） 设置元素 （7） 设置元素 （8） 元素定位显示（1） 元素定位显示（2） 元素定位显示（3） 图片设置（１） 图片设置（２） 环绕文本 元素的定位是指指定元素的显示位置。CSS中定位分为两种：绝对定位和相对定位。 元素定位通过position属性设置，该属性有两种取值：absolute或relative，分别代表绝对定位法和相对定位法。 绝对定位是以自身父元素的左上角为原点，通过偏移量来决定显 示的位置。 相对定位是指相对于自身的偏移量来决定显示的位置。 偏移量通过left属性和top属性来决定。left属性值代表元素距离坐标远点的向右水平距离，top属性的值代表元素距离坐标远点的向下垂直距离。 实例： XML文件： ?xml version=”1.0” encoding=”gb2312”? ?xml-stylesheet type=”text/css” href=”07.css” ? root root frame1 元素1 frame2 元素2 /frame2 /frame1 frame3 元素3 /frame3 /root 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样式： 显示效果： 在图中看到，元素1和元素3发生了重叠，要决定重叠元素前后需要借助于属性z-index。z-index值大的元素会覆盖z-index值小的元素。只有同级的元素才具有可比性，不同级的元素不具有可比性，子元素永远覆盖父元素。 返回 XML文件没有能够很好地描述图片的方法，通过CSS技术就可以在XML中引入图片