第5章CSS样式.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,第5章,CSS,样式表,学习目标：,CSS,样式表是,Dreamweaver,中的重点和难点，通过本章的学习，大家要理解,CSS,样式表的作用。掌握如何建立,CSS,样式表，如何运用,CSS,样式表，如何设置,CSS,样式表的各项属性。,1,5.1,CSS,样式表,5.1.1,CSS,样式表简介,5.1.2 【,CSS】,样式表,5.2,链接和创建样式表,5.2.1,链接外部样式表文件,5.2.2,创建新的,CSS,样式,5.2.3,应用类样式,5.2.4,编辑样式,5.3,CSS,样式的属性设置,5.3.1,设置类型属性,5.3.2,设置背景属性,5.3.3,设置区块属性,5.3.4,设置方框属性,5.3.5,设置边框属性,5.3.6,设置列表属性,5.3.7,设置定位属性,5.3.8,设置扩展属性,5.4,CSS,样式中的过滤器,5.5,样式表的运用举例,第5章,CSS,样式表,2,5.1,CSS,样式表,5.1.1,CSS,样式表简介,5.1.2 【,CSS】,样式表,3,5.1.1,CSS,样式表简介,什么是,CSS,样式表？,CSS,是“,Cascading Style Sheet”,缩写，通常译为“层叠样式表”或“级联样式表”。,1998年5月12,日，,CSS2,成为了,W3C（,国际互联网联盟）的新标准。同时,W3C Core Styles（,国际互联网联盟核心样式）、,CSS2 Validation Service（,样式表校验服务）以及,CSS Test Suite（,样式表测试组件）宣布成立。,4,我们使用,HTML,语言设计网页，但设计的页面在浏览器中显示时和预期的效果往往有所差异，而且使用不同的浏览器、不同的分辨率，效果又有不同。例如用,Microsoft Internet Explorer,浏览器打开第七章创建的文件“,index.,htm,”，,在,IE,菜单中选择,【,查看,】/【,文字大小,】/【,最大,】,命令，页面的布局就完成混乱了。所以单纯用,HTML,标签来描述网页元素是不够的，因为,HTML,标签本身有一定的局限性。,5.1.1,CSS,样式表简介,5,5.1.1,CSS,样式表简介,CSS,样式表可以解决这些问题，使页面完全按照设计者的构想显示。使用样式表可以对网页元素精确定位，轻易地控制文字、图片、表格等各种对象，对于不同的浏览器，不同的分辨率，网页的整体效果都不会改变。,我们以前在设计制作网页时，网页的内容与格式控制是交错在一起的，这样做的缺点是不方便网页的修改，不利于整个站点的风格的统一，网站的维护工作量很大。,解决这个问题的方法是，把网页的内容与格式控制分开处理。使得网页可以光由内容构成，而格式控制工作由,CSS,样式表来完成。这样做的好处在于：,简化网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量。,只要修改,CSS,样式表文件，就可以改变整个站点的风格特色。这对于维护、修改大型网站显得格外重要。避免了一个个地修改网页，大大减少了重复劳动。,6,5.1.1,CSS,样式表简介,可以重新定义,HTML,语言中的标签，弥补,HTML,语言中规格的不足，可以储存成独立文件，不仅可以应用于,HTML,语言，还可应用于,XML,语言与,JAVAscript,中，且大多数浏览器都支持，,CSS,作为网页内容格式技术，已成为网页学习者必备的技术之一。,7,51.1,CSS,样式表简介,CSS,样式表的,功能非常强大，一般可以归纳为以下几点：,可以精确地控制网页中各种元素的位置。尽量使它们不受浏览器类型、分辨率的影响。,可以保证网站整体风格的统一，方便网站的修改和维护。,减少网页代码的冗余，加快网站上传和下载的速度。,可以为网页中的各种元素设置一些特殊的风格，例如；虚线的边框，文本块的缩进，不同的背景等。,可以为网页中的元素设置各种过滤器，从而产生诸如阴影、辉光、模糊和透明等效果，而这些效果以前只有在一些图像处理软件中才能实现。,8,5.1.2 【,CSS】,样式表,选择,Dreamweaver,MX 2004,主菜单中的,【,窗口,】/【,CSS,样式,】,命令，打开,【,CSS,样式,】,面板，如图,5-1,所示。在,【,设计,】,面板中有两个选项，一个是,CSS,样式，另一个是层。,【,CSS,样式,】,面板窗口分左右两栏，左边是已定义的样式，右边是该样式的具体设置。在窗口的底部排列有几个快捷按钮，它们分别是：,附加样式表,新建样式表,编辑样式表,删除样式表,9,5.2,链接和创建样式表,5.2.1,创建新的,CSS,样式,5.2.2,链接外部样式表文件,5.2.3,应用类样式,5.2.4,编辑样式,10,5.2.1,创建新的,CSS,样式,除了可以使用现成的样式文件外，我们也可以自己创建样式文件。,Dreamweaver,MX 2004,会根椐设计者的选择，自动编辑生成样式文件，操作非常简单。具体步骤如下：,打开,【,CSS,样式,】,面板，单击,【,CSS,样式,】,面板底部的按钮，打开,【,新建,CSS,样式,】,对话框，如图,5-5,所示。,11,5.2.1,创建新的,CSS,样式,其中,【,选择器类型,】,有以下,3,种单选框：,【,类（可应用于任何标签）,】,：可以将自定义的样式应用于任何文本。如果将自定义样式用于整段文本，会在,HTML,源代码中加入,CLASS,属性，例如：,；,如果将样式用于一行或选定文本，会在选定文本的源代码前后加入包含了,CLASS,属性的,SPAN,标记，例如：,。,12,5.2.1,创建新的,CSS,样式,【,标签（重新定义特定标签外观）,】,：该选项可以对某一具体标签进行重新定义。可以直接输入一个,HTML,标签，也可以从弹出的下拉菜单选择。例如：当重新创建或修改,HR,的,CSS,样式时，文档中用,HR,标签的地方都会自动更新。在一个已链接好的,CSS,样式表里重定义标签应小心，因为这样做有可能会改变许多页面的布局。例如，如果对“,TABLE”,标签进行重新定义，就会影响到其他使用表格的页面布局。,【,高级（,ID、,上下文选择器等）,】,：可以定义特殊的标签组合（如“,td h2”,表示只要在表格单元中出现“,h2”,标题就应用该样式）以及包含特殊序列号（,ID）,的标记属性（如“,#,myStyle,”,表示所有属性之中有一对“,ID=#,myStyle,”,的标签都应用该样式）。,13,5.2.1,创建新的,CSS,样式,在,【,高级,】,选项中，有四种给定的组合样式，分别是,a:active（,活动链接），,a:hover（,当前链接），,a:link（,链接），,a:visited（,访问过的链接）。通过对这几种样式的定义，可以制作出富有特色的超级链接，例如，给链接去掉下划线，对链接的各种状态设置不同颜色等。,14,5.2.1,创建新的,CSS,样式,在,CSS,中使用如下格式来创建样式单,:,.,选择符,属性,1:,属性值,1;,属性,2:,属性值,2,选择符,:,可以是,HTML,中的任意标签或样式名,属性,:,为用于控制元素各种特性,如显示属性、字体属性和文本属性等。,15,例如：,.,font,font-family:,幼圆,;,font-size:10pt;,font-style:normal;,line-height:normal;,font-weight:bolder;,font-variant:normal;,text-transform:none;,color:#006666;,letter-spacing:normal;,text-align:center;,text-indent:2pt;,vertical-align:middle;,word-spacing:30pt;,white-space:normal;,5.2.1,创建新的,CSS,样式,16,5.2.2,链接外部样式表文件,如果已经定义了样式文件，则在,【,定义在,】,选项中，可以选择下拉列表中已存在的样式文件，如图,5-10,所示。这样操作表示将新的内容添加到该样式文件中。以文件形式存在的样式表可以通过链接形式引用。例如，运用样式表文件,mycss,.,css,，,则在,标签中引用代码为：,17,5.2.2,链接外部样式表文件,样式表是一个包含样式规则的文本文件，它的扩展名为*,.,CSS。,它可分为,2,种类型。一种是用户自己创建的样式文件，称为内部样式表；另一种是外部样式表文件，即把现成的样式表文件链接到页面，直接使用它进行格式控制。编辑外部样式表将会影响到所有链接引用它的文件。我们先讲后一种情况。,18,5.2.2,链接外部样式表文件,链接到一个外部样式表的操作方法如下：,选择,【,窗口,】/【,CSS,样式,】,命令，打开,【,CSS,样式,】,面板。,在,【,CSS,样式,】,面板中单击右下角的,【,附加样式表,】,按钮，打开,【,链接外部样式表,】,对话框。如图,5-2,所示。,在,【,文件,/,URL】,文本框中输入外部样式表的文件名，或单击,【,浏览,】,按钮，打开,【,选择样式表文件,】,对话框，如图5-3,所示，在对话框中选择外部样式表文件。,19,5.2.2,链接外部样式表文件,【,添加为,】,的方式有两种：一种为,【,链接,】,Link；,一种是,【,导入,】,Import。,这两种方式的作用都是把外部样式引用到当前文档，但链接标记可提供更多的功能，而且支持的浏览器更多。,单击,【,确定,】,按钮。这时在,【,CSS,样式,】,面板中可看到刚链接进来的外部样式文件。同时，该样式文件的内容已自动运用到当前文档。,20,5.2.2,链接外部样式表文件,在,Dreamweaver,MX 2004,中，预先创建了一些现成的样式文件，我们可以把它链接在当前文档，直接使用，可以快速进行格式控制具体操作如下：,选择,【,窗口,】/【,CSS,样式,】,命令，打开,【,CSS,样式,】,面板。,在,【,CSS,样式,】,面板中单击右下角的,【,附加样式表,】,按钮，打开,【,链接外部样式表,】,对话框。,单击对话框中的,【,范例样式表,】,，打开,【,范例样式表,】,对话框，如图,5-4,所示。,21,5.2.2,链接外部样式表文件,一共有二十三种预先设置好的样式，选择其中一种，例如：基本：,Arial，,该样式对,body，td，,th,标签重新进行定义。,指定样式表的,【,保存位置,】，,Dreamweaver,MX 2004,会自动把样式文件保存到网站的,CSS,目录下，若网站没有,CSS,子目录，,Dreamweaver,MX 2004,会自动建立。,单击,【,确定,】,按钮。在,【,CSS,样式,】,面板中出现了该样式表，同时，该样式表文件已自动应用到当前文档。,22,5.,2.,3,应用类样式,直接通过,【,属性,】,面板以手工给文本设置格式，也会生成样式，该样式只对当前文档起作用。这种操作会自动在,【,属性,】,面板的,【,样式,】,文本框中生成新样式，名称分别为,Style1，Style2,等，切换到代码视图，在,中可以看到样式文件的内容。,要想使用样式文件来控制段落或文本的格式，应先把所有手工设置的样式删除，这样做是为了避免产生冲突并导致意想不到的结果。尽管可以不受限制地在,Dreamweaver,中设置,CSS2,规范所定义的所有样式，但并不表示所有设置属性都会表现出来，有些属性浏览器还不支持，甚至相同的属性在,Microsoft Internet Explorer 4.0,和,Netscape Navigator 4.0,中表现是不同的。,23,5.,2.,3,应用类样式,在新建,CSS,样式时，,【,标签,】,样式和,【,高级,】,样式定义好后，会直接格式化当前文档对应的标签。而类样式可以应用于文档的任何文本，所以类样式的应用和前两者有所不同。具体操作如下：,选定要应用,CSS,样式的文本。,在,【,属性,】,面板中单击,【,样式,】下拉列表，其中列出了所有可用的样式，选中需要的样式即可。,标签样式和高级样式不会出现在,【,属性,】,面板的,【,样式,】,列表中，因为它们不能应用于普通对象。,对相同文本应用两个以上的样式，可能会产生冲突，这时浏览器会根椐以下原则应用样式属性：,如果两个样式应用于相同文本，则浏览器显示两个样式的所有属性（冲突属性除外）。冲突属性是指那些无法统一的属性，例如：一个样式指定文本颜色为红色，另一个样式由指定文本颜色为绿色,.,24,5.,2.,3,应用类样式,如果应用于相同文本的属性产生冲突，一般遵循一下原则：,1,.,就近原则；,2,.,CSS,优先于,HTML；,25,5.,2.,4,编辑样式,CSS,样式建立好后，可以进行修改。在,Dreamweaver,MX 2004,中对样式的修改非常方便，有几种方法可以实现对样式表的修改。,方法一：打开,【,CSS,样式,】,面板，选中一个样式文件，双击，则该样式文件以文本形式打开，可直接在文件中修改。,方法二：打开,【,CSS,样式,】,面板，选中一个已定义好的,CSS,标签，单击面板底部的编辑样式按钮，会弹出如图,5-11,所示对话框，在这里对样式重新进行设置。,26,方法三：打开,【,CSS,样式,】,面板，选中一个样式文件，单击面板底部的编辑样式按钮，会弹出如图,5-12,所示对话框，在这里可附加样式、新建样式、编辑样式、重命名、重制、删除样式。,方法四：选择,【,窗口,】/【,标签检查器,】,，打开,【,标签检查器,】,面板，在,【,CSS,样式,】,面板中选中一个样式，则,【,标签检查器,】,面板变为,【,规则,】,面板，它有两个选项卡，一个是,【,显示类别视图,】,，一个是,【,显示列表视图,】,，如图,5-13,a，5-13 b,所示。在两种视图中都可直接修改。,5.,2.,4,编辑样式,27,5.3,CSS,样式的属性设置,5.3.1 设置类型属性,5.3.2 设置背景属性,5.3.3 设置区块属性,5.3.4 设置方框属性,5.3.5 设置边框属性,5.3.6 设置列表属性,5.3.7 设置定位属性,5.38 设置扩展属性,28,5.3,CSS,样式的属性设置,前面介绍了的如何建立,CSS,样式表、编辑样式表、运用样式表等操作，现在我们来介绍,CSS,样式表的属性。,Dreamweaver,MX 2004,把样式表的属性分为,8,类，在,【,新建,CSS,样式,】,对话框中单击,【,确定,】,按钮，可以打开,【.,unnamed1,的,CSS,样式定义,】,对话框，如图,5-14,所示。在,【,分类,】,列表中共有,8,个选项：,【,类型,】、【,背景,】、【,区块,】、【,方框,】、【,边框,】、【,列表,】、【,定位,】、【,扩展,】,，下面来一 一介绍。,29,5.,3.,1,设置类型属性,【,类型,】,属性主要是对网页中的文本的字体、大小、颜色等风格进行设置。,【,字体,】,：属性名为“,font-family”，,从下拉列表中选择字体，也可以选择,【,编辑字体列表,】,选项，自定义字体列表。,【,大小,】,：属性名“,fontsize”，,设置字体的字号，单位常用像素。,【,粗细,】,：属性名“,font-weight”，,用于设置字体的粗细效果。有,【,正常,】（,normal）、【,粗体,】（,bold）、【,特粗,】（,bolder）、【,细体,】（,light）,和具体粗细值等选项，,【,正常,】,等于,400，【,粗细,】,等于,700,。,【,样式,】,：属性名“,font-style”，,用于设置字体的风格。有,【,正常,】（,normal）、【,斜休,】（,italic）、【,偏斜体,】（,oblique）3,个选项。,【,变量,】,：属性名“,font-variant”，,包括正常和小型大写字母。,30,5.,3.,1,设置类型属性,【,行高,】,：属性名“,font-height”，,文本所在行的行高。选择,【,正常,】,选项，将自动计算字体的行高；否则，可以输入一个精确值并选择其计算单位。常用单位是像素。,【,大小写,】,：属性名“,text-transform”，,指定字母大小写规则。有,【,首写字母大写,】（,capitalize）、大写,】（,uppercase）、【,小写,】（,lowercase）、【,无】（,none）4,个选项。,【,修饰,】,：属性名“,text-decoration”，,用于控制链接文本的显示形态，有,【,下划线,】（,underline）、【,上划线,】（,overline,）、【,删除线,】（,line-through）、【,闪烁,】（,blink）、【,无】（,none）5,种修饰方式。,【,颜色,】,：属性名“,color”，,用于设置字体的颜色,31,例如：定义了一个类样式,.,unnamed1，,内容为：,.,unnamed1,font-family:,方正舒体,;,font-size:36px;,font-style:italic;,font-weight:bold;,color:#FF0000;,5.,3.,1,设置类型属性,32,5.,3.,2,设置背景属性,在,CSS,样式定义对话框的,【,分类,】,列表中选择,【,背景,】,选项，如图,5-15,所示。该选项的主要功能是在网页的元素后面添加的背景色或背景图像。各属性的意义如下：,33,5.,3.,2,设置背景属性,【,背景颜色,】,：属性名“,background-color”，,用于设置元素的背景颜色。,【,背景图像,】,：属性名“,background-image”，,给网页元素设置背景图像。,【,重复属性名“,background-repeat”，,用于控制背景图像的平铺方式。包括以下几个选项（属性值）：,【,不重复,】（,no-repeat）：,图像不平铺。,【,重复,】（,repeat）:,图像沿水平及垂直方向重复排列。,【,横向重复,】（,repeat-x）:,图像沿水平方向平铺。,【,纵向重复,】（,repeat-y）:,图像沿垂直方向平铺,34,5.,3.,2,设置背景属性,【,附件,】,：属性名（,background-attachment），,选择,【,固定,】,选项（,fixed），,背景将不随滚动条的拖支而改变；选择,【,滚动,】,选项（,scroll），,背景将随滚动条而滚动。,【,水平位置,】,：属性名“,background-position”，,用来确定背景图像的水平排列方式。包括,【,左对齐,】（,left）、【,右对齐,】（,right）、【,居中对齐,】（,center）、【,值】（,value）,等选项。,【,垂直位置,】,：属性名“,background-position”，,用来确定背景图像的垂直排列方式。包括,【,顶部,】（,top）、【,居中,】（,center）、【,底部,】（,bottom）、【,值】（,value）,等选项。,35,5.,3.,3,设置区块属性,在,CSS,样式定义对话框的,【,分类,】,列表中选择,【,区块,】,选项，如图,5-16,所示。区块是指网页中的文本、图像、层等元素。该选项的主要用来控制区块的间距、对齐方式和文字缩进等。各属性的意义如下：,36,5.,3.,3,设置区块属性,单词间距：属性名“,word-spacing”，,控制单词之间的距离。有,【,正常,】（,normal）,和【值】（,value）,两种。,字母间距：属性名“,letter-spacing”，,控制字符之间的距离。有,【,正常,】（,normal）,和【值】（,value）,两种。,垂直对齐：属性名“,vertical-align”，,用于控制元素相对其母体元素的垂直位置。共有,5,个选项。例如：选择,【,基线,baseline），,则元素的基准线同母体元素的基准线对齐；选择,【,下标,】（,sub），,则元素以下标的形式显示；,【,上标,】（,super），,元素将以上标的形式出现,；【,顶部,】（,top），,元素的顶部与母体元素的顶部对齐。,文本对齐：属性名“,text-align”，,用于指定文本的水平对齐方式。共有,【,左对齐,】（,left）、【,居中对齐,】（,center）、【,右对齐,】（,right）、【,两端对齐,】（,justify）4,个选项。,37,5.,3.,3,设置区块属性,文字缩进：属性名“,text-indent”，,用于指定文本块中首行的缩进距离。,空格：属性名“,white-space”，,指定空格的处理方式。在,HTML,文档中，从键盘输入的空格是无效的。要输入空格，只有插入空格的代码“,&,nbsp,;”，,或者是用预定义格式标签,，,把空格保留。该属性有,3,个选项：,【,正常,】、【,保留,】、【,不换行,】,。,显示：属性名“,display”，,用于设置区块的显示方式。,38,5.,3.,4,设置方框属性,CSS,将网页中所有的块元素都看作是包含在一个方框中，对方框的设置包括方框的宽度、高度，块元素与方框的距离，方框的边界等。在,CSS,样式定义对话框的,【,分类,】,列表中选择,【,方框,】,选项，如图,5-17,所示。,39,53.,4,设置方框属性,【宽】,：属性名“,width”，,设定方框的宽度。,【高】,：属性名“,height”，,设定方框的高度。,【,浮动,】,：属性名“,float”，,用于设置块元素的浮动效果。,【,清除,】,：属性名“,clear”，,用于清除设置的浮动效果。,【,填充,】,：属性名“,margin”，,用于设置块元素与边框的距离。包含,【上】、【右】、【下】、【左】4,项。,40,5.,3.,4,设置方框属性,【上】,：（,margin-top）,控制上边距的宽度,.,【右】,：（,margin-right）,控制右边距的宽度,.,【下】,：（,margin-bottom）,控制下边距的宽度,.,【左】,：（,margin-left）,控制左边距的宽度,.,【,边界,】,：属性名“,padding”，,用于控制块元素与其他元素之间的距离。也有,4,个选项。,【上】,：（,padding-top）,控制上边界的宽度,.,【右】,：（,padding-right）,控制右边界的宽度,.,【下】,：（,padding-bottom）,控制下边界的宽度,.,【左】,：（,padding-left）,控制左边界的宽度,.,41,5.,3.,5,设置边框属性,在,CSS,样式定义对话框的,【,分类,】,列表中选择,【,边框,】,选项，如图,5-23,所示。该选项主要用来定义边框的。,【样式,】,：属性名“,border-style”，,用于设定边框线的样式。包括,【上】、【右】、【下】、【左】4,个选项。每个选项又有以下,5,个子选项：,【无】（,none）：,没有边框线；,【,点划线,】（,dotted）：,边框线为短线；,【,虚线,】（,dashed）：,边框线为点线；,【,实线,】（,solid）：,边框线为实线；,【,双线,】（,double）：,边框线为双线；,【,槽状,】（,groove）：,边框线为槽状；,【,脊状,】（,ridge）：,边框线为脊状。和槽状相反。,【,凹陷,】（,inset）；【,凸出,】（,outset）。,宽度：属性名“,border-width”，,用于设定边框线的宽度，有,【细】、【中】、【粗】、【值】4,个选项。,颜色：属性名“,border-color”，,用于设置边框线的颜色。,例如：我们把文件“,fangkuang,.,htm,”,的边框线设置为虚线，宽度为,1,像素，蓝色。选定类样式,.,aa,，,编辑，重新设置,【,边框,】,属性，如图,5-24,所示。查看效果。,42,5.,3.,6,设置列表属性,在,CSS,样式定义对话框的,【,分类,】,列表框中选择,【,列表,】,选项，如图,5-25,所示。该选项是主要用来定义列表属性。,【,类型,】,：属性名“,list-style-type”，,指定项目符号或编号的外观。,【,项目符号图像,】,：属性名“,list-style-image”，,用于指定自定义符号的图像，既可以直接输入文件名，也可以单击,【,浏览,】,按钮，浏览并选择合适的图像文件。,【,位置,】,：属性名“,list-style-position”，,用于决定列表项换行时缩进还是边缘对齐。要缩进时，选择,【外】,选项；要边缘对齐，则选择,【内】,选项。,43,5.,3.,7,设置定位属性,在,CSS,样式定义对话框的,【,分类,】,列表框中选择,【,定位,】,选项，如图,5-26,所示。该选项是主要用来精确定位层位置。,44,5.,3.,7,设置定位属性,【,类型,】,：属性名“position”，,用于选择层定位的方式，有,【,绝对,】（,absolute）、【,相对,】（,relative）、【,静态,】（,static）3,个选项。,【,显示,】,：属性名“,visibility”，,用于决定层的初始显示状态。如果没有指定本属性，则在默认情况下，大多数的浏览器将继承其上一级的值，其中包括以下,3,个选项。,【,继承,】,：继承层的上一级的可见性属性。,【,可见,】,：显示层的内容而不考虑其上一级值。,【,隐藏,】,：隐藏层的内容而不考虑其上一级值。,【,Z,轴】,：属性名“,Z-index”，,用于决定层的叠放顺序。,【,溢出,】,：用于指定当层的内容超出了层的大小时,Dreamweaver,MX 2004,的处理方法。,45,5.,3.,7,设置定位属性,【,可见,】,：扩大层的尺寸，使层中所有的内容都可见。,【,隐藏,】,：隐藏超出范围的内容。,【,滚动,】,：在层的右边增加滚动条。,【,自动,】,：当层中的内容超过层边界时，自动显示滚动条。,【,定位,】,：当层确定为绝对定位后，该组属性决定元素在网页中的具体位置。包含有,4,个子属性，分别是,【上】、【右】、【下】、【左】,。,46,5.,3.,8,设置扩展属性,在,CSS,样式定义对话框的,【,分类,】,列表框中选择,【,扩展,】,选项，如图,5-27,所示。该选项是主要用来产生一些特殊效果。,【,分页,】,：使用该属性，在打印,【,之前,】或【,之后,】,文本框中的内容时会自动进行分页。,【,视觉效果,】,：这里的两个属性可为网页元素设计出特殊效果。包括两个属性选项。,【,光标,】,：属性名“,cursor”，,用于设置鼠标形状，指定当光标停留在由样式所控制的对象之上时，改变光标的形状。共有,15,种选择。,【,过滤器,】,：属性名“,filter”，,可以为网页中的元素添加各种过滤效果。共有,16,种属性，下面我们详细介绍。,47,5.4,CSS,样式中的过滤器,滤镜是,CSS,的最精彩的一部分，它将把我们带入绚丽多姿的多媒体世界。有了滤镜属性，我们能实现一些图像处理软件才能完成的功能，比如：渐变、模糊等效果，而且代码简洁，网页下载速度更快。,CSS,的滤镜属性的标识符是,filter。,为了对它有个整体的印象，我们先来看一下它的书写格式：,filter：,filtername,（parameters）,filter,是过滤镜属性名，要进行滤镜操作，就必须先定义,filter；,filtername,是滤镜属性名，这里包括,alpha、blur、,chroma,等等多种属性，,parameters,是表示各个滤镜属性的参数，这些参数决定了滤镜将以怎样的效果显示。,48,5.4,CSS,样式中的过滤器,1,Alpha,属性,让对象呈现渐变半透明的效果。,它的表达格式为：,filter：alpha（opacity=,opcity,，,finishopacity,=,finishopacity,，style=style，,startX,=,startX,，,startY,=,startY,，,finishX,=,finishX,，,finishY,=,finishY,）,Opacity,代表透明度等级，可选值从,0到100，0,代表完全透明，,100代表完全不透明。,Style,参数指定了透明区域的形状特征。,其中,0,代表统一形状；,1,代表线形；,2,代表放射状；,3,代表长方形。,Finishopacity,是一个可选项，用来设置结束时的透明度，从,而达到一种渐变效果，它的值也是从,0到100。,StartX,和,StartY,代表渐变透明效果的开始坐标，,finishX,和,finishY,代表渐变透,明效果的结束坐标。这四个参数都是可选项。,49,5.4,CSS,样式中的过滤器,例如：定义了类样式.,alpha，,渐变从0开始到100结束，,形状为3。,alpha,filter:Alpha（Opacity=0，,FinishOpacity,=100，Style=3）;,把类样式.,alpha,应用到图像文件3.,jpg,中，可查看效果。,50,5.4,CSS,样式中的过滤器,2,Blur,属性,让对象产生风吹模糊的效果。,blur,属性的表达式：,filter：blur（add=add，direction，strength=strength）,Add,参数有两个参数值：,true,和,false。,意思是指定图片是否被,改变成模糊效果。,Direction,参数用来设置模糊的方向。模糊,效果是按照顺时针方向进行的。其中,0,度代表垂直向上，每45,度一个单位，默认值是向左的,270,度。角度方向的对应关系见,下表：,角度方向,0,TOP,垂直向上,45,Top right,垂直向右,55,Right,向右,135,Bottom right,向下偏右,180,Bottom,向下,225,Bottom left,向下偏左,270,Left,向左,315,Top Left,向上偏左表,5-1,Direction,参数的取值,Strength,指定模糊图像的半径大小，单位像素，默认值是,5,像素。只能取值自然数。,51,5.4,CSS,样式中的过滤器,例：建立类样式.,blur，Blur,属性的,Direction,为180，,Strength,为20。,.,blur,font-family:,幼圆;,font-size:36px;,52,5.4,CSS,样式中的过滤器,3,Chroma,属性,用于把对象中的某种颜色变为透明，使用了该属性后，原对象的一部分颜色好像没有一样。,它的表达式如下：,Filter,：,Chroma,（,color=color,）,它只有一个参数,color,。,Color,参数用于指定透明颜色。,需要注意的是，,chroma,属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理的（比如,JPG,、,GIF,等格式），所以它们很少有固定的位置可以设置为透明。,53,5.4,CSS,样式中的过滤器,4,DropShadow,属性,让网页元素产生下落式的阴影，常用在文字和中图像上。它的表达式：,Filter,：,DropShadow,（,Color=color,，,Offx,=,Offx,，,Offy,=,offy,，,Positive=positive,该属性一共有四个参数：Color,代表投射阴影的颜色。,Offx,和,offy,分别,X,方向和,Y,方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表,X,轴的右方向和,Y,轴的向下方向。设置为负整数则相反。,Positive,参数有两个值：,True,为任何非透明像素建立可见的投影，,False,为透明的像素部分建立可见的投影。,54,5.4,CSS,样式中的过滤器,例如：建立类样式,.,dropshadow,.,dropshadow,font-family:,方正舒体,;,font-size:36px;,color:#CC00CC;,filter:,DropShadow,（,Color=#,ffccff,，,OffX,=15,，,OffY,=10,，,Positive=1,）,;,把类样式应用到,标签：,Firework MX 2004,55,5.4,CSS,样式中的过滤器,5,FlipH,和,FlipV,属性,可使网页对象产生水平和垂直翻转的效果，这两处属性没有参数设置，直接使用就可以。,Gray,属性：把一张彩色图片变成灰度图。它的表达式很简单：,56,5.4,CSS,样式中的过滤器,6,Glow,属性,可以使网页元素的外轮廓产生一种光晕效果。它的表达式如下：,Filter,：,Glow,（,Color=color,，,Strength=strength,）,Glow,属性的参数只有两个：,Color,是指定发光的颜色，,Strength,指定发光的强度，参数值从,1,到,255,。,57,5.4,CSS,样式中的过滤器,例如：建立类样式,.,glow,.glow,font-family:,方正舒体,;,font-size:36px;,font-weight:bold;,color:#000000;,filter:Glow,（,Color=#3355ff,，,Strength=5,）,;,把类样式应用到,标签。,flash,mx,2004,58,5.4,CSS,样式中的过滤器,7,Invert,属性,使图像产生照片底片的效果，表达式很简单，没有参数。,FilterInvert,59,5.4,CSS,样式中的过滤器,8,Mask,属性,该属性利用一个,HTML,对象在另一个对象上产生图像的遮罩，可以为对象建立一个覆盖于表面的膜，其效果就像戴着有色眼镜看物体一样。它的表达式也很简单：,Filter,：,Mask,（,Color=,颜色）,参数,Color,，,用来指定使用什么颜色作遮罩。,60,5.4,CSS,样式中的过滤器,9,Shadow,属性,使网页对象产生阴影效果，和,Dropshadow,属性相似。,Shadow,属性可以在任意角度进行投射阴影，,Dropshadow,属性实际上是用偏移来定义阴影的。,DropShadow,没有渐近感，,Shadow,有渐近的阴影感，感觉更真实一些。它的表达式是这样的：,Filter,：,Shadow,（,Color=color,，,Direction=direction,）,61,5.4,CSS,样式中的过滤器,9,Shadow,属性,Shadow,有两个参数值：,Color,参数用来指定投影的颜色；,Direction,参数用来指定投影的方向。和,Blur,属性中方向,Direction,参数设置相同。,例如：重新定义层标签样式：,div,font-family:,方正舒体,;,font-size:36px;,font-weight:bold;,color:#FF5500;,filter:Shadow,（,Color=#ffcc00,，,Direction=180,）,;,62,5.4,CSS,样式中的过滤器,10,Wave,属性,使网页中的对象在垂直方向上产生的波纹的变形效果。它的表达式如下：,Filter,：,Wave,（,Add=True,（,False,），,Freq=,频率，,LightStrength,=,增强光效，,Phase=,偏移量，,Strength=,强度）,Add,参数有两个参数值：,True,代表把对象按照波纹样式打乱,；,False,代表不打乱；,Freq,参数指生成波纹的频率，也就是指定在对象上共需要产生多少个完整的波纹。,LightStrength