使用CSS设置XML样式.ppt

,第7章 使用CSS设置XML样式,7.1 CSS简介7.2 选择元素（常用元素选择符）7.3 样式继承与级联顺序7.4 CSS中的注释7.5 CSS属性(掌握常用样式属性的设置),7.1 CSS简介-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简介-CSS的基本知识,一个CSS样式表就是一组规则。每个规则给出此规则所适用的元素名称，和一组适用于此元素具体属性的值。例如：【例7-1（b）】显示图书信息表的CSS文档。,CSS样式表的创建与应用,【例7-1（a）】图书信息表的XML文档。计算机网络教程 计算机 谢希仁 西游记 文学 吴承恩,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).xmlcharset 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.cssschool 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.cssschool display:block;font-size:20pt;color:blue;margin-top:40px,例样式文件2.cssClass 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;,成组选择符,1.成组选择符可以把一个规则同时应用于多个元素，各元素用逗号隔开。例如:title,type,author display:block;2.在CSS中，可以为同一个元素指定多个规则。例如:,name,authordisplay:blocknamefont-size:20pt;font-family:宋体,伪元素,伪元素（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,伪元素-首行伪元素,例 firstline.cssbook display:block;font-size:20pt;Book:first-line text-decoration:underline;color:green;display:blockprice,pubdatedisplay:block;color:blue;,例 firstline.xml XML语言及应用 华拴平 19.00 2006-01-01,伪类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-2200120104，王燕萍，女，1983-6-701网络1班200120525，张明渊，男，1984-3-27200120526，旺建文，女，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,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）URL4）长度,属性值,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,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|insideoutside:默认值。列表项目标记放置在文本块以外，且环绕文本不根据标记对齐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|lengthborder-top-width:medium|thin|thick|length border-right-width:medium|thin|thick|lengthborder-bottom-width:medium|thin|thick|lengthborder-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:colorborder-right-color:color border-bottom-color:colorborder-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-capsnormal:默认值。正常的字体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：设置背景颜色，同color2.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|lengthbackground-position:position|position length:百分数|由浮点数字和单位标识符组成的长度值position:top|center|bottom|left|center|right默认值为：0%0%（左上角）如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50%。如果指定了两个值，第二个值将用于纵坐标。该属性定位不受对象的补丁属性(padding)设置影响。,五、设置文本属性（Text）,除了用font-family属性来设置文本字体外，还可使用下列属性来设置文本其它格式：,7.5.3 字体属性（font）,字体属性用来设置文本的字体、字号、样式、笔划粗细等，CSS1支持五种基本的字体属性：font-family、font-style、font-variant、font-weight和font-size。此外，还有font简写属性，可以一次设置上述某些或所有五个属性。font-family（字体的显示风格）属性，例：studentfont-family:隶书;font-style（字型风格）属性：normal（正常）、italic（斜体）、oblique（倾斜体）。font-size（字体大小）属性：可以使用关键字、相对大小、相对百分比和绝对大小设置属性值。（1）font-size关键字使用xx-small、x-small、small、medium（默认值，）、x-largex-large、xx-large关键字表示字号的绝对大小。,7.5.3 字体属性（font）,（2）相对大小：指相对于父元素而言。使用smaller（比父元素大一些）或large（比父元素小一些），并没有具体的数字可量化。（3）相对百分比：相对于父元素的百分数设置字号大小。如：sexfont-size:200%;（4）绝对大小：使用英寸、厘米、像素和磅等长度值设置字号的绝对大小。Sexfont-size:30;font-weight（字体粗细）属性属性值有：Lighter、Normal、Bold、Bolder等。font-variant属性值：normal（默认值）、small-caps(全部转变为大写)font简写属性格式为：选择符 font：font-style font-variant font-weight font-size line-height font-family例如:“title font:16pt 隶书;”规则与下列规则等效：title font:normal normal normal 16pt normal 隶书;,背景属性（background）,用于为元素内容的背景设置一种颜色或一幅图像。1 background-color：设置背景颜色，同color2 background-image：设置背景图片。3background-repeat：指定背景图像的平铺属性。Repeat：在水平和垂直方向同时平铺。Repeat-x：仅在水平方向平铺。Repeat-y：仅在垂直方向平铺。No_repeat：图像不平铺。例 背景.xml 背景.css,