网页设计与制作 教学课件 王学军 第11章 使用CSS和Div.pptVIP

CSS主要用于控制网页中的元素或区域的外观样式，Div可以在文档中创建一个具有独立属性的分区。当Div与CSS相互配合使用时，Div会展现出强大的作用。本章将介绍CSS和Div的基本知识以及使用Div与CSS定义网页结构的基本方法。 类型属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰效果等。 背景属性主要用于设置背景颜色或背景图像。 区块属性主要用于控制网页元素的间距、对齐方式等。 CSS将网页中所有的块元素都看作是包含在一个方框中的。 网页元素边框的效果是在【边框】分类面板中进行设置的 。 列表属性用于控制列表内的各项元素 。 定位属性可以使网页元素随处浮动，这对于一些固定元素（如表格）来说，是一种功能的扩展，而对于一些浮动元素（如层）来说，却是有效地、用于精确控制其位置的方法 。 【扩展】分类对话框包含两部分 。 CSS滤镜分为静态滤镜和动态滤镜两大类，其中静态滤镜主要用于使被施加对象产生各种静态的特殊效果。 一、Alpha滤镜 让对象呈现渐变半透明的效果，示例如下。 filter: Alpha(Opacity=100, FinishOpacity=30, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=80); 二、Blur滤镜 让对象产生风吹模糊的效果，示例如下。 filter: Blur(Add=1, Direction=315, Strength=240); 三、Chroma滤镜 Chroma滤镜主要用于把图像中的某个颜色变成透明的。使用了该滤镜后，原图像中的一部分颜色就好像没有了一样。它只有一个参数“Color”，用来指定透明的颜色，即不显示出来的颜色。 示例如下。 filter: Chroma(Color=#422429); 四、DropShadow滤镜 让HTML对象产生下落式的阴影，常用在文字或是图像上。 示例如下。 filter: DropShadow(Color=#cccccc, OffX=5, OffY=5, Positive=1); 五、FlipH和FlipV滤镜 FlipH和FlipV可使网页中的对象产生水平和垂直翻转的效果，这两个滤镜均没有参数设置，直接使用就可以。示例如下。 filter: FlipH; //水平翻转 filter: FlipV; //垂直翻转 六、Glow滤镜 Glow滤镜可以使HTML元素对象的外轮廓上产生一种光晕效果。 示例如下。 filter: Glow(Color=#ff0000, Strength=3); 七、Gray滤镜 将一个彩色图像变为灰色调的效果，该滤镜也没有参数，直接使用就可以了。示例如下。 filter: Gray; 八、Invert滤镜 使图像产生照片底片的效果，一般适用于图像对象。示例如下。 filter: Invert; 九、Light滤镜 使HTML对象产生一种模拟光源的投射效果。一旦为对象定义了Light滤镜属性，就可以调用它的方法来设置或者改变属性，这需要手工编程来实现。 Light可用的方法有： ? “MoveLight”：移动光源。 ? “ChangeColor”：改变光的颜色。 ? “AddAmbient”：加入包围的光源。 ? “AddPoint”：加入点光源。 ? “Clear”：清除所有的光源。 ? “AddCone”：加入锥形光源。 ? “ChangeStrength”：改变光源的强度。 十、Mask滤镜 利用一个HTML对象在另一个对象上产生图像的遮罩，可以为对象建立一个覆盖于表面的膜，其效果就像戴着有色眼镜看物体一样，一般适用于图像对象。它只有一个参数Color，用于指定遮罩的颜色，参数值为“#RRGGBB”格式的颜色值。 十一、Shadow滤镜 Shadow滤镜与DropShadow非常相像，也是使网页中的对象产生下落式的阴影效果。两者所不同的是，DropShadow没有渐进感，而Shadow有渐进的阴影感，感觉上更真实一些。示例如下。 filter: Shadow(Color=#CCCCCC, Direction=125); 十二、Wave滤镜 Wave滤镜功能是使网页中的对象在垂直方向上产生波浪的变形效果。示例如下。 filter: Wave(Add=0, Freq=3, LightStrength=10, Phase=5, Strength=9); 十三、Xray滤镜 显现图像的轮廓，就像X光的照片一样。该滤镜没有参数设定。 所谓动态滤镜就是人们常说的转换滤镜，这种滤镜是用来处理网页或HTML元素对象的显示效果的。 一、动态滤镜的构成 转换滤镜（即动态滤镜）分为混合转换滤镜和显示转换滤镜两种。 (1) 混