第七章 CSS技术.ppt

第五章 CSS转换XML 7.1 概述 7.2 问题的引入 7.3 显示属性 7.4 颜色与背景 7.5 字体与文本 7.6 边界设置 7.7 元素筛选 7.8 CSS对XML进行转换 7.1 概述 XML技术是自描述语言，如何表示它并不是XML1.0规范的基本要求。因此，一个符合规范的XML文档在浏览器上显示时，我们仅看到了该文档根元素为根的树型显示。这种显示样式是无法满足Web应用程序设计和Internet应用要求的。设计者可以使用什么样的技术，按照用户的要求来设计表示形态灵活、格式新颖的XML样式？ XML1.0问世之初，可以在Web浏览器上完成XML数据转换的技术确实寥寥无几。CSS成了当然的选择。 CSS（Cascading Style Sheets，层叠样式表）是一种样式表语言，最初是为了描述HTML的样式（背景、边框、字 7.1 概述 体、颜色等）而提出的。CSS定义了大量的样式元素来控制字体、颜色、边框等等。 CSS有三个版本CSS1、CSS2和CSS3。 本章讲解CSS2。 7.2 问题的引入 例7.1 分析下面的XML文档，设计简单的CSS对其进行格式化。 ?xml version=1.0 encoding=gb2312 standalone=no? goods shirt name金利来/name material纯棉/material size172/95A/size price420.00/price /shirt shirt name晴曼/name material50%棉/material size170/92A/size price180.00/price /shirt 7.2 问题的引入 shirt name红豆/name material10%棉/material size165/88/size price115.00/price /shirt shirt name虎豹/name material纯棉/material size172/96/size price342.00/price /shirt shirt name利郎/name material纯棉/material size170/92A/size price240.00/price /shirt 7.2 问题的引入 shirt name金利来/name material纯毛/material size170/92A/size price620.00/price /shirt /goods 用CSS格式化该 XML文档，设计要求为： ①?整个文档作为一个独立块。 ②?每个 shirt元素作为一个整体显示。 ③?每个shirt在元素显示在一行。 ④?不考虑其他属性。 7.2 问题的引入 我们简单把此CSS文档命名为ch7-1.css，并设计成： goods {display:block;} shirt {display:block;} name {display:inline;} material {display:inline;} size {display:inline;} price {display:inline;} 7.2 问题的引入 ?xml-stylesheet type=text/css href=ch7-1.css? 这是下面这个规则的一个例子： ?xml-stylesheet type= href=? 其中，xml-stylesheet是XML的指令，表示使用的是样式表单。用CSS格式化文档时，type的值为“text/css”。href是CSS文件的存储地址，可以是当前地址，也可以是普遍的URL形式。 下图是用ch7-1.css对例7.1格式化的结果。 显然，此效果还不美观、大方、现代。我们将通过本章的CSS的基本内容的学习来完成一个比较圆满的格式设计。 7.2 问题的引入 7.3 显示属性7.3.1 可视区和包含块 要处理信息在显示器上的显示，涉及屏幕的可视部分，这个可视部分是窗口的可见区域。这个可视部分可以改变，当可视区改变后，文档的布局将随之改变。如果可视区太小，比文档的初始包含块还小，文档会自动变成滚动形态。 包含块是一个矩形框的边界。在CSS中，用display的block属性