第6章层叠样式表.ppt

《第6章层叠样式表.ppt》由会员分享，可在线阅读，更多相关《第6章层叠样式表.ppt（40页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第6章层叠样式表 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望概述n教学提示：XML为存储结构化数据提供了强大的方法，但是它没有提供关于数据如何显示的信息，这实际上是XML的优点：数据的结构完全与数据表示无关。当有必要表示格式化XML文件中的数据时，格式化的详细信息放置在层叠样式表CSS中。n教学目标：理解层叠样式表CSS的概念，掌握层叠样式表CSS的方法，掌握CSS与XML结合的方法，学会综合运用CSS。6.1CSS简介6.2设置字体属性6.3设置色彩和背景图

2、象属性6.4设置边界属性6.5CSS2新增功能6.6综合实例6.1CSS简介nCSS是用于为XML数据定义显示参数的一种技术，它利用简单的规则来控制元素内容在浏览器中的表现方式。CSS最初是被开发来为HTML文档指定显示的，同时也适合于XML数据。样式表中的显示规范与XML数据分离，这意味着相同的数据通过应用不同的样式表可以以不同的方式显示。同样，相同的样式表可以应用到多个XML文件。6.1.1CSS的概念nCSS（CascadingStyleSheet）层叠样式表，也称为级联样式表，是用来进行网页风格设计的。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更

3、加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。6.1.2CSS的使用n1.CSS基本语法n2.一个无CSS样式表XML文件n3.一个使用CSS样式表XML文件1.CSS基本语法nCSS的规则是通过属性与属性值来共同设定。属性名称是CSS的关键字，如font-family(字体)、font-size(文字大小)、display(显示属性)、color(颜色)等。属性用语指定元素某一方面的特性，而属性值则用于指定元素的特性的具体特征。n样式表的建立要符合CSS规则，它们一般被定义成以下形式的句法：n标志标志属性1:属性值1;标志属性2

4、:属性值2;标志属性3:属性值3;.2.一个无CSS样式表XML文件n【例6.1】这是一个没有应用层叠样式表的XML文档，code6_1.xml望庐山瀑布唐.李白日照香炉升紫烟遥看瀑布挂前川飞流直下三千尺疑是银河落九天2.一个无CSS样式表XML文件3.一个使用CSS样式表XML文件n在XML文档的开头部分写一个关于样式单的如下声明语句：n也可以使用完整的URL指定CSS样式表文件，像下面这个例子：一个使用CSS样式表XML文件charsetgb2312;namedisplay:block;font-family:黑体;font-size:20pt;letter-spacing:10pt;te

5、xt-align:center;writerdisplay:block;font-family:魏碑;font-size:10pt;font-weight:bold;letter-spacing:10pt;line-height:40pt;text-align:center;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、6.2.1font属性集。n1.font属性的分类font属性通常用于设置指定字体的风格、大小、亮度等参数。该属性在XML样式表分类中属于通用字体类，由CSS样式表定义。font属性的常见子属性见表6.1表6.1font属性的常见子属性font属性属性说说 明明font-family指定字体的字型font-style指定字体的风格font-weight指定字体的亮度font-variant指定字体全为大写字母font-size指定字体的大小font-stretch指定字体的压缩或拉伸方式2.font属性的用法n和常见的CSS属性设置类似，font属性使用示例如下：elementfont-sty

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

8、以按顺序使用第2个字符集显示字体。4.字体风格font-style属性font-style属性属性说说 明明Normal表示不使用斜体，该参数是font-style属性的默认值Italic表示使用斜体显示文字Oblique表示使用倾斜幅度不大的斜体显示文字5.字体亮度font-weight属性nfont-weight属性设置字体的粗体程度，用于决定文本以多黑(粗)或多浅(细)显示文本。5.字体亮度font-weight属性font-weight属性属性说说 明明Normal表示使用标准字体（没有加深色彩），该参数是font-variant属性的默认值Bold表示使用标准的黑体文本Bolder表

9、示使用比标准黑体还要深的颜色显示文字（为相对参数）Lighter表示使用比标准黑体稍浅的颜色显示文字（为相对参数）6.设置为大写字母font-variant属性font-variant属性属性说说 明明Normal表示在打印中大写字母没有变化，该参数是font-variant属性的默认值small-caps表示设定用大写字母代替文本中的小写字母。font-variant属性值设置为small-caps将会用比主体文本字号小一些的大写字母代替小写字母7.设置字体大小font-size属性font-size属属性性说说 明明整数+“pt”表示使用指定的像素大小显示字体，“pt”表示像素（如20pt

10、、35pt）整数+“%”表示当前元素使用字体大小是前一个元素大小的百分倍数（如40%、150%）Large表示使用比父元素大一号的字体x-small表示使用字体比small字体小1.2倍xx-small表示使用字体比x-small字体小1.2倍x-large表示使用字体比large字体大1.2倍xx-large表示使用字体比x-large字体大1.2倍Medium表示使用标准字体大小显示8.文本属性文本属性文本属性说说 明明letter-spacing设置字母间隔，可以增加或减少字母之间的间距Word-spacing设置文字间隔。其使用方法和letter-spacing类似vertical-a

11、lign确定一个内部元素的相对于它的上级元素或相对与元素行纵向位置text-align作用于块元素，用来设置块中文本的对齐方式，取值为：left(左对齐)、right(右对齐)、center(居中)、justify(两端对齐)text-indent设置第一行缩进距离。如：nametext-indent:2em,表示第一行缩进两个字的长度inline-height控制文本连续行之间的距离，可以用来调整文本的垂直线的距离。text-transform设置显示文本的字母大小写的显示形式。取值关键字为：capitalize，首字母大写；uppercase，所有字母都大写；lowercase，所有字母都

12、小写；none，不改变字母的大小写状态text-decoration声明文本是否有划线，常用来装饰链接。取值关键字为：overline，文本有上划线；line-through，穿过文本的删除线；blink，使文字闪烁；underline，有下划线；none,则是表示没有任何划线。9.在CSS样式表中显示中文n在XML文档中使用中文元素名称时，我们需要在文档序文部分添加encoding=“gb2312”的XML指令声明。但是在CSS中，要对目标元素进行格式指定，则要求目标元素只能是由XML的标准命名字符命名（例如大小英文字母、数字、下划线等），而绝对不能使用中文元素名称。n由于CSS1在支持非字

13、母文字方面表现很不尽如人意，所以在CSS2中针对这个问题进行了改善。CSS2标准中对于多语言功能的支持是通过关键字“charset”再加上需要使用的语言字符集名称实现的，例如要使用的是中文国标字符集，就要在CSS文件的第1行加入语句：charsetgb23126.3设置色彩和背景图象属性n在互联网中，没有色彩的页面即便做得再精致也缺乏吸引力。CSS样式表中对于色彩和图像的设定功能也是比较完善和强大的，接下来就让我们学习在样式表中添加色彩属性的定义。6.3.1定义前景色n1.color属性颜颜色色十进制十进制RGB十六进十六进制制RGBRGB百分百分数数纯红rgb(255,0,0)#FF0000

14、rgb(100%,0%,0%)纯蓝rgb(0,0,255)#0000FFrgb(0%,0%,100%)纯绿rgb(0,255,0)#00FF00rgb(0%,100%,0%)白色rgb(255,255,255)#FFFFFFrgb(100%,100%,100%)黑色Rgb(0,0,0)#000000rgb(0%,0%,0%)浅紫Rgb(255,204,255)#FFCCFFrgb(100%,80%,100%)浅灰Rgb(153,153,153)#999999rgb(60%,60%,60%)褐色Rgb(153,102,51)#996633rgb(60%,40%,20%)粉红Rgb(255,204

15、,204)#FFCCCCrgb(100%,80%,80%)橙色Rgb(255,204,0)#FFCC00rgb(100%,80%,0%)2.color属性的用法n现在，定义code6_4.css文件。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(0

16、00,000,256);contentDdisplay:block;color:rgb(000,256,256);2.color属性的用法6.3.2定义背景色n1.background属性集background属性属性说说 明明background-color用于对指定元素设置背景颜色background-image 用于对指定元素设置背景图案background-repeat在背景图案小于指定元素的情况下，是否使用重复填充图案background-attachment用于指定设置的背景图案在元素滚动时是否一起滚动background-position用于指定背景图案的起始位置2.设置背景颜色

17、n（1）#RGBn（2）#RRGGBBn（3）rgb（RRR，GGG，BBB）n（4）rgb（R%，G%，B%）n（5）颜色名称3.设置背景图案n（1）background-image：定义背景图形。取值为none、url，当取值为none时表示不用图形作背景，url表示提供图形文件的URL地址。n（2）直接的图像文件名称（如image001.gif），这里是指和CSS样式表文件在同一目录下的文件。4.设置背景图案重复方式n（1）repeat：使用背景图案完全填充元素大小的空间。n（2）repeat-x：使用背景图案在水平方向从左到右填充元素大小的空间。n（3）repeat-y：使用背景图案在

18、竖直方向从上到下填充元素大小的空间。n（4）no-repeat：不使用背景图案重复填充元素。5.设置背景图案滚动方式n（1）scroll：表示在文字页面滚动时，背景一起滚动。n（2）Fixed：表示在文字页面滚动时，背景固定不滚动。6.设置背景图案起始位置n（1）top：表示背景图案位于指定元素的顶部。n（2）center：表示背景图案位于指定元素的中部。n（3）bottom：表示背景图案位于指定元素的底部。n（4）left：表示背景图案位于指定元素的左部。n（5）right：表示背景图案位于指定元素的右部。6.4设置边界属性n设置元素在文件中的位置。n在元素周围添加边框，并设置边框的样式，大

19、小。n控制相邻元素的位置。6.4.1设置边框属性border-style属性属性描述描述None不显示边框，为缺省值Dotted点线Dashed虛线Solid实线Double双线Groove3D陷入线Ridge3D山脊狀线Inset使页面有沉入感Outset使页面有浮出感6.4.2设置填充属性n给元素与顶，底，左，右边框添加填充padding-toppadding-bottompadding-leftpadding-right6.4.3设置大小属性n在CSS中设置边框大小的属性为width、height。取值为auto、指定大小或父元素宽度的百分比。当width、height取值为auto时，

20、表示根据元素大小自动调整width、height的取值。6.4.4设置定位属性定位属性定位属性描述描述float设置文本相对于元素的位置。取值为：left、right、noneleft下一个文本位于元素的左边right下一个文本位于元素的右边none缺省值，下一个文本紧接着显示出来clear设置浮动元素相对于元素的位置。取值为：left、right、none、bothleft浮动元素位于元素的左边right浮动元素位于元素的右边both浮动元素位于元素的两侧6.4.5设置页面边界属性margin-topmargin-bottommargin-leftmargin-rightn上述元素依次是对元素的顶部，底部，左边，右边添加页边距。设置页边距可以使用指定大小的数值6.5CSS2新增功能n6.5.1规则n6.5.2新增属性