《XML网页技术实用教程》第4次课.ppt

1 XML网页技术实用教程 主编余以胜 中国水利水电出版社 2 项目2读者借阅单网页设计 小结 3 2 2CSS格式化模型 CSS在确定XML元素在页面中的位置时 基于的是这样一种思想 把XML文档中的各个元素放在一个个简单的方框中 这种方框被称为矩形容器 通过控制矩形容器在网页中的位置以及元素在矩形容器中的位置来实现页面内容的精确定位 矩形容器就是CSS设计网页的基础 图2 8就是基于CSS矩形容器的思想而创建的一个网页页面内容的布置示意图 装有矾元素的各个容器可以通过CSS的定位技术放置在闻页的任何地方 它们之间可以是包含与被包含的关系 如容器2与容器3 也可以是部分重达的关系 如容器1与容器5 这两种关系就是CSS的 层叠 发生 层昼 关系的两个元素最终的显示效果取决于两个容器相应属性值的设置 4 使用CSS的网页布置示意图 5 2 2 1CSS定位XML元素的规则 CSS定位XML元素的规则可分为三种情况 即绝对定位 absolute 相对定位 relative 和静态定位 static 6 2 2 2XML元素在容器中定位的规则 7 2 3CSS文件 XML元素名1 属性1 属性值1 属性2 属性值2 属性n 属性值n XML元素名m 属性1 属性值1 属性2 属性值2 属性n 属性值n 8 CSS祥式表与XML文档的结合 9 2 4CSS的长度单位 2 4 1定义长度定义长度的格式为 符号 数值 单位 其中 长度的符号可以是 表示正长度值 也可以是 表示负长度值 如果不写符号 那么默认值是 长度的数值可以是整数也可以是小数 而且位数不限 长度的单位按CSS规范规定 必须是一个由两个字母组成的单位缩写 如cm px mm等等 10 2 4 2绝对长度单位 常用的绝对长度单位有 pc pica 1pc相当于12point pt point 1pt相当于1 72inch mm millimeter 毫米 印刷单位 cm centimeter 厘米 印刷单位 in inch 英寸 印刷单位 11 2 4 3相对长度单位 常用的相对长度单位有 px pixel 代表计算机屏幕上的一点 em 表示字体的高度的单位 ex 表示字体中字母x的高度 12 2 4 4百分比单位 百分比是一个比较特殊的单位 通常情况下 如果某个XML元素的格式化定义中含有百分比值 那这个值指定的是相应属性占包含该元素的元素 即该元素的上一级元素 的百分比率 例如 当用百分比值定义一个元素的宽度属性时 意味着这个元素的宽度就是百分比值与该元素上一级元素宽度的乘积 如果该元素是根元素 则这个百分比值指的就是XML文档内容占浏览器窗口的百分比 13 2 5CSS的定位属性 2 5 1postion属性postion属性是一个比较基本的属性 用来决定XML元素在网页中的位置 其它的许多属性都将在它的基础上发挥作用 position属性的语法结构如下 XML元素名 position 关键字 14 2 5 2top left width和height属性 严格地说 width和height属性并不是CSS的定位属性 但在确定一个元素的位置以后 通常都需要确定其大小 因此把这两个属性与top属性和left属性放在一起介绍 这四个属性的语法结构相似 在前面也已多次用到 在这里对它们的属性值设定方法总结如下 XML元素名 top 数值或百分比或auto left 数值或百分比或auto width 数值或百分比或auto height 数值或百分比或auto 15 2 6CSS的分级属性 display属性的语法结构如下 XML文档元素名 display 关键字 其中 关键字代表XML文档元素显示的样式 可取的值有 none block list item和inline 16 2 7CSS的字体设置 2 7 1字体匹配2 7 2font family属性2 7 3font style属性2 7 4font variant属性2 7 5font weight属性2 7 6font size属性2 7 7font属性 17 2 8CSS的文本控制 2 8 1text align属性2 8 2text indent属性2 8 3letter spacing属性2 8 4vertical align属性2 8 5line height属性2 8 6text decoration属性2 8 7text transform属性 18 2 9CSS的颜色和背景控制 2 9 1颜色表示方法2 9 2color属性2 9 3background color属性2 9 4background image属性2 9 5background repeat属性2 9 6background attachment属性2 9 7background position属性2 9 8background属性 19 2 10CSS容器的属性 2 10 1margin属性2 10 2border属性2 10 3padding属性 20 2 11CSS的其它定位属性 2 11 1overflow属性2 11 2z index属性 21 2 12CSS的常用滤镜 2 12 1CSS滤镜的语法XML元素名 filter 滤镜名称 滤镜的参数和参数值 22 2 12 2Alpha滤镜 Alpha滤镜用来将一个目标元素与背景相融合 以产生透明渐变的效果 并且可以通过指定数值来控制混合的程度 简单地说就是透明度 使用这个滤镜的方法如下 XML元素名 filter Alpha Opacity 数值1 FinishOpacity 数值2 Style 数值3 StartX 数值4 StartY 数值5 FinishX 数值6 FinishY 数值7 23 2 12 3Blur滤镜 Blur滤镜用来使目标元素产生模糊效果 其基本的语法如下 XML元素名 filter blur add 布尔值 directi