XML认证考试实用教程课件

1、XML认证考试实用教程2009年3月CSS简介CSS基本语法CSS属性的设置CSS的应用第5章 样式表CSS的应用样式表CSS简介 层叠样式表（Cascading Style Sheet）是一系列格式规则，它们控制网页内容的外观。使用CSS样式可以灵活并控制确切的网页外观，从精确的布局定位到特定的字体和样式。 样式表有如下4个较为突出的优点： 数据表现力量 样式表可以支持文字和图像的精确定位以及交互操作等，对于文档的表现力远远超过HTML中的标记。 文档体积小 在实际应用中，常常会给相同名称标记下的内容定义相同的表现方式，使用传统的方法需要在每个标记中加以描述，这样就会造成大量的重复定义。 有

2、利于信息检索 样式表可以实现非常复杂的显示效果，但因为样式显示与数据结构描述和分离，显示细节的描述并不影响文档中数据的内容结构。 可读性比较好 样式表对各种标记的显示进行集中定义，而且定义方式直观易读。从而使得它具有易学易用、可读性强以及可维护性的特点。 CSS的创建与应用 创建一个XML文件，其名称为book.xml，其具体的内容如下： XML实例教程李扬 CSS样式表是一个以“.css”为文件扩展名的纯文本文件，其中包含一组告诉浏览器如何安排和显示XML文档中各种元素的规则。一般可以使用“记事本”等文本编辑器来建立CSS样式表文件。 CSS语法概述 1. CSS语句的基本格式CSS为结构文

3、件中的各个标记定义出相应的一组显示样式，其基本格式如下：selector property: value （选择符 属性：值） 2. CSS中的注释可以在CSS样式单中包含注释，CSS注解类似于C语言的/* */注释，在其中可输入任何说明的文字，而不像XML和HTML的注释。 3. CSS中字母的大小写对于IE浏览器而言，样式表中字母大小是不加区分的，所以在CSS中，“BOOK”、“book”是一样的。 4. CSS中的属性继承在一般情况下，在CSS中为某个元素所设置的显示格式属性将会影响到该元素所包含的所有子元素，除非这些子元素又设置了不同格式属性。5. 在CSS中使用中文在XML文档中通过

4、在XML声明语句内添加到“encoding=gb2312”语句中，就可以使用简体中文的元素名称。 CSS选择器 最常用的选择器有如下五类 ：1. 标签选择器在HTML中，标签选择器是直接将HTML标签作为选择器，可以是p、h1、dl、strong等HTML标签。 2. ID选择器：可以通过在XML文档中为具有相同名称的若干个元素分别指定不同的ID属性，以便在相应的CSS文件中对相同名称不同ID属性的元素分别设定不同的显示格式规则。3. 类（class）选择器与在HTML文档中一样，在XML文档中也允许为具有相同名称的若干个元素，分别指定不同的CLASS属性，就可以在相应的CSS文件中，对相同名

5、称不同的ClASS属性元素分别设定不同的规则，从而增加样式设置的灵活性。4. 群组选择器当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。5. 后代选择器后代选择器也叫派生选择器。可以使用后代选择器给一个元素里的子元素定义样式 。CSS属性与属性值（一） 1. 属性关键字CSS中必须使用预先定义的属性关键词来设置元素的显示规则，CSS的属性关键字包括特定的属性名称关键字以及属性值关键字等内容。2. 尺寸属性值（1）相对长度单位相对长度单位规定一个长度是相对于另外一个长度。相对长度单位共有如下几种：em：相对于字体的font-size属性值ex：相对于字体的x-height值p

6、x：相对于浏览设备的像素点（2）绝对长度单位绝对长度单位分为in（英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（pica）。 CSS属性与属性值（二）3. URL属性值（1）绝对URL绝对URL是指URL放在任何一个网页中都能正常使用，因为它是网络空间中的一个绝对位置。下面是一个使用绝对URL的例子：bodybackground-image:url(/images/learning a_banner_02.gif);（2）相对URL相对URL是指相对于文档自身所在位置的路径。例如，CSS文件和名称为hda_banner_02.gif的图片文件处于相同的目录。当CSS中使用这个图片的时候

7、，URL的写法如下：bodybackground-image:url(hda_banner_02.gif);CSS属性的设置（设置显示属性 ） 元素的display属性的作用是控制了浏览器显示该元素文字的基本方法，可以为display属性指定下面几种属性值中的任何一种。 block：象块类型元素一样显示。 none 缺省值：向行内元素类型一样显示。 inline-block：象行内元素一样显示，但其内容象块类型元素一样显示。 list-item：象块类型元素一样显示，并添加样式列表标记。 table-header-group：显示在任何表格行和行组合之前，在头部标题之后。 table-foot

8、er-group：显示在任何表格行和行组合之后，在底部标题前。CSS属性的设置（设置文字属性 ）1. 字体名称属性(font-family) 该属性的作用是设置元素文字的字体，其属性值是字体名称。 2. 字体大小属性(font-size) 这个属性可以设置字体的大小。3. 字体风格属性(font-style) f ont-sytle属性的作用是设置元素的字形，该属性有三个可选值：normal（正常）、italic（斜体）、oblique（倾斜）。4. 字体浓淡属性(font-weight)font-weight用于设置字体的浓淡属性，这个属性常用值是normal和bold（加粗），normal

9、是缺省值。 5. 字体变量属性(font-variant)该属性的作用是设置元素字母的大小写，可以使用normal和small-caps两个关键字作为其属性值。6. 字体属性(font)这个属性是各种字体属性的一种快捷的综合写法，这个属性可以综合字体风格属性(font-style)，字体变量属性(font-variant)，字体浓淡属性(font-weight)，字体大小属性(font-size)等属性。 7. 字体颜色(color)该属性用于设置字体的颜色，字体颜色用CSS中的颜色属性来表示。CSS属性的设置（设置色彩属性 ）CSS可以处理16,777,216颜色，可以使用名字、rgb值或十

10、六进制代码表示。如使用red红色、rgb（255,0,0）、rgb（100%,0%,0%）、#ff0000、#f00都是等效的。在CSS中有17个预先确定的颜色，分别是：Aqua（浅绿色），black（黑色），blue（蓝色），fuchsia（品红色），gray（灰色），green（绿色），lime（酸橙色），maroon（酱紫色），navy（海蓝色），olive（橄榄色），orange（桔黄色），purple（紫色），red（红色），silver（银色），teal（深青色），white（白色），and yellow（黄色）。同时，transparent也是一个正确值。RGB的三个值都是从0到

11、255，0是最低级，255是最高级，这些值同样可以是百分比。 CSS属性的设置（设置边框属性 ）元素的边框就是围绕元素内容和内边据的一条或多条线。1. 边框样式属性CSS 的 border-style 属性定义了 9 个不同的边框样式，其具体的名称和作用如下图所示：CSS属性的设置（设置边框属性 ）2. 边框颜色属性设置边框颜色非常简单，CSS 使用一个简单的 border-color 属性，一次可接受最多 4 个颜色值。 3. 边框宽度属性border-width属性可以用来设置整个边框的宽度，为边框指定宽度有两种方法：可以指定长度值，比如2px或0.1em；或使用3个关键字之一，它们分别是

12、thin（细）、medium（默认值）和thick（粗）。4. border属性使用bord属性可以一次性地指定整个边框样式、颜色、和宽度等属性，如下面的代码是为name元素添加由黑色细实线构成的四周边框线：namedisplay:blockborder:solid thin blackCSS属性的设置（设置布局属性 ）1. 设置元素位置 top：设置元素顶端与其他元素的距离。 bottom：设置元素顶端与其他元素的距离。 left：设置元素左端与其他元素的距离。 right：设置元素右端与其他元素的距离。 width：设置元素的宽度。 height：设置元素的高度。2. margin属性 m

13、argin 属性是用于在一个声明中设置四个外边距的所有属性的简写属性。 margin属性包括margin-top、margin-right、margin-bottom、margin-left四个部分。3. padding属性 padding：元素与四周边框的距离； padding-top：元素与上边框的距离； padding-right：元素与下边框的距离； padding-bottom：元素与左边框的距离； padding-left：元素与右边框的距离。CSS属性的设置（设置背景属性 ）1. 背景颜色属性(background-color) 这个属性为元素设定背景颜色，相当于HTML中bgc

14、olor属性。将title元素的文字设置为翠绿色的代码为：body background-color:#99FF00;。2. 背景图片属性(background-image) Namebackground-image:url(C:/images/css_tutorials/background.jpg)3. 背景重复属性(background-repeat) repeat-x：背景图片横向重复。 repeat-y：背景图片竖向重复。 no-repeat：背景图片不重复。4. 背景附着属性(background-attachment) 其具体的语法格式如下： body background-im

15、age:url(C:/images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed 5. 背景位置属性(background-position) namebackground-image:url(C:/images/css_tutorials/background.jpg); background-repeat:no-repeat; background-position:30px 60px CSS属性的设置（设置文本属性 ）1. letter-spacing 作用是

16、控制文本元素字母间的间距，所设置的距离适用于整个元素。 2. line-height 该属性用于设置元素中文本的行间距，可以将此属性的属性值设置为任何形式的尺寸值。 3. text-align 该元素的功能是在元素框中水平对齐文本，常见的对齐方式有left（左对齐）、right（右对齐、center（居中）、justify（均匀分布）四种。其语法格式为：name text-align:center。4. text-decoration none：无文本修饰，缺省设置。 underline：下划线。 overline：上划线。 line-through：删除线。 blink：闪烁。CSS属性的设

17、置（设置文本属性 ）5. text-indent 该属性的作用是进行文本缩排，用于段落的第一行缩排上。 设置首行缩排的尺寸为指定度量单位，有些单位是相对的，有些则是绝对的。name text-indent:3em代码是将name元素的第1行及其字母宽度的3倍排列。 6. text-transform text-transform属性用于设置一个或几个元素文字大小写方式，该属性的属性值可以设定为下面4个关键字之一： none：不改变文本的大写小写。 capitalize：元素中毎个单词的第一个字母用大写。 uppercase：将所有文本设置为大写。 Lowercase：将所有文本设置为小写。CS

18、S属性的设置（设置文本属性 ）7. vertical-align 该属性的作用是建立上标或下标文字，也可以设置元素文字在垂直方向上的对齐方式，这个属性只会影响display属性值被设置为inline的属性。 baseline：对准两个元素的小写字母基准线。 sub下标。 super：上标。 top：顶部对齐。 text-top：文本顶对齐。 middle：中线对齐。 Bottom：底线对齐。 text-bottom：字母底线对齐。8. word-spacing 该属性用于控制文本中元素单词间的间距。 CSS的应用 1、CSS可以分别与XML和XHTML结合 对于HTML/XHTML文档来说，CSS是在已有的样式标签上设置更多的样式属性，而对于XML文档，CSS则需要为它设置所有的样式属性。 2、使用CSS添加图像 在XML文档中插入图像的一种方法就是将每个图像放置在一个单独的元素中，然而使用CSS样式表中的background或者background-image属性来显示图像。 如下图所示：CSS链接 （使用一般链接指令 ）可以在XML文档的开头使用xml：stylesheet处理指令将指定的CSS样式表链接进来，该处理指定的格式为：。其中各个参数的含义如下： ?xml:stylesheet：表示当前XML文档在显示时需要使用样式表，xml与