使用css样式表美化网页

《使用css样式表美化网页》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

第10章使用CSS样式表美化网页CSS可以将网页和格式进行分离，提供对页面布局更强的控制能力以及更快的下载速度。在如今的网页制作中，几乎所有精美的网页都用到了CSS。有了CSS控制，网页便会给人一种尝新悦目的感觉。CSS虽然只是一些代码，得到的效果却不同凡响。Dreamweaver8在CSS功能设计上做了很大的改进。这一章我们就来学习如何在Dreamweaver8中利用CSS美化网页，提高网页制作的品质。10.1CSS快速入门CSS是CascadingStyleSheet的缩写，可以翻译为层叠样式表或级联样式表。CSS是一个辅助HTML设计的新特性，能够保持整个HTML的统一外观。使用CSS可以在设置文本之前，制定整个文本的属性，比如颜色、字体和大小等，即可获得统一的外观。让我们先来了解一下在Dreamweaver8中CSS的基本功能吧。10.1.1CSS新功能如果要在网页中输入代码才能实现CSS的效果，相信很多人都会放弃使用CSS。正是因为Dreamweaver8为用户提供了可视化的操作界面，所以受到越来越多人的喜爱。Dreamweaver8在CSS功能设计方面为使用者带来的方便体现在：【属性】面板、页面属性、【CSS样式】面板和CSS语法提示。下面我们分别讲述：1.【属性】面板　　在Dreamweaver8【属性】面板中的【样式】选项中，我们可以在设计页面时添加的字体、颜色、大小等样式，【样式】选项会将这些格式自动记忆生成“Style1”、“Style2”样式。在下次重复使用可以直接在【样式】选项中套用样式，有了这个功能，我们在做网页设计时可以大大提高工作效率。如图10-1-1所示。图10-1-1【属性】面板中的【样式】选项如果套用的CSS样式不是文字，而是表格或者表单，同样可以在【属性】面板中设置CSS。在【属性】面板中都有一个【类】选项，【类】选项会将我们对表格或表单的格式设置自动记忆生成“Style1”、“Style2”样式。在这里就可以设计表格的CSS样式。2.页面属性在Dreamweaver8的【属性】面板中可以看到一个【页面属性】按钮，单击这个按钮，可以直接打开【页面属性】对话框。在对话框左边的分类中可以看到“外观”、“链接”、“标题”、“标题/编码”和“跟踪图像”选项，选中其中一个选项，在右边出现相应的设置内容。大家可以自己试试看这些选项中各个设置。3.【CSS样式】面板在Dreamweaver8中界面最右边有一列各种选项面板，其中包括【CSS样式】面板，也可以按Ctrl+F11调出该面板，面板如图10-1-2所示。-283- 图10-1-2【CSS样式】面板面板下方的一排按钮非常有用。包括了【附加样式表】、【新建CSS规则】、【编辑样式】和【删除CSS规则】。在网页制作过程中，我们经常会用到这些按钮。另外，单击【属性】面板上【样式】选项后的【CSS】按钮可以在【CSS样式】面板中查看当前选中样式的摘要，如图10-1-3所示是选中“Style1”时的【CSS样式】面板。图10-1-3【CSS样式】面板的【正在】选项4．CSS语法提示我们【代码】视图中编辑CSS的时候，只要输入一个CSS的样式名称和冒号，Dreamweaver8就会自动弹出一个列表，列出该样式可以使用的参数。我们只要在弹出的下拉列表中选择要编辑的CSS样式就可以了，省去自己输入代码的麻烦。如图10-1-4所示。-283- 图10-1-4CSS语法提示10.1.2样式表的引用方式从上面的例子中，我们可以看到CSS的语句是内嵌在HTML文档内的。在以往，你可能需要用文本编辑工具来编写。比如Windows下的记事本和写字板或者专门的HTML文本编辑工具等。但是在Dreamweaver8里，我们根本不需要编写任何代码，就能创建CSS样式。那么你可能会问，独立编辑好的CSS文档怎样加入到HTML文档中呢？大体说来有三种方式，一种是外部文件方式；一种是内部文档头方式；另一种是直接插入式。三种方式各有妙用，主要的差别在于它们规定的风格使用的范围不同。下面我们分别讲述：1.外部文件方式外部文件方式即将CSS写成一个文件的方式，在HTML文档头通过文件引用来进行风格控制。在Dreamweaver8下创建CSS文件比较简单。你可以选择菜单【文件】|【新建】命令，在弹出的【新建文档】对话框中选择【类别】为“CSS样式表”，如图10-1-5所示。-283- 图10-1-5在【新建文档】对话框中选择“CSS样式表”类别如图10-1-6所示是已经编辑好的一个CSS样式表。图10-1-6CSS样式表文件究竟该如何引用外部CSS样式表呢？例如，我们要在index.html网页中引用这个样式表文件（style.css）。以前，我们都是在HTML的标志之间写下列代码：在Dreamweaver8-283- 中引用方式更加简单，根本不需要输入代码。单击【CSS样式】面板下方的【附加样式表】按钮，这时，打开一个对话框，单击对话框上的【浏览】按钮，选择要链接的CSS文件，在【添加为】选项区选择“链接”即可，如图10-1-7所示。图10-1-7链接外部样式表单击【确定】按钮，即可链接外部CSS文件。此时我们链接的外部CSS文件会出现在【CSS样式】面板中，如图10-1-8所示。图10-1-8链接的外部CSS文件出现在【CSS样式】面板中应用CSS文件的一个最大好处就是，你可以在每个HTML文件中引用这个文件，从而可使整个站点的HMTL文件在风格上保持一致，避免重复的CSS属性设置；另外，当你遇上改版或作某些重大调整要对风格进行修改时，可直接修改这个CSS文件，是不是挺方便的呢。特别提醒一下，如果你想建立自己的网站，这方面不可忽视哟，如果在建站之初没有网站风格的统一规划并形成CSS文件，以后内容一多，想调整一下风格会变得非常麻烦。2.内部文档头方式这种方式与外部文件的区别在于它是将风格直接定义在文档头之间，而不是形成文件。这种风格定义产生作用的范围也只局限于文档本身，如图10-1-9所示即为样式定义在文档内部。-283- 图10-1-9内部文档头方式的CSS样式这种方式的主要作用是，可针对具体页面进行具体调整。这两种方式并不相排斥，而是相互结合，就像我们在index.html页面中定义了文档内部CSS样式，也链接了外部CSS文件。3.直接插入式直接插入式很简单，只是在每个HTML标志后书写CSS属性就可以了。这种方式很直接，如我们想给文字添加下划线效果，则可书写如下代码：文字。这种方式主要用于对具体的标志做具体的调整，其作用的范围只限于本标签。　　综上所述，这几种方式各有用途，在统一整个站点风格上，用第一种方式；在整个页内风格统一上，用第二种方式；而在页内某个标签的具体微调上，第三种方式也有用武之地，所以各有千秋。前两种的目的在于统一风格，减少繁琐的标志属性设置，真是功不可没哟!10.2CSS实例体验在了解CSS的引用和新功能之后，我们可以看到，用很简单的操作就可以实现许多需要专业软件才可以达到的效果。利用属性可以设置字体、颜色、背景等页面格式；利用边框可以使页面表格或表单更加精美、好看；利用滤镜可以使页面产生多媒体效果。怎么样，CSS的功能是不是很强大，下面我们来一起看看CSS的具体使用。10.2.1用CSS轻松美化文字我们知道，在网页中字体的好看与否是直接影响着页面的整体效果，因此对文字的控制就显得很重要。我们可以用CSS轻松美化文字。1.我们以下面这段文字为例，如图10-2-1所示。-283- 图10-2-1美化前的文字效果2.它是没有应用任何样式的六个段落。现在我们就来定义字体属性和背景属性。单击【新建CSS规则】按钮，这时，系统弹出【新建CSS样式】对话框。如图10-2-2所示。图10-2-2【新建CSS规则】对话框3.我们为新建的规则命名为“.word”，从【新建CSS规则】对话框上可看到，用Dreamweaver8在页面内定义CSS有三种方式——类、标签和高级。提示：在为新建的规则命名时，最好名称要有一些含义，要不然你创建的样式比较多时，可能自己也分不清楚了。一般情况下，都是采用英文单词或者拼音缩写等等。-283- l【类】是一种新的样式表示符，可以任意命名，以“.”开头，如“.title”，“.h”等。它是将CSS样式应用于选定的区域，若要在整个页面的相关区域应用CSS样式，则需选择【标签】和【高级】方式。【类】比较类似于html样式的设置，用【类】定义的CSS样式的使用也比较类似于html样式。l【标签】是将页面源文件中的html标记重定义。用标签定义的CSS样式设置完毕后，该CSS样式马上生效。l【高级】是将此时的CSS样式用于特定的html标记组合或ID名。你可从【选择器】后的下拉列表里选择，选框里有四个选项——a:active、a:hover、a:link和a:visited，分别代表超级链接的激活状态、鼠标移动到超级链接上的状态、超级链接的链接状态和超级链接访问过的状态。你也可直接在文本框里填入一些html标记组合。例如填入“td”，则这个CSS样式将用于网页上所有td标记内标记的作用范围。你还可填入以符号“#”开头的ID名，例如可填入“#abc”，则这个CSS样式将用于网页上所有带有ID=“abc”的html标记的作用范围。l在该对话框的下方选区里，可以选择CSS样式表的引用方式。我们选择【仅对该文档】。那么这两个选项有什么区别呢？选择【新建样式表文件】表示对CSS样式表的引用是外部文件方式，而选择【仅对该文档】则表示对CSS样式表的引用是内部文档头方式。4.设置完毕后，点击【确定】按钮，弹出【CSS样式定义】对话框。在该对话框上有8种分类，其中，【类型】分类是对文字属性的设置。在该分类上我们设置文字的属性，如图10-2-3所示。图10-2-3设置文字属性5.【背景】分类是对背景属性的设置。我们可以为段落设置背景图像。如图10-2-4所示。-283- 图10-2-4设置背景属性6.上述操作完成之后，选中段落后在【样式】中选择“word”样式，在浏览器中预览的效果如图10-2-5所示，可以看到段落中的数字的字体都变成了“Verdana”，背景也添加了图像。图10-2-5完成之后的效果-283- 现在已经知道了如何用CSS定义字体属性和背景属性，那么定义好的文本我们怎么对它进行排版呢？这时，就需要同时用到CSS样式定义对话框上的【类型】和【区块】分类，【区块】设置是对某区域内文本的各种空隙大小的设置。在这里可以定义文本的单词间距、字母间距、垂直对齐方式等属性。7.双击【CSS样式】面板中的“.word”样式，我们在【区块】分类中做如图10-2-6所示的设置。并在【类型】分类中设置【行高】为“20pt”。图10-2-6【区块】参数设置8.上述操作完成之后，保存文件并按F12键在浏览器中预览，效果如图10-2-7所示。-283- 图10-2-7完成之后的效果由上面的例子我们可以看出利用CSS的文本属性可以方便的对页面中的段落进行排版。下一小节我们将向大家介绍CSS的图文混排功能。10.2.2CSS的图文混排效果在还没有接触到CSS时我们要想实现图文混排，要么是利用对齐方式，要么是利用表格来实现。其实，完全可以利用CSS来轻松实现图文混排效果。你一定要问，究竟是怎么实现的呢？实际上是应用了方框属性。1.让我们先看看没有添加CSS样式的网页，效果如图10-2-8所示，这里的图像并不是背景，而只之前插入在段落之前的。-283- 图10-2-8排版前的效果2.为该网页新建一个样式“word”，按照前面的方法对文字【类别】分类进行设置。然后，在【CSS样式定义】对话框中选择【方框】分类，在【方框】分类中做如下设置，如图10-2-9所示。图10-2-9在【方框】分类中进行设置-283- 3.上面的设置含义是：定义图像浮动在文字的右边。单击【应用】按钮，可以在文档中看到效果。单击【确定】按钮，在浏览器中预览效果，如图10-2-10所示。图10-2-10浏览器中预览效果怎么样，不用表格也能实现图文混排的效果，并且减少了大量的代码。你还可以试试图像浮动的其他效果。好了，有关文字的属性就讲这么多，我们可以看出，充分利用CSS的【类型】、【区块】、【方框】分类，将会使你的页面布局更加合理，样式更加漂亮。下一小节我们将向你介绍用CSS制作精美表格。10.2.3用CSS制作精美表格利用CSS样式表来美化表格，可以实现很多之前只能通过写代码或者设置表格属性才能实现的效果。这一小节中我们将介绍利用CSS制作细线表格、虚线表格和阴影表格的方法。1.细线表格1.新建一个网页，插入一个1行3列的表格，表格结构如图10-2-11所示。-283- 图10-2-11创建表格结构2.为该网页新建一个样式“table”，然后，在【CSS规则定义】对话框中选择【边框】分类。在【边框】分类中做如图10-2-12所示的设置，使表格的上边框和左边框为“1”像素，边框颜色为“#0066FF”。图10-2-12在【边框】分类中进行设置3.单击【确定】按钮之后，我们新建的样式“table”就出现在【CSS样式】面板中。选中该表格，激活其【属性】面板，在面板上的【类】下拉列表中选择样式“table”。完成之后，效果如图10-2-13所示。-283- 图10-2-13应用样式“table”后的效果4.为什么表格的边框不全是“1”像素的细线呢？这是因为我们在【边框】分类中所做的设置只是把表格的上边框和左边框设定为“1”像素，而下边框和右边框均设定为“0”像素。假设我们现在把下边框和右边框也设定为“1”像素，即表格的4个边框均为1像素，应用该样式之后，表格效果如图10-2-14所示。图10-2-14表格效果5.由此可见-283- ，如果你是制作1行1列的细边框表格，则把表格的4个边框均设定为1像素即可。那么，对于本例中的1行3列的表格，要制作细边框效果，又该怎么办呢？其实道理很简单，设置一下表格中的单元格边框属性不就可以了吗？你仔细看一下上面的表格就能发现，只要我们把表格中每个单元格的右边框和下边框设置成和表格边框一样的细线不就能实现了吗？6.先把“table”样式的【边框】分类改回之前的设置，再新建一个样式“td”，在【CSS规则定义】对话框中选择【边框】分类。在【边框】分类中做如下设置，如图10-2-15所示。图10-2-15在【边框】分类中进行设置7.单击【确定】按钮之后，我们新建的样式“td”就出现在【CSS样式】面板中。选中一个单元格，激活其【属性】面板，在面板上的【样式】下拉列表中选择样式“td”。完成之后，效果如图10-2-16所示。图10-2-16单元格效果-283- 8.由上图中的效果，也验证了样式“td”只对一个单元格的右边框和下边框进行细边框设置。将该样式应用于表格中所有的单元格之后，如图10-2-17所示。图10-2-17细边框表格效果9.将内容添加进表格中，在浏览器中预览效果如图10-2-18所示。图10-2-18将内容添加进表格后在浏览器中预览效果怎么样，利用CSS样式表来美化表格是不是挺简单的啊？想想看，如果要制作虚线框表格，该怎么办呢？其实只要你明白了前面的道理，要制作虚线框表格也很容易。2.虚线表格1.我们仍然需要建立两个样式，样式“table1”用于表格，样式“td1”用于单元格。它们在【边框】分类中的设置如图10-2-19、图10-2-20所示。-283- 图10-2-19样式“table1”的【边框】设置图10-2-20样式“td1”的【边框】设置2.将样式应用于表格和单元格之后，在浏览器中预览效果如图10-2-21所示。-283- 图10-2-21虚线表格效果3.在【边框】分类面板上，边框样式有很多选择，除了上面我们选用的“实线”、“虚线”以外，还有如图10-2-22所示的样式。图10-2-22可选的边框样式4.你可以试一试这些样式，例如，新建“.table2”和“.td”样式，分别对它们的【边框】分类做如图10-2-23和10-2-24所示的设置，得到点划线的表格如图10-2-25所示。-283- 图10-2-23点划线表格【边框】设置图10-2-24点划线单元格【边框】设置-283- 图10-2-25点划线表格效果上述这些效果真的很奇妙吧，对于其它的效果我们不再一一列举，有兴趣的读者可以自己作尝试。最后，我们以制作表格阴影效果来作为结束吧。3.阴影表格1.所谓表格的阴影效果，实际上就是让表格有立体感。我们可以利用它的“凸出”样式来实现。新建一个样式“table3”，然后，在【CSS规则定义】对话框中选择【边框】分类。在【边框】分类中做如图10-2-26所示设置。图10-2-26表格【边框】设置2.同样的，还要再建立一个样式“td3”，在【边框】分类中做如图10-2-27所示的设置。-283- 图10-2-27单元格【边框】设置3.所有设置完成之后，将样式“table3”应用于表格，样式“td3”应用于单元格，在浏览器即可预览到表格的阴影效果，如图10-2-28所示。图10-2-28阴影表格的效果好了，有关表格的美化就讲到这里了，更好的效果还有待你去发掘哦！下一小节将向大家介绍用CSS打造精美表单。10.2.4用CSS打造精美表单表单在Internet上是一个非常重要的元素，上一章中我们只注重了它的实用性，而忽视了它的美观性。因为以往要对表单进行美化是非常困难的，只有专业的编码人员才能定制个性化的表单。现在有了Dreamweaver8这个强大的web开发工具，可以很轻易的实现这些效果。下面就举例来看看吧。1.在浏览器中打开“用户注册.html”文件，如图7-2-29所示，这是美化前的表单。-283- 图10-2-29美化前的表单2.在Dreamweaver8中打开该网页，为该网页新建一个样式“tf”（表示textfield——文本域），接着，在【CSS规则定义】对话框中选择【类型】分类。在【类型】分类中进行如图10-2-30所示的设置。图10-2-30设置【类型】分类3.切换至【背景】分类，作如图10-2-31所示的设置。-283- 图10-2-31【背景】分类中设置背景颜色4.然后，切换至【边框】分类，在该分类上设置边框样式，如图10-2-32所示。图10-2-32设置边框样式5.单击【确定】按钮之后，我们新建的样式“tf”创建成功。选中要应用样式的表单元素，例如文本域，激活其【属性】面板，在面板上的【类】下拉列表中选择样式“tf”。在【类】下拉列表中你可以预览样式的效果。如图10-2-32所示。-283- 图10-2-33对表单元素应用样式6.将所有表单元素应用该样式之后，效果如图10-2-33所示。图10-2-34效果预览7.细心的你不知道发现没有？这里我们仍然用到了【边框】分类，那是不是可以创建其他的边框效果呢？到底行不行，试试不就知道了。我们再新建一个样式“tf1”，在【背景】分类中的设置和前面一样，现在切换至【边框】分类，在该分类上重新设置边框样式，如图-283- 10-2-35所示。图10-2-35设置边框样式8.单击【确定】按钮，我们新建的样式“tf1”创建成功。将所有表单元素应用该样式之后，效果如图10-2-36所示。图10-2-36虚线效果9.果然，表单元素可以应用和表格一样的效果。那么，还等什么，将我们前面学习的美化表格的样式都拿出来秀一秀吧。试试自己创建如下这些效果。作如图10-2-37所示的【边框】分类设置，把【背景】分类中的背景去掉，得到如图10-2-38所示的效果。-283- 图10-2-37下划线效果的【边框】设置图10-2-38下划线效果10.如果把【边框】分类设置成如图10-2-39所示，可以得到如图10-2-40所示的效果。-283- 图10-2-39虚线下划线效果的【边框】设置图10-2-40虚线下划线效果11.如果把【边框】分类设置成如图10-2-41所示，可以得到如图10-2-42所示的效果。-283- 图10-2-41点划线下划线效果的【边框】设置图10-2-42点划线效果怎么样，用CSS来美化表单是不是很简单呢？你还可以设置表单中文本的属性，可以达到更好的效果哦，这个我们留给你去发掘吧！下一小节我们将向你介绍用CSS控制鼠标样式。10.2.5用CSS控制鼠标样式经常在网上冲浪的朋友是否曾注意到有些网站的鼠标不是规则的斜向上箭头的形状，而是“十”字形，或者是向左的箭头，或者是个问号等等。当你想在网页的不同位置让鼠标显示不同形状，以体现不同的功能区；当你想让你的网站体现与众不同的风格时，考虑一下在鼠标样式上下功夫吧。其实鼠标样式的用途还是极为广泛的，那么怎样才能实现鼠标的不同样式呢？就让我们来试一试吧。-283- 1.打开网页“控制面板.html”，我们要在如图10-2-43所示这个没有美化前的页面上应用鼠标样式。图10-2-43没有美化鼠标前的页面2.首先单击【新建CSS规则】按钮来新建一个样式（如果你的网页中已经存在样式表，可以选择【编辑样式】），这时，系统弹出【新建CSS规则】对话框，设置如图10-2-44所示。图10-2-44【新建CSS规则】对话框3.单击【确定】按钮之后，在弹出的【CSS规则定义】对话框中选择【扩展】分类。在【扩展】面板上的【光标】下拉列表中选择鼠标样式。如图10-2-45所示。-283- 图10-2-45【光标】下拉列表中选择鼠标样式下面讲一下常用的样式的大致含义（由于作者的鼠标指针并不是Windows默认的系统方案，所以这里列出作者的鼠标指针和Windows默认的系统方案的对照表）：【光标】视觉效果中文描述作者所用方案系统方案text文本的样式wait等待的样式default默认的样式help帮助的样式n-resize向上的箭头4.当然你可以选择自己喜欢的鼠标样式，单击【确定】按钮之后，我们新建的样式“mouse”就出现在【CSS样式】面板中，如图10-2-46所示。-283- 图10-2-46在【CSS样式】面板中出现“cursor”样式5.由前面的讲解我们知道，这个样式同时也会出现在【属性】面板里。因此，用鼠标选中页面上的图像，在其【属性】面板上的【类】下拉列表中选择样式“mouse”。如图10-2-47所示。图10-2-47在【类】下拉列表中选择样式“cursor”6.上述操作完成之后，在浏览器中预览效果，如图10-2-48所示。-283- 图10-2-48在浏览器中预览鼠标效果7.按照同样的方法创建其他的鼠标样式，效果如图10-2-49、图10-2-50、图10-2-51和图10-2-52所示。-283- 图10-2-49在浏览器中预览鼠标效果图10-2-50在浏览器中预览鼠标效果-283- 图10-2-51在浏览器中预览鼠标效果图10-2-52在浏览器中预览鼠标效果-283- 看到这里，你一定觉得很兴奋吧，原来这么简单就能制作出各式各样的鼠标样式。赶快在你自己的网页里面试一试吧，它将会使你的页面更加漂亮。下一节我们将向你介绍精彩的CSS滤镜特效。10.2.6CSS滤镜全攻略随着网页设计技术的发展，人们已经不满足于原有的一些HTML标记，而是希望能够为页面添加一些多媒体属性，例如投影、模糊、渐变等图形特效。CSS技术的飞快发展使这些需求成为了现实。从IE4.0版开始，就提供了一些内置的多媒体滤镜特效，正是由于这些基于CSS的样式属性的控制，于是我们在编写网页的时候，即使我们不用利用图像处理工具对图像进行加工，也可以使我们的文字，图片，按钮或是DIV标记鲜艳无比，充满生气，从而为自己的网页增加了比较美妙的视觉效果。这一节我们就要利用CSS滤镜技术对这个页面的图像和文字进行美化。首先，来看看怎样对图像进行美化吧。1.打开网页“滤镜美化图像.html”，如图10-2-54所示。图10-2-53没有美化的图像2.切换Dreamweaver8至【代码】视图下，你会发现在该图像的代码里有这样一句话：。我们在height="196"后面加上代码：style="filter:blur(strength=10)"后，可以得到如图10-2-54所示的效果。-283- 图10-2-54模糊效果提示：Filter样式是CSS样式表中的一员，它像其它样式的定义和应用方式一样，可以直接定义在HTML标识的和之间。其语法结构简简单单：filter:filtername(parameters)，既filter：滤镜名称（参数及其值）。例如：filter:blur(strength=10)。3.上面的例子是通过Style标签将滤镜定义在HTML标签里面的，其实我们完全可以不用编写代码，直接利用Dreamweaver8的可视化操作就能实现上述效果。在“美化图像.html”中新建一个样式，在【新建CSS规则】对话框中的【名称】处输入：.img，【选择器类型】为“类”（可应用于任何标签）。单击【确定】按钮，在弹出的【CSS规则定义】对话框中选择【扩展】分类。在【扩展】面板上的【过滤器】下拉列表中选择滤镜名称，并输入参数值。如图10-2-55所示。-283- 图10-2-55在【过滤器】下拉列表中选择滤镜名称并输入参数值提示：Blur滤镜有三个参数，其中“Add”参数是一个布尔判断“TRUE（默认）”或者“FALSE”。它指定图片是否被改变成印象派的模糊效果。模糊效果是按顺时针的方向进行的。“Direction”参数用来设置模糊的方向。其中“0”度代表垂直向上，然后每45度为一个单位。它的默认值是向左的“270”度。“Strength”值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。4.该样式创建成功之后，在网页文档窗口中选中图像，在其【属性】面板上的【类】下拉列表中选择样式“img”。完成之后，即可达到同样的效果。怎么样，是不是轻轻松松就实现了各种模糊效果呢？自己试一试吧！下面我们再来介绍一下Alpha滤镜，Alpha滤镜的语法很简单，格式如下：{Filter：Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startx,StartY=starty,FinishX=finishx,FinishY=finishy)}提示：Alpha滤镜是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。它的参数含义分别如下：“Opacity”代表透明度水准。默认的范围是从“0”到“100”，他们其实是百分比的形式。也就是说，“0”代表完全透明，“100”代表完全不透明。“FinishOpacity”是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是“0”到“100”。“Style”参数指定了透明区域的形状特征。其中“0”代表统一形状、“1”代表线形、“2”代表放射状、“3”代表长方形。“StartX”和“StartY”代表渐变透明效果的开始X和Y坐标。“FinishX”和“FinishY”代表渐变透明效果结束X和Y的坐标。5.知道了Alpha滤镜的基本知识之后，在网页中新建一个样式，在【扩展】面板上的【过滤器】下拉列表中选择Alpha滤镜，并输入参数值，例如，Alpha(Opacity=70,-283- FinishOpacity=0,Style=2)。如图10-2-56所示。图10-2-56在【过滤器】下拉列表中选择Alpha滤镜并输入参数值6.样式创建成功之后，在网页文档窗口中选中图像，在其【属性】面板上的【类】下拉列表中选择样式“img1”。完成之后，就可以得到如图10-2-57所示的效果。图10-2-57透明效果有关图像的美化我们就讲到这里，要知道，CSS滤镜对文字的处理与图像相比也丝毫不逊色哦。这里我们要介绍的是CSS的两个滤镜：Glow和Shadow滤镜。首先我们还是先简单介绍一下这两个神奇的法宝吧！Glow滤镜-283- 可以让HTML元件对象的轮廓上产生一种比较柔和的边框，可以说是个晕，并且还有点像火一样有淡化的效果。它的语法也很简单：{filter:Glow(Color=color，Strength)}。“Color”指定晕开阴影的颜色，“#RRGGBB”格式的颜色值。“Strength”指定晕开阴影的范围。设定值从“1”到“255”，数字越大晕得就越强，数字越小则反之。下面我们来看看怎样达到想要的效果吧。1.首先，在网页中新建一个样式“glow”，在【扩展】面板上的【过滤器】下拉列表中选择滤镜Glow，并输入参数值。如图10-2-58所示。图10-2-58在【过滤器】下拉列表中选择滤镜Glow并输入参数值2.因为我们选择的发光色为白色（#ffffff），所以，必须确保文本的颜色为深色调，且文本所在单元格的背景色也最好为深色调，这样才能更好的看到效果。在【扩展】分类中设置好后，切换至【类型】分类，设置文本属性，如图10-2-59所示。-283- 图10-2-59在【类型】分类中设置文本属性3.最后，还要在【定位】分类中进行设置。因为Glow滤镜是用于网页上的一个区域，即

或之内的。我们需要定义这个区域的相对高度、宽度，以确保能正确显示效果。如图10-2-60所示。图10-2-60在【定位】分类中进行设置4.样式创建成功之后，在【文档】窗口中选中文本，在其【属性】面板上的【样式】下拉列表中选择样式“glow”。完成之后，即可达到如图10-2-61所示的效果。-283- 图10-2-61glow滤镜效果提示：如果你的文本不是在

标签之内，应用“glow”样式之后，系统会自动将文本放入

标签之内。建议你事先创建文本时就放置在

标签之内。相信你已经会制作发光效果了吧！那么，投影效果又如何来实现呢？这就要用到Shadow滤镜。Shadow滤镜是给被作用的HTML元件对象产生渐变的阴影效果。好了，让我们来看看它的语法：filter:Shadow(Color=Color，Direction=Direction)。“Color”表示阴影的颜色，“#RRGGBB”格式的颜色值。“Direction”用于设置模糊的方向。每45度一个单位，“0”表示向上，“45”表示向右上，“90”表示右，“135”表示向右下，“180”表示向下，“225”表示向左下，“270”表示向左，“315”表示向左上。下面我们来看看实现投影效果的操作吧。1.首先，在网页中新建一个样式“shadow”，在【扩展】面板上的【过滤器】下拉列表中选择滤镜Shadow，并输入参数值。如图10-2-62所示。-283- 图10-2-62在【扩展】面板上的【过滤器】下拉列表中选择滤镜Shadow并输入参数值2.然后，在【定位】分类中进行设置。因为Shadow滤镜也是用于网页上的一个区域。如图10-2-63所示。图10-2-63在【定位】分类中进行设置3.样式创建成功之后，选中文本，应用样式。我们设置投影的颜色是灰色，为了突出投影，文本所在的单元格最好设置为浅色，所以这里把单元格的背景设置成了白色，在浏览器中的效果如图10-2-64所示。-283- 图10-2-64shadow滤镜效果怎么样，CSS的功能是不是很强大，不知道大家看了以上的各式各样的效果有什么样的感受？如果我们把这些效果合起来用一用，一定会有更加漂亮的效果的，只要你有创意，相信你的主页一定会相当的漂亮，让我们用简单的手段来美化自己的主页吧！-283-

当前文档最多预览五页，下载文档查看全文

侵权申诉 举报

此文档下载收益归作者所有

下载文档

当前文档最多预览五页，下载文档查看全文

点击下载本文档

• 版权提示
• 下载文档

举报

温馨提示：
1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。
2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。

最近更新

更多

• 2017年司法考试改革内容
• 司法考试改革方案
• 司法考试卷四论述题模板式答题技巧探秘
• 2017司法部国家司法考试公告
• 幼儿园美术教案
• 2022年司法考试复习计划5篇
• 【江苏卷】2018年高等学校招生全国统一考试生物试卷（附答案）
• 2011年报关员资格全国统一考试大纲
• 2017吉林司法考试成绩及法律职业资格申授
• 北京专版20考历史复习方案第01篇第三部分世界史课时训练19封建时代的欧洲封建时代的亚洲国家试题

大家都在看

近期热门

• 2018年普通高等学校招生全国统一考试高中语文模拟测试试题一201808150211
• 2015年浙江省司法考试考试题
• 司法考试案例《以案释法》：所有权能否足以排除强制执行权
• 司法考试易错考点278例
• 上海2018年司法考试刑法事考试题
• 司法考试笔记民事诉讼法
• 2021年2021年2015年四川省司法考试《卷二》试题
• 招生全国统一考试语文(湖南卷)精析版 试题
• 2021年普通高等学校招生全国统一考试（全国甲卷）答案
• 北京专版20考历史复习方案第01篇第二部分中国近代史课时训练13解放战争试题
• 招生全国统一考试语文重庆卷 试题
• 【司法考试】交通事故赔偿项目计算详解
• 上律指南针司法考试培训考前三页纸
• 2021年2021年2021年四川省司法考试《卷二》试题
• 2017临沧市司法局司法考试公告
• 语文2020年普通高等学校招生全国统一考试全国卷Ⅰ
• 2017年司法考试三卷《民事诉讼基础》试题二
• 国家司法考试行政诉讼法复习指导六
• 2008年国家司法考试试 卷 四
• 普通高等学校招生全国统一考试历史卷

相关文章

更多

• 用css样式表美化网页
• 网页设计-任务十一使用css美化网页
• dreamweaver使用css样式表设置网页
• 用css样式表美化网
• 网页样式表CSS
• 使用CSS样式表美化布局网
• 使用CSS美化网页.ppt
• 第10章使用CSS样式表美化布局网页.ppt
• 用css样式表美化网页.ppt
• 《网页设计》――使用CSS样式表修饰页面.ppt

相关标签

样式表 网页 美化 使用