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

《XML实用教程》 第4章 配合 XML实用教程例子源代码一起使用 第4章 导读 概述 §4.1 XML关联CSS §4.1.1 初识CSS §4.1.2 关联CSS §4.2 标记与样式表 §4.2.1 标记的名字与样式表的名称 §4.2.2 CSS的显示规则 §4.3 设置文本的显示方式 §4.3.1 块方式 §4.3.2 行方式 §4.3.3 按列表方式 §4.3.4 不显示 §4.4 字体 §4.5 文本样式 §4.6 边框 §4.7 边缘 §4.8 颜色和背景 §4.9 显示图像 §4.10 设置鼠标的形状 §4.11 处理层叠 * Power point 制作：耿祥义 张跃平 XML与CSS 本章主要内容 XML关联CSS 标记与样式表 设置文本的显示方式 字体 文本样式 边框 颜色和背景 显示图像 设置鼠标的形状 难点 设置文本的显示方式 XML关心的是数据的结构，并能很好、方便地描述数据，但它不提供数据的显示功能。因此，浏览器不能直接显示XML文件中标记的文本内容，如果想让浏览器显示XML文件中标记的文本内容，那么必须以某种方式告诉浏览器如何显示。W3C为XML数据显示发布了两个建议规范：CSS（层叠样式表）和XSL（可扩展样式语言），本章重点讲述怎样用CSS显示XML标记中的文本内容，第5章讲述XSL。 一个CSS文件就是由若干个样式表构成的文本文件,该文本文件可以使用“ANSI”或“UTF-8”编码来保存，文件的扩展名是“.css”。 . CSS中的一个样式表是一组规则,通过这组规则告诉浏览器用什么样式来显示数据。一个样式表的格式如下： 样式表名称 { 样式规则 } 例：name { display:block;font-size:36pt;font-weight:bold; } 为了让XML使用层叠样式表，XML文件必须使用操作指令 ?xml-stylesheet href =样式表的URI type= text/css ? 例如： ?xml-stylesheet href=show.css type=text/css ? 例题4-1 p63 样式表中的“样式表名称”可以是标记的名称，也可以是标记的名称与该标记的ID属性值用“#”连接起来的字符串。 当XML有许多标记具有相同的名字，如果要使用不同的外观来显示他们的内容时，“样式表名称”使用“标记名称”+“#”+“ID属性值” 。 例： time#a001 { display:block;font-size:19pt;font-weight:bold; } time#a002 { display:line;font-size:16pt;font-weight:bold; } 用浏览器打开XML文件时，浏览器将按着标记在XML文件中出现的“顺序”，并用该标记在CSS中对应的样式表显示该标记包含的文本数据，如果标记在CSS中没有对应的样式表，浏览器将使用默认的显示规则显示该标记中的文本数据 例题4-2 p64 例题4-3 p65 通过将属性“display”的值指定为“block”： dislpaly:block 使得文本在浏览器的一个块区域中显示。例如： time { display:block; } 可以通过设置width和height属性的值来准确地设置块区域的宽度和高度，例如： time { display:block;width=220;height=140 } 还可以通过设置position属性的值为absolution改变块区域默认地靠左对齐方式，但必须要同时设置left，top，width和height属性的值，以便准确地设置块区域的位置和大小 ，例如： name { display:block; position:absolute; left=100; top=120; width=200; height=120; } 例题4-4 p67 通过将属性“display”的值指定为“line”： dislpaly:line 使得文本以行的方式在浏览器中显示。例如： time { display:line; }