1、第6章 层叠样式表单（CSS）,6.1层叠样式表单（CSS） 6.2 用CSS设计页面,CSS概述,CSS的基本思想是为结构文档中的各个标记定义出相对应的一组显示样式。 使用层叠样式单能保证文档显示格式的一致性和较好的格式化，在XML文档中使用层叠样式单可以方便开发人员为自定义的元素和标记定义其显示格式。 通过层叠样式单可以改变文档中元素的显示属性，如位置、颜色、背景、边空、字体、排版格式等。 目前的层叠样式单分为CSS1和CSS2两个层次；,6.1层叠样式表单（CSS）,6.1.1 CSS介绍CSS(Cascading Style Sheets，层叠样式单)可以对XML输出样式进行控制：设置
2、字体、页边距、排列对齐方式等。下图显示了CSS与XML文件相结合的两种方式。,CSS可以分别与XML和HTML结合,对于html和xhtml文档，CSS是在已有的样式标签上设置更多的样式。、等。 对于XML文档，CSS需要为它设置所有的样式属性。,6.1.3 在XML文件上直接应用CSS在XML文档中使用CSS最简单的方法就是，直接链接一个CSS样式表到XML文档，就像在XML文档中链接XSLT样式表那样。, CSS文档 *CSS只能定义XML各节点内容的输出，不能象XSLT样式表来选择特定的节点输出。,Boys for pele Tori amos Horses 3.5 Blood rose
3、s 3.2 Father lucifer 3.8 Professional widow 4.1,time 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); ,css 文档,北京
4、时间： 12点56分格林威治时间： 4点56分,XML 文档,6.1.4 在XML上使用CSS和XSLT要想输出指定的节点，有效的方法是先使用一个XML处理器，如SAXON，来处理XML文档，然后再使用CSS控制文档显示的样式。, CSS文档。*直接使用CSS时，CSS的入口 与XML文档的元素名匹配。 使用CSS和XSLT相结合时，CSS 的入口要与HTML的标签匹配。,My CD Collection Tori amos Boys for pele Mr.Zebrs Marianne Muhammad my friend The Ghosts that haunt me The count
5、ry life The ghosts that haunt me Thick,6.1.5 在XSLT样式表中设置样式方法一： 是将XSLT应用到XML文档并用浏览器直接阅读该文档，如图所示。,方法二：对XML设计样式并显示出来的另一种方法，是先用一个处理器来处理XML文档和XSLT样式表，转换为HTML文件后，再用浏览器显示出来。如下图所示。,My CD Collection,6.2 用CSS设计页面,6.2.1 定义元素以样式定义对象的名称开头，后面跟以一对括号“ ”，在其中声明一系列样式的属性，各声明间用分号隔开（最后一个声明之后可以省略分号）。 元素名称属性1：属性1的值;属性2：属性2
6、的值;,例： description display:block; position:relative; left:125; width:340; padding:5; ,定义CSS的基本格式如下： Selector property:value; property:value; . Selector： 选择器，被施加样式的对象，可以是元素（tag）、.类名(class)、#属性名(id)等 Property：样式属性，可以是颜色、字体、背景等等。 value：样式属性取值，属性名和属性值之间用“:”分隔。 property: value; property: value 大括号中所包含的是属
7、性集，属性集由若干个属性组成，每个属性间用“;”分隔。,其常见用法如下： 选择器为“*”：星号“*”泛指所有的元素，在此表示所有元素都被施加了大括号中所设置的样式。 * color: green; 选择器为元素名：指该元素名所对应的元素。 name color: green; 选择器的形式为“元素名1 元素名2”：指所有作为元素1子元素的元素2。name sex color: green; 选择器的形式为“元素名1，元素名2，元素名3”：指列表中的所有元素。h1,h2,h3,h4,h5,h6 color: green; ,选择器的形式为：“元素名.类名”：指带有class属性，且class属性
8、值为指定类名的所有元素。例html文档中，样式“.specialcolor:blue”表示对所有class属性值为“special”的元素设置其文字颜色为蓝色。 选择器的形式为：“元素名#ID值”：指带有ID属性，且属性值为指定ID值的所有元素。name # a01 color: green; ,h1 color:red; font-size:14px;,CSS选择器示例,greeting1! greeting2!question in greetinganswer1question in answeranswer2 ,xsampdoc display:block;color: black;f
9、ont-size:32; greeting#a1 display:block;color: red; answer question display:block;color: blue; answer.ans display:block;color: yellow; ,xml,css,CSS的属性集,CSS的属性集,引入外部的CSS样式,在CSS文档中可以使用import指令引用外部的CSS样式； 语法：import url(url); 例如： import url(“http:/ import必须放在第一行； import必须以分号结束；,CSS级联顺序,在CSS中允许为同一个元素指定多条规
10、则，当出现冲突时，优先级顺序如下：引用样式单的CSS文件中的规则比被引用者优先； 最专门的规则优先； 作者置标为重要的规则优先；例color:black !import 样式单中最接近的规则； 继承父元素的规则；,CSS级联顺序,greeting1! greeting2!question in greetinganswer1question in answeranswer2 ,import url(“5-css1.css“); greeting#a1 font-family: Arial;font-size: 32pt;width:30em; color: navy,5.4.xml,5-css
11、1.css,xsampdoc color:black; display:block;font-size: 24pt; greeting#a1 font-family: Arial;font-size: 32pt;width:30em; color: red;display:block; question font-size:x-large ;color: green !important;display:block; question font-size: x-large;color: rgb(256,2,256);display:block; answer.ans font-size: 20
12、pt;color: blue;display:block; ,5-css.css,外部CSS：h3 color: red; text-align: left; font-size: 8pt; 内部CSS：h3 text-align: right; font-size: 20pt; 假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是： h3 color: red; text-align: right; font-size: 20pt; 即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。,6
13、.2.2 元素定位元素的定位方式分为相对定位和绝对定位两种。相对定位，即元素根据自己原始位置作相对位移。而其周围的元素并不受影响。如：title display : block; font-family : Arial, Helvetica, sans-serif; font-size : 25px; color : #191970; background-color : #A9A9A9; position : relative; left:100px; top:20px; ,该CSS文档在对title元素定义样式时，增加了对title元素的位置设置。title元素相对于原位置向左偏移100p
14、x，向上偏移20px。可以看到，此时title重叠在了下面的元素上。除了通过“left”和“top”设置左移和上移的距离外，还可以设置“bottom”和“right”属性，控制下移和右移的距离。下图显示了部分输出结果：,h2.pos_left position:relative; left:-20px h2.pos_right position:relative; left:20px这是位于正常位置的标题 这个标题相对于其正常位置向左移动 这个标题相对于其正常位置向右移动 相对定位会按照元素的原始位置对该元素进行移动。 样式 “left:-20px“ 从元素的原始左侧位置减去 20 像素。 样
15、式 “left:20px“ 向元素的原始左侧位置增加 20 像素。,还可以修改上面的CSS，将定位方式设置为绝对定位，如：title display : block; font-family : Arial, Helvetica, sans-serif; font-size : 25px; color : #191970; background-color : #A9A9A9; position : absolute; left:100px; top:20px; ,输出结果显示如下：,h2.pos_abs position:absolute; left:100px; top:150px 这是带
16、有绝对定位的标题 通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。,1、块方式display:block,name#01 display:block;background-color:yellow;width=160; name#02 display:block;background-color:cyan;width=150; name#03 display:block;background-color:blue;width=140; name#04 display:block;background-color:pink;positi
17、on:absolute;width=100;height=100;left=180;top=16; ,王平,我是第一块，靠左对齐张三,我是第二块，靠左对齐李四,我是第三块，靠左对齐王五,距左面180像素,距离上方16像素,2、行方式display:line,cinema 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;f
18、ont-size:22pt;color:blue;position:absolute;left=30;top=100; ,这里是现代电影院班级里的女同学先入座了男同学也随后入座这里是马路，不是电影院,3、列表方式display:list-item,tv display:block;font-size: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:s
19、quare;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 display: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:1
20、8pt;color:blue; made display:list-item;list-style-type:decimal;margin-left:30; font-size:18pt;color:cyan; ,4、不显示display:none,例：不显示time的文本。 time display:none; ,现在，所有的title元素根据top和left属性确定了显示位置。由于它们设置的top和left属性相同，所以显示在同一个位置，于是只有最后一个title可以被看到。 6.2.3 设置元素大小CSS通过高度（height）和宽度（width）参数设置元素显示的大小。 6.2.5 环
21、绕文本,6.2.4 边框（border）、空格填充（padding）和边距（margins）可以在元素的周围增加边框，在元素与其边框之间的设定空格填充，还可以设置边框与周围元素之间的边距。,bigframe display:block; border-style:dotted; 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;heig
22、ht=60; smallframe#02 display:block; border-style:ridge; font-size:12pt;color:green; width=150;height=30; ,6.2.6 图片 通过使用CSS，可以在XML中引入图片。,tom display:block;position:absolute; top =50;left=10;width=300px;height=300px; text-align:center; font-size:18pt;color:blue;font-weight=bold; background-image:URL(1
23、.jpg); background-repeat:no-repeat; image display:block;position:absolute;top=10; left=300;width=300px;height=300px; background-image:URL(2.jpg); background-repeat:repeat; ,body background-image:url(/i/eg_bg_04.gif); p.flower background-image: url(/i/eg_bg_03.gif); padding: 20px; a.radio background-
24、image: url(/i/eg_bg_07.gif); padding: 20px;我是一个有花纹背景的段落。我是一个有放射性背景的链接。 注释：为了清晰地显示出段落和链接的背景图像，我们为它们设置了少许内边距。,6.3 用CSS样式化文本,6.3.1 字体字体的设置包括字形、字号和颜色。在定义字体时，最好在字体列表的后面设定字体家族（fontfamily），以防万一所设的字体在客户的计算机上未被安装。例如：font-family : Arial, Helvetica, sans-serif; font-size : 20px; color : #5F9EA0;也可以用一种在页面中嵌入字体的
25、机制，即可使用一种未被安装的字体。这需要提供一个指向该字体文件的URL，然后下载该文件，就可以在页面上正确显示该字体。IE要求字体文件以“.eot”形式存放。,6.3.2 文本特性可以设置字体的多种属性，如font-style，font-varient和font-weight。 字体大小可以有多种设置方法，包括相对大小和绝对大小。因为图片、框架和表格在屏幕上都是以像素定义尺寸的，所以推荐使用以像素来定义字体大小，这样便于界面的设计。好的样式表编辑器会对不同的文本属性进行设置，包括行间距，文本颜色，背景色，字符间距，字间距，文本对齐方式，文本下划线设置以及改变文本大小写等。所有这些属性都能帮助进
26、行更好的页面设计。,font-family属性值可以是系统的字体名称，如名称中有空格，要用引号括起来。font-family:Arial;或是font-family:“time new roman”; font-style属性值指定字体是否使用斜体。font-style:italic;或是font-style:normal; font-style属性值指定字体是否使用小型的大写字母来显示文字。font-style:small-caps;或是font-style:normal; font-weight属性值设置字体的对比度和亮度。font-weight:normal; font-size属性值指
27、定字体的大小。font-style:12pt;,CSS与XSL的比较,CSS既可用于HTML，也可用于XML。但XSL是专门针对XML提出的，它不能处理HTML文档。 CSS是一种静态的样式描述格式，XSL 是一种动态的样式描述格式，可以动态地创建输出样式。 CSS不遵从XML的语法规范；而XSL遵从XML 的语法，本身也是一个XML文档。 XSL中仍然有一些效果是CSS无法描述的，必须使用XSL。这些功能包括文本的置换、根据文本内容决定显示方式、文档内容排序等，都是XSL所独有的。 XSL是一种转换的思想，它最终将XML文档转换为另一种可用于输出的文档；而CSS则没有任何转换。 CSS不支持中文，而XSL支持中文。,
