使用CSS设置XML样式.ppt

,第7章 使用CSS设置XML样式,7.1 CSS简介 7.2 选择元素（常用元素选择符） 7.3 样式继承与级联顺序 7.4 CSS中的注释 7.5 CSS属性 (掌握常用样式属性的设置),7.1 CSS简介 -7.1.1 CSS的基本知识,XML 文档的特点是将数据和数据的样式进行了分离，XML文档侧重于数据的存储和传输，数据的显示需通过其它的技术来实现，即样式表。 样式表(StyleSheet)是一种专门描述结构文档表现方式的文档，是用于(增强)控制网页样式一种标记性语言。是一组规则，既可以描述这些文档如何在屏幕上显示，也可以描述它们的打印效果，甚至声音效果。,XML关于文档浏览的基本思想是将数据与数据的显示样式分别定义。这样，XML格式文档不会重蹈某些HTML文档结构混杂、内容繁乱的覆辙。 XML的编写者也可以集中精力于数据本身，而不受显示方式的细枝末节的影响。 样式描述与数据描述相分离，显示细节的描述和修改并不影响文档中的数据及其内在结构。 一个样式表也可以应用于多个文档，仅仅改变一个样式表文件就可以改变数百个网页的外观,样式表的主要优点,XML为用户提供了两种样式表： （1）CSS（Cascading Style Sheets，级联样式表亦称层叠样式表） 当一个文档的两种或多种样式发生矛盾时，执行的效果要按照“层叠规则”来判断。即如果标记的样式定义发生冲突时，最近标记的样式定义将生效。 （2）XSL（eXtensible Stylesheet Language，可扩展样式表语言 实现不同标记语言之间的转换以及与各种应用程序之间的数据交换。XSL当前的主要应用是将XML文档代码转变成HTML代码，实现XML文档在IE中的显示。,7.1 CSS简介 -7.1.1 CSS的基本知识,一个CSS样式表就是一组规则。每个规则给出此规则所适用的元素名称，和一组适用于此元素具体属性的值。 例如：【例7-1（b）】显示图书信息表的CSS文档。,7.1.2 CSS样式表的创建与应用,【例7-1（a）】图书信息表的XML文档。 计算机网络教程 计算机 谢希仁 西游记 文学 吴承恩 ,7.1.2 CSS样式表的创建与应用,【例7-1（b）】显示图书信息表的CSS文档。 例7-1.css charset “GB2312“; book display:block; font-size:15pt; color:red; title display:block; text-align:center; background-color:#ffffbb; font-family: 楷体_GB2312; font-size:30pt; color:blue; type,author display:block;,charset规则用来指定样式表使用的 字符集。要设置汉字字体必须有该 指令，否则全部为浏览器默认字体。,注意：添加charset后，在CSS中 虽然可以出现中文，但仍然不能 使用中文的XML元素名称。,CSS样式表由样式规则组成, 以告诉浏览器怎样去呈现文档. CSS文档对大小写不敏感,链接CSS和XML文档,CSS作为独立的文本文档，使用时必须和独立的DTD一样，通过指令和相应的XML文档关联起来. 语法格式为： 说明： ：该语句为处理指令，该指令告诉解析器显示该XML文档时使用后面属性中指定的样式表。 type属性：指定采用的样式文件的类型，对CSS样式表来说，其值为“text/css“，对XSL样式表来说，其值为“text/xsl“。 href属性：指定所引用的样式表的URL。 绝对路径： 相对路径： ,链接CSS和XML文档,语法格式为： 说明： 如果引用的CSS文件的路径无效，找不到引用的CSS文档，或调用的是空白的CSS文档，IE等多数浏览器会以树状显示源XML文档。 问：元素中的类别和作者为什么是红色的？ 提示：如果XML文档中有一个标记没有定义样式，则该标记将使用它的父标记样式，这种机制称为样式的继承。,将样式语句嵌入到XML文件当中,【例7-1（c）】使用内部样式指令图书信息表的XML文档。 文件名：例7-1(c).xml charset “GB2312“; book display:block; font-size:30pt; title display:block; text-align:center; background-color:#ffffbb; font-family: 华文行楷; font-size:30pt; color:blue; typedisplay:block;font-family: 黑体 计算机网络教程 计算机 谢希仁 ,可以综合使用上面两种方法给XML 文档添加样式，当所添加的样式中有些规则发生矛盾时，以内部方法定义的为主。,在CSS文档中也可以引用其它独立的CSS文档。 引用的语法为： import url (另一个CSS的URL ) ; url()：可选 import url(print.css); import “print.css“; URL可以是本地或网络上的相对路径或绝对路径： import 指令注意事项：,7.1.3 在CSS中引用其它的CSS文档,import 指令注意事项： 1） import 指令必须放在CSS文档的开头，即在此之前不能有其它规则 2） import 指令中的“;”不能少 3）如果被引用的样式表中的格式与引用者中的格式冲突，则以引用者中的格式优先 4）如果引用的多个外部样式表中的格式冲突，则优先顺序即按引用的先后顺序,使用import指令,使用import指令,例 import示例.xml 软件学院 信管072 姚俊楠 ,例 importschool.css school display:block; font-size:20pt; color:blue; margin-top:40px ,例 importclass.css import url(importschool.css); Class display:block; Name display:block; font-size:30pt; color:red; ,使用多个样式文件,例 import示例.xml 软件学院 信管072 姚俊楠 ,例样式文件1.css school display:block; font-size:20pt; color:blue; margin-top:40px ,例样式文件2.css Class display:block; Name display:block; font-size:30pt; color:red; ,7.2 CSS样式规则,CSS的主要功能是将某些指定的规则应用于文档中同一类型的元素。 定义CSS样式规则的语法为： 选择符属性1: 属性值1 ;属性2: 属性值2 选择符：可以是多个元素以及其它与元素内容相关(CLASS或ID )的特殊选择符。 属性：控制元素呈现样式的特性，如显示属性、字体属性等等。,book display:block; font-size:15pt; color:red;,7.2.1 成组选择符,1. 成组选择符可以把一个规则同时应用于多个元素，各元素用逗号隔开。 例如: title,type,author display: block; 2. 在CSS中，可以为同一个元素指定多个规则。 例如:,name,authordisplay:block namefont-size:20pt; font-family:宋体,7.2.2 伪元素,伪元素（pseudo-element）是指将文档中通常不能作为独立元素来看待的部分作为元素来对待。常用的有两种伪元素：元素的第一行和首字母。 1首行伪元素 首行伪元素是在元素名后加上“first-line”来选择，以创建只适用于此元素第一行的规则。例如，下列规则定义title元素的首行以粗体显示： title:first-line font-weight: bold; font-style 首行是实际显示时的元素文本的第一行。 2首字符伪元素 首字符伪元素是用来选择一个元素的首字符， 通常用来将元素的首字符显示为下沉的大写字母效果。例如: title:first-letter font-size: 200%; vertical-align: text-top ,7.2.2 伪元素-首行伪元素,例 firstline.css book display:block; font-size:20pt; Book:first-line text-decoration:underline;color:green;display:block price,pubdatedisplay:block; color:blue;,例 firstline.xml XML语言及应用 华拴平 19.00 2006-01-01 ,7.2.3 伪类 CSS中的伪类包括first-child、:link、:visited、:active、:hover、 :focus等，可以用来设置超链接等相关效果。 7.2.4 CLASS属性 使用CLASS属性（伪类）为相同元素的不同内容指定不同的格式。 例： 7-2.xml 7-2.css,使用CLASS属性（伪类）来为相同元素的不同内容指定不同的格式。 01信管1班 200120101，季慧奇，女，1985-1-2 200120104，王燕萍，女，1983-6-7 01网络1班 200120525，张明渊，男，1984-3-27 200120526，旺建文，女，1983-5-31 在CSS中按下列格式来识别的不同对象： 元素名.CLASS属性 例： 7-2.xml 7-2.css banji.x2font-weight:bold;color:red; text-align:center; banji.x1font-size:32pt; font-weight:bold;,ID属性和CLASS属性一样，用于选择同一元素的不同对象。将7-2.xml文档中的CLASS用ID替换，也可以达到同样的显示效果。但在CSS中使用ID属性选择元素对象时使用如下格式： 例如可以使用： 使ID属性值为x2的“班级”元素的字体放大2倍，粗体显示。 XML允许同时为元素设置CLASS和ID属性来设置特殊格式，同时使用而冲突时，以ID属性设置的格式优先。,元素名#ID属性的属性值,banji#x2font-size:200%; font-weight:bold;,7.2.5 ID属性,例： 7-2（1）.xml 7-2（1）.css,7.2.7 STYLE属性,使用元素的STYLE属性可以将特定元素样式直接应用在一个特定的元素上。这种样式设置方式也称为“内联样式”（inline）。 具体格式为： 例如： 20070814102 张沙沙 女 当STYLE属性的样式与CSS样式表中的样式冲突时，则STYLE属性中的样式优先，这称为“就近优先”原则。,7.3 样式继承与级联顺序,样式继承 如果XML文档中有一个标记没有定义样式，则该标记将使用它的父标记样式，这种机制称为样式的继承。因此,不要求为XML文档中各元素的每个可能的属性明确地定义规则。如果从父元素那里没有继承任何值，就使用默认值。 例如：没有指定子元素的字号、颜色等属性，则该元素将继承其父元素的属性，不被继承的属性一般有背景、边框等。 级联顺序 即如果标记的样式定义发生冲突时，最近标记的样式定义将生效。 如：父元素 、子元素本身也定义规则,7.4 CSS中的注释,和其他程序设计语言一样，在CSS样式表中也可以包含注释。前面已多次用到，CSS注释使用“/*/”符号将注释内容括起来。 注释不能嵌套。如下列段落使用了注释语句： /* 有注释的样式表段落 */ book color: red; /*文字为红色 */ font-family:隶书; /* 字体为隶书 */ 注意：IE浏览器对注释支持不是太好，特别是中文注释，很可能导致格式设置无效。,7.5 CSS中的常用属性和属性值,CSS的规则通过属性和属性值来设定。 属性用来指定元素某一方面的特性，属性值则指定该特性的具体特征，如字体、字号等。 属性名称都是关键字：如font-size、font-family、display等等。 CSS中属性多种多样，但属性值可大致分为4类： 1）关键字 2）颜色 3）URL 4）长度,属性值,CSS中有些属性值可以用关键字来设置。 如text-align : left | right | center | justify font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller等等。,1. 关键字,属性值,使用颜色值的属性主要有： color、background-color、border-color。 设置颜色值的方式有： 1）颜色名称-16种 div color: red; p background-color: silver white,blue,green,navy(海蓝）,purple(紫色),2. 颜色值,属性值,2）rgb ( R , G , B ) R :红色值。正整数 | 百分数 G :绿色值。正整数 | 百分数 B :蓝色值。正整数 | 百分数 正整数值的取值范围为：0 - 255。 百分数值的取值范围为：0.0% - 100.0%。 超出范围的数值将被截至其最接近的取值极限。 并非所有浏览器都支持使用百分数值。,2. 颜色值,div color: rgb(132,20,180); div color: rgb(12%,200,50%); ,3）#RRGGBB RR :红色值。十六进制正整数 GG :绿色值。十六进制正整数 BB :蓝色值。十六进制正整数 取值范围为：00 FF 参数必须是两位数。对于只有一位的，应在前面补零 如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为 #RGB 的方式，例如：#FF8800 可以缩写为 #F80 见颜色表,2. 颜色值,div color: #FF0000; div color: #F00; ,CSS中的属性和属性值,属性值,CSS中的background-image、list-style-image、list-style的属性值为URL，URL可以是本地或网络的绝对或相对路径 URL值可以不加引号 如果需要，URL值可以放在单引号或双引号中,3. URL值,background-image : none | url ( url ),code background-image: url(comet.jpg); blockquote background-image: url(“c:InetPubMyPixscomet.jpg“); br background-image: url(http:/F/ImageFile/Q.gif); ,CSS中的属性和属性值,CSS中的长度属性用得较多，如字号、行距、字间距、宽度、长度等等。 长度属性值可以按绝对长度和相对长度赋值。 （1）绝对长度单位 （Word等）,4. 长度属性值及其单位,div font-size : 0.75pc; div font-size : 9pt; ,CSS中的属性和属性值,（2）相对长度单位在不同的输出设备之间的比例较好，如监视器和打印机。,4. 长度属性值及其单位,div font-size : 1.2em; div font-size : 1.2ex; div font-size : 200%; ,CSS的常用属性 p140-150,显示属性（display）：用来设置元素的显示方式。 字体属性（font）：字体属性用来设置文本的字体、字号、样式、笔划粗细等，CSS1支持五种基本的字体属性：font-family、font-style、font-variant、font-weight和font-size。 颜色属性（color）：设置文本的颜色。 背景属性（background）：用于为元素内容的背景设置一种颜色或一幅图像。 设置文本属性（Text）：文本其它格式，文字间隔，文本水平对齐方式等。 边框属性（border）：边框线的大小，边距等,CSS的常用属性 p140,display属性用来设置元素的显示方式。 display属性的4个属性： none：用于隐藏元素，不显示任何信息。 block：表示所要显示的信息要独占一行（即成为一个段落）。 inline：所要显示的信息紧接着前一元素内容。 list-item：以列表方式显示。 CSS1中默认值为block，CSS2中默认值为inline。 display属性是不能被继承的，如果父元素被隐藏，子元素又没有设定display属性，则子元素不会被隐藏，而是以默认方式被显示。,一、 设置display属性,list-item,1）list-style-type 列表项目符号类型 studentdisplay:list-item;list-style-type:circle;,一、 设置display属性,2） list-style-image: 列表项目符号图标，以指定的图片作为列表符号 list-style-image : none | url ( url ) book display:list-item; list-style-position:outside; list-style-image:url(qq.gif); color:green; font-size:30pt; text-align:left; ,一、 设置display属性,3） list-style-position 设置列表项标记如何根据文本排列。 list-style-position : outside | inside outside :默认值。列表项目标记放置在文本块以外，且环绕文本不根据标记对齐 inside :列表项目标记放置在文本块以内，且环绕文本根据标记对齐,一、 设置display属性,4） list-style 该属性为复合属性，用简洁的方式来设定list-item上述3个属性值 list-style : list-style-type list-style-position list-style-image 默认值为：disc outside none 例：book display:list-item; list-style:none inside url(qq.gif),CSS的常用属性,1. 设置页边距的属性有： margin-top、margn-bottom、margn-left、margn-right和margn。 例、/*上、下、左、右页边距都是2cm,二者等价*/ book margin:2cm 2cm 2cm 2cm book margin:2cm /*上面二者语句等价*/ 2. 设置边框线的属性Border-style，默认值为none（无边框线） 另外，其值为：dotted、dashed、solid、double、groove、ridge、inset、outset,二、设置边框属性,CSS的常用属性,3. 设置边框线宽度 border-width : medium | thin | thick | length border-top-width : medium | thin | thick | length border-right-width : medium | thin | thick | length border-bottom-width : medium | thin | thick | length border-left-width : medium | thin | thick | length medium :默认值。默认宽度;thin :小于默认宽度 thick :大于默认宽度; length :长度值。不可为负值。 book border-style: solid; border-width: thin; book display: block; border-style: solid; border-width: 10px; ,二、设置边框属性,CSS的常用属性,4.设置边框线颜色，共有5种属性（ border-color、border-top-color、border-bottom-color、border-left-color） border-color : color border-top-color : color border-right-color : color border-bottom-color : color border-left-color : color body border-top-color: red; border-bottom-color: RGB(223, 94, 77); border-right-color: red; border-left-color: black;,二、设置边框属性,CSS1支持6种字体属性： 1. font-family 设置文本的字体名称序列。 font-family : name 默认值为 “Times New Roman“,三、设置字体属性,student font-family:宋体；,三、 设置字体属性,2. font-style 设置字体样式。 font-style : normal | italic | oblique normal :默认值。正常的字体 italic :斜体。 oblique :倾斜的字体,p font-style: normal; p font-style: italic; p font-style: oblique; ,CSS的常用属性,3. font-size font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length,三、 设置字体属性,p font-style: normal; p font-size: 12px; p font-size: xx-larger; p font-size: 20%; 指相对于父元素而言,CSS的常用属性,4. font-weight 设置对象中的文本字体的粗细 font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal :默认值。正常的字体。相当于 400 。声明此值将取消之前任何设置 bold :粗体。相当于 700 。也相当于 b 对象的作用 bolder :比 normal 粗 lighter :比 normal细,三、 设置字体属性,CSS的常用属性,5. font-variant 设置对象中的文本是否为大写字母。 font-variant : normal | small-caps normal :默认值。正常的字体 small-caps :用大写字母字体代替文本中的小写字母,三、 设置字体属性,SN font-variant: small-caps; ,CSS的常用属性,5. line-height 设置行高， line-height : normal | length normal :默认值。默认行高 length :百分数 | 由浮点数字和单位标识符组成的长度值，其百分比取值是基于字体的高度尺寸。,三、 设置字体属性,CSS的常用属性,6. font 该属性为复合属性，用简洁的方式来设定上述各属性值 font : font-style | font-variant | font-weight | font-size | line-height | font-family 参数必须按照如上的排列顺序。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。 默认值为： normal normal normal medium normal “Times New Roman“,三、 设置字体属性,p font: italic small-caps 600 12pt/18pt 宋体; H1 font: 15pt/17pt bold “Arial“ normal ,四、 设置颜色和背景属性,设置color属性 book color: red; 设置背景属性 bookcolor: red; background-color:green; 用于为元素内容的背景设置一种颜色或一幅图像。 1. background-color：设置背景颜色，同color 2. background-image：设置背景图片， 例、namebackground-image:url(zhaolin.jpg); 3. background-repeat:设置对象的背景图像是否及如何铺排 banjibackground-image:url(qq.gif); background-repeat:repeat-x; background-color:red;,3. background-repeat 设置对象的背景图像是否及如何铺排，必须先指定对象的背景图像( background-image )。 background-repeat : repeat | no-repeat | repeat-x | repeat-y repeat :默认值。背景图像在纵向和横向上平铺 no-repeat :背景图像不平铺 repeat-x :背景图像仅在横向上平铺 repeat-y :背景图像仅在纵向上平铺,4. background-position 设置对象的背景图像位置。必须先指定 background-image 属性。 background-position : length | length background-position : position | position length :百分数 | 由浮点数字和单位标识符组成的长度值 position :top | center | bottom | left | center | right 默认值为： 0% 0%（左上角