在网页中加及动态效果课件

7层叠样式表（CSS）什么是CSSCSS的基本概念CSS（CascadingStyleSheet）就是层叠样式表。是一种可以精确控制页面元素样式的技术。CSS样式表的主要优点是提供便利的更新功能；通过使用CSS可以实现改变一个文件就可以自动更新数百个使用该样式的网页外观。CSS有以下特点（1）将格式和结构分离HTML语言定义了网页的结构和各对象的功能，而层叠样式表通过将定义结构的部分和定义格式的部分分离，使我们能够对页面的布局施加更多的控制。（2）很强的控制页面布局的能力HTML语言对网页对象的控制很有限，如精确定位、行间距、字间距等，这些都可以通过CSS完成。（3）同时更新许多网页，比以前更快更容易（4）制作体积更小、下载更快的网页CSS的类型与基本写法CSS层叠样式表的三种类型自定义CSS样式（也称为类样式） 类HTML标签CSS样式 标签高级CSS选择器样式 高级CSS标签可以驻留在以下位置内部（或嵌入式）CSS样式表头部中<Style>……<Style>内联样式CSS样式表在标签属性内<pstyle=”font-size:16pt”>外部CSS样式表*.css类型文件建立CSS样式建立新样式样式位置内部样式（本网页内）外部样式（独立的CSS文件）样式的类型类：可用于任何标签标签：对标签起作用高级：ID、上下文选择器样式样式定义对话框分类参数——类型类型“类型”类别可以定义CSS样式的基本字体和类型设置。选项字体、大小、粗细、样式、行高、修饰、颜色等样式定义对话框分类参数——背景背景“背景”类别可以定义CSS样式的背景设置选项背景颜色、背景图像，重复、附件、水平位置、垂直位置样式定义对话框分类参数——方框方框“方框”类别可以为用于控制元素在页面上的放置方式的标签和属性定义设置选项宽和高、垂直对齐、文本对齐、文字缩进、空格、显示样式定义对话框分类参数——边框边框“边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式）选项样式、宽度、颜色样式定义对话框分类参数——列表列表“列表”类别为列表标签定义列表设置（如项目符号大小和类型）选项类型、项目符号图像、位置样式定义对话框分类参数——扩展扩展“扩展”样式属性包括滤镜、分页和指针选项选项分页在打印期间在样式所控制的对象之前或者之后强行分页光标当指针位于样式所控制的对象上时改变指针图像过滤器对样式所控制的对象应用特殊效果（包括模糊和反转）扩展——光标crosshair——十字光标text——文本wait——忙default——定义help——帮助e-resize、w-resize——水平方向尺寸ne-resize、sw-resize——东北方向尺寸n-resize、s-resize——垂直方向尺寸nw-resize、se-resize——西北方向尺寸auto——自动Hand——手型inherit扩展——过滤器（又称css滤镜）“alpha”滤镜：这个名字，在flash和photoshop经常见到。它们的作用基本类似，就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。blendtrans滤镜：它的功能也比较单一，就是产生一种精细的淡入淡出的效果。blur滤镜：把它加载到文字上，产生风吹模糊的效果，类似立体字，这将为你在网页上制作立体字标题带来了方便。也可以把blur滤镜加载到图片上，能达到用图象处理软件制作的效果。“dropshadow”顾名思义就是添加对象的阴影效果。它的实际效果看上去就象是原来的对象离开了页面，然后在页面上显示出该对象的投影。css的无参数滤镜共有六个（fliph、flipv、invert、xray、gray和light），虽然它们没有参数，相对来讲，灵活性要差点，但它们用起来更方便，效果也相当明显。用它们可以使文字或图片翻转、获得图片的“底片”效果，甚至可以制作图片的“x光片”效果。glow滤镜：使对象的边缘就产生类似发光的效果，glow”滤镜制作这种效果操作非常简便。mask滤镜：可以为网页上的元件对象作出一个矩形遮罩效果。wave滤镜：它的作用是把对象按照垂直的波形样式扭曲的特殊效果。light滤镜：能产生一个模拟光源的效果，配合使用一些简单的javascrpt，使对象产生奇特光照的效果。revealtrans动态滤镜：是一个神奇的滤镜，它能产生23种动态效果，还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换，非常方便。扩展——过滤器（又称css滤镜）2.Blur滤镜语法:Blur(Add=?,Direction=?,Strength=?)MotionBlur滤镜表现的是一种模糊效果。其ADD属性是用来确定是否在运动模糊中使用原有目标，其值为0和1，0表示“否”，用于文字，1表示“是”，用于图像；Direction属性是模糊移动的角度，其值为0至360度；Strength属性是模糊移动的距离。代码：<fontstyle="font-size:30pt;filter:blur(add=1,direction=30,strength=5);width:100%;color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font>3.Chroma滤镜语法:{filter:chroma(color=color)}使用”Chroma"属性可以设置一个对象中指定的颜色为透明色，参数COLOR即要透明的颜色。扩展——过滤器（又称css滤镜）4.DropShadow滤镜语法:DropShadow(Color=?,OffX=?,OffY=?,Positive=?)DropShadow滤镜主要产生重叠效果。其属性为：color属性：设置影子文本的颜色；offX和offY属性：影子文本下落的位移值；Positive属性：指定透明象素阴影，布尔型，0为是，1为否。代码：<fontstyle="font-size:30pt;filter:dropshadow(color=lightgreen,offx=5,offy=3,positive=1);width:100%;color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font>5.Flip滤镜Flip滤滤镜主要是产生两种变换效果，即上下变换和左右变换。FlipV产生上下变换，FlipH产生左右变换。代码：<fontstyle="font-size:30pt;filter:flipv(color=silver);width:100%;color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font><palign=right><fontstyle="font-size:30pt;filter:fliph(color=silver);width:100%;color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font></p>扩展——过滤器（又称css滤镜）6.Glow滤镜语法:Glow(Color=?,Strength=?)Glow滤镜生成一种光晕效果。属性：color属性：光晕颜色；strength：光晕的厚度。代码：<fontstyle="font-size:30pt;filter:glow(color=gray,strength=4);width:100%;color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font>7.Light滤镜这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT"滤镜属性，那么就可以调用它的“方法(Method)"来设置或者改变属性。“LIGHT"可用的方法有：·AddAmbient加入包围的光源·AddCone加入锥形光源·AddPoint加入点光源·Changcolor改变光的颜色·Changstrength改变光源的强度·Clear清除所有的光源·Mo