XML网页技术实用教程余以胜电子教案及素材 第4次课.pptVIP

XML网页技术实用教程 主编 余以胜 项目2 读者借阅单网页设计 小结 2.2 CSS格式化模型 CSS在确定XML元素在页面中的位置时，基于的是这样一种思想：把XML文档中的各个元素放在一个个简单的方框中，这种方框被称为矩形容器。通过控制矩形容器在网页中的位置以及元素在矩形容器中的位置来实现页面内容的精确定位。矩形容器就是CSS设计网页的基础。 图2-8就是基于CSS矩形容器的思想而创建的一个网页页面内容的布置示意图。装有矾元素的各个容器可以通过CSS的定位技术放置在闻页的任何地方。它们之间可以是包含与被包含的关系，如容器2与容器3，也可以是部分重达的关系，如容器1与容器5。这两种关系就是CSS的“层叠”。发生“层昼”关系的两个元素最终的显示效果取决于两个容器相应属性值的设置。 使用CSS的网页布置示意图 2.2.1 CSS定位XML元素的规则 CSS定位XML元素的规则可分为三种情况，即绝对定位(absolute)、相对定位(relative)和静态定位(static)。 2.2.2 XML元素在容器中定位的规则 2.3 CSS文件 STYLE TYPE=text/css XML元素名1 {属性1:属性值1; 属性2:属性值2; …… 属性n:属性值n;} …… XML元素名m {属性1:属性值1; 属性2:属性值2; …… 属性n:属性值n;} /STYLE CSS祥式表与XML文档的结合 ?xml-stylesheet type=text/css href=*.css ? 2.4 CSS的长度单位 2.4.1 定义长度 定义长度的格式为：符号 + 数值 + 单位，其中： 长度的符号可以是“+”，表示正长度值，也可以是“－”，表示负长度值。如果不写符号，那么默认值是“+”； 长度的数值可以是整数也可以是小数、而且位数不限； 长度的单位按CSS规范规定，必须是一个由两个字母组成的单位缩写，如cm、px，mm等等。 2.4.2 绝对长度单位 常用的绝对长度单位有： pc(pica)：1pc相当于12point； pt(point)：1pt相当于1／72inch； mm(millimeter)：毫米，印刷单位； cm(centimeter)：厘米，印刷单位； in(inch)：英寸，印刷单位。 2.4.3 相对长度单位 常用的相对长度单位有： px(pixel)：代表计算机屏幕上的一点； em：表示字体的高度的单位； ex：表示字体中字母x的高度。 2.4.4 百分比单位 百分比是一个比较特殊的单位，通常情况下，如果某个XML元素的格式化定义中含有百分比值，那这个值指定的是相应属性占包含该元素的元素（即该元素的上一级元素）的百分比率。例如，当用百分比值定义一个元素的宽度属性时，意味着这个元素的宽度就是百分比值与该元素上一级元素宽度的乘积。如果该元素是根元素，则这个百分比值指的就是XML文档内容占浏览器窗口的百分比。 2.5 CSS的定位属性 2.5.1 postion属性 postion属性是一个比较基本的属性，用来决定XML元素在网页中的位置，其它的许多属性都将在它的基础上发挥作用。position属性的语法结构如下： XML元素名 {position：关键字} 2.5.2 top、left、width和height属性 严格地说，width和height属性并不是CSS的定位属性，但在确定一个元素的位置以后，通常都需要确定其大小，因此把这两个属性与top属性和left属性放在一起介绍。 这四个属性的语法结构相似，在前面也已多次用到。在这里对它们的属性值设定方法总结如下： XML元素名 { top：数值或百分比或auto； left:：数值或百分比或auto； width：数值或百分比或auto； height：数值或百分比或auto； } 2.6 CSS的分级属性 display属性的语法结构如下； XML文档元素名 {display：关键字} 其中，关键字代表XML文档元素显示的样式，可取的值有：none、block、list-item和inline。 2.7 CSS的字体设置 2.7.1 字体匹配 2.7.2 font-family属性 2.7.3 font-style属性 2.7.4 font-variant属性 2.7.5 font-weight属性 2.7.6 font-size属性 2.7.7 font属性 2.8 CSS的文本控制 2.8.1 text-align属