xml网页式样表.ppt

1、CSS级联样式表,Style Sheet -样式表,在XML文档中只包含了数据信息，并没有涉及文档如何显示。制定XML标准的目的是要使数据结构化，赋予其明确的语意，使之易于进行数据交换。XML早已不再把目光局限在文字图象的显示上，而是要建立它们之间的内在关系。可以说，XML文档本身是重内容而不重形式。,Style Sheet是一种专门描述结构文档表现方式的文档，它既可以描述这些文档如何在屏幕上显示，也可以描述它们的打印效果，甚至声音效果。样式单一般不包含在XML文档内部，而以独立的文档方式存在。,所谓样式表，是指用来定义网页格式的模板。通过样式表，我们可以像word一样格式化网页中的各种格式块

2、。,样式表的优点,(1)表达效果丰富 目前，样式单可以支持文字和图象的精确定位、三维技术以及交互操作等，对于文档的表现力远远超过HTML中的标记。更重要的是，样式单的标准规范独立于其它结构文档的规范，当需要实现更丰富的表达效果时，仅需修改样式单规范即可，不会牵涉到原始的XML文档内容。 (2)文档体积小 在实际应用中，常常给相同名称标记下的内容定义相同的表现方式，使用传统的方法需要在每个标记中予以描述，造成大量的重复定义。而在样式单中，对于同一个标记只需进行一次描述就足够了，大大缩小需要传输的文件的体积，可提高传输速度，并节约带宽。 (3)便于信息检索 样式单可以实现非常复杂的显示效果，但由于

3、样式描述与数据描述相分离，显示细节的描述并不影响文档中数据的内在结构。因此，网络搜索引擎对文档进行搜索时，不会被种种显示描述标记所迷惑。 (4)可读性好 样式单对各种标记的显示进行集中定义，且定义方式直观易读。这使得它易学易用，可读性、可维护性都比较好。同时XML文档也相对简洁、清晰，突出对内容本身的描述功能。,样式表的优点,W3C大力提倡使用样式单描述结构文档的显示效果。XML关于文档浏览的基本思想是将数据与数据的显示分别定义。XML格式文档不会重蹈某些HTML文档结构混杂、内容繁乱的覆辙，XML的编写者也可以集中精力于数据本身，而不受显示方式的细枝末节的影响。 样式单定义不同的样式表可以使

4、相同的数据呈现出不同的显示外观，从而适合于不同应用，甚至能够在不同的显示设备上显示。这样，XML数据就可以得到最大程度上的重用性，满足不同的应用需求。,两种样式表,迄今为止，W3C已经给出了两种样式单语言的推荐标准: 层叠样式单CSS（Cascading Style Sheets）， 可扩展样式单语言XSL（eXtensible Stylesheet Language）。,CSS样式定义,由W3C（World Wide Web Consortium）组织制定的，用来指定段落、文字等网页素材的格式。 Cascading Style Sheet（层叠样式表或级联样式表） 是用于弥补编写网页的htm

5、l语言的很多不足，使网页格式更容易得到控制。,CSS-层叠样式表,W3C有两个推荐标准，CSS1和CSS2。 CSS1于1996年12月通过，CSS2则于1998年5月通过。 CSS2是在CSS1的基础上制定的，基本上涵盖了CSS1，并在CSS1的基础上增加了媒体类型、特性选择符、声音样式等功能，并对CSS1原有的一些功能进行了扩充。,CSS样式定义,控制网页元素设计风格 改变CSS样式，使用该样式格式化的文本也会相应改变。,控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 层叠:引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。

6、,5.1 CSS的特点,CSS-层叠样式表,CSS的基本思想是为结构文档中的各个标记定义出相对应的一组显示样式。 定义的基本格式为： 选择符 样式属性：取值；样式属性：取值；. ,CSS语法规则,样式单实质就是一组规则 CSS有若干组规则，但结构类似 CSS语法格式为： Selector属性名称:值;属性名称:值;,CSS控制网页显示格式的方式是通过许多定义好的样式属性来实现的，并将多个样式属性定义为一组可供调用的选择符（selector）。 当网页文档中某个元素要使用该样式时，必须使用该名称选择样式。 要想在浏览器中显示出样式表的效果，要让浏览器识别并调用。当浏览器读取样式表时，要依照文本格

7、式来读。,5.2 在网页中插入CSS,CSS样式表的使用,CSS与XML文档建立联系有两种方式： 引用式：把以下PI指令包括在XML文档中 内嵌式：直接在XML元素中声明style元素来定义样式,这种引用会用到XML文档中未定义过的标签,需通过命名机制引入: , 电子商务教程 浙江大学 XML是一种标识语言。 一个XML元素是由开始标签、结束标签以及标签之间的数据构成的。开始和结束标签用来描述标签之间的数据。标签之间的数据被认为是元素的值。 ,whatdisplay: inline book,title,author,contentdisplay: block titlefont-size:

8、1.3em authorfont-style: italic book,title,author,content margin: 0.5em, 张三 男 20 数据库 李岚 女 27 打字 ,all display: block; information display: block; name display: block; font-size:120%; sex display:block; text-indent:2em age display:block; text-indent:2em skill display:block; text-indent:2em,doc.xml,doc.

9、css,5.2.1 内部样式 样式表是用标记插入的。 样式可以在整个文档中调用。 其格式为： 选择符1属性:属性值; 属性:属性值 选择符2属性:属性值; 属性:属性值 选择符n属性:属性值; 属性:属性值 或选择符1，选择符2选择符n属性:属性值; 属性:属性值 ,5.2 在网页中插入CSS,【例5-1】,内部CSS格式引用的XML文件(3-5.XML), CDdisplay:block;color:#aa0000; title display:block;font-family:宋体; singer display:block;color:green; song display:block

10、; text-indent:2em; font-family:宋体; , 红蔷薇 萧亚轩 一个人的精彩 蔷薇 夜 天堂 腾格尔 天堂 蒙古人 小河淌水 ,使用内部CSS样式的XML文档显示举例,外部文件方式,将css样式定义在一个外部的文件，而不是定义在页面文件内，这样可使很多网页公用同样的样式。 使用css样式时，最好用链接外部css文件的方法，这样能做到网站的风格统一和便于更新。,外部文件方式,h2color:blue;text-align:center;font-weight:bold pcolor:red;background-color:#ffff00;text-indent:2em

11、 hrcolor:green;width:80%;height:3 bodybackground-image:url(dsfsdf.jpg),CSS样式表内容(3-4.css),CD display:block; title display:block; color:#0066cc; font-family:宋体; font-size:24pt; font-weight:bold; text-align:center; singer display:block; font-family:黑体,Arial,Tahoma; color:coral;,font-size:16pt; font-wei

12、ght:bold; text-align:center; song display:block; color:#00ffcc; text-indent:2em; font-family:宋体; font-size:9pt; font-height:1.5em; margin-left:10% margin-right:15%; ,示例XML文件 (3-3.xml), 红蔷薇 萧亚轩 一个人的精彩 蔷薇 夜 天堂 腾格尔 天堂 蒙古人 小河淌水 ,外部CSS样式表显示举例, 学生花名册 李华 河北 15 62875555 张三 北京 14 82873425 ,roster,student font-size:15pt; font-weight:bold; color:blue; display:block; margin-bottom:5pt; origin