网页制作-层叠样式

《网页制作-层叠样式》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、6.1层叠样式表概述6.2层叠样式表的创建与编辑6.2.1创建CSS样式和CSS样式表6.2.2外部样式表链接、导入和编辑6.3CSS样式表的应用6.3.1简单举例6.3.2滤镜的概述6.3.3透明度滤镜的应用6.3.4模糊滤镜的应用第6章层叠样式6.1层叠样式表概述样式是预先定义好的、格式化文档的工具。在前面已经介绍过HTML，用HTML可一次完成多种格式化操作任务。但是，HTML样式的不足之处是，在控制网页的外观上受到较多的限制。本节中介绍的层叠样式表（CascadingStyleSheets,以下简称CSS样式表）是由W3C（WordWideWebConsorti

2、um）组织批准的一种网页元素定义规则，是一种可以对网页文档内容进行精确格式化控制的工具。利用CSS样式表可自动格式化网页文档，可将CSS样式表直接存储在网页文档中，也可以将CSS样式表定义在网页文档之外，然后将它链接到多个文档中。当CSS样式表被修改后，使用CSS样式表的网页文档格式也都将自动更新。CSS样式表与HTML样式相比，它的优势在于能够同时控制多个文档的格式。另外，CSS样式表能够控制大多数常用的文本格式属性，如字体、尺寸、对齐方式等，还可以控制位置、特殊效果、鼠标翻转等很多HTML样式不能控制的属性。6.2层叠样式表的创建与编辑在Dreamweaver8中，

3、单击网页编辑窗口中状态栏右下角的按钮，或选择【窗口】

4、【CSS样式】命令，还可以单击【设计】浮动面板组的【CSS样式】选项卡，便可打开【CSS样式】面板。切换到所有文档模式/当前选择模式类别视图、列表视图、设置属性视图附加样式表、新建CSS规则、编辑样式、删除样式类别视图列表视图设置属性视图样式表文件名CSS规则列表属性和属性值列表工具按钮栏6.2.1创建CSS新建一个CSS样式，该样式的存放方式有3种：1.如果仅作用于当前网页文档的CSS样式，则与网页文件一起保存。2.存放在某个已建好的外部CSS样式表文件中。应先附加该样式表文件，然后将新建的CSS样式存放其中。

5、3.存放在一个新建的CSS样式表文件中。应先新建该样式表文件，然后将新建的CSS样式存放其中。在【CSS样式】面板中，设计者可以创建CSS样式来格式化HTML文档，在一个CSS样式表文件中可以包含一个或多个CSS样式。设置选择器类型设置CSS规则定义在文档内还是定义在外部CSS文件中设置CSS规则名称1.类选择符2.用CSS重新定义HTML标签3.标识选择符或者伪类CSS选择符有类选择符和标识选择符两种。类选择符以英文句点（.）开头，而标识选择符以英文井号（#）开头。1.类选择符_创建类选择符步骤如下：（1）【窗口】

6、【CSS样式】命令，打开【CSS样式】面板。（2）

7、单击【CSS样式】面板右上角的快捷菜单按钮，在弹出的快捷菜单中,选择【新建CSS样式】命令，或单击浮动面板右下方的【新建样式】按钮，打开【新建CSS样式】对话框。（3）在【选择器类型】中：◆选中【类（可应用于任何标签）】单选按钮后，可在【名称】下拉列表框中输入样式的名称，该名称必须以“.”开始，确认后便可以创建一个应用于文本范围和选择区域的Class属性的样式；（4）在【定义在】选项组的下拉列表框中，选择当前要创建的样式定义在哪个样式表中。可以是定义在新的样式表文件中，也可以是将CSS样式定义在某个已经创建好的样式表文件中。若要创建仅仅作用于当前文档的新样式，可选中【

8、仅对该文档】单选按钮。1．在“属性”面板应用样式2．利用【标签选择器】选择样式套用样式表的方法主要有:3．利用CSS面板套用样式4．使用右键快捷菜单创建CSS样式时，在“新建CSS规则”对话框中，将“选择器类型”设置为“标签（重新定义特定标签的外观）”，可以实现用CSS重新定义HTML标签的外观的功能。2.用CSS重新定义HTML标签——以p标签为例，用CSS重新定义HTML标签的外观。1．修改HTML标签

9、，标识选择符又可以称为ID选择符，这种选择符样式只能用在一个元素上。ID属性是HTML标签的一个重要属性，一个网页中的标签的ID属性值不能重复，因此在利用ID属性应用标识选择符CSS样式时，只能应用于一个标签。如果应用于多个标签，就会造成标签的ID属性冲突。简单的理解——那些只会在页面中出现一次的元素应该用id来表示。比如页头（header），页尾（footer），导航菜单（main-menu）等。3.标识选择符或者伪类标识选择符，即ID—————标识选择符或者伪类_伪类例：——网页中的文本上建立超级链接后，文字就会变成蓝色，同时还出现下