第四章 样式语言.ppt
《第四章 样式语言.ppt》由会员分享,可在线阅读,更多相关《第四章 样式语言.ppt(66页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第四章第四章 样式语言样式语言4.1 需要样式单的原因需要样式单的原因因为在XML文档中,使用的基本上是文档编写者自定义的标记,浏览器无法理解这些标记;XML设计的目的就是内容与表现形式是分开的.为了显示XML文档,必须有一个机制来描述如何显示文档,这种机制就是样式单(style sheet).样式单是用于描述XML文档表现方式的文档,即可以描述这些文档如何在屏幕上显示,还可以描述它们的打印效果,甚至声音效果.样式单一般是独立于XML文档之外的,独立存在的.与HTML相比,样式单机制有许多优点:(1)表达效果丰富(2)使用方便(相同的数据可以定义不同的效果)(3)可重复使用(多个文档可以共享一
2、个样式单)(4)文档体积小(5)便于信息检索(6)可读性好4.2 层叠样式单层叠样式单层叠样式单CSS最初是针对HTML而提出的样式单语言,它也可以用于XML文档的描述,可以描述如:元素的位置,颜色,背景,边框,字体,排版格式等.对于CSS,W3C有两个标准:CSS1和CSS2.CSS2是在CSS1的基础上增加了媒体类型,特性选择符,声音样式等功能.CSS的基本思想是为XML和HTML文档中的各元素定义出一组相对应的显示样式.一个CSS样式单就是一组规则.每个规则指定了些规则所适用的元素名称,以及要应用于这些元素的样式描述信息.如:例4-1XML文档 配套的CSS文档我们可以看到打开后的效果变
3、了.如图示4.2.1 在XML文档中引用CSS样式单在XML文档中引用CSS样式单,首先要在XML文档的序言里加上一条引用样式单的处理指令.如:在XML文档中使用CSS的方式有两种:引用方式和嵌入方式.(1)引用方式:指XML文档本身不含有样式信息,通过引用外部CSS文件来定义文档的表现形式,大部份引用CSS的情况都是这种情况;具体使用方法如下:里面,stylesheet表示的它是一个处理指令,表明引用样式单;type表示它的样式单类型是css;href表示样式单所在的地址,可以用绝对地址表示,也可以用相对地址表示.(2)嵌入方式:它是指将CSS样式规则直接嵌入到XML文档内部,方法是为元素设
4、置”style”属性,并在属性值中给出对其样式的定义.这种用法主要用在一些特殊的XML文档中,一般说来,嵌入CSS样式的XML文档本身就是面向显示的.4.2.2 CSS的样式规则CSS的样式规则主要由两个部份组成:选择符和样式描述.选择符是用来指定CSS规则适用于哪些元素的,最常用的选择符的元素的名称(或称标记名);样式描述部分用花括号括起来,其内容是一组用于指定元素的以分号隔开的样式属性名及其属性值.样式规则定义的基本格式为:选择符 样式属性1:属性值1;样式属性2:属性值2;CSS采用样式规则来定义XML元素的输入格式,用一个选择符可以将一条规则与一个或几个XML元素联系起来.CSS经过发
5、展,现在已经到了CSS2阶段.1.选择符大多数情况下,选择符就是被它施加样式的元素名称,浏览器在文档中碰到这些元素时,就会使用在CSS中定义好的样式来显示它们.(1)标记名:把XML标记名作为选择符,表示规则将应用于这类元素.如前面例子中的(2)类名 将标记的class属性的值作为选择符,表示规则将应用于class属性值等于指定类名的元素.在类名前要加一个点.如果要对文档中的一些内容进行分类处理,对不同类的内容定义不同的显式样式,可以把class属性加到这一些元素的标记中,然后编写一些规则对不同”class”属性的值定义不同的显示样式.例4-2css文档对应的XML文档使用class定义后的效
6、果但我们要注意到,如果在XML文档中用定义DTD文档的话,class的属性值必须在DTD中事先声明,否则会导致出现错误.(3)标记名,类名:把标记名,类名组合作为选择符,表示规则将应用于标记中含有”class”属性并且属性等于所给类名的元素.如果想把同一个类型的某些元素设计成不同的样式,可以把class属性加到这一类型的某些元素之上,然后编写规则对这些元素定义样式.例4.3 css文档 XML文档标记名+类名示例的显示结果(4)#标志符 将带标记的”ID”属性值作为选择符,表示规则将应用于”ID”属性值等于指定标识名的元素.一般情况下,为标识定义的样式优先于为类定义的样式.例4.4 css文档
7、xml文档#标志名 将标记的”ID”属性的值作为选择符,表示规则将应用于”ID”属性值等于指定标识符的元素(5)标记名#标识名:把标记名和标识名组合作为选择符,表示规则仅应用于指定标记中含有ID属性且ID属性值等于所给标识名的元素.(6)父标记名 字标记名.把父元素的标记名和子元素的标记名组合作为选择符,表示规则仅应用于指定元素的子元素.父标记和子标记间用空格分隔.例4.5 css文档 对应的XML文档父标记名 子标记名的效果(7)用逗号分隔多个选择符,表示把样式规则应用于多个元素,表达形式为:选择符,选择符,样式属性1:取值1;样式属性2:取值2;例 css文档 xml文档(8)通用选择符,
8、用”*”表示所有元素例4.7css文档 xml文档2.设置样式属性样式属性指的是可以在样式单中设置的显示特性.CSS标准提供的样式属性包括字体属性(字形,大小,粗细,倾斜等)、颜色属性、背景属性、边框属性(页边空,边框,内空等)、内容编排(独立块、内联、列表、表格、隐藏等)、页面排版等。一些常见的属性值请见课本135页表4-1与表4-2。根据属性的不同,属性值的选取也有所不同,属性值主要有以下4种:(1)长度:单位较重要,有pt,in,cm,px等;(2)URL:给属性赋URL,如背景图等;(3)颜色:在CSS中颜色是个很重要的属性,常用的方式有4种:颜色名称,十六进制数,十进制数及百分比形式
9、.(4)关键字:预先定义好的字符型属性值。组件的显示方式一般由display属性设置。此属性有block,inline和none3种常用值,分别表示分块,不分块和不显示。例 4-8-1.css(分块)4-8-2.css(不分块)4-8.xml分块显示模式(block)不分块的形式(inline)(6)设置块背景CSS标准提供的背景属性可以定义元素背景。元素的背景指的是围绕元素文字的区域。可设置成某种颜色,也可是图或小图片平铺。它可以帮助人们从视觉上区分元素。例4.9CSS文档 xml文档小图片平铺块背景效果(7)设置外框实际上每一部分显示内容都有一个影响基本内容布局的想像中的框,不特别设置无法
10、看到这些框。我们可以把这个框画出来。例 css文档 xml文档为XML文档指定边框边框线有4种样式可供选择,dotted(点线),dashed(虚线),solid(实线)和double(双线).float属性可指定显示位置,如left表示这个元素将出现在网页的左侧。例 css文档 xml文档增加了padding属性4.2.3 添加注解CSS样式单中的注解相当于C语言中的/*/如:/*这是一个CSS样式单文件*/4.2.4 继承性样式定义具有继承性,不需要为文档中的每个可能属性明确定义规则。如:如果某个子元素没有指定字号,那么这个元素将继承其父元素的字号;如果没有指定这个元素的颜色,将继承其父元
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第四章 样式语言 第四 样式 语言
限制150内