XML基础教程第4章

1、1XML实用技术2第第8章章 XML与与CSS 8.1初识初识CSS8.2 XML关联关联CSS8.3 标记与样式表标记与样式表8.4 数据结构与显示相分离数据结构与显示相分离8.5 设置文本的显示方式设置文本的显示方式8.6字体字体8.7文本样式文本样式8.8边框边框 8.9边缘边缘8.10颜色和背景颜色和背景8.11显示图像显示图像8.12设置鼠标的形状设置鼠标的形状8.13处理层叠处理层叠8.1初始初始CSS3如果想让浏览器显示如果想让浏览器显示XML文件中标记的文本内容，那么文件中标记的文本内容，那么必须以某种方式告诉浏览器如何显示。必须以某种方式告诉浏览器如何显示。W3C为为XML数

2、据数据显示发布了两个建议规范：显示发布了两个建议规范：CSS（层叠样式表）和（层叠样式表）和XSL（可扩展样式语言）（可扩展样式语言）在在CSS中，最重要的概念就是样式表。样式表是一组规中，最重要的概念就是样式表。样式表是一组规则，通过这组规则告诉浏览器用什么样式来显示文本，则，通过这组规则告诉浏览器用什么样式来显示文本，比如显示字体、颜色、页边距。比如显示字体、颜色、页边距。一个样式表的格式：一个样式表的格式：文本代表文本代表样式规则样式规则4一个样式表的格式：一个样式表的格式：文本代表文本代表样式规则样式规则对于对于XML文件，样式表中的文件，样式表中的“文本代表文本代表”可以是标记的名称

3、。样式可以是标记的名称。样式表中的表中的“样式规则样式规则”是若干个用分号分隔的是若干个用分号分隔的“属性名：属性值属性名：属性值”。namedisplay:block;font-size:36pt;font-weight:bold;样式表用来显示标记样式表用来显示标记“name”的文本内容。一个层叠样式表的文本内容。一个层叠样式表CSS就就是由若干个样式表组成的文本文件，该文本文件可以使用是由若干个样式表组成的文本文件，该文本文件可以使用ANSI或或UTF-8编码来保存。文件的扩展名是编码来保存。文件的扩展名是“.css”。注意：样式表定义的注意：样式表定义的“文本代表文本代表”中不要含有非

4、中不要含有非ASCII字符，目前字符，目前的大部分浏览器不支持这样的样式表的大部分浏览器不支持这样的样式表。58.2 XMLXML关联关联CSS 为了让为了让XML使用层叠样式表，使用层叠样式表，XML文件必须使用操作指令文件必须使用操作指令 将当前将当前XML文件关联到某个层叠样式表，样式表的文件关联到某个层叠样式表，样式表的URI如果是一个文件的名字，该文件必须和如果是一个文件的名字，该文件必须和XML文件在同一文件在同一目录中。目录中。操作指令中操作指令中href属性值是一个属性值是一个URL，该，该URL必须是有效的必须是有效的可访问的，例如：可访问的，例如：Example8_1.xm

5、l李小林李小林 男男 1998年年12月月22日日金锦巾金锦巾 女女 1999年年08月月10日日6例例1oneCSS.cssnamedisplay:block;font-size:18pt;font-weight:boldsexdisplay:line;font-size:12pt;font-style:italicbirthdaydisplay:line;font-size:10pt;font-weight:bold78.3 标记与样式表标记与样式表 CSS中的样式表负责给出中的样式表负责给出XML文件中标记包含文件中标记包含的文本数据的显示外观，为此，样式表的名称的文本数据的显示外观，为

6、此，样式表的名称必须和必须和XML文件中标记的名称建立某种联系。文件中标记的名称建立某种联系。一个样式表的格式如下：一个样式表的格式如下：文本代表文本代表 样式规则样式规则本节讲述如何为样式表命名。本节讲述如何为样式表命名。898.3 标记与样式表标记与样式表 一个样式表的格式如下：一个样式表的格式如下：文本代表文本代表 样式规则样式规则 对于对于XML文件，样式表中的文件，样式表中的“文本代表文本代表”可以是：可以是：1 1、标记的名称。、标记的名称。2 2、标记的名称与该标记的、标记的名称与该标记的IDID属性值用属性值用# #连接起来的字符串。连接起来的字符串。当当XMLXML有许多标记

7、具有相同的名字，准备使用不同的外有许多标记具有相同的名字，准备使用不同的外观来显示它们的内容时，观来显示它们的内容时，“文本代表文本代表”使用使用“标记名标记名称称”+ +“# #”+ +“IDID属性值属性值”就显得很方便了，因为可以为这就显得很方便了，因为可以为这些名字相同的标记指定不同的些名字相同的标记指定不同的IDID属性值。属性值。3 3、如果有多个标记的内容需要由完全一样方式来显示，、如果有多个标记的内容需要由完全一样方式来显示，“文本代表文本代表”也可以是这些标记的名称用逗号分隔的字也可以是这些标记的名称用逗号分隔的字符串。符串。10例如例如name,sex,birthdayna

8、me,sex,birthday display:block;font-size:36pt;font- display:block;font-size:36pt;font-weight:bold;weight:bold; 注意：浏览器把英文输入法状态下编辑的连续注意：浏览器把英文输入法状态下编辑的连续空格按一个空格处理，如果准备显示标记中的空格按一个空格处理，如果准备显示标记中的全部空格，在编辑全部空格，在编辑XMLXML文件时，需将输入法切换文件时，需将输入法切换成成“中文中文”输出法，并选择输出法，并选择“全角状态全角状态”来编来编辑空格字符。辑空格字符。11old例子例子1Cha4_1.x

9、ml 北京时间北京时间: 12点点 56分分 格林威治时间格林威治时间: 4点点 56分分 12Show1.csstime display:block;font-size:20pt;font-weight:bold;time#beijing display:block;font-size:20pt;font-weight:bold; color:rgb(255,0,0);hour display:line;font-size:16pt;color:rgb(0,255,0);minute display:line;font-size:8pt;color:rgb(255,30,120); 例子例子

10、2twoCSS.cssnamedisplay:block;font-size:18pt;font-weight:bold;pricedisplay:block;font-size:16pt;font-style:italic;madeTimedisplay:line;font-size:9pt;font-weight:bold;13例子例子2Example8_2.xml 商品列表：商品列表： 诺基亚手机诺基亚手机 1907元元/部部 2011.09.28苹果苹果IPAD 5668元元/台台 2011.10.10148.4数据结构与显示相分离数据结构与显示相分离XML核心是描述数据的组织结构，其

11、标记名称核心是描述数据的组织结构，其标记名称是对标记所包含的数据内容的抽象，而不是数是对标记所包含的数据内容的抽象，而不是数据的显示格式，据的显示格式，XML文件通过使用若干个标记文件通过使用若干个标记来表示数据的组织结构，通过来表示数据的组织结构，通过CSS相关联来显相关联来显示标记中的文本数据，从而有效地分离了数据示标记中的文本数据，从而有效地分离了数据的组织结构和显示外观。的组织结构和显示外观。15threeCSS.cssshop#a001display:block;font-size:18pt;font-weight:bold;color:red;shopdisplay:block;f

12、ont-size:18pt;font-weight:bold;startTimedisplay:line;font-size:15pt;font-weight:bold;color:rgb(100,129,70);endTimedisplay:line;font-size:15pt;font-weight:bold;color:rgb(0,129,170);16example8_3.xml 体育商城体育商城 开门时间：开门时间：08：30 关门时间：关门时间：18：30 美音琴行美音琴行 开门时间：开门时间：07：30 关门时间：关门时间：22：30 17188.5 设置文本的显示方式设置文本

13、的显示方式displaydisplay 8.5.1 块方式块方式通过将属性通过将属性“display”的值指定为的值指定为“block”：dislpaly:block使得文本在浏览器的一个块区域中显示。例如：使得文本在浏览器的一个块区域中显示。例如：name display:block; 位置默认地靠左对齐。块的大小依赖于需要显位置默认地靠左对齐。块的大小依赖于需要显示的文本中字符的数量和字符的大小，以及当示的文本中字符的数量和字符的大小，以及当前浏览器的显示区域的大小。前浏览器的显示区域的大小。 可以进一步设置可以进一步设置width和和height属性的值来准属性的值来准确地设置块区域确地

14、设置块区域 的宽度和高度。的宽度和高度。1.同级别标记同级别标记如果若干个如果若干个“文本代表文本代表”都指定自己代表的文都指定自己代表的文本在块区域中显示，那么这些块区域将按照先本在块区域中显示，那么这些块区域将按照先后顺序靠左对齐。后顺序靠左对齐。2.子标记子标记 如果样式表指定某个标记的显示方式是如果样式表指定某个标记的显示方式是block，而另外一个样式表为当前标记的子标记指定的而另外一个样式表为当前标记的子标记指定的显示方式也是显示方式也是block，那么子标记指定的块区域，那么子标记指定的块区域将被包含在为父标记指定的块区域中。将被包含在为父标记指定的块区域中。1920可以通过设置

15、可以通过设置position、left、top、width、height属属性的值来准确地设置块区域的位置和大小。性的值来准确地设置块区域的位置和大小。name display:block; position:absolute; left=100; top=120; width=200; height=120;例例4fourCSS.cssnamedisplay:block; background-color:cyan;classRoomdisplay:block; background-color:rgb(200,210,220);name#specialdisplay:block;posit

16、ion:absolution;width=150;height=60;left=180;top=95;background-color:pink;21Cha8_4.xml 第一教学楼（靠左对齐）。第一教学楼（靠左对齐）。 我是第一教学楼的我是第一教学楼的1101教室。教室。 我是第一教学楼的我是第一教学楼的1201教室。教室。 第二教学楼（靠左对齐）。第二教学楼（靠左对齐）。 我是第二教学楼的我是第二教学楼的2101教室。教室。 我是第二教学楼的我是第二教学楼的2201教室。教室。 综合办公楼，设置了准确位置。综合办公楼，设置了准确位置。 2223old例子例子2Cha4_2.xml 王小另王

17、小另,我是第一个块，靠左对齐我是第一个块，靠左对齐 李毛头，我是第二个块，靠左对齐李毛头，我是第二个块，靠左对齐 钟进立钟进立 ，我是第三个块，靠左对齐，我是第三个块，靠左对齐 赵小拟，距左面赵小拟，距左面180像素像素,距离上方距离上方16像素。像素。 24Show2.cssname#01 display:block; background-color:yellow; width=160;name#02 display:block; background-color:cyan; width=150;name#03 display:block; width=140; background-co

18、lor:blue;name#04 display:block; background-color:pink; position:absolute; width=100; height=100; left=180; top=160; 252行方式行方式 通过将属性通过将属性“display”的值指定为的值指定为“line”：dislpaly:line 使得文本以行的方式在浏览器中显示。例如：使得文本以行的方式在浏览器中显示。例如：time display:line;1.1.同级别标记同级别标记如果有若干同级别的标记所对应的样式都是使用行方式如果有若干同级别的标记所对应的样式都是使用行方式来显示文

19、本，那么这些行按先后顺序首尾相接来显示。来显示文本，那么这些行按先后顺序首尾相接来显示。2.子标记子标记如果为某个标记指定的显示方式是如果为某个标记指定的显示方式是“block”，而另外一，而另外一个样式表为当前标记的子标记指定的显示方式为个样式表为当前标记的子标记指定的显示方式为“line”时，子标记指定的行是指在父标记的指定的块区域中的时，子标记指定的行是指在父标记的指定的块区域中的“line”。也可以增加也可以增加position属性指定行的位置。属性指定行的位置。 例例5fiveCSS.cssstudentdisplay:block;font-size:18pt;background-

20、color:cyan;sexdisplay:line;font-size:12pt;background-color:red;namedisplay:line;font-size:16pt;background-color:green;birthdisplay:line;font-size:10pt;26example8_5.xml 张三张三 男男1996-12-12 赵花赵花 女女1998-11-112728old例子例子3Cha4_3.xml 这里是现代电影院这里是现代电影院 班级里的女同学先入座了，班级里的女同学先入座了， 男同学尾随着入座吧男同学尾随着入座吧 这是马路，不在电影院里哦！

21、这是马路，不在电影院里哦！ 29Show3.cssCinema display:block; font-size:18pt; color:black; position:absolute; left=100; top=10; width=220; height=100;Girl,Boy display:line; font-size:12pt; color:red;Road display:line; font-size:22pt; color:blue; position:absolute; left=30; top=100; 303按列表方式按列表方式 通过将属性通过将属性“display

22、”的值指定为的值指定为“list-item”：dislpaly: list-item 使得文本按列表方式在浏览器中显示。例如：使得文本按列表方式在浏览器中显示。例如：time dislpaly:list-item;样式表指定文本代表样式表指定文本代表“time”所代表的文本列表方式在所代表的文本列表方式在浏览器中显示，项目符号的默认外观是浏览器中显示，项目符号的默认外观是“disc”（实心（实心圆）。圆）。和和“list-item”属性有关的属性是：属性有关的属性是：“list-style-type”，通，通过设置该属性可以更改项目符号的外观。过设置该属性可以更改项目符号的外观。31“list

23、-item”属性属性list-style-type取值情况如下：取值情况如下：disc:圆盘圆盘/实心圆实心圆circle:圆圈圆圈square:方块方块decimal:十进制数十进制数 1 2 3lower-roman:小写罗马数字小写罗马数字i ii iiiupper-roman:大写罗马数字大写罗马数字I II IIIlower-alpha:小写英文字母小写英文字母a b cupper-alpha:大写英文字母大写英文字母A B C1.同级别标记同级别标记 如果有若干同级别的标记对应的样式表都使用列表显示文本如果有若干同级别的标记对应的样式表都使用列表显示文本，那么这些列表将按照标记的先

24、后独行显示，而且列表的项，那么这些列表将按照标记的先后独行显示，而且列表的项目符号会按先后顺序递增。目符号会按先后顺序递增。2.子标记子标记 如果样式表为某个标记指定的显示方式为如果样式表为某个标记指定的显示方式为block，而另外一个，而另外一个样式表为当前标记的子标记指定的显示方式是样式表为当前标记的子标记指定的显示方式是list-item，那，那么为子标记指定的列表将被包含在为父标记指定的块区域中么为子标记指定的列表将被包含在为父标记指定的块区域中。 如果样式表为某个标记指定的显示方式是如果样式表为某个标记指定的显示方式是list-item,而另外一而另外一个样式表为当前标记的子标记指定

25、的显示方式是个样式表为当前标记的子标记指定的显示方式是list-item，那么为子标记指定的列表将成为为父标记指定的列表的子列那么为子标记指定的列表将成为为父标记指定的列表的子列表。表。32例例6sixCSS.cssbookdisplay:block;background-color:rgb(229,227,226);chapterdisplay:list-item;list-style-type:decimal;margin-left:25;font-aize:12pt;color:blue;sectiondisplay:list-item;list-style-type:upper-rom

26、an;margin-left:35;font-aize:10pt;color:black;33Example8_6.xml XML简介简介 XML与与HTML区别区别 XML解析器解析器 规范的规范的XML文件文件 XML声明声明 XML中的标记中的标记 3435old例子例子4Cha4_4.xml 电视机电视机 三种价格：三种价格： 29寸纯平，寸纯平，1388元元/台台 29寸数字高清寸数字高清 1899元元/台台 29寸液晶寸液晶 5999元元/台台 生产日期：生产日期：2005.6 北京电视机厂生产北京电视机厂生产 36Show4.cssTV display:block; font-s

27、ize:28pt;color:black;price display:list-item; list-style-type:decimal; margin-left:30; font-size:18pt;color:red;item1 display:list-item; list-style-type:square; margin-left:60; font-size:18pt;color:red;item2 display:list-item; list-style-type:square; margin-left:60; font-size:18pt;color:red;item3 di

28、splay:list-item; list-style-type:square; margin-left:60; font-size:18pt;color:red;date display:list-item; list-style-type:decimal; margin-left:30; font-size:18pt;color:blue;made display:list-item; list-style-type:decimal; margin-left:30; font-size:18pt;color:cyan;374不显示不显示“display:none”不显示文本，例如：不显示文

29、本，例如：time display:none;将不显示将不显示“time”所代表的文本。所代表的文本。 388.6 字体字体 与字体有关的属性包括：与字体有关的属性包括：font-family,font-style,font-variant,font-weight,font-size。各个属性的取值情况如下：各个属性的取值情况如下：1.font-family 该属性的值是字体名称，如果名称该属性的值是字体名称，如果名称中有空格，属性值需用双引号扩起来，例如：中有空格，属性值需用双引号扩起来，例如：font-family:Arial;font-family:宋体宋体;font-family:Ti

30、mes New Roman;392.font-style 该属性的值指定字体否使用斜体，默该属性的值指定字体否使用斜体，默认值为：认值为：normal。该属性值可以是。该属性值可以是“normal”或或“italic”，例如：，例如：font-style:italicfont-style:normal 403.font-variant 该属性的值用来指定是否使用小型该属性的值用来指定是否使用小型的大写字母来显示文字。默认值为：的大写字母来显示文字。默认值为：normal。该属性能取的属性值有：该属性能取的属性值有：“normal”(正常大写正常大写字目字目)和和“small-caps”（小体大

31、写字母），例（小体大写字母），例如：如： font-variant:small-caps;font-variant:normal;414.font-weight 该属性的值用来设置文字的字体线条粗细。该属性的值用来设置文字的字体线条粗细。默认值为：默认值为：normal。该属性能取的属性值如下：该属性能取的属性值如下：normal、bold、bolder、lighter、100、200、300、400、500、600、700、800、900 。font-weight的属性值有的属性值有3种指定方法：种指定方法：第第1种是关键字法，关键字包括种是关键字法，关键字包括“normal”和和“bold

32、”两两个个,属性值中的属性值中的normal相当于相当于400，bold相当于相当于700 ；第第2种是相对粗细值法，相对粗细也是由关键字定义，种是相对粗细值法，相对粗细也是由关键字定义，但是它的粗细是相对于上级元素的继承值而言的，包括但是它的粗细是相对于上级元素的继承值而言的，包括“bolder”和和“lighter”两个；两个；第第3种为数字法，包括从种为数字法，包括从“100”到到“900”的的9个数字序个数字序列（注意，只能是列（注意，只能是100、200之类的整百数）。这些数字之类的整百数）。这些数字序列代表从最细（序列代表从最细（100）到最粗（）到最粗（900）的字体粗细程度。）

33、的字体粗细程度。每一个数字定义的粗细都要比上一个等级稍微粗一些。每一个数字定义的粗细都要比上一个等级稍微粗一些。 例如：例如：font-weight: bold425.font-size 该属性的值用来设置字体的大小，单该属性的值用来设置字体的大小，单位为位为pt（镑）。（镑）。例如：例如：font-size:12pt注意：如果子标记的样式表中不指定文本的字注意：如果子标记的样式表中不指定文本的字体属性，就会使用父标记样式表中的字体属性体属性，就会使用父标记样式表中的字体属性及属性值。及属性值。sevenCSS.cssgoodsdisplay:block;font-family:楷体楷体_GB

34、2312;font-style:italic;font-weight:600;background-color:rgb(229,227,226);namedisplay:list-item;list-style-type:decimal;margin-left:25;font-family:黑体黑体;font-size:12pt;font-weight:300;color:blue;price,madeTimedisplay:list-item;list-style-type:disc;margin-left:35;font-size:10pt;font-family:宋体宋体;font-we

35、ight:300;font-style:normal;43example8_7.xml 商品列表商品列表洗衣机洗衣机 1278元元/台台 生产日期：生产日期：2009年年10月月 冰箱冰箱 6572元元/台台 生产日期：生产日期：2009年年12月月 44458.7 文本样式文本样式与文本样式有关的属性包括：与文本样式有关的属性包括：text-align,text-indent,text-transform, text-decoration,vertical-align,line-height。各个属。各个属性取值情况如下。性取值情况如下。1.text-align属性的值用来设置文本的对齐方式

36、。属性的值用来设置文本的对齐方式。默认值是默认值是left。该属性能取的属性值如下：。该属性能取的属性值如下：lleft表示左对齐。表示左对齐。lright表示右对齐。表示右对齐。lcenter表示居中对齐。表示居中对齐。ljustify表示两端对齐。表示两端对齐。text-align:center;462.text-indent属性的值用来设置文本首行的缩进属性的值用来设置文本首行的缩进量，单位是像素量，单位是像素px或磅或磅pt。默认值是。默认值是0。text-indent:12pt;473.text-transform属性的值用来设置是否将文本中属性的值用来设置是否将文本中的字母全部大写

37、、全部小写或者首字母大写。的字母全部大写、全部小写或者首字母大写。默认值是默认值是none。该属性能取的属性值如下：。该属性能取的属性值如下：luppercase表示全部大写。表示全部大写。llowercase表示全部小写。表示全部小写。lcapitalize表示首字母大写。表示首字母大写。lnone是缺省值，不做任何大小写转换。是缺省值，不做任何大小写转换。484.5 文本样式文本样式 4.text-decoration属性的值用来设置是否将文本属性的值用来设置是否将文本加下划线。默认值是加下划线。默认值是none。该属性能取的属性。该属性能取的属性值如下：值如下：lnone表示默认值，无装

38、饰。表示默认值，无装饰。lunderline,表示带下划线。表示带下划线。loverline，表示带上划线。，表示带上划线。lline-through,表示带删除线。表示带删除线。lblink表示闪烁。表示闪烁。495.vertical-align属性的值用来设置文本的垂直对属性的值用来设置文本的垂直对齐方式。默认值是齐方式。默认值是middle。该属性能取的属性。该属性能取的属性值如下：值如下：lbaseline表示基线对齐。表示基线对齐。lsub表示下标。表示下标。lsuper表示上标。表示上标。ltop表示顶端对齐。表示顶端对齐。ltext-top表示文本顶端对齐。表示文本顶端对齐。lm

39、iddle表示中部对齐。表示中部对齐。lbottom表示底部对齐。表示底部对齐。ltext-bottom表示文本底部对齐。表示文本底部对齐。506.line-height属性的值用来设置文本之间的行距。属性的值用来设置文本之间的行距。默认值是默认值是1。line-height:2;注意：如果子标记的样式表中不指定文本的样式注意：如果子标记的样式表中不指定文本的样式属性，子标记就会使用父标记样式表中的有关属性，子标记就会使用父标记样式表中的有关文本样式的属性。文本样式的属性。51old例子例子5Cha4_5.xml 平方和公式：平方和公式： (A+B)2= A2+2AB+B2 水的分子式：水的分

40、子式：H2O, 二氧化碳的分子式：二氧化碳的分子式： CO2. 52Show5.cssmath display:block; font-size:16pt; font-style:italic; color:black;chemistry display:block; font-size:16pt; color:black;sup display:line; font-size:10pt; font-weight:bold; font-style:italic; color:red; vertical-align:super;low display:line; font-size:10pt;

41、font-weight:bold; color:blue; vertical-align:bottom;538.8 边框边框可以按文本的显示形式为文本添加边框。可以按文本的显示形式为文本添加边框。l如果文本是按如果文本是按block显示的，那么边框就是块的显示的，那么边框就是块的边框；边框；l如果文本是按如果文本是按line显示的，那么边框就是行的边显示的，那么边框就是行的边框；框；l如果文本是按如果文本是按list-item显示的，那边框就是列表显示的，那边框就是列表项的边框。项的边框。必须首先设置必须首先设置border-style属性，使得文本具有属性，使得文本具有边框，然后再设置其他属

42、性。边框，然后再设置其他属性。54border-style各个属性值的意义各个属性值的意义border-style属性的值用来设置文本具有边框，属性的值用来设置文本具有边框，并且边框四条边的宽度、样式和颜色都相同。并且边框四条边的宽度、样式和颜色都相同。默认值是默认值是none.该属性可取的值有：该属性可取的值有：lnone 无边框。无边框。ldotted 边框线是由点组成的虚线。边框线是由点组成的虚线。ldashed 边框线是由短线组成的虚线。边框线是由短线组成的虚线。ldouble 边框线是双线。边框线是双线。lgroove 3D沟槽状边框沟槽状边框lridge 3D脊状的边框脊状的边框l

43、inset 3D内嵌边框内嵌边框loutset 3D外嵌边框外嵌边框1.solid 普通的边框普通的边框55边框相关的属性边框相关的属性lborder-top-width,border-right-width,border-bottom-width,border-left-width等属性用来设等属性用来设置边框的上边、右边、底边、左边的宽度。这置边框的上边、右边、底边、左边的宽度。这些属性的默认值是些属性的默认值是1.lborder-top-style,border-right-style,border-left-style,border-bottom-style等属性可用来单等属性可用来单

44、独设置边框的上边、右边、左边和底边的样式。独设置边框的上边、右边、左边和底边的样式。也就是说，在设置了也就是说，在设置了border-style属性后，可以属性后，可以再单独设置这些属性，修改边框的某个边的样再单独设置这些属性，修改边框的某个边的样式。该式。该4个属性的取值范围和个属性的取值范围和border-style的相的相同。同。56border-right-color等属性等属性 border-top-color,border-right-color,border-bottom-color,border-left-color等属性用来设置边框的上边、右等属性用来设置边框的上边、右边、底

45、边、左边的颜色。边、底边、左边的颜色。 这些属性的默认值是灰色。这些属性的默认值是灰色。 例例9nineCSS.cssBeijingdisplay:block;border-style:double;width=260;height=120;Haidiandisplay:block;border-style:dotted;width=150;height=60;font-size:10pt;Xuanwudisplay:block;border-style:ridge;width=90;height=30;font-size:10pt;57example8_9.xml 北京市北京市 海淀区海淀区

46、 宣武区宣武区 58border-color属性属性border-color属性用来设置边框的颜色。可以为该属性设定属性用来设置边框的颜色。可以为该属性设定1个个颜色值，颜色值，2个颜色值或个颜色值或4个颜色值。个颜色值。l如果设定如果设定1个颜色值，那么个颜色值，那么4个边框颜色和设定的这个颜色值个边框颜色和设定的这个颜色值相同；相同；l如果设定如果设定2个颜色值，那么上边、底边框的颜色和设定的第一个颜色值，那么上边、底边框的颜色和设定的第一个颜色值相同，左边、右边框的颜色和设定的第个颜色值相同，左边、右边框的颜色和设定的第2个颜色值相个颜色值相同。同。l如果设定了如果设定了4个颜色值，那么

47、按：上、右、底、左的顺序指定个颜色值，那么按：上、右、底、左的顺序指定各边的颜色。各边的颜色。l颜色值可以是一个已定义的颜色或一个三元组构成的颜色。颜色值可以是一个已定义的颜色或一个三元组构成的颜色。格式：格式：border-color:blue red;border-color:blue red yellow pink;5960例子例子6Cha4_6.xml 我是最大的点边框我是最大的点边框 我是其中的双线小边框：我是其中的双线小边框： 我是其中的我是其中的3D小边框：小边框： 61Show6.cssbigFrame display:block; border-style :dotted;

48、border-top-width:15; font-size:18pt; color:red; width=260; height=150 smallFrame#01 display:block; border-style:double; font-size:12pt; color:blue; width=180; height=60 smallFrame#02 display:block; border-style:ridge; font-size:12pt; color:green; width=150; height=30 628.9 边缘边缘有时需要设置边缘，边缘是文本周围不可见的有时

49、需要设置边缘，边缘是文本周围不可见的区域。区域。l如果文本是按块显示的，那么，边缘就是块的如果文本是按块显示的，那么，边缘就是块的边缘；边缘；l如果文本是按行显示的，边缘就是行的边缘；如果文本是按行显示的，边缘就是行的边缘；l如果文本是按列表项显示的，那么，边缘就是如果文本是按列表项显示的，那么，边缘就是列表的边缘。列表的边缘。和边缘有关的属性包括：和边缘有关的属性包括：margin-top,margin-right,margin-bottom,margin-left，分别设置，分别设置了上边缘，右边缘，下边缘，左边缘；单位是了上边缘，右边缘，下边缘，左边缘；单位是像素。像素。margin-t

50、op:20;margin-right:120;margin-left:10;63例子例子7Cha3_7.xml 高级灌水师高级灌水师 姓名：小黑姓名：小黑 发证单位：清华大学黑魔方发证单位：清华大学黑魔方 初级灌水师初级灌水师 姓名：姓名：Nancy 发证单位：清华大学黑魔方发证单位：清华大学黑魔方 64Show7.cssgrade1 display:block; border-style:ridge; border-top-width:15; margin-top:2; margin-left:2; margin-right:2; text-align:center; font-size:1

51、8pt; color:red; width=230; height=100;name,authorized display:list-item; margin-left:22 ; text-align:left; font-size:12pt; color:green;grade2 display:block; border-style:dotted; border-top-width:10; margin-top:12; margin-left:2 ; margin-right:2; text-align:center; font-size:18pt; color:blue; width=2

52、30; height=100;658.10 颜色和背景颜色和背景如果需要设置文本的字符颜色和背景颜色，就如果需要设置文本的字符颜色和背景颜色，就可以使用属性：可以使用属性：color和和background-color。1.通过设置通过设置color属性的值可以指定文本的字符颜属性的值可以指定文本的字符颜色，例如：色，例如：color:rgb(120,225,220);color:red;2.通过设置通过设置background-color属性的值可以指定属性的值可以指定文本的背景颜色文本的背景颜色，例如：，例如：background-color:rgb(10,225,220);backgro

53、und-color:yellow;668.11 显示图像显示图像1.可以通过设置可以通过设置background-image属性的值为文属性的值为文本指定一幅背景图像。本指定一幅背景图像。background-image属性属性的取值形式为：的取值形式为：URL(文件名字文件名字);例如：例如：background-image:URL(a.jpg);2.可以通过可以通过background-repeat属性设置图像是否属性设置图像是否通过重复出现来平铺背景。通过重复出现来平铺背景。background-repeat取值如下：取值如下：repeat,repeat-x,repeat-y,no-re

54、peat。其中其中repeat-x和和repeat-y表示仅仅沿表示仅仅沿X轴或轴或Y轴方轴方向重复图像。向重复图像。repeat是默认值，表示沿是默认值，表示沿X轴和轴和Y轴重复图像。轴重复图像。no-repeat指关闭了平铺。指关闭了平铺。67单独显示图像单独显示图像可以单独地显示一幅图像，并指定图像和周围可以单独地显示一幅图像，并指定图像和周围文本的关系。文本的关系。 为了单独显示一幅图像，只要形式上为一个空标为了单独显示一幅图像，只要形式上为一个空标记指定一幅背景图像即可。记指定一幅背景图像即可。 由于空标记没有文本内容，其背景的大小为由于空标记没有文本内容，其背景的大小为0*0，所以

55、必须用所以必须用block做为空标记的显示方式，并使做为空标记的显示方式，并使用用width和和height属性指定块区域的大小。属性指定块区域的大小。68例子例子8Cha4_8.xml 俺是著名的俺是著名的TOM老猫，很多人使用俺的形象。老猫，很多人使用俺的形象。 69Show8.csstom display:block; position:absolute; top=50; left=10; width=150px; height=120px; text-align:center; font-size:18pt; color:blue; font-weight:bold; background-image:URL(tom.jpg); background-repeat:no-repeat;image display:block; position:absolute; top=10; left=180; width=150px; height=250px; background-image:URL(flower.gif); background-repeat:repeat;708.12 设置鼠标的形状设置鼠标的形状如果希望控制鼠标指针运动到文字的显示区域上面时的形状，就可如果希望控制鼠标指针运动到文字的显示区域上面时的形状，就可以使用以使