《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相当于172inch；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布尔值，direction