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

第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） 图片设置（１） 图片设置（２） 环绕文本 设置边距（margin） ： ?xml version=”1.0” ? ?xml-stylesheet type=”text/css” href=”06.css” ? root frame1 margin-bottom:20 /frame1 frame2 margin-left:20 margin-top:20 /frame2 frame3 margin:20 /frame3 /root 利用前面的CSS样式显示下面的XML文件，效果如图所示： 返回 元素的定位是指指定元素的显示位置。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{ d