《XML实用教程 教学课件 PPT 作者 耿祥义 张跃平 XML实用教程第4章》由会员分享，可在线阅读，更多相关《XML实用教程 教学课件 PPT 作者 耿祥义 张跃平 XML实用教程第4章（19页珍藏版）》请在金锄头文库上搜索。
1、2019/5/24,1,XML实用教程 第4章,配合例子源代码一起使用,Power point 制作：耿祥义 张跃平,XML与CSS,2019/5/24,2,本章主要内容 XML关联CSS 标记与样式表 设置文本的显示方式 字体 文本样式 边框 颜色和背景 显示图像 设置鼠标的形状 难点 设置文本的显示方式,第4章 导读,2019/5/24,3,概述,XML关心的是数据的结构，并能很好、方便地描述数据，但它不提供数据的显示功能。因此，浏览器不能直接显示XML文件中标记的文本内容，如果想让浏览器显示XML文件中标记的文本内容，那么必须以某种方式告诉浏览器如何显示。W3C为XML数据显示发布了两个
2、建议规范：CSS（层叠样式表）和XSL（可扩展样式语言），本章重点讲述怎样用CSS显示XML标记中的文本内容，第5章讲述XSL。,2019/5/24,4,4.1.1 初识CSS,4.1 XML关联CSS,一个CSS文件就是由若干个样式表构成的文本文件,该文本文件可以使用“ANSI”或“UTF-8”编码来保存，文件的扩展名是“.css”。 . CSS中的一个样式表是一组规则,通过这组规则告诉浏览器用什么样式来显示数据。一个样式表的格式如下： 样式表名称 样式规则 例：name display:block;font-size:36pt;font-weight:bold; ,2019/5/24,5,
3、4.1.2 关联CSS,为了让XML使用层叠样式表，XML文件必须使用操作指令 例如： 例题4-1 p63,2019/5/24,6,4.2.1 标记的名字与样式表的名称,样式表中的“样式表名称”可以是标记的名称，也可以是标记的名称与该标记的ID属性值用“#”连接起来的字符串。 当XML有许多标记具有相同的名字，如果要使用不同的外观来显示他们的内容时，“样式表名称”使用“标记名称”+“#”+“ID属性值” 。 例： time#a001 display:block;font-size:19pt;font-weight:bold; time#a002 display:line;font-size:1
4、6pt;font-weight:bold; ,4.2 标记与样式表,2019/5/24,7,4.2.2 CSS的显示规则,用浏览器打开XML文件时，浏览器将按着标记在XML文件中出现的“顺序”，并用该标记在CSS中对应的样式表显示该标记包含的文本数据，如果标记在CSS中没有对应的样式表，浏览器将使用默认的显示规则显示该标记中的文本数据 例题4-2 p64 例题4-3 p65,2019/5/24,8,4.3.1 块方式,通过将属性“display”的值指定为“block”： dislpaly:block 使得文本在浏览器的一个块区域中显示。例如： time display:block; 可以通过
5、设置width和height属性的值来准确地设置块区域的宽度和高度，例如： time display:block;width=220;height=140 还可以通过设置position属性的值为absolution改变块区域默认地靠左对齐方式，但必须要同时设置left，top，width和height属性的值，以便准确地设置块区域的位置和大小 ，例如： name display:block; position:absolute; left=100; top=120; width=200; height=120; 例题4-4 p67,4.3 设置文本的显示方式,2019/5/24,9,4.3.
6、2 行方式,通过将属性“display”的值指定为“line”： dislpaly:line 使得文本以行的方式在浏览器中显示。例如： time display:line; 样式表指定文本代表“time”所代表的文本按行的方式在浏览器中显示。如果有许多“文本代表”都指定自己代表的文本按行的方式在浏览器中显示，那么各行按先后顺序首尾相接来显示，也可以增加position属性指定行的位置。 name display:line; position:absolute; left=100; top=120; 例题4-5 p68,2019/5/24,10,4.3.3 按列表方式,通过将属性“display
7、”的值指定为“list-item”： dislpaly: list-item 使得文本按列表方式在浏览器中显示。例如： time dislpaly:list-item; 样式表指定文本代表“time”所代表的文本列表方式在浏览器中显示，项目符号的默认外观是“disc”（实心圆）。 和“list-item”属性有关的属性是 “list-style-type”，通过设置该属性可以更改项目符号的外观。“list-item”属性取值情况如下：disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha、none。
8、例如：list-style-type: lower-roman 例题4-6 p70,2019/5/24,11,4.3.4 不显示,“display:none”不显示文本，例如： time display:none; 将不显示“time”所代表的文本,2019/5/24,12,4.4 字体,与字体有关的属性包括以下5种： 1.font-family属性:属性的默认值是浏览器确定的默认字体名称,如果名称中有空格，属性值需用双引号扩起来，例如： font-family:Arial; font-family:“Time New Roman“; 2.font-style属性:该属性的值指定字体否使用斜体
9、，该属性值可以是“normal”或“italic”，例如： font-style:italic font-style:normal 3. font-variant属性:该属性的值指定是否使用小体的大写字母来显示文字,例如： font-variant:small-caps 4. font-weight属性 :该属性的值用来设置字体线条的粗细,例如 font-weight: bold font-weight: 600 5. font-size属性 :该属性的值用来设置字体的大小，单位为pt（镑),例如 font-size:12pt 例题4-7 p72,2019/5/24,13,4.5 文本样式,样
10、式表中与文本样式有关的属性包括以下6种： 1. text-align属性:该属性的值用来设置文本的对齐方式,例如： text-align:center 2. text-indent属性:属性的值用来设置文本首行的缩进量,单位是像素px或磅pt ，例如： text-indent:16pt 3. text-transformt属性:该属性的值指定是否将文本中的字母全部大写、全部小写或者首字母大写,例如： text-transform:uppercase 4. text-decoration属性 :该属性的值用来设置是否将文本加划线 ,例如 text-decoration:underline 5.
11、vertical-align属性 :该属性的值用来设置文本的垂直对齐方式 ,例如 vertical-align:baseline 6. line-height属性 :该属性的值用来设置文本之间的行距 ,例如 line-height:1.5 例题4-8 p74,2019/5/24,14,4.6 边框,样式表中与文本边框有关的属性包括以下4种： 1. border-style属性:修改该属性的值，使得文本具有边框 ,例如： border-style :dotted 2. border-right-width等属性:重新设置这些属性的值来改变边框的上边、底边、右边和左底边的宽度，例如： border
12、-top-width:12; border-left-width:22; 3. border-right-style等属性:该属性修改边框的某个边的样式 ,例如： border-bottom-style:dashed 4. border-right-color等属性 :为这些属性重新设置颜色值,改变边框的颜色,例如 border-right-color:blue 例题4-9 p76,2019/5/24,15,4.7 边缘,边缘是文本周围不可见的区域。 和边缘有关的属性包括： margin-top,margin-right,margin-bottom,margin-left 例如： margin
13、-top:20; margin-right:120; margin-left:10; 例题4-10 p77,2019/5/24,16,4.8 颜色和背景,使用属性color和background-color 可以设置文本的字符颜色和背景颜色 。 margin-top,margin-right,margin-bottom,margin-left 例如： color:rgb(120,225,220); color:red; background-color:rgb(10,225,220); background-color:yellow; 例题4-10 p77,2019/5/24,17,4.9 显
14、示图像,样式表中与图像有关的属性包括以下2种 使用属性color和background-color 可以设置文本的字符颜色和背景颜色 。 通过设置background-image属性的值为文本指定一幅背景图像 ，例如： background-image:URL(“car.jpg“); 可以通过background-repeat属性设置图像是否通过重复出现来平铺背景，例如： background-repeat:repeat 例题4-11 p79,2019/5/24,18,4.10 设置鼠标的形状,可以使用cursor属性的值用来指定鼠标指针在文字的显示区域上面时的形状。 例如： cursor:hand; 例题4-12 p80,2019/5/24,19,4.11 处理层叠,可以在样式表中设置z-index属性的值来规定一个样式表所在的层，z-index属性的值可以是正整数，称做样式表的层数。当样式表之间的显示区域发生重叠时，层数大的样式表的显示区域将遮挡层数小的样式表的显示区域。 例题4-13 p81,
