第六章 层叠样式表
本章教学目标：
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。其中：
- 1 -
? A:link：设定正常状态下链接文字的样式。 ? A:active：设定鼠标单击时链接文字的外观。 ? A:visited：设定访问过的链接文字的外观。
? A:hover：设定鼠标放置在链接文字之上时文字的外观。 二、本任务所用到的CSS属性
1、类型：该类属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰线等。
2、区块：指的是控制网页元素的间距、对齐方式等属性。
3、边框：使用“CSS 规则定义”对话框的“边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式）。 三、CSS样式面板的两种模式：
1．在“当前”模式下，“CSS 样式”面板将显示三个面板：
“所选内容的摘要”窗格：其中显示文档中当前所选内容的 CSS 属性； “规则”窗格：其中显示所选属性的位置（或所选标签的一组层叠的规则，具体取决于您的选择）；
“属性”窗格：它允许您编辑应用于所选内容的规则的 CSS 属性，如下图所示。
2．在“所有”模式下，“CSS 样式”面板显示两个窗格：
“所有规则”窗格显示当前文档中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表。
使用“属性”窗格可以编辑“所有规则”窗格中任何所选规则的 CSS 属性。 补充：
- 2 -
CSS中的度量单位 CSS相对长度单位 字体高（em） 字母x的高（ex） 像素（px） %
说明 元素的字体高度 字母x的高度 像素 百分比 CSS绝对长度单位 英寸 厘米（cm） 毫米（mm） 点（pt） 说明 1 英寸 = 2.54 厘米 1点 = 1/72英寸 12pt字（pc） 皮卡 (1 皮卡 = 12 点) §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中预览网页。
- 3 -
§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制作光晕字
一、滤镜的作用
使用过滤器，可对对样式所控制的对象应用特殊效果（例如模糊和反转）。
- 4 -
过滤器是由参数和参数值组成的，这些参数和值的变化组合，能使对象产生各种效果。其功能并不比PhotoShop软件中的滤镜效果逊色。相反不少图像处理软件进行特殊效果处理之后的图片体积会有所增加，而使用过滤器对图片进行处理能保持图片原有的属性，大大加快网页装载速度。过滤器参数属性过多，针对不同的施加对象，各类参数要根据使用者的喜好、需求以及对象本身的属性进行设置调试。 二、常见滤镜 1．Alpha滤镜 参数名称 Opacity 功能 位为“百分比” 制作出透明渐进的效果 Style 完全不透明 完全不透明 参数值 设置图片不透明的程度，单0~100，0表示完全透明，100表示FinishOpacity 与Opacity配合使用，可以0~100，0表示完全透明，100表示当同时设定了Opacity和0（没有渐进），1（直线渐进），2（圆FinishOpacity产生透明效形渐进），3（矩形辐射） 果时，它主要用来指定渐进的显示形状 StartX StartY FinishX FinishY 示例：
Alpha(Opacity=100,FinishOpacity=30,Style=2,Startx=0,StartY=0,FinishX=100,FinishY=80)；
2．Blur滤镜中的参数及其功能 参数名称 Add 功能 参数值 渐进开始的X坐标值 渐进开始的Y坐标值 渐进结束的X坐标值 渐进结束的Y坐标值 作用：让对象呈现渐变半透明的效果。
设置是否要在已经应用Blur滤0:表示不显示原对象。非0表示镜上的HTML元素上显示原来要显示原对象 的模糊方向 Direction 设置模糊的方向 0（上），45（右上），90（右），135（右下），180（下），225（左下），270（左），315（左上） - 5 -
Strength 指定模糊图像模糊的半径大默认值是5，取值范围为自然数 小。单位是像素(pixels)。 作用：让对象产生风吹模糊的效果。 示例：
Blur(Add=1,Direction=315,Strength=240)； 3．Chroma滤镜
作用：主要用于把图片中的某个颜色变成透明的。使用了该滤镜以后，原图片中的一部分颜色就好像没有了一样。它只有一个参数“Color”，用来指定透明的姿色，即不显示出来的颜色。 示例：
Chroma(Color=#6D6D6D)； 4．Glow滤镜中的参数及其功能 参数名称 Color Strength 色 指定晕开阴影的范设定值从1~255，数字越大晕得就越围 示例：
Glow(Color=#ff0000,Strength=3)； 本章小结
本章主要介绍了样式表的三种类型、类样式的创建及CSS样式面板的两种模式，标签样式的创建和应用及外部样式表文件的创建与保存。同时讲解了高级样式的创建及伪类选择器的应用，链接与导入的区别及外部样式表的编辑， Dreamweaver中滤镜的作用及常用滤镜的作用参数。 本章作业
1、使用CSS样式来依照结果文件对其进行美化。
2、定义网页中所有图片的标签样式，给每幅图片加上一个灰色边框。 3、试着给图片设置滤镜效果（如风吹的效果）。
强，数字越小则反之 功能 参数值 指定晕开阴影的颜#RRGGBB格式的颜色值 作用：可以使HTML元素对象的外轮廓上产生一种光晕。
- 6 -