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

《《Dreamweaver网页设计》-第8章.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Dreamweaver网页设计第8章CSS样式表【学习概述】现在，对于一个高质量的网站来说，应用CSS样式表是必不可少的。CSS样式表的主要优点是便于对网页整体风格进行控制，当更新一处的CSS规则时，使用该已定义样式的所有文档的格式都会自动更新为新样式，并且CSS还可以制作网页特性。本章内容包括：CSS的基本概念、CSS的类型、创建CSS样式表、编辑样式表、CSS滤镜效果、CSS的冲突等内容。本章重点内容是3种常用CSS样式类型的应用，难点是CSS的冲突。8.1【课堂讲解】CSS样式表概述8.1.1什么是CSS？CSS也被称为层叠样式表。是一系

2、列格式设置规则，它们控制Web页面内容的外观。使用CSS设置页面格式时，可以将内容与表现形式分开。使用CSS可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。直接在dreamweaver中输入文字并设置属性面板如图8-1。图8-1自动产生CSS样式“STYLE1”文档中文字效果如图8-2。图8-2文档中文字效果源代码如图8-3。在文字属性面板中设置的文字属性自动转换为CSS样式，包括字体颜色、粗细、斜体、字体等。图8-3自动产生的CSS源代码8.1.2CSS样式面板在CSS样式面板中可以查看与当前文档相关联的样式定义以

3、及样式的层次结构，如图8-4所示。可以使用CSS样式面板附加外部CSS样式表（按钮）、创建（按钮）、编辑（按钮）和删除（按钮）CSS样式。图8-4CSS样式面板8.1.3CSS样式的类型CSS类型包括三种：类、标签和高级。在Dreamweaver中可以轻松设定不同类型的CSS样式。1．类（可用于任何标签）可作为class属性应用于文本范围或文本块的自定义样式。注意类名称必须以句点开头，可以包含任何字母和数字组合。如果没有输入开头的句点，Dreamweaver将自动输入句点，如图8-5。图8-5类2．标签（重新定义特定标签的外观）重定义特定HTM

4、L标签的默认格式设置。当读者选择该选项时，可以在“标签”项的下拉菜单中选择一个标签或直接输入一个标签。如图8-6。3．高级（ID、伪类选择器等）为具体某个标签组合或所有包含特定Id属性的标签定义格式设置。提供的选择器包括a:active、a:hover、a:link和a:visited四种，如图8-7。图8-7高级8.2.1CSS样式的创建、应用、编辑与删除读者可以创建一个CSS样式（或称规则）来自动完成HTML标签的格式设置或class属性所标识的文本范围的格式设置。创建CSS样式步骤如下：（1）创建如图所示的网页文档（也可以直接打开本章目录

5、下的“index.html”文件），如图8-9。图8-9“index.html”文件（2）在“CSS样式”面板中，单击面板右下侧的“新建CSS规则”()按钮或选择菜单【文本】->【CSS样式】->【新建】命令，显示“新建CSS规则”对话框。图8-10CSS样式面板（3）在“新建CSS规则”对话框中，设置“名称”项为“.biaoti”，如图8-11。图8-11“新建CSS规则”对话框－“.biaoti”（4）单击【确定】按钮，显示“.biaoti的CSS规则定义”对话框。（5）在“.biaoti的CSS规则定义”对话框中，设置各个选项如图8-1

6、2。图8-12“.biaoti的CSS规则定义”对话框单击【确定】按钮，完成创建CSS样式。选择要设置CSS样式的文字，本例为文字“北京景区”。在属性面板中选择“样式”下拉菜单并选择样式“biaoti”（图8-13）或选择菜单【文本】->【CSS样式】->【biaoti】命令。图8-13在属性面板中应用CSS样式（9）完成应用CSS样式后，文字效果如图8-14。图8-14样式“biaoti”文字效果（10）若要编辑CSS样式，在CSS样式面板中选择要编辑的CSS样式名称后单击CSS样式面板上的编辑按钮。（11）若要删除CSS样式，在CSS样式面

7、板中选择要删除的CSS样式名称后单击CSS样式面板上的删除按钮。8.4习题与上机指导理论巩固填空题（1）CSS的功能是__________。（2）CSS“类”样式主要用于__________。（3）CSS“标签”样式主要用于__________。（4）CSS“高级”样式主要用于__________。（5）CSS类型包括三种，分别为：__________。简答题（1）简述如何在Dreamweaver中使用CSS样式面板附加外部CSS样式表、创建、编辑和删除CSS样式。（2）简述如何在Dreamweaver中改变鼠标指针显示样式。（3）什么是CSS

8、的冲突。上机操作（1）使用CSS样式表设置超级链接样式。（2）使用CSS样式表改变浏览器滚动条样式。（3）使用CSS样式表的滤镜属性制作发光文字效果。