电子商务实用基础 作者 闵敏 第2章 CSS样式表.pptVIP

六、CSS滤镜特效 2.外观滤镜 ⑧ Mask滤镜 使用MASK属性可以为对象建立一个覆盖于表面的膜，其效果就象戴着有色眼镜看物体一样。语法格式： {filter:mask(color=color)} 六、CSS滤镜特效 2.外观滤镜 ⑨ Shadow滤镜 利用Shadow属性可以在指定的方向建立物体的投影，COLOR是投影色，DIRECTION是设置投影的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。语法格式： {filter:shadow(color=color,direction=direction)} 六、CSS滤镜特效 2.外观滤镜 ⑩ Wave滤镜 Wave滤镜实现波浪效果。语法格式： {filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)} 效果为： 六、CSS滤镜特效 2.外观滤镜 ? Light滤镜 这个滤镜模拟光源的投射效果。语法格式： Filter{light} 效果为（如例2-6-2 ） 六、CSS滤镜特效 3.过渡效果滤镜 ① Blend Transition(混合过渡滤镜) 对图像的出现消失进行淡入淡出效果处理。语法格式： filter:blendtransition(duration=过渡秒数) （如例2-6-3） 六、CSS滤镜特效 3.过渡效果滤镜 ② Reveal Transition(显示过渡)滤镜 显示转换滤镜提供的只是一种简单的淡入淡出的过渡方式，如果需要更炫耀的过渡效果，则需要显示过渡滤镜。语法格式： filter:revealtrans(duration=过渡秒数，transition=过渡类型) 教育部“十一五”规划教材 第2章 CSS级联样式表 电子商务设计实务 第二版 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 主要内容 什么是级联样式表 1 CSS的创建 2 CSS的引用方式 3 样式设计中的计量单位 4 在脚本语言中使用样式 5 CSS滤镜特效 6 一、什么是级联样式表 CSS与HTML CSS(Cascading Style Sheet)译作“级联样式表”，是用于增强网页显示风格的特殊标记，级联样式表允许将样式控制与网页内容分离，实现更灵活的样式，CSS是HTML的扩展。 CSS的基本格式： STYLE !-- .AA{ font-family: 宋体; color: #FF00FF; font-weight: bold } h1{ font-family: Arial Black } -- /STYLE 一、什么是级联样式表 2. 浏览器对CSS的支持 在CSS1.0的标准尚未制定前，IE3.0就已经支持CSS1.0的部分草案规格，Netscape Navigator 则是从4.0才开始支持CSS1.0的，Maxilla 5.0被认为对CSS1.0和大多数CSS 2.0提供最完全支持的浏览器。Netscape Navigator 4.0和IE 4.0及IE 5.0支持CSS1.0的各部分。总之，在使用CSS时，要了解浏览器对CSS的支持情况。 一、什么是级联样式表 3. CSS的优点 D B C A 减少图形文件的使用次数 共享样式设置 利用样式表可以实现样式的集中控制 可以将样式分类使用 二、CSS的创建 样式的基本格式和用法 样式定义的基本格式 HTML标记{属性:属性值;} ② 样式的组成 样式主要包括样式选择器和样式规则两部分。 ③ 一个标记中使用多个样式 在样式定义中可以同时对多个不同的样式属性进行设置，不同的属性之间用分号分隔。 二、CSS的创建 样式的基本格式和用法 ④ 分行定义样式 BODY{ Background: Blue；} BODY{ Color: Yellow；} ⑤ 样式中使用注释 ⑥ 多个标记使用相同样式 注释是对样式的说明，不影响样式设置。注释放在/* */之间。 不仅一个标记可以使用多个样式属性，多个标记也可以使用相同的样式定，多个标记之间要用逗号分隔。 二、CSS的创建 2.类选择器 类选择器的格式为： .类名{ 样式规则表；} 一个具体的例子 二、CSS的创建 3. ID选择器 ID选择器的定义格式为： #ID名称{样式规则表；} 一个具体的例子。（例2-2-1 ） 二、