《Dreamweaver网页设计》-第8章.pptVIP

Dreamweaver 网页设计 第8章 CSS 样式表 【学习概述】 现在，对于一个高质量的网站来说，应用CSS样式表是必不可少的。CSS样式表的主要优点是便于对网页整体风格进行控制，当更新一处的 CSS 规则时，使用该已定义样式的所有文档的格式都会自动更新为新样式，并且CSS还可以制作网页特性。本章内容包括：CSS的基本概念、CSS的类型、创建CSS样式表、编辑样式表、CSS滤镜效果、CSS的冲突等内容。本章重点内容是3种常用CSS 样式类型的应用，难点是CSS的冲突。 8.1【课堂讲解】CSS 样式表概述 8.1.1什么是CSS？ CSS也被称为层叠样式表。是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，可以将内容与表现形式分开。使用 CSS 可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。直接在dreamweaver中输入文字并设置属性面板如图8-1。 文档中文字效果如图8-2。 8.1.2 CSS样式面板 在CSS样式面板中可以查看与当前文档相关联的样式定义以及样式的层次结构，如图8-4所示。可以使用CSS样式面板附加外部CSS样式表（按钮 ）、创建（按钮 ）、编辑（按钮 ）和删除（按钮 ）CSS样式。 8.1.3 CSS 样式的类型 CSS类型包括三种：类、标签和高级。在Dreamweaver中可以轻松设定不同类型的CSS样式。 1．类（可用于任何标签） 可作为 class 属性应用于文本范围或文本块的自定义样式。注意类名称必须以句点开头，可以包含任何字母和数字组合。如果没有输入开头的句点，Dreamweaver 将自动输入句点，如图8-5。 8.2.1 CSS样式的创建、应用、编辑与删除 读者可以创建一个 CSS 样式（或称规则）来自动完成 HTML 标签的格式设置或 class 属性所标识的文本范围的格式设置。创建CSS样式步骤如下： （1） 创建如图所示的网页文档（也可以直接打开本章目录下的“index.html”文件），如图8-9。 （2） 在“CSS 样式”面板中，单击面板右下侧的“新建 CSS 规则”( ) 按钮或选择菜单【文本】-【CSS 样式】-【新建】命令，显示“新建CSS 规则”对话框。 （4） 单击【确定】按钮，显示“.biaoti的CSS 规则定义”对话框。（5）在“.biaoti的CSS 规则定义”对话框中，设置各个选项如图8-12。 8.4 习题与上机指导 理论巩固 填空题 （1）CSS的功能是__________。 （2）CSS“类”样式主要用于__________。 （3）CSS“标签”样式主要用于__________。 （4）CSS“高级”样式主要用于__________。 （5）CSS类型包括三种，分别为：__________。 简答题 （1）简述如何在Dreamweaver中使用CSS样式面板附加外部CSS样式表、创建、编辑和删除CSS样式。 （2）简述如何在Dreamweaver中改变鼠标指针显示样式。 （3）什么是CSS的冲突。 上机操作 （1）使用CSS样式表设置超级链接样式。 （2）使用CSS样式表改变浏览器滚动条样式。 （3）使用CSS样式表的滤镜属性制作发光文字效果。 * * 图 8-1自动产生CSS样式“STYLE1” 图 8-2 文档中文字效果 源代码如图8-3。在文字属性面板中设置的文字属性自动转换为CSS样式，包括字体颜色、粗细、斜体、字体等。 图 8-3 自动产生的CSS源代码 图 8-4 CSS样式面板 图 8-5 类 2．标签（重新定义特定标签的外观） 重定义特定 HTML 标签的默认格式设置。当读者选择该选项时，可以在“标签”项的下拉菜单中选择一个标签或直接输入一个标签。如图8-6。 3．高级（ID、伪类选择器等） 为具体某个标签组合或所有包含特定 Id 属性的标签定义格式设置。提供的选择器包括 a:active、a:hover、a:link 和 a:visited四种，如图8-7。 图 8-7高级 图 8-9 “index.html”文件 图 8-10 CSS样式面板 （3） 在“新建CSS 规则”对话框中，设置“名称”项为“.biaoti”，如图8-11。 图 8-11 “新建CSS 规则”对话框－“.biaoti” 图 8-12 “.biaoti的CSS 规则定义”对话框 单击【确定】按钮，完成创建CSS样式。 选择要设置CSS样式的文字，本例为文字“北京景区”。 在属性面板中选择“样式”下拉菜单并选择样式“biaoti”（图8-13）或选择菜单【文本】-【CSS 样式】-【biaoti】命令。 图 8-13 在属性面板中应用CSS样式