网页教（学）案设计6.docVIP

.word格式, , 专业.专注 . 第六章 层叠样式表 本章教学目标： 1．理解掌握CSS的概念和作用； 2．熟练掌握类样式的创建和应用； 3．熟练掌握标签样式的创建和应用； 4．熟练掌握高级样式的创建和应用； 5．熟练掌握外部样式表的创建； 6．熟练掌握CSS特效的应用； 7．熟练使用样式表美化网页。 教学重点： 1．掌握创建类样式、标签样式、高级样式及应用； 2．掌握样式表文件的创建及应用； 教学难点： 创建和应用类样式 教学时间 8课时（4节理论课，4节实验课） 教学过程 §6.1 创建类样式 一、样式表的三种基本类型 1．类样式 类样式适合于单独为元素设置个性化的样式。用户可以在文档的任何区域或文本中应用类样式。定义好的类样式能很方便的应用到网页元素中。如果将类样式应用于一整段文字，那么会在相应的标签中出现“Class”属性，该属性值即为类样式名称。 2．HTML标签样式 可以针对某一个标签来定义层叠样式表，也就是说所定义的层叠样式表将只应用于选择的标签。例如：为Body标签定义了层叠样式表，那么所有包含在Body、/Body标签范围内的内容将遵循所定义的层叠样式表。 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 属性。 补充： CSS中的度量单位 CSS相对长度单位 说明 CSS绝对长度单位 说明 字体高（em） 元素的字体高度 英寸 1 英寸 = 2.54 厘米 字母x的高（ex） 字母x的高度 厘米（cm） 像素（px） 像素 毫米（mm） % 百分比 点（pt） 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中预览网页。 §6.3修改超级链接外观 一、高级样式 （1）高级样式允许用户一次给多个标签定义样式； （2）也可以给由ID标识的指定对象定义样式； （3）还可以给伪类选择器定义样式。 二、知识链接 在Dreamweaver CS 3中，若要为