在网页中加及动态效果

7层叠样式表（CSS）在网页中加及动态效果共21页，您现在浏览的是第1页!什么是CSSCSS的基本概念CSS（CascadingStyleSheet）就是层叠样式表。是一种可以精确控制页面元素样式的技术。CSS样式表的主要优点是提供便利的更新功能；通过使用CSS可以实现改变一个文件就可以自动更新数百个使用该样式的网页外观。CSS有以下特点（1）将格式和结构分离HTML语言定义了网页的结构和各对象的功能，而层叠样式表通过将定义结构的部分和定义格式的部分分离，使我们能够对页面的布局施加更多的控制。（2）很强的控制页面布局的能力HTML语言对网页对象的控制很有限，如精确定位、行间距、字间距等，这些都可以通过CSS完成。（3）同时更新许多网页，比以前更快更容易（4）制作体积更小、下载更快的网页在网页中加及动态效果共21页，您现在浏览的是第2页!CSS的类型与基本写法CSS层叠样式表的三种类型自定义CSS样式（也称为类样式） 类HTML标签CSS样式 标签高级CSS选择器样式 高级CSS标签可以驻留在以下位置内部（或嵌入式）CSS样式表头部中<Style>……<Style>内联样式CSS样式表在标签属性内<pstyle=”font-size:16pt”>外部CSS样式表*.css类型文件在网页中加及动态效果共21页，您现在浏览的是第3页!CSS的冲突当来自不同样式中的文本属性在应用到同一段文本产生冲突时，浏览器将按照与文本关系的远近来决定到底显示哪一个属性。在产生直接的冲突时，CSS样式具有较高的优先级。也就是说，在HTML样式与CSS样式存在矛盾时，浏览器将按照CSS样式中定义的文本属性来显示。如图像或单元格等的大小、背景色等在网页中加及动态效果共21页，您现在浏览的是第4页!样式定义对话框分类参数——类型类型“类型”类别可以定义CSS样式的基本字体和类型设置。选项字体、大小、粗细、样式、行高、修饰、颜色等在网页中加及动态效果共21页，您现在浏览的是第5页!样式定义对话框分类参数——区块区块“区块”类别可以定义标签和属性的间距和对齐设置选项单词间距、字母间距、垂直对齐、文本对齐、文字缩进、空格、显示在网页中加及动态效果共21页，您现在浏览的是第6页!样式定义对话框分类参数——边框边框“边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式）选项样式、宽度、颜色在网页中加及动态效果共21页，您现在浏览的是第7页!样式定义对话框分类参数——定位定位“定位”类别确定与选定的CSS样式相关的内容在页面上的定位方式选项类型绝对使用“定位”框中输入的、相对于最近的绝对或相对定位上级元素的坐标来放置内容相对使用“定位”框中输入的、相对于区块在文档文本流中的位置的坐标来放置内容区块固定使用“定位”框中输入的坐标（相对于浏览器的左上角）来放置内容静态将内容放在其在文本流中的位置——这是所有可定位的HTML元素的默认位置显示、Z轴、溢出、宽、高对应层的内容定位指定内容块的位置和大小在网页中加及动态效果共21页，您现在浏览的是第8页!扩展——光标crosshair——十字光标text——文本wait——忙default——定义help——帮助e-resize、w-resize——水平方向尺寸ne-resize、sw-resize——东北方向尺寸n-resize、s-resize——垂直方向尺寸nw-resize、se-resize——西北方向尺寸auto——自动Hand——手型inherit在网页中加及动态效果共21页，您现在浏览的是第9页!扩展——过滤器（又称css滤镜）1.Alpha滤镜语法:Alpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)代码：<fontstyle="font-size:30pt;filter:alpha(opacity=100,style=3);width:100%;color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font>从效果中我们可以看出，Alpha滤镜使对象呈渐变透明的效果，其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中：opacity属性：设置透明度，取值0至100之间的任意数值，100表示完全不透明；style属性：设置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变。而width:100%则表示参与渐变的对象的宽度，通常都设置为100%。在网页中加及动态效果共21页，您现在浏览的是第10页!扩展——过滤器（又称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>在网页中加及动态效果共21页，您现在浏览的是第11页!扩展——过滤器（又称css滤镜）8.Shadow滤镜语法:Shadow(Color=?,Direction=?)与DropShadow的影子特性不同，Shadow滤镜产生一种阴影效果，它的属性比较简单：color属性：阴影颜色；direction属性：阴影角度，值取0至360度。代码：<fontstyle="font-size:30pt;filter:shadow(color=black,direction=180);width:100%;color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font>9.Wave滤镜语法:Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strength=?)此滤镜对过滤对象生成正弦波变形，造成一种变幻效果。内嵌属性：add属性：布尔型，0或1，0表示将原始对象加入最后效果中，1则反之；freq属性：决定显示的频率，即应出现多少个波形；phrase属性：决定波形的形状，值取0至360之间；strength属性：决定波形的振幅。代码：<fontstyle="font-size:30pt;filter:wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30);width:100%;color:red;line-height:150%;font-family:华文行楷"><b>CSS滤镜实例</b></font>10.Gray,Invert,Xray滤镜语法:{filter:gray},{filter:invert},{filter:xray}Gray滤镜是把一张图片变成灰度图；Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值；Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片。代码：提示：CSS滤镜还经常用来修饰图像。比如用Flip滤镜，就可以使图像倒过来显示。最后请注意：要使用CSS滤镜，只有在HTML编辑模式下编辑发布才有效果。在网页中加及动态效果共21页，您现在浏览的是第12页!建立CSS样式建立新样式样式位置内部样式（本网页内）外部样式（独立的CSS文件）样式的类型类：可用于任何标签标签：对标签起作用高级：ID、上下文选择器样式在网页中加及动态效果共21页，您现在浏览的是第13页!样式定义对话框分类参数——背景背景“背景”类别可以定义CSS样式的背景设置选项背景颜色、背景图像，重复、附件、水平位置、垂直位置在网页中加及动态效果共21页，您现在浏览的是第14页!样式定义对话框分类参数——方框方框“方框”类别可以为用于控制元素在页面上的放置方式的标签和属性定义设置选项宽和高、垂直对齐、文本对齐、文字缩进、空格、显示在网页中加及动态效果共21页，您现在浏览的是第15页!样式定义对话框分类参数——列表列表“列表”类别为列表标签定义列表设置（如项目符号大小和类型）选项类型、项目符号图像、位置在网页中加及动态效果共21页，您现在浏览的是第16页!样式定义对话框分类参数——扩展扩展“扩展”样式属性包括滤镜、分页和指针选项选项分页在打印期间在样式所控制的对象之前或者之后强行分页光标当指针位于样式所控制的对象上时改变指针图像过滤器对样式所控制的对象应用特殊效果（包括模糊和反转）在网页中加及动态效果共21页，您现在浏览的是第17页!扩展——过滤器（又称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种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换，非常方便。在网页中加及动态效果共21页，您现在浏览的是第18页!扩展——过滤器（又称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即要透明的颜色。在网页中加及动态效果共21页，您现在浏览的是第19页!扩展——过滤器（又称css滤镜）6.Glow滤镜语法:Glow(Color=?,Strength=?)Glow滤镜生成一种光晕效果。属性：c