详细速成教程.pptx

CSSCSS专题专题CSS在页面风格设计中的作用在页面风格设计中的作用CSS语法基础语法基础用用DIV+CSS的方式来写的方式来写HTML页面页面用用CSS设置图像样式扮靓网页设置图像样式扮靓网页CSS与与XML的综合运用的综合运用CSS简介简介一、一、CSSCSS简介简介lCSSCascading Style SheetCascading Style Sheet层叠样式表层叠样式表l样式格式，对于网页来说，像网页显示的文字的大小、颜色以格式，对于网页来说，像网页显示的文字的大小、颜色以及图片位置以及段落、列表等，都是网页显示的样式。及图片位置以及段落、列表等，都是网页显示的样式。l层叠HTMLHTML文件引用多个文件引用多个CSSCSS样式时，如果样式时，如果CSSCSS的定义发生冲突，的定义发生冲突，浏览器将依据层次的先后顺序来应用样式，如果不考虑样浏览器将依据层次的先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵循式的优先级时，一般会遵循“最近优选原则最近优选原则”。二、二、CSSCSS在页面风格设计中的作用在页面风格设计中的作用l网页的标准网页的标准网页主要由网页主要由3 3个部分组成：个部分组成：结构（Structure）表现（Presentation）行为（Behavior）在一个网页中，分若干个组成部分，包括各级标题、正文段落、各种在一个网页中，分若干个组成部分，包括各级标题、正文段落、各种列表结构等，这就构成了一个网页的列表结构等，这就构成了一个网页的“结构结构”。网页各组成部分的字号、字体和颜色等属性就构成了它的网页各组成部分的字号、字体和颜色等属性就构成了它的“表现表现”。网页与用户的交互网页与用户的交互二、二、CSSCSS在页面风格设计中的作用在页面风格设计中的作用l网页标准的涵义：网页标准的涵义：“结构”决定了网页“是什么”“表现”决定了网页看起来是“什么样子”“行为”决定了网页“做什么”l网页标准对应的技术：网页标准对应的技术：(X)HTML决定网页的结构和内容CSS设定网页的表现样式JavaScript控制网页的行为lCSSCSS的核心目的：的核心目的：实现网页结构内容和表现形式的分离，将原来由HTML语言所承担的一些与结构无关的功能剥离出来，改由CSS来完成。三、三、CSSCSS语法基础语法基础lCSSCSS的思想就是首先指定对什么的思想就是首先指定对什么“对象对象”进行设置，然后指定进行设置，然后指定对该对象的哪个方面的对该对象的哪个方面的“属性属性”进行设置，最后给出该设置进行设置，最后给出该设置的的“值值”。lCSSCSS规则的构造规则的构造对象属性值三、三、CSSCSS语法基础语法基础l样式表规则的组成：样式表规则的组成：选择符（selector）l决定哪些因素要受到影响声明（declaration）l一个或多个属性值对组成基本语法：lselector属性:属性值;属性:属性值语法说明：selector表示希望进行格式化的元素；声明部分包括在选择器后的大括号中；用“属性:属性值”描述要应用的格式化操作；声明中的多个属性值对之间必须用分号隔开。三、三、CSSCSS语法基础语法基础l选择器（选择器（selectorselector）CSS的对象是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称选择器（selector）类型：l普通选择器l复合选择器标签三、三、CSSCSS语法基础语法基础l普通选择器普通选择器标签选择器标签选择器标签pfont-size:16px;color:red;三、三、CSSCSS语法基础语法基础l普通选择器普通选择器类别选择器类别选择器.biaotifont-size:16px;color:red;普通文字普通文字赋于标记符类所产生的格式赋于标记符类所产生的格式类选择器所定义的格式类选择器所定义的格式三、三、CSSCSS语法基础语法基础l普通选择器普通选择器IDID选择器选择器#biaotifont-size:16px;color:red;普通文字普通文字赋于标记符赋于标记符id所产生的格式所产生的格式ID选择器所定义的格式选择器所定义的格式三、三、CSSCSS语法基础语法基础l复合选择器复合选择器交集选择器交集选择器p/*标记选择器标记选择器*/color:blue;p.Special/*标记标记.类别选择器类别选择器*/color:red;.special/*类别选择器类别选择器*/color:green;普通段落文本（蓝色）普通段落文本（蓝色）普通标题文本（黑色）普通标题文本（黑色）指定了指定了.special类别的段落文本（红色）类别的段落文本（红色）指定了指定了.special类别的标题文本（绿色）类别的标题文本（绿色）三、三、CSSCSS语法基础语法基础l复合选择器复合选择器并集选择器并集选择器并集选择器并集选择器/*/*并集并集选择器器*/*/*集体声明集体声明*/h1,h2,h3,h4,h5,ph1,h2,h3,h4,h5,p color:purple;color:purple;font-size:15px;font-size:15px;h2.special,.special,#oneh2.special,.special,#one text-decoration:underline;text-decoration:underline;示例文字示例文字h1 示例文字示例文字h2 示例文字示例文字h3 示例文字示例文字h4 示例文字示例文字h5 示例文字示例文字p1 示例文字示例文字p2 示例文字示例文字p3三、三、CSSCSS语法基础语法基础l复合选择器复合选择器后代后代选择器选择器后代选择器后代选择器/*/*嵌套声明嵌套声明*/p spanp span color:red;color:red;spanspan color:blue;color:blue;嵌套使嵌套使用用CSSCSS（红色）（红色）标记的方法标记的方法 嵌套之外的嵌套之外的标记（蓝色）标记（蓝色）不生效不生效三、三、CSSCSS语法基础语法基础l继承继承是CSS的一个主要特征，许多CSS属性不但影响选择符所定义的元素，而且会被这些元素的后代继承。例如一个body定义了的颜色值也会应用到段落的文本中。CSS的继承性的继承性CSS的的继承性继承性 三、三、CSSCSS语法基础语法基础l样式表的定义与使用样式表的定义与使用直接定义标记的直接定义标记的stylestyle属性属性定义内部样式表定义内部样式表嵌入外部样式表嵌入外部样式表链接外部样式表链接外部样式表import url(style.css)；一段话一段话三、三、CSSCSS语法基础语法基础示例示例ID和类的定义和类的定义 此段文字以默认方式显示此段文字以默认方式显示 此段文字以此段文字以16像素大小，红色字体显示像素大小，红色字体显示 此段文字以此段文字以26像素大小，玫红色字体显示像素大小，玫红色字体显示 三、三、CSSCSS语法基础语法基础字体字体lcolor color 字体颜色字体颜色lfont-size font-size 字号字号 lfont-family font-family 字体字体lfont-style font-style 字体样式字体样式normal|italic|oblique(歪斜体)lfont-weight font-weight 字体加粗字体加粗normal|bold|bolder|lighter|100|200|300 lfont-variant font-variant 字体变体字体变体font-variant:normal|small-caps(小型的大写字母)ltext-decoration text-decoration 文字效果属性文字效果属性none|underline|blink|overline|line-through lfont font 综合字体属性综合字体属性font-style font-weight font-variant font-size/line-height font-family三、三、CSSCSS语法基础语法基础字体排版字体排版ltext-indent text-indent 首行缩进属性首行缩进属性normal|长度单位lletter-spacing letter-spacing 字符间距属性字符间距属性normal|长度单位lline-height line-height 行距属性行距属性normal|比例|长度单位|百分比ltext-align text-align 水平对齐属性水平对齐属性left|right|center|justifyltext-transform text-transform 转换英文大小写转换英文大小写uppercase|lowercase|capitalize|none三、三、CSSCSS语法基础语法基础背景颜色背景颜色lbackground-colorbackground-color：关键字：关键字|RGB|RGB值值|transparent|transparentlCSSCSS则有四种定义颜色的方法：则有四种定义颜色的方法：十六进制数RGB函数（整数）RGB函数（百分比）颜色名称三、三、CSSCSS语法基础语法基础背景颜色背景颜色 背景颜色的属性背景颜色的属性 此行文字以红色背景显示此行文字以红色背景显示n 此行文字以黄色背景显示此行文字以黄色背景显示 三、三、CSSCSS语法基础语法基础背景颜色背景颜色三、三、CSSCSS语法基础语法基础背景图片背景图片lbackground-imagebackground-image：插入背景图片插入背景图片lbackground-attachment:background-attachment:插入背景附件插入背景附件lbackground-repeat:background-repeat:设置重复背景图片设置重复背景图片lbackground-position:background-position:设置背景图片位置设置背景图片位置background-imagebackground-image插入背景图片插入背景图片 lbackground-imagebackground-image设置背景图片设置背景图片基本语法：background-image:url|none语法说明：url表示要插入背景图片的路径，路径可以是绝对路径也可以是相对路径，none表示不加载图片。background-attachmentbackground-attachment插入背景附件插入背景附件lbackground-attachmentbackground-attachment背景附件属性是用来设置背景图片是背景附件属性是用来设置背景图片是否随着滚动条的移动而一起移动。否随着滚动条的移动而一起移动。基本语法：background-attachment：scroll|fixed语法说明：scroll表示背景图片是随着滚动条的移动而移动，是浏览器的默认值；fixed表示背景图片固定在页面上不动，不随着滚动条的移动而移动。background-repeatbackground-repeat设置重复背景图片设置重复背景图片 lbackground-imgbackground-img属性设置网页的背景图片重复显示方式。属性设置网页的背景图片重复显示方式。基本语法：background-repeat：repeat|repeat-x|repeat-y|no-repeat语法说明：repeat表示背景图片在水平和垂直方向平铺，是默认值；repeat-x表示背景图片在水平方向平铺；repeat-y表示背景图片在垂直方向平铺；no-repeat表示背景图片不平铺。background-positionbackground-position设置背景图片位置设置背景图片位置l当在网页中插入背景图片时，每一次插入的位置，都是位于网页的左上当在网页中插入背景图片时，每一次插入的位置，都是位于网页的左上角，所以通过角，所以通过background-positionbackground-position属性来改变图片的插入位置。属性来改变图片的插入位置。基本语法：background-position：百分比|长度|关键字语法说明：利用百分比和长度来设置图片位置时，都要指定两个值，并且这两个值都要用空格隔开。一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有left、center、right，关键字在垂直方向的主要有top、center、bottom。水平方向和垂直方向相互搭配使用。三、三、CSSCSS语法基础语法基础盒子盒子的概念与使用的概念与使用l盒子模块盒子模块 l设置边界设置边界 l设置元素边框设置元素边框 l设置元素内边界设置元素内边界 盒子模块盒子模块l在在CSSCSS中，将样式调用在每一个元素上，都以一个假想的矩形中，将样式调用在每一个元素上，都以一个假想的矩形格式模型看待格式模型看待 .一般使用矩形模块的时候，搭配一般使用矩形模块的时候，搭配marginmargin属性、属性、borderborder属性以及属性以及paddingpadding属性，可以更好的控制元素的样式。属性，可以更好的控制元素的样式。设置边界设置边界 lmarginmargin的四个属性主要是控制元素边界与文件其他内容的空的四个属性主要是控制元素边界与文件其他内容的空白距离，四个边界一般按顺时针方向上（白距离，四个边界一般按顺时针方向上（margin-topmargin-top）、右）、右（margin-rightmargin-right）、下（）、下（margin-bottommargin-bottom）、左（）、左（margin-margin-leftleft）属性。四个边界的设置语法一样。）属性。四个边界的设置语法一样。基本语法：margin-(top、right、bottom、left):长度单位|百分比单位|auto设置元素边框设置元素边框 lborder-styleborder-style边框样式属性边框样式属性lborder-widthborder-width边框宽度属性边框宽度属性lborder-colorborder-color边框色彩属性边框色彩属性lborderborder属性的综合设置属性的综合设置border-styleborder-style边框样式属性边框样式属性l利用边框样式属性不仅可以设置单位边框样式属性，还可以利用边框样式属性不仅可以设置单位边框样式属性，还可以对单位边框进行设置，而且也可以利用复合边框样式属性来对单位边框进行设置，而且也可以利用复合边框样式属性来统一设置四条边框的样式。统一设置四条边框的样式。基本语法：border-style:样式值border-top-style:样式值border-bottom-style:样式值border-left-style:样式值border-right-style:样式值border-styleborder-style边框样式属性边框样式属性语法说明：语法说明：border-style是一个复合属性，复合属性的值有四种设置方法，其他4个都是单个边框的样式属性，只能取一个值。样式值属性的具体说明见表10-8。设置一个值：四条边框宽度均使用一个值。设置两个值：上边框和下边框宽度调用第一个值，左边框和右边框宽度调用第二个值。设置三个值：上边框宽度调用第一个值，右边框与左边框宽度调用第二个值，下边框调用第三个值。设置四个值：四条边框宽度的调用顺序为上、右、下、左。border-width边框宽度属性lborder-widthborder-width属性，是控制元素边框的宽度的一个综合属性，属性，是控制元素边框的宽度的一个综合属性，和和border-styleborder-style一样也有四种单独的设置方法，分别来定义一样也有四种单独的设置方法，分别来定义四条边框的宽度，设置方法和边框样式一样。四条边框的宽度，设置方法和边框样式一样。基本语法：border-width边框宽度属性语法说明：thin、medium、thick分别表示细、中等、粗，length表示长度单位 border-colorborder-color边框色彩属性边框色彩属性lborder-colorborder-color属性是用来控制边框显示的颜色，和边框宽度、属性是用来控制边框显示的颜色，和边框宽度、边框样式的设置方法一样，也可以分别来设置每个边框的颜边框样式的设置方法一样，也可以分别来设置每个边框的颜色色 .基本语法：border-color:颜色关键字|RGB值 border-top-color:颜色关键字|RGB值 border-bottom-color:颜色关键字|RGB值border-left-color:颜色关键字|RGB值border-right-color:颜色关键字|RGB值borderborder属性的综合设置属性的综合设置l在在CSSCSS中，中，borderborder属性用来同时设置边框的样式、宽度和颜色，也可以另属性用来同时设置边框的样式、宽度和颜色，也可以另外对每个边界属性单独进行设置外对每个边界属性单独进行设置 基本语法：border:边框宽度|边框样式|边框颜色 border-top:上边框宽度|上边框样式|上边框颜色 border-bottom:下边框宽度|下边框样式|下边框颜色border-left:左边框宽度|左边框样式|左边框颜色border-right:右边框宽度|右边框样式|右边框颜色语法说明：每一个属性都是一个复合属性，都可以同时设置边框的样式、宽度和颜色，每个属性的值中间用空格隔开，在这5个属性中，只有border可以同时设置四条边框的属性，其他的只能设置单边框的属性。设置元素内边界设置元素内边界 l元素内边界主要是指边框和内部元素之间的空白距离，利用元素内边界主要是指边框和内部元素之间的空白距离，利用paddingpadding属性属性设置元素内的边界时，也包括设置元素内的边界时，也包括5 5个属性，同样也有四种设置方法。个属性，同样也有四种设置方法。基本语法：padding:长度|百分比padding-top:长度|百分比 padding-bottom:长度|百分比padding-left:长度|百分比padding-right:长度|百分比语法说明：长度包括长度值和长度单位，百分比是相对于上级元素宽度的百分比，不允许用负数，padding作为复合属性的四种取值方法请参考边框样式的取值方法。三、三、CSSCSS语法基础语法基础列表列表l列表列表 list-style-typelist-style-type列表样式列表样式list-style-imagelist-style-image图像列表图像列表list-style-positionlist-style-position列表符号的缩进列表符号的缩进三、三、CSSCSS语法基础语法基础列表列表llist-style-typelist-style-type属性，可用于设置列表的符号或编号，此属属性，可用于设置列表的符号或编号，此属性通常搭配性通常搭配或或标记使用。标记使用。基本语法：list-style-type:属性值三、三、CSSCSS语法基础语法基础列表列表l利用利用csscss还可以把列表的符号设置成喜欢的图片还可以把列表的符号设置成喜欢的图片基本语法：list-style-image:url|none语法说明：url是指定要载入的图片路径，在使用上与插入图片的用法差不多；none表示不使用图片式的列表符号。三、三、CSSCSS语法基础语法基础列表列表llist-style-positionlist-style-position列表符号缩进属性，主要是设置每个列列表符号缩进属性，主要是设置每个列表项目的符号或图片，是否向外凸出。表项目的符号或图片，是否向外凸出。基本语法：list-style-position:inside|outside语法说明：inside表示列表符号不向外凸出，也可以理解成列表项上的第二行文字与列表符号对齐；outside表示列表符号向外凸出，也是默认值。三、三、CSSCSS语法基础语法基础设置网页链接属性设置网页链接属性 l设置伪类选择器得到不同的超链接属性设置伪类选择器得到不同的超链接属性三、三、CSSCSS语法基础语法基础设置滚动条属性设置滚动条属性 l利用利用CSSCSS制作滚动条的颜色效果制作滚动条的颜色效果三、三、CSSCSS语法基础语法基础设置光标属性设置光标属性 l设置变化的光标图形设置变化的光标图形cursor:cursor:属性值属性值四、四、用用DIV+CSSDIV+CSS的方式来写的方式来写HTMLHTML页面页面l一列居中样式一列居中样式margin-right:auto;margin-left:auto;width:px;l两列并列样式两列并列样式定义固定宽度、左对齐浮动l两列并列居中样式两列并列居中样式用一个大容器容纳两个列，即以上两种技术的综合l三列并列样式三列并列样式定义固定宽度、左对齐浮动l工字型布局工字型布局结合三列并列样式，版权区设定清除浮动clear:both;div标记的使用l在写在写HTMLHTML文件时，要定义区域间不同样式时，可以使用文件时，要定义区域间不同样式时，可以使用标记达到这个效果，除此以外，通过设置标记达到这个效果，除此以外，通过设置的的z-indexz-index属属性还可以设置层次的效果。性还可以设置层次的效果。基本语法：div标记的使用语法说明：用style来表示层的样式，因为如果没有定义层的样式的话，在浏览网页的时候是看不到效果的。其中：position属性主要是来定义层的定位方式；left和top是用来定位层的位置，与它并列的还有right和bottom，这四个属性主要是用来设置层的位置，分别表示对象与其他对象的左部、顶部、右部和底部的相对位置；width和height用来定义层的宽度和高度；float是层的浮动属性，用来设置层的浮动位置，当然这个属性不仅可以用在图像和表格上，还可以用到其他任何元素上；clear是层的清除属性，表示是否充许在某个元素的周围有浮动元素，它和浮动属性是一对相对立的属性，浮动属性用来设置某个元素的浮动位置，而清除属性则要去掉某个位置的浮动元素；z-index主要是设置区域的上下层关系，利用此属性设置可以让区域更多层次的效果，相当于三维空间的z坐标，z-index越大，区域在堆中的位置就越高。标记的使用标记的使用l标记主要用来定义网页上的区域，通常用于比较大范围标记主要用来定义网页上的区域，通常用于比较大范围的设置，而的设置，而标记被用来组合文档中的行内元素。标记被用来组合文档中的行内元素。基本语法：或者 语法说明：如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会有任何视觉上的差异，只有对它应用样式时，它才会产生视觉上的变化。与与的区别的区别l基本上基本上与与标记在网页上的使用，都可以用来产生标记在网页上的使用，都可以用来产生区域范围，以定义不同的文字段落，且区域间彼此是独立的。区域范围，以定义不同的文字段落，且区域间彼此是独立的。不过，两者在使用上还是有一些差异。不过，两者在使用上还是有一些差异。区域内是否换行：标记区域内的对象与区域外的上下文会自动换行，而标记区域内的对象与区域外的对象不会自动换行。标记相互包含：与标记可以同时在网页上使用，一般在使用上建议用标记包含标记；但最好不包含标记，否则会造成标记的区域不完整，而形成断行的现象。小实例小实例 l页面布局设计始终是网页设计中的一个核心问题，它包括技术和美学两页面布局设计始终是网页设计中的一个核心问题，它包括技术和美学两个方面的问题，两者结合的非常紧密。页面布局的主要工具是个方面的问题，两者结合的非常紧密。页面布局的主要工具是、和和FlashFlash文件。文件。对于框架，一般而言应尽量避免使用；表格作为可以在上面布置元素的二维网格，它的优点在于在所有浏览器中几乎都可以无差错的运行，而只有微不足道的差异，而且，对于像切割图像这样的问题可以非常容易的用表格实现；但是过度使用表格所带来的页面无序，会给后期的维护带来极大的困难；技术虽然难以全部代替，但是它的位置、尺寸、背景、边框等都可以很好的设计，更重要的是它所依赖的内容和样式分离的思想使得页面代码更为简洁，样式的更改更为方便。五、五、用用CSSCSS设置图像样式扮靓网页设置图像样式扮靓网页l为图像设置边框为图像设置边框border:样式 颜色 宽度;样式：ldotted(点线)、dashed（虚线）、solid（实线）、double（双线）lgroove：根据border-color的值绘制3D凹槽lridge：根据border-color的值绘制3D凸槽linset：根据border-color的值绘制3D凹边loutset：根据border-color的值绘制3D凸边l为图像设置背景为图像设置背景background:url();l为图形设置阴影为图形设置阴影background:white url(渐变背景.gif)repeat-x bottom left;filter：Shadow(Color=?,Direction=?).y1 position:absolute;padding:12px;filter:Shadow(Color=#000000,Direction=135);五、五、用用CSSCSS设置图像样式扮靓网页设置图像样式扮靓网页l滤镜滤镜静态滤镜lalpha、blur、Motionblur、shadow、dropshadow、wave、glow、gray、flipv、fliph、invert、xray、emboss、engrave、mask动态滤镜l必须与javascript配合才能发挥作用对象.滤镜数组名i.apply();对象.滤镜数组名i.play();对象.滤镜数组名i.stop();lfilter:BlendTrans(duration=秒数)lfilter:RevealTrans(Transition=变化方式duration=秒数)lfilter:light五、五、用用CSSCSS设置图像样式扮靓网页设置图像样式扮靓网页l通道（通道（alphaalpha）设置透明度设置透明度filter:alpha(Opacity=？,FinishOpacity=？,Style=？,StartX=？,StartY=？,FinishX=？,FinishY=？)Opacity：透明等级，0100，0表示完全透明，100表示不透明；FinishOpacity：结束时的透明度，取值同上；Style：透明区域的形状特征l0：统一形状l1：线性l2：放射性渐变l3：矩形渐变l当Style为2或3时，startX等参数没有意义，都是以图片中心开始向四周结束五、五、用用CSSCSS设置图像样式扮靓网页设置图像样式扮靓网页l模糊（模糊（blurblur）设置模糊度设置模糊度filter:progid:DXImageTransform.Microsoft.blur(pixelradius=?,makeshadow=?)pixelradius：设置模糊效果的作用深度；makeshadow：设置是否制作成阴影；makeshadowopacity:设置使用makeshadow制作成的阴影的透明度.blur1filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);.blur2filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=true,makeshadowopacity=10;);五、五、用用CSSCSS设置图像样式扮靓网页设置图像样式扮靓网页l运动模糊（运动模糊（MotionblurMotionblur）设置运动模糊度设置运动模糊度filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=？,direction=？,add=？);stregth：设置模糊效果的作用深度，代表有多少像素受到模糊影响；direction：模糊方向，0度表示垂直向上，；add:true|false,是否叠加原图；.motionblur1filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=120,add=false);.motionblur2filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=120,add=true);五、五、用用CSSCSS设置图像样式扮靓网页设置图像样式扮靓网页l阴影阴影shadow在指定方向上建立物体的连续投影lfilter:shadow(color=？,direction=？);dropshadow下落阴影 lfilter:dropshadow(color=？,offx=？,offy=？,positive=？).shadowfilter:shadow(color=#CCCCFF,direction=135);/*阴影效果阴影效果*/.dropfilter:dropshadow(color=#CCCCFF,offx=5,offy=5,positive=true);/*下落阴影下落阴影*/五、五、用用CSSCSS设置图像样式扮靓网页设置图像样式扮靓网页l波形波形filter:wave(add=?,freq=?,lightstrength=?,phase=?,strength=？)lAdd:1显示原来对象，0不显示原来对象lFreq:波形的频率，参数值1100，完整波纹的个数lLightstrength：波纹增光效果，参数值1100lPhase:正弦波开始的偏移量，数值0100，开始时偏移量占波长的百分比lStrength:振幅的大小.threefilter:flipv alpha(opacity=80)wave(add=0,freq=15,lightstrength=30,phase=0,strength=4);/*同时使用三个滤镜同时使用三个滤镜*/*竖直翻转、透明、波浪效果竖直翻转、透明、波浪效果*/五、五、用用CSSCSS设置图像样式扮靓网页设置图像样式扮靓网页l发光发光filter:glow(color=？,strength=？);l灰度灰度filter:gray;l翻转翻转filter:fliph;/*水平翻转*/filter:flipv;/*竖直翻转*/filter:flipv fliph;/*水平、竖直同时翻转*/l反色反色filter:invert;/*底片效果*/lX X光光filter:xray;/*X光效果*/l浮雕纹理浮雕纹理filter:progid:DXImageTransform.microsoft.emboss(bias=？);凹陷浮雕效果filter:progid:DXImageTransform.microsoft.engrave(bias=？);凸出浮雕效果bias:取值范围-11l遮罩遮罩filter:mask(color=？);/*遮罩效果*/l图片淡入淡出图片淡入淡出filter:BlendTrans(duration=秒数)五、五、用用CSSCSS设置图像样式扮靓网页设置图像样式扮靓网页function img1(x)/获取数组记录数获取数组记录数this.length=x;iname=new img1(5);iname0=photo/01.jpg;iname1=photo/02.jpg;iname2=photo/03.jpg;iname3=photo/04.jpg;iname4=photo/05.jpg;var i=0;function play1()/演示变换效果演示变换效果if(i=4)i=0;/当进行到当进行到iname4时，返回时，返回iname0else i+;tp1.filters0.apply();/tp1为图像的为图像的name，在，在标记中定义标记中定义tp1.src=inamei;tp1.filters0.play();mytimeout=setTimeout(play1(),4000);imgfilter:BlendTrans(duration=4);border:none;play1();lPPTPPT幻灯片幻灯片filter:RevealTrans(Transition=变化方式duration=秒数)lTransitionTransition：变化方式，取值：变化方式，取值023023，2323为随机特效为随机特效五、五、用用CSSCSS设置图像样式扮靓网页设置图像样式扮靓网页function img2(x)this.length=x;jname=new img2(5);jname0=photo/06.jpg;jname1=photo/07.jpg;jname2=photo/08.jpg;jname3=photo/09.jpg;jname4=photo/10.jpg;var j=0;function play2()if(j=4)j=0;else j+;tp2.filters0.apply();tp2.src=jnamej;tp2.filters0.play();mytimeout=setTimeout(play2(),4000);imgfilter:RevealTrans(Duration=3,Transition=23);border:none;play2();l灯光效果灯光效果filter:light;AddAmbien:加入包围的光源；AddCone：加入锥形光源；AddPoint:加入光源；Changcolor：改变光的颜色；Changstrength:改变光源的强度；Clear:清除所有的光源；MoveLight:移动光源l舞台灯光舞台灯光l探照灯探照灯五、五、用用CSSCSS设置图像样式扮靓网页设置图像样式扮靓网页lxmlxml引用引用csscsslHtml+xml+cssHtml+xml+cssHtml:内容Xml:数据Css:格式六、六、CSSCSS与与XMLXML的综合运用的综合运用六、六、CSSCSS与与XMLXML的综合运用的综合运用1.2.var xmlDoc=new ActiveXObject(Microsoft.XMLDOM);3.xmlDoc.async=false;4.xmlDoc.load(html+css+xml.xml);/调用数据5.var nodes=xmlDoc.documentElement.childNodes;6.document.write();7.document.write(书名作者邮编时间)8.for(i=0;i12;)9.title=nodes.item(0+i).text;10.author=nodes.item(1+i).text;11.email=nodes.item(2+i).text;12.date=nodes.item(3+i).text;13.i=i+4;14.document.write(+title+author+email+date+);15.16.document.write();17.