第6章层叠样式表.ppt

1、第6章 层叠样式表,XML为存储结构化数据提供了强大的方法，但是它没有提供关于数据如何显示的信息，这实际上是XML的优点：数据的结构完全与数据表示无关。,第6章 层叠样式表,CSS简介 设置字体属性 设置色彩和背景图像属性 设置边界属性 CSS2新增功能 综合实例,6.1 CSS简介,CSS是用于为XML数据定义显示参数的一种技术，它利用简单的规则来控制元素内容在浏览器中的表现方式。 CSS最初是被开发来为HTML文档指定显示的，同时也适合于XML数据。 样式表中的显示规范与XML数据分离，意味： 相同的数据通过应用不同的样式表可以以不同的方式显示； 同样，相同的样式表可以应用到多个XML文件

2、。,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：属性值； 标志不带尖括号

3、 “标志属性：属性值” ： 一一对应 当属性名由两个或两个以上单词构成时，单词之间用“-”隔开例，background-color 一个属性可以有多个属性值。例如 P1font-size:16pt;font-family:宋体;font-style:italic 可直接表示为： P1font:16pt 宋体 italic,一个无CSS样式表XML文件,【例6.1】这是一个没有应用层叠样式表的XML文档，code6_1.xml 望庐山瀑布 唐.李白 日照香炉升紫烟 遥看瀑布挂前川 飞流直下三千尺 疑是银河落九天 ,一个无CSS样式表XML文件,一个使用CSS样式表XML文件,在XML文档的开头部

4、分写一个关于样式单的如下声明语句： 也可以使用完整的URL指定CSS样式表文件，像下面这个例子： ,一个使用CSS样式表XML文件,charset gb2312; namedisplay:block; font-family: 黑体; font-size: 20pt; letter-spacing:10pt; text-align:center; writerdisplay:block; font-family: 魏碑; font-size:10pt; font-weight:bold; letter-spacing:10pt; line-height:40pt; text-align:cen

5、ter; color: Black; ,contentdisplay:block; font-family: 隶书; font-size: 20pt; font-weight:bold; line-height: 30pt; letter-spacing:10pt; text-align:center; color: Black; ,一个使用CSS样式表XML文件,6.1.2 CSS的使用,CSS是纯文本文件，扩展名 .css，用于告诉浏览器如何安排显示XML/HTML文件中的元素 CSS的使用 内部CSS 外部CSS 内外CSS 通常XML文档通过引用外部CSS来定义文档的显示方式 ,6.2

6、 设置字体属性,Font属性集： 设置指定字体的风格、大小、亮度等参数。 font-family：字体字型 font-style：字体风格 font-weight：字体亮度（粗细程度） font-variant：字体全为大写字母 font-size：字体大小 font-stretch：字体的压缩或拉伸方式 若CSS中需要使用各种中文字体，则CSS文件的第一行加语句： charset”gb2312”;,表6.1 font属性的常见子属性,font属性的用法,与常见的CSS属性设置类似 font属性使用示例如下： elementfont-style:italic;font-size: 20pt;

7、font-family: 楷体_gb2312;,字体字型font-family属性,font-family属性：用于指定字体名称，属性值使用逗号分隔的字体名称。如果字体名称中出现空格，必须使用双引号将字体括起来，如“Times New Roma”。 font-family属性可用的值：取决于用户系统中已经安装了的字体，在Windows系统的安装目录下单位的“fonts”文件夹中保存了系统安装的所有字体。 font-family属性的参数值：可以有几个，在指定font-family属性时，可同时指定几个字符集。这样，在浏览器找不到第1个字符集的时候可以按顺序使用第2个字符集显示字体。,字体风格f

8、ont-style属性,字体亮度font-weight属性 设置字体的粗体程度,设置为大写字母font-variant属性,设置字体大小font-size属性,文本属性,6.3 设置色彩和背景图像属性,定义前景色：color 定义背景色：backgruond 设置背景颜色： backgruond-color 设置背景图案： backgruond-image 设置背景图案重复方式： backgruond-repeat 设置背景图案滚动方式： backgruond-attachment 设置背景图案起始位置： backgruond-position,6.3.1 定义前景色,color属性,colo

9、r属性的用法,charsetgb2312; namedisplay:block; font-size:22pt; color:blue; writerdisplay:block; color:red; contentAdisplay:block; color:#FOF; contentBdisplay:block; color:rgb(100%,50%,50%); contentCdisplay:block; color:rgb(000,000,256); contentDdisplay:block; color:rgb(000,256,256);,color属性的用法,6.3.2 定义背景色

10、,background属性集,设置背景颜色background-color,#RGB：3位十六进制数 #RRGGBB：6位十六进制数 rgb（RRR，GGG，BBB）：3个3位十进制数 rgb（R%，G%，B%）：用3个百分数表示 颜色名称：表示颜色的英文名称,设置背景图案background-image,background-image：定义背景图形。取值为none、url，当取值为none时表示不用图形作背景，url表示提供图形文件的URL地址。 直接用图像文件名称（如image001.gif），这里是指和CSS样式表文件在同一目录下的文件。,设置背景图案重复方式background-re

11、peat,repeat：使用背景图案完全填充元素大小的空间 repeat-x：使用背景图案在水平方向从左到右填充元素大小的空间。 repeat-y：使用背景图案在竖直方向从上到下填充元素大小的空间。 no-repeat：不使用背景图案重复填充元素。,设置背景图案滚动方式background-attachment,scroll：表示在文字页面滚动时，背景一起滚动 Fixed：表示在文字页面滚动时，背景固定不滚动,设置背景图案起始位置background-position,top：表示背景图案位于指定元素的顶部 center：表示背景图案位于指定元素的中部 bottom：表示背景图案位于指定元素的

12、底部 left：表示背景图案位于指定元素的左部 right：表示背景图案位于指定元素的右部,6.4 设置边界属性,在CSS中，提供了方框边界属性来对元素中文本的版面进行设置 设置元素在文件中的位置 在元素周围添加边框，并设置边框的样式，大小 控制相邻元素的位置 设置边框属性 设置边框样式：border-style 设置边框宽度：border-width 设置边框颜色：border-color,6.4 设置边界属性,设置填充属性：元素与边框的距离 设置上填充：padding-top 设置下填充：padding-bottom 设置左填充：padding-left 设置右填充：padding-rig

13、ht 设置边框大小属性,6.4 设置边界属性,设置定位属性 设置页面边界属性 设置上边距：margin-top 设置下边距：margin-bottom 设置左边距：margin-left 设置右边距：margin-right,设置边框属性border-style,6.4.2 设置填充属性,设置填充属性：元素与边框的距离 设置上填充：padding-top 设置下填充：padding-bottom 设置左填充：padding-left 设置右填充：padding-right,6.4.3 设置大小属性,设置边框大小的属性为width、height 取值为auto：表示根据元素大小自动调整width、height的取值。 指定大小 父元素宽度的百分比,6.4.4