网页教案设计.doc

《网页教案设计.doc》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、================精选公文范文，管理类，工作总结类，工作计划类文档，欢迎阅读下载==============网页教案设计6　　　　　　第六章层叠样式表　　本章教学目标：　　1．理解掌握CSS的概念和作用；2．熟练掌握类样式的创建和应用；3．熟练掌握标签样式的创建和应用；4．熟练掌握高级样式的创建和应用；5．熟练掌握外部样式表的创建；6．熟练掌握CSS特效的应用；7．熟练使用样式表美化网页。教学重点：　　1．掌握创建类样式、标签样式、高级样式及应用；2．掌握样式表文件的创建及应用；教学难点：　　创建和应用类样式教学时间　　8课时教学过程　　§创建类样式　　

2、　　一、样式表的三种基本类型1．类样式--------------------精选公文范文，管理类，工作总结类，工作计划类文档，感谢阅读下载---------------------~11~================精选公文范文，管理类，工作总结类，工作计划类文档，欢迎阅读下载==============　　类样式适合于单独为元素设置个性化的样式。用户可以在文档的任何区域或文本中应用类样式。定义好的类样式能很方便的应用到网页元素中。如果将类样式应用于一整段文字，那么会在相应的标签中出现“Class”属性，该属性值即为类样式名称。　　2．HTML标签样式　　可以针

3、对某一个标签来定义层叠样式表，也就是说所定义的层叠样式表将只应用于选择的标签。例如：为标签定义了层叠样式表，那么所有包含在、标签范围内的内容将遵循所定义的层叠样式表。3．高级样式　　高级样式为特殊的组合标签定义层叠样式表，使用ID作为属性，以保证文档具有唯一可用的值。高级样式是一种特殊类型的样式，常用的有四种，分别为a:link、a:active、a:visited、a:hover。其中：　　-1-　　?A:link：设定正常状态下链接文字的样式。?A:active：设定鼠标单击时链接文字的外观。?A:visited：设定访问过的链接文字的外观。　　?A:hover：

4、设定鼠标放置在链接文字之上时文字的外观。二、本任务所用到的CSS属性　　1、类型：该类属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰线等。--------------------精选公文范文，管理类，工作总结类，工作计划类文档，感谢阅读下载---------------------~11~================精选公文范文，管理类，工作总结类，工作计划类文档，欢迎阅读下载==============　　2、区块：指的是控制网页元素的间距、对齐方式等属性。　　3、边框：使用“CSS规则定义”对话框的“边框”类别可以定义元素周围的边框的设置。

5、三、CSS样式面板的两种模式：　　1．在“当前”模式下，“CSS样式”面板将显示三个面板：　　“所选内容的摘要”窗格：其中显示文档中当前所选内容的CSS属性；“规则”窗格：其中显示所选属性的位置；　　“属性”窗格：它允许您编辑应用于所选内容的规则的CSS属性，如下图所示。　　　　2．在“所有”模式下，“CSS样式”面板显示两个窗格：　　“所有规则”窗格显示当前文档中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表。　　使用“属性”窗格可以编辑“所有规则”窗格中任何所选规则的CSS属性。补充：　　-2-　　CSS中的度量单位CSS相对长度单位字体高字母x的高像

6、素%　　说明元素的字体高度字母x的高度像素百分比CSS绝对长度单位英寸厘米毫米点说明1英寸=厘米--------------------精选公文范文，管理类，工作总结类，工作计划类文档，感谢阅读下载---------------------~11~================精选公文范文，管理类，工作总结类，工作计划类文档，欢迎阅读下载==============1点=1/72英寸12pt字皮卡(1皮卡=12点)§重定义HTML标签　　一、常用HTML标签的作用　　body：表示文档的主体部分。对body标签的重定义将影响到整个网页。table：表示一个表格。对t

7、able标签的重定义将影响到所有表格及表格中的元素。　　form：表示一个窗体。对form标签的重定将影响到网页中所有窗体及窗体中的内容。　　td：表示一个单元格。对td标签的重定义将影响到网页中所有单元格外观。　　p：表示一个段落。对p标签的重定义将影响到网页中所有段落的外观。img：表示图片。对img标签的重定义将影响网页中的所有图片的外观。a：表示超链接。对a标签的重定义将影响网页中的所有超链接的外观。二、标签样式创建的步骤步骤：　　单击面板右下试试看“新建CSS规则”按钮，打开“新建CSS规则”对话框；　　将选择器类型设置为“标签”；　　单击