网页制作第二部分 6-层叠样式.pptVIP

6.1 层叠样式表概述6.2 层叠样式表的创建与编辑 6.2.1 创建CSS样式和CSS样式表 6.2.2 外部样式表链接、导入和编辑6.3 CSS样式表的应用 6.3.1 简单举例 6.3.2 滤镜的概述 6.3.3 透明度滤镜的应用 6.3.4 模糊滤镜的应用 第6章 层叠样式 6.1 层叠样式表概述 样式是预先定义好的、格式化文档的工具。在前面已经介绍过HTML，用HTML可一次完成多种格式化操作任务。但是，HTML样式的不足之处是，在控制网页的外观上受到较多的限制。 本节中介绍的层叠样式表（Cascading Style Sheets, 以下简称CSS样式表）是由W3C（Word Wide Web Consortium）组织批准的一种网页元素定义规则，是一种可以对网页文档内容进行精确格式化控制的工具。 利用CSS样式表可自动格式化网页文档，可将CSS样式表直接存储在网页文档中，也可以将CSS样式表定义在网页文档之外，然后将它链接到多个文档中。当CSS样式表被修改后，使用CSS样式表的网页文档格式也都将自动更新。 CSS样式表与HTML样式相比，它的优势在于能够同时控制多个文档的格式。另外，CSS样式表能够控制大多数常用的文本格式属性，如字体、尺寸、对齐方式等，还可以控制位置、特殊效果、鼠标翻转等很多HTML样式不能控制的属性。 6.2 层叠样式表的创建与编辑 在Dreamweaver 8中，单击网页编辑窗口中状态栏右下角的按钮，或选择【窗口】|【CSS样式】命令，还可以单击【设计】浮动面板组的【CSS样式】选项卡，便可打开【CSS样式】面板。 切换到所有文档模式/当前选择模式 类别视图、列表视图、设置属性视图 附加样式表、新建CSS规则、编辑样式、删除样式 类别视图 列表视图 设置属性视图 样式表文件名 CSS规则列表 属性和属性值列表 工具按钮栏 6.2.1 创建CSS 新建一个CSS样式，该样式的存放方式有3种： 1. 如果仅作用于当前网页文档的CSS样式，则与网页文件一起保存。 2. 存放在某个已建好的外部CSS样式表文件中。应先附加该样式表文件，然后将新建的CSS样式存放其中。 3. 存放在一个新建的CSS样式表文件中。应先新建该样式表文件，然后将新建的CSS样式存放其中。 在【CSS样式】面板中，设计者可以创建CSS样式来格式化HTML文档，在一个CSS样式表文件中可以包含一个或多个CSS样式。 设置选择器类型 设置CSS规则定义在文档内还是定义在外部CSS文件中 设置CSS规则名称 1. 类选择符 2. 用CSS重新定义HTML标签 3. 标识选择符或者伪类 CSS选择符有类选择符和标识选择符两种。 类选择符以英文句点（.）开头，而标识选择符以英文井号（#）开头。 1. 类选择符_创建类选择符步骤如下： （1）【窗口】|【CSS样式】命令，打开【CSS样式】面板。 （2） 单击【CSS样式】面板右上角的快捷菜单按钮，在弹出的快捷菜单中,选择【新建CSS样式】命令，或单击浮动面板右下方的【新建样式】按钮，打开【新建CSS样式】对话框。 （3） 在【选择器类型】中： ◆ 选中【类（可应用于任何标签）】单选按钮后，可在【名称】下拉列表框中输入样式的名称，该名称必须以“.”开始，确认后便可以创建一个应用于文本范围和选择区域的Class属性的样式； （4） 在【定义在】选项组的下拉列表框中，选择当前要创建的样式定义在哪个样式表中。可以是定义在新的样式表文件中，也可以是将CSS样式定义在某个已经创建好的样式表文件中。 若要创建仅仅作用于当前文档的新样式，可选中【仅对该文档】单选按钮。 1．在“属性”面板应用样式 2．利用【标签选择器】选择样式 套用样式表的方法主要有: 3．利用CSS面板套用样式 4．使用右键快捷菜单 创建CSS样式时，在“新建CSS规则”对话框中，将“选择器类型”设置为“标签（重新定义特定标签的外观）”，可以实现用CSS重新定义HTML标签的外观的功能。 2. 用CSS重新定义HTML标签 ——以p标签为例，用CSS重新定义HTML标签的外观。 1．修改HTML标签p/p 2．设置p标签的属性 √ CSS选择符有类选择符和标识选择符两种。 类选择符以英文句点（.）开头，类选择符用在不止一个的元素上， 标识选择符以英文井号（#）开头，标识选择符又可以称为ID选