网页教(学)案设计6

第六章层叠样式表

本章教学目标：

1．理解掌握CSS的概念和作用；

2．熟练掌握类样式的创建和应用；

3．熟练掌握标签样式的创建和应用；

4．熟练掌握高级样式的创建和应用；

5．熟练掌握外部样式表的创建；

6．熟练掌握CSS特效的应用；

7．熟练使用样式表美化网页。

教学重点：

1．掌握创建类样式、标签样式、高级样式及应用；

2．掌握样式表文件的创建及应用；

教学难点：

创建和应用类样式

教学时间

8课时（4节理论课，4节实验课）

教学过程

§6.1 创建类样式

一、样式表的三种基本类型

1．类样式

类样式适合于单独为元素设置个性化的样式。用户可以在文档的任何区域或文本中应用类样式。定义好的类样式能很方便的应用到网页元素中。如果将类样式应用于一整段文字，那么会在相应的标签中出现“Class”属性，该属性值即为类样式名称。

2．HTML标签样式

可以针对某一个标签来定义层叠样式表，也就是说所定义的层叠样式表将只应用于选择的标签。例如：为标签定义了层叠样式表，那么所有包含在、标签范围内的内容将遵循所定义的层叠样式表。

3．高级样式

高级样式为特殊的组合标签定义层叠样式表，使用ID作为属性，以保证文档具有唯一可用的值。高级样式是一种特殊类型的样式，常用的有四种，分别为a:link、a:active、a:visited、a:hover。其中：

✧A:link：设定正常状态下链接文字的样式。

✧A:active：设定鼠标单击时链接文字的外观。

✧A:visited：设定访问过的链接文字的外观。

✧A:hover：设定鼠标放置在链接文字之上时文字的外观。

二、本任务所用到的CSS属性

1、类型：该类属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰线等。

2、区块：指的是控制网页元素的间距、对齐方式等属性。

3、边框：使用“CSS 规则定义”对话框的“边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式）。

三、CSS样式面板的两种模式：

1．在“当前”模式下，“CSS 样式”面板将显示三个面板：

“所选内容的摘要”窗格：其中显示文档中当前所选内容的 CSS 属性；

“规则”窗格：其中显示所选属性的位置（或所选标签的一组层叠的规则，具体取决于您的选择）；

“属性”窗格：它允许您编辑应用于所选内容的规则的 CSS 属性，如下图所示。

2．在“所有”模式下，“CSS 样式”面板显示两个窗格：

“所有规则”窗格显示当前文档中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表。

使用“属性”窗格可以编辑“所有规则”窗格中任何所选规则的 CSS 属性。补充：

§6.2重定义HTML标签

一、常用HTML标签的作用

（1）body：表示文档的主体部分。对body标签的重定义将影响到整个网页。

（2）table：表示一个表格。对table标签的重定义将影响到所有表格及表格中的元素。

（3）form：表示一个窗体。对form标签的重定将影响到网页中所有窗体及窗体中的内容。

（4）td：表示一个单元格。对td标签的重定义将影响到网页中所有单元格外观。

（5）p：表示一个段落。对p标签的重定义将影响到网页中所有段落的外观。

（6）img：表示图片。对img标签的重定义将影响网页中的所有图片的外观。

（7）a：表示超链接。对a标签的重定义将影响网页中的所有超链接的外观。

二、标签样式创建的步骤

步骤：

（1）单击面板右下试试看“新建CSS规则”按钮，打开“新建CSS规则”对话框；

（2）将选择器类型设置为“标签”；

（3）单击“标签”列表框右边的下拉箭头，设置为TD；

（4）将“定义在”设置为新建样式表文件；

（5）单击“确定”按钮；

（6）在弹出的“保存样式表为”对话框中，选择要保存的位置，在“文件名”文本框中输入“mainstyle.css”，然后单击“保存”按钮；

（7）设置文本样式及区块样式即可；

（8）保存文件，按“F12”键在IE中预览网页。

§6.3修改超级链接外观

一、高级样式

（1）高级样式允许用户一次给多个标签定义样式；

（2）也可以给由ID标识的指定对象定义样式；

（3）还可以给伪类选择器定义样式。

二、知识链接

在Dreamweaver CS 3中，若要为具体某个标签组合或所有包含特定 Id 属性的标签定义格式设置，请选择“高级”选项，然后在“选择器”文本框中输入一个或多个 HTML 标签，或从弹出菜单中选择一个标签。弹出菜单中提供的选择器（称为伪类选择器）有：a:active、a:hover、a:link 和 a:visited。

§6.4 多个网页共享CSS样式

一、链接和导入的区别

1．链接

若要创建当前文档和外部样式表之间的链接，请选择“链接”。该选项在 HTML 代码中创建一个 link href 标签，并引用已发布的样式表所在的 URL。Microsoft Internet Explorer 和 Netscape Navigator 都支持此方法。

2．导入

不能使用链接标签添加从一个外部样式表到另一个外部样式表的引用。如果要嵌套样式表，必须使用导入指令。大多数浏览器还能识别页面中（而不仅仅是样式表中）的导入指令。当在链接到页面与导入到页面的外部样式表中存在重叠的规则时，解决冲突属性的方式具有细微的差别。如果希望导入而不是链接到外部样式表，请选择“导入”。

二、编辑外部CSS样式表

编辑外部CSS样式表时，链接到该CSS样式表的所有文档全部更新以反映所做的编辑。可以导出文档中包含的 CSS 样式以创建新的CSS样式表，然后附加或链接到外部样式表以应用那里所包含的样式。

您可以将创建的或复制到站点中的任何样式表附加到页面。此外，Dreamweaver 附带了预置的样式表，这些样式表可以自动移入站点并附加到页面。

§6.5制作光晕字

一、滤镜的作用