《层叠样式表》PPT课件.ppt

第6章 层叠样式表,丁跃潮 张涛 叶文来 刘韵华 程旭曼 丁潇 张天桥,概述,教学提示：XML为存储结构化数据提供了强大的方法，但是它没有提供关于数据如何显示的信息，这实际上是XML的优点：数据的结构完全与数据表示无关。当有必要表示格式化XML文件中的数据时，格式化的详细信息放置在层叠样式表CSS中。 教学目标：理解层叠样式表CSS的概念，掌握层叠样式表CSS的方法，掌握CSS与XML结合的方法，学会综合运用CSS。,6.1 CSS简介 6.2 设置字体属性 6.3 设置色彩和背景图象属性 6.4 设置边界属性 6.5 CSS2新增功能 6.6 综合实例,6.1 CSS简介,CSS 是用于为XML数据定义显示参数的一种技术，它利用简单的规则来控制元素内容在浏览器中的表现方式。CSS最初是被开发来为HTML文档指定显示的，同时也适合于XML数据。样式表中的显示规范与XML数据分离，这意味着相同的数据通过应用不同的样式表可以以不同的方式显示。同样，相同的样式表可以应用到多个XML文件。,6.1.1 CSS的概念,CSS（Cascading Style Sheet）层叠样式表，也称为级联样式表，是用来进行网页风格设计的。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。,6.1.2 CSS的使用,1. CSS基本语法 2. 一个无CSS样式表XML文件 3. 一个使用CSS样式表XML文件,1. CSS基本语法,CSS的规则是通过属性与属性值来共同设定。属性名称是CSS的关键字，如font-family(字体)、font-size(文字大小)、display(显示属性)、color(颜色)等。属性用语指定元素某一方面的特性，而属性值则用于指定元素的特性的具体特征。 样式表的建立要符合CSS规则，它们一般被定义成以下形式的句法： 标志标志属性1:属性值1;标志属性2:属性值2;标志属性3:属性值3;.,2. 一个无CSS样式表XML文件,【例6.1】这是一个没有应用层叠样式表的XML文档，code6_1.xml 望庐山瀑布 唐.李白 日照香炉升紫烟 遥看瀑布挂前川 飞流直下三千尺 疑是银河落九天 ,2. 一个无CSS样式表XML文件,3. 一个使用CSS样式表XML文件,在XML文档的开头部分写一个关于样式单的如下声明语句： 也可以使用完整的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: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.2.1 font属性集,。,1. font属性的分类 font属性通常用于设置指定字体的风格、大小、亮度等参数。该属性在XML样式表分类中属于通用字体类，由CSS样式表定义。font属性的常见子属性见表6.1,表6.1 font属性的常见子属性,2. font属性的用法,和常见的CSS属性设置类似，font属性使用示例如下： elementfont-style:italic;font-size: “20pt“; font-family: “楷体_gb2312“;,3. 字体字型font-family属性,font-family属性用于指定字体名称，属性值使用逗号分隔的字体名称。如果字体名称中出现空格，必须使用双引号将字体括起来，如“Times New Roma”。 font-family属性可用的值取决于用户系统中已经安装了的字体，在Windows系统的安装目录下单位的“fonts”文件夹中保存了系统安装的所有字体。 font-family属性的参数值可以有几个，在指定font-family属性的时候，可以同时指定几个字符集。这样，在浏览器找不到第1个字符集的时候可以按顺序使用第2个字符集显示字体。,4. 字体风格font-style属性,5. 字体亮度font-weight属性,font-weight属性设置字体的粗体程度，用于决定文本以多黑(粗)或多浅(细)显示文本。,5. 字体亮度font-weight属性,6. 设置为大写字母font-variant属性,7. 设置字体大小font-size属性,8. 文本属性,9. 在CSS样式表中显示中文,在XML文档中使用中文元素名称时，我们需要在文档序文部分添加encoding=“gb2312”的XML指令声明。但是在CSS中，要对目标元素进行格式指定，则要求目标元素只能是由XML的标准命名字符命名（例如大小英文字母、数字、下划线等），而绝对不能使用中文元素名称。 由于CSS1在支持非字母文字方面表现很不尽如人意，所以在CSS2中针对这个问题进行了改善。CSS2标准中对于多语言功能的支持是通过关键字“charset”再加上需要使用的语言字符集名称实现的，例如要使用的是中文国标字符集，就要在CSS文件的第1行加入语句： charset“gb2312“,6.3 设置色彩和背景图象属性,在互联网中，没有色彩的页面即便做得再精致也缺乏吸引力。CSS样式表中对于色彩和图像的设定功能也是比较完善和强大的，接下来就让我们学习在样式表中添加色彩属性的定义。,6.3.1 定义前景色,1.color属性,2.color属性的用法,现在，定义code6_4.css文件。 charset“gb2312“; 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);,2.color属性的用法,6.3.2 定义背景色,1.background属性集,2.设置背景颜色,（1）#RGB （2）#RRGGBB （3）rgb（RRR，GGG，BBB） （4）rgb（R%，G%，B%） （5）颜色名称,3.设置背景图案,（1）background-image：定义背景图形。取值为none、url，当取值为none时表示不用图形作背景，url表示提供图形文件的URL地址。 （2）直接的图像文件名称（如image001.gif），这里是指和CSS样式表文件在同一目录下的文件。,4.设置背景图案重复方式,（1）repeat：使用背景图案完全填充元素大小的空间。 （2）repeat-x：使用背景图案在水平方向从左到右填充元素大小的空间。 （3）repeat-y：使用背景图案在竖直方向从上到下填充元素大小的空间。 （4）no-repeat：不使用背景图案重复填充元素。,5.设置背景图案滚动方式,（1）scroll：表示在文字页面滚动时，背景一起滚动。 （2）Fixed：表示在文字页面滚动时，背景固定不滚动。,6.设置背景图案起始位置,（1）top：表示背景图案位于指定元素的顶部。 （2）center：表示背景图案位于指定元素的中部。 （3）bottom：表示背景图案位于指定元素的底部。 （4）left：表示背景图案位于指定元素的左部。 （5）right：表示背景图案位于指定元素的右部。,6.4 设置边界属性,设置元素在文件中的位置。 在元素周围添加边框，并设置边框的样式，大小。 控制相邻元素的位置。,6.4.1 设置边框属性,6.4.2 设置填充属性,给元素与顶，底，左，右边框添加填充 padding-top padding-bottom padding-left padding-right,6.4.3 设置大小属性,在CSS中设置边框大小的属性为width、height。取值为auto、指定大小或父元素宽度的百分比。当width、h