XML实用教程 教学课件 作者 耿祥义 张跃平 XML实用教程第4章.ppt

《XML实用教程 教学课件 作者 耿祥义 张跃平 XML实用教程第4章.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、《XML实用教程》第4章配合例子源代码一起使用Powerpoint制作：耿祥义张跃平XML与CSS2021/7/221本章主要内容XML关联CSS标记与样式表设置文本的显示方式字体文本样式边框颜色和背景显示图像设置鼠标的形状难点设置文本的显示方式第4章导读2021/7/222概述XML关心的是数据的结构，并能很好、方便地描述数据，但它不提供数据的显示功能。因此，浏览器不能直接显示XML文件中标记的文本内容，如果想让浏览器显示XML文件中标记的文本内容，那么必须以某种方式告诉浏览器如何显示。

2、W3C为XML数据显示发布了两个建议规范：CSS（层叠样式表）和XSL（可扩展样式语言），本章重点讲述怎样用CSS显示XML标记中的文本内容，第5章讲述XSL。2021/7/223§4.1.1初识CSS§4.1XML关联CSS一个CSS文件就是由若干个样式表构成的文本文件,该文本文件可以使用“ANSI”或“UTF-8”编码来保存，文件的扩展名是“.css”。.CSS中的一个样式表是一组规则,通过这组规则告诉浏览器用什么样式来显示数据。一个样式表的格式如下：样式表名称{样式规则}例：name{display:

3、block;font-size:36pt;font-weight:bold;}2021/7/224§4.1.2关联CSS为了让XML使用层叠样式表，XML文件必须使用操作指令例如：例题4-1p632021/7/225§4.2.1标记的名字与样式表的名称样式表中的“样式表名称”可以是标记的名称，也可以是标记的名称与该标记的

4、ID属性值用“#”连接起来的字符串。当XML有许多标记具有相同的名字，如果要使用不同的外观来显示他们的内容时，“样式表名称”使用“标记名称”+“#”+“ID属性值”。例：time#a001{display:block;font-size:19pt;font-weight:bold;}time#a002{display:line;font-size:16pt;font-weight:bold;}§4.2标记与样式表2021/7/226§4.2.2CSS的显示规则用浏览器打开XML文件时，浏览器将按着标记在XM

5、L文件中出现的“顺序”，并用该标记在CSS中对应的样式表显示该标记包含的文本数据，如果标记在CSS中没有对应的样式表，浏览器将使用默认的显示规则显示该标记中的文本数据例题4-2p64例题4-3p652021/7/227§4.3.1块方式通过将属性“display”的值指定为“block”：dislpaly:block使得文本在浏览器的一个块区域中显示。例如：time{display:block;}可以通过设置width和height属性的值来准确地设置块区域的宽度和高度，例如：time{display:bl

6、ock;width=220;height=140}还可以通过设置position属性的值为absolution改变块区域默认地靠左对齐方式，但必须要同时设置left，top，width和height属性的值，以便准确地设置块区域的位置和大小，例如：name{display:block;position:absolute;left=100;top=120;width=200;height=120;}例题4-4p67§4.3设置文本的显示方式2021/7/228§4.3.2行方式通过将属性“display”的值

7、指定为“line”：dislpaly:line使得文本以行的方式在浏览器中显示。例如：time{display:line;}样式表指定文本代表“time”所代表的文本按行的方式在浏览器中显示。如果有许多“文本代表”都指定自己代表的文本按行的方式在浏览器中显示，那么各行按先后顺序首尾相接来显示，也可以增加position属性指定行的位置。name{display:line;position:absolute;left=100;top=120;}例题4-5p682021/7/229§4.3.3按列表方式通过将属

8、性“display”的值指定为“list-item”：dislpaly:list-item使得文本按列表方式在浏览器中显示。例如：time{dislpaly:list-item;}样式表指定文本代表“time”所代表的文本列表方式在浏览器中显示，项目符号的默认外观是“disc”（实心圆）。和“list-item”属性有关的属性是“list-style-type”，通过设置该属性可以更改项目符号的外观。“list-