第11章 层叠样式表.ppt

第11章 使用CSS样式表 课堂讲解 CSS样式表概述 层叠样式应用技巧 CSS滤镜效果应用 CSS样式表概述 CSS（Cascading Style Sheet，级联样式表）样式是网页元素外观属性的集合，是一系列的格式规则，它允许网页设计者定义文本、表格、图像、表单等网页元素的样式。 实例1：利用properties面板将一段文字更改为自动形成的样式 制作应用于段落中的两种样式 分别选中不同的文字设置一下格式： Style1：10points，#0066FF，粗体 Style2：9points，#666666 应用样式表 层叠样式应用技巧 创建CSS样式 样式的定义 管理CSS样式 应用CSS样式表 创建CSS样式 CSS样式的新建、应用及编辑等操作都是在“CSS样式”面板中完成的。 认识“CSS”样式面板 创建CSS样式 认识“CSS”样式面板 “CSS样式”面板在“设计”面板组中，如果面板组中没有“CSS样式”面板，选择[窗口] 中[CSS样式]菜单命令，或按【Shift+F11】键即可打开“CSS样式”面板，如图11-1所示。 面板中各按钮的功能如下。 ：单击该按钮可打开“附加样式表”对话框。选择要链接到或导入到当前文档中的外部样式表。 ：单击该按钮可新建CSS样式。 ：单击该按钮可打开“编辑样式表”对话框，在对话框中可对当前文档或外部样式表中的任何样式进行编辑。 ：选中面板中的样式，再单击该按钮可删除所选的样式，并删除该样式应用于任何元素中的设置。 ：单击该按钮，可以打开“CSS样式”菜单，如图11-2所示，通过该菜单可以编辑、复制、删除或应用所选中的CSS样式，也可以新建CSS样式。 创建CSS样式 创建CSS样式的具体操作如下。 （1）执行下列3种方法之一打开如图11-3所示的“新建CSS样式”对话框。 在“CSS样式”面板中单击 按钮。 在“CSS样式”窗口中单击鼠标右键，在弹出的快捷菜单中选择“新建”命令。 单击 按钮，在弹出的“CSS样式”菜单中选择“新建”命令。 （2）在“名称”下拉列表框中输入新建CSS样式的文件名。 （3）在“选择器类型”栏中选择所定义的样式类型，CSS样式的创建类型有以下3种。 ：创建自定义样式，选中该单选项可以创建一个应用于文本和文本块的CSS样式。但需要注意的是，在“名称”下拉列表框中输入的自定义样式名称要以英文句点开头，如果没有输入，则Dreamweaver将自动添加。 ：选中该单选项可以重新定义HTML标签，表示为现有HTML标签赋上新的样式。选中该单选项后“名称”下拉列表框变为“标签”下拉列表框，如图11-4所示。在该下拉列表框中可选择重新定义的标签，如图11-5所示。 ：使用CSS选择器，表示要对特定的HTML标签组合或含有某个ID属性的所有标签进行重新定义。选中该单选项后“名称”下拉列表框变为“选择器”下拉列表框，如图11-6所示，可在该下拉列表框中选择需要使用的选择器类型，如图11-7所示。 （4）在“定义在”栏中选择样式的种类。 ：选中该单选项，可以定义一个外部链接的CSS样式。 ：选中该单选项，定义一个仅应用于当前页面的CSS样式。 如果在“定义在”栏中选中了 单选项，则会打开“保存样式表文件为”对话框，在该对话框中保存新建的样式表文件，如图11-8所示。 若选中 单选项，则直接打开如图11-9所示的对话框。 （5）在“分类”列表中选择要定义的样式类型，再在右侧设置相应参数，具体的定义方法将在下一节讲解。 （6）设置完后单击 按钮，完成CSS样式的创建。 样式的定义 创建了新的样式后，即可在“CSS样式定义”对话框中进行设置，CSS样式有8种，下面分别介绍其设置方法。 设置CSS样式类型格式 设置CSS样式背景格式 设置CSS样式区块格式 设置CSS样式方框格式 设置CSS样式边框格式 设置CSS样式列表格式 设置CSS样式定位格式 设置CSS样式扩展格式 设置CSS样式类型格式 设置CSS样式的类型格式可以为页面中的文本加入字体、大小、风格等类型格式，具体操作如下。 （1）在“分类”列表中选择“类型”选项，列表右侧就会显示出“类型”选项的参数设置，如图11-10所示。其中各参数含义如下。 字体：在该下拉列表框中可以输入字体类型，也可以单击 按钮，从下拉列表中选择需要的字体。 大小：在该下拉列表框中可以直接输入