《《XML网页技术实用教程》第4次课.ppt》由会员分享，可在线阅读，更多相关《《XML网页技术实用教程》第4次课.ppt（24页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、XML网页技术实用教程网页技术实用教程主编 余以胜 中国水利水电出版社1项目项目2 读者借阅单网页设计读者借阅单网页设计小结 22.2 CSS格式化模型 CSS在确定XML元素在页面中的位置时，基于的是这样一种思想：把XML文档中的各个元素放在一个个简单的方框中，这种方框被称为矩形容器。通过控制矩形容器在网页中的位置以及元素在矩形容器中的位置来实现页面内容的精确定位。矩形容器就是CSS设计网页的基础。图2-8就是基于CSS矩形容器的思想而创建的一个网页页面内容的布置示意图。装有矾元素的各个容器可以通过CSS的定位技术放置在闻页的任何地方。它们之间可以是包含与被包含的关系，如容器2与容器3，也可
2、以是部分重达的关系，如容器1与容器5。这两种关系就是CSS的“层叠”。发生“层昼”关系的两个元素最终的显示效果取决于两个容器相应属性值的设置。3使用使用CSS的网页布置示意图的网页布置示意图 网页页面容器1容器5容器3容器2容器442.2.1 CSS定位定位XML元素的规则元素的规则CSS定位XML元素的规则可分为三种情况，即绝对定位(absolute)、相对定位(relative)和静态定位(static)。52.2.2 XML元素在容器中定位的规则元素在容器中定位的规则margin(边界)矩形容器border(边框)padding(填充区)content(元素主体)62.3 CSS文件文件
3、XML元素名1 属性1:属性值1;属性2:属性值2;属性n:属性值n;XML元素名m 属性1:属性值1;属性2:属性值2;属性n:属性值n;7 CSS祥式表与祥式表与XML文档的结合文档的结合 82.4 CSS的长度单位的长度单位2.4.1 定义长度定义长度定义长度的格式为：符号+数值+单位，其中：长度的符号可以是“+”，表示正长度值，也可以是“”，表示负长度值。如果不写符号，那么默认值是“+”；长度的数值可以是整数也可以是小数、而且位数不限；长度的单位按CSS规范规定，必须是一个由两个字母组成的单位缩写，如cm、px，mm等等。92.4.2 绝对长度单位常用的绝对长度单位有：pc(pica)
4、：1pc相当于12point；pt(point)：1pt相当于172inch；mm(millimeter)：毫米，印刷单位；cm(centimeter)：厘米，印刷单位；in(inch)：英寸，印刷单位。102.4.3 相对长度单位常用的相对长度单位有：px(pixel)：代表计算机屏幕上的一点；em：表示字体的高度的单位；ex：表示字体中字母x的高度。112.4.4 百分比单位百分比是一个比较特殊的单位，通常情况下，如果某个XML元素的格式化定义中含有百分比值，那这个值指定的是相应属性占包含该元素的元素（即该元素的上一级元素）的百分比率。例如，当用百分比值定义一个元素的宽度属性时，意味着这个
5、元素的宽度就是百分比值与该元素上一级元素宽度的乘积。如果该元素是根元素，则这个百分比值指的就是XML文档内容占浏览器窗口的百分比。122.5 CSS的定位属性的定位属性2.5.1 postion属性属性 postion属性是一个比较基本的属性，用来决定XML元素在网页中的位置，其它的许多属性都将在它的基础上发挥作用。position属性的语法结构如下：XML元素名 position：关键字132.5.2 top、left、width和height属性严格地说，width和height属性并不是CSS的定位属性，但在确定一个元素的位置以后，通常都需要确定其大小，因此把这两个属性与top属性和le
6、ft属性放在一起介绍。这四个属性的语法结构相似，在前面也已多次用到。在这里对它们的属性值设定方法总结如下：XML元素名 top：数值或百分比或auto；left:：数值或百分比或auto；width：数值或百分比或auto；height：数值或百分比或auto；142.6 CSS的分级属性的分级属性display属性的语法结构如下；XML文档元素名 display：关键字其中，关键字代表XML文档元素显示的样式，可取的值有：none、block、list-item和inline。152.7 CSS的字体设置的字体设置2.7.1 字体匹配字体匹配2.7.2 font-family属性属性2.7.
7、3 font-style属性属性2.7.4 font-variant属性属性2.7.5 font-weight属性属性2.7.6 font-size属性属性2.7.7 font属性属性162.8 CSS的文本控制的文本控制2.8.1 text-align属性属性2.8.2 text-indent属性属性2.8.3 letter-spacing属性属性2.8.4 vertical-align属性属性2.8.5 line-height属性属性2.8.6 text-decoration属性属性2.8.7 text-transform属性属性172.9 CSS的颜色和背景控制的颜色和背景控制2.9.1
8、颜色表示方法颜色表示方法2.9.2 color属性属性2.9.3 background-color属性属性2.9.4 background-image属性属性2.9.5 background-repeat属性属性2.9.6 background-attachment属性属性2.9.7 background-position属性属性2.9.8 background属性属性182.10 CSS容器的属性容器的属性2.10.1 margin属性属性2.10.2 border属性属性2.10.3 padding属性属性192.11 CSS的其它定位属性的其它定位属性2.11.1 overflow属性属
9、性2.11.2 z-index属性属性202.12 CSS的常用滤镜的常用滤镜 2.12.1 CSS滤镜的语法滤镜的语法 XML元素名元素名 filter：滤镜名称：滤镜名称(滤镜的参数和滤镜的参数和参数值参数值)；212.12.2 Alpha滤镜滤镜Alpha滤镜用来将一个目标元素与背景相融合，以产生透明渐变的效果。并且可以通过指定数值来控制混合的程度，简单地说就是透明度。使用这个滤镜的方法如下：XML元素名 filter：Alpha(Opacity=数值1，FinishOpacity=数值2，Style数值3，StartX=数值4，StartY数值5，FinishX=数值6，FinishY=数值7)；222.12.3 Blur滤镜滤镜Blur滤镜用来使目标元素产生模糊效果，其基本的语法如下：XML元素名 filter：blur(add布尔值，direction=数值，strength=数值)；232.12.4 Chroma滤镜滤镜2.12.5 DropShadow滤镜滤镜2.12.6 Glow滤镜滤镜2.12.7 Shadow滤镜滤镜2.12.8 Wave滤镜滤镜2.12.9 Xray滤镜滤镜2.12.10 Gray滤镜滤镜2.12.11 Invert滤镜滤镜24