第六章使用CSS样式.pptVIP

设置CSS样式属性（定位） CSS样式规则的应用 选中需应用样式的文本或标记 在CSS面板中选中相应的样式规则，单击鼠标右键，选择“套用” 应用CSS样例 6.3 CSS滤镜 滤镜(filter)属性是CSS的一个扩展部分，它能够渲染对象元素，创建出艺术效果。 Dreamweaver的CSS样式提供了丰富的滤镜效果，使用这些滤镜能够创建出文本和图像的3D、阴影和淡入淡出等效果。 例子 CSS滤镜属性只能用在HTML控件元素上。 所谓的HTML控件元素就是它们在页面上定义了一个矩形空间，浏览器窗口可以显示这些空间。 HTML控件元素包括body、button、div、img、input、marquee、span、table、tr、td、th、tfoot、thead和textarea。 CSS滤镜的分类 Dreamweaver中共含有16种CSS滤镜，可分为无参滤镜和有参滤镜两类。 无参滤镜 Gray： 使对象产生灰度图效果 Invert： 使对象产生“底片”效果 Xray： 使对象产生“X光片”效果 FlipH： 使对象产生水平翻转效果 FlipV： 使对象产生垂直翻转效果 Light： 使对象产生一种模拟光源的投射效果 无参滤镜实例 Gray Invert Xray FlipH FlipV Light 有参滤镜 Alpha：设置对象的透明度 Blur：使对象产生模糊效果 Wave：使对象在垂直方向上产生波纹效果 原图 Alpha Blur Wave 有参滤镜 Shadow：在指定的方向上建立对象的投影 Dropshadow：设置对象的阴影效果 Shadow Dropshadow 有参滤镜 Chroma：将对象中指定的颜色设置为透明色 Glow：在对象的边缘产生类似发光的效果 Mask：为对象建立一个覆盖于表面的膜，其 效果就好像是戴有色眼镜看物体一样 Chroma Glow Mask 有参滤镜 BlendTrans：设置对象的淡入淡出效果 Filter : revealtrans(duration=转换的秒数) RevealTrans：设置对象之间的切换效果 Filter : revealtrans(duration=转换的秒数，transition=转换的类型) 部分滤镜效果演示 BlendTrans滤镜效果 RevealTrans滤镜效果 第六章 使用CSS样式 退出 6.1 CSS样式的基本使用方法 6.2 设置CSS样式属性 6.3 CSS滤镜 CSS（Cascading Style Sheet）样式是一系列格式设置规则，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS样式可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式等。 网页上的元素精确地定位 网页上的内容结构和格式控制相分离 CSS样式的最主要的作用： CSS格式设置规则由两部分组成：选择器和声明。 H1 { font-size: 16 px; font-family: Helvetica; font-weight: bold; } 选择器是标识已设置格式元素(如 P、H1、类名称或 ID) 声明由两部分组成：属性和值。 链接外部样式表文件 定义内部CSS样式 导入外部样式表文件 定义内联CSS样式 为网页添加CSS样式表的方法有四种 样式规则可以直接定义在网页文件中也可以定义在一个.CSS文件中 方法一：链接外部样式表文件 H1 { font-size: 16px; font-family: Helvetica; font-weight: bold; } head title链接外部样式表/title link href=css/style.css rel=stylesheet type=text/css /head style.css test.htm 优点：页面内容与版面设计分开，样式表文件可以重用 （Style.css改变，test.htm也改变） 方法二：定义内部CSS样式 head style type=text/css !-- H1 { font-size: 16px; font-family: Helvetica; font-weight: bold; } -- /style /head test.htm 适用：指定单个网页的总体外观。 方法三：导入外部样式表文件 head style type=text/css !-- @import style.cs