第6节层叠样式表.ppt

第6章 层叠样式表 XML为存储结构化数据提供了强大的方法，但是它没有提供关于数据如何显示的信息，这实际上是XML的优点：数据的结构完全与数据表示无关。 第6章 层叠样式表 CSS简介 设置字体属性 设置色彩和背景图像属性 设置边界属性 CSS2新增功能 综合实例 6.1 CSS简介 CSS?是用于为XML数据定义显示参数的一种技术，它利用简单的规则来控制元素内容在浏览器中的表现方式。 CSS最初是被开发来为HTML文档指定显示的，同时也适合于XML数据。 样式表中的显示规范与XML数据分离，意味： 相同的数据通过应用不同的样式表可以以不同的方式显示； 同样，相同的样式表可以应用到多个XML文件。 6.1 CSS简介 CSS层叠样式表：实现网页风格设计，包括页面的布局、字体、颜色、背景等 对一个站点的风格进行统一规定： 采用CSS文件 只规定某个页面的风格：采用内部文档头 规定某些HTML标志具有特殊样式：直接插入方式 CSS版本有CSS1和CSS2，目前CSS3已基本完成 6.1.2 CSS的使用 CSS的基本语法 CSS元素： CSS的结构单元 CSS规则：通过属性和属性值来设定 属性：指定元素某一方面的特性 属性值：指定元素特性的具体特征 属性名： CSS的关键字 6.1.2 CSS的使用 样式表：必须符合CSS规则 标志{标志属性1：属性值；标志属性2：属性值；……} 标志不带尖括号 “标志属性：属性值” ： 一一对应 当属性名由两个或两个以上单词构成时，单词之间用“-”隔开．例，background-color 一个属性可以有多个属性值。例如 P1{font-size:16pt;font-family:’宋体’;font-style:italic} 可直接表示为： P1{font:16pt 宋体 italic} 一个无CSS样式表XML文件 【例6.1】这是一个没有应用层叠样式表的XML文档，code6_1.xml ?xml version=1.0 encoding=gb2312 ? poem name望庐山瀑布/name writer唐.李白/writer content日照香炉升紫烟/content content遥看瀑布挂前川/content content飞流直下三千尺/content content疑是银河落九天/content /poem 一个无CSS样式表XML文件 一个使用CSS样式表XML文件 在XML文档的开头部分写一个关于样式单的如下声明语句： ?xml-stylesheet type=text/css href=mycss.css ? 也可以使用完整的URL指定CSS样式表文件，像下面这个例子： ?xml-stylesheet type= text/css href=/file/mycss.css ? 一个使用CSS样式表XML文件 一个使用CSS样式表XML文件 6.1.2 CSS的使用 CSS是纯文本文件，扩展名 .css，用于告诉浏览器如何安排显示XML/HTML文件中的元素 CSS的使用 内部CSS 外部CSS 内外CSS 通常XML文档通过引用外部CSS来定义文档的显示方式 ?XML-stylesheet type=“text/css” href=“slcss.css” ? ?XML-stylesheet type=“text/css” href=“/slfile/slcss.css” ? 6.2 　设置字体属性 Font属性集： 设置指定字体的风格、大小、亮度等参数。 font-family：字体字型 font-style：字体风格 font-weight：字体亮度（粗细程度） font-variant：字体全为大写字母 font-size：字体大小 font-stretch：字体的压缩或拉伸方式 若CSS中需要使用各种中文字体，则CSS文件的第一行加语句： @charset”gb2312”; 表6.1 font属性的常见子属性 font属性的用法 与常见的CSS属性设置类似 font属性使用示例如下： element{font-style:italic;font-size: 20pt; font-family: 楷体_gb2312;} 字体字型font-family属性 font-family属性：用于指定字体名称，属性值使用逗号分隔的字体名称。如果字体名称中出现空格，必须使用双引号将字体括起来，如“Times New Roma”。 font-family属性可用的值：取决于用户系统中已经安装了的字体，在Windows系统的安装目录下单位