第6章 层叠样式表单（CSS）.pptxVIP

第6章 层叠样式表单（CSS）;CSS概述;6.1层叠样式表单（CSS）; CSS可以分别及XML和HTML结合;6.1.3 在XML文件上直接应用CSS 在XML文档中使用CSS最简单的方法就是，直接链接一个CSS样式表到XML文档，就像在XML文档中链接XSLT样式表那样。;;;;;6.1.4 在XML上使用CSS和XSLT 要想输出指定的节点，有效的方法是先使用一个XML处理器，如SAXON，来处理XML文档，然后再使用CSS控制文档显示的样式。 ;;6.1.5 在XSLT样式表中设置样式 方法一： 是将XSLT应用到XML文档并用浏览器直接阅读该文档，如图所示。 ;;;;6.2 用CSS设计页面;;;;;CSS选择器示例;CSS的属性集;CSS的属性集;引入外部的CSS样式;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.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元素相对于原位置向左偏移100px，向上偏移20px。可以看到，此时title重叠在了下面的元素上。除了通过“left”和“top”设置左移和上移的距离外，还可以设置“bottom”和“right”属性，控制下移和右移的距离。下图显示了部分输出结果：;html head style type=text/css h2.pos_left {position:relative; left:-20px} h2.pos_right {position:relative; left:20px} /style /head body h2这是位于正常位置的标题/h2 h2 class=pos_left这个标题相对于其正常位置向左移动/h2 h2 class=pos_right这个标题相对于其正常位置向右移动/h2 p相对定位会按照元素的原始位置对该元素进行移动。/p p样式 left:-20px 从元素的原始左侧位置减去 20 像素。/p p样式 left:20px 向元素的原始左侧位置增加 20 像素。/p /body /html; 还可以修改上面的CSS，将定位方式设置为绝对定位，如： title { display : block; font-family : Arial, Helvetica, sans-serif; font-size : 25px; color : #191970; background-color : #A9A9A9; position : absolute; left:100px; top:20px; };输出结果显示如下：;html head style type=text/css h2.pos_abs { position:absolute; left:100px; top:150px } /style /head body h2 class=pos_abs这是带有绝对定位的标题/h2 p通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。/p /body /html;1、块方式display:block;;;2、行方式display:line;;;3、列表方式display:list-item;;