项目5 使用CSS控制页面元素.doc

《项目5 使用CSS控制页面元素.doc》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、项目5使用CSS控制页面元素一、教学建议该项目主要介绍CSS在网页制作中的应用。CSS是为弥补传统HTML功能的不足而开发的一种新的网页格式标准，它可以再网页中精确地设置文字的大小、间距、行距、图层的绝对定位和相对定位，它还是实现了网页内容与样式的分离，可跨网页、跨网站使用，便于网站的维护。所以，学好CSS的应用，制作网页也会更加得心应手。该项目理论知识详尽，要求结合上机实践操作，巩固学生的理论知识，提高学生的学习兴趣，以“项目总结”的形式小结所学知识，加深学生的印象，增强学习效果。以掌握实际应用能力为导向，建议教师在教学的过程中辅导好

2、项目后面“技能巩固”的操作题，让学生在实际操作的过程中提高专业技能，达到理论实践一体化的效果，以便学生更好更牢固的掌握知识点，学以致用。二、教学简案课题任务1使用CSS设置页面、文本、段落的格式参考资料教材教学配套光盘素材教学方法教师讲解、演示。学生讨论，上机实践操作。授课节数2课时教学目标1.理解CSS样式表的含义、分类。2.掌握创建CSS样式表的方法。相关知识1.什么是CSS。2.CSS分类。3.CSS的创建及CSS样式面板。4.CSS规则的设置。学习重点1.了解CSS的定义、CSS样式面板的属性以及CSS规则属性。2.能运用CSS

3、样式表对网页的页边距、文字段落格式进行控制。教学内容一、什么是CSSCSS（CascadingStyleSheet，层叠样式表）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则存放在在另一个文件中或网页文档的某一个部分发，通常为文件头部分。二、CSS分类CSS可能通常使用两种方法将指定的样式加载到网页元素上：嵌入式样式表和外部样式表。1．嵌入式样式表如果样式只在当前网页中使用，可以使用嵌入式样式表。嵌入式样式表一般放

4、在网页头部的一个标签之间。1．外部样式表如要样式要在多个网页中使用，可以使用外部样式表，外部样式是一个以.CCS为后缀的外部文件。网页要使用外部样式表来统一风格只需在中用标签将外部样式表链接起来即可。一、CSS规则对话框单击“CSS”面板中的“新建CSS规则”按钮，可打开“新建CSS规则”对话框。选择器类型的含义如下：类（可应用于任何标签）：可以在文档窗口的任何区域或文本中应用类样式。标签（重新定义特定标签的外观）：重新定义HTML标记的默认格式。高级（ID、伪类选择器等）：为特定

5、的组合标签定义层叠样式表，可以使用ID作为属性，以保证文档具有唯一可用的值。进入“规则定义”对话框后，各选项的含义如下：1．“类型”选项用于设置CSS样式的文本格式。字体：可以选择相应的字体。大小：大小就是字号，可以直接填入数字，然后选择单位。样式：设置文字的外观，包括正常、斜体、偏斜体。行高：设置行高，可以选择“正常”，让计算机自动调整行高，也可以使用数值和单位结合的形式自行设置。颜色：设置文字的色彩。注：行高的数值是包括字号数值在内的。如文字设置为12px，如果要创建一倍行距，则行高应该为24px。2．“背景”选项用于设置CSS样式

6、的背景格式。背景颜色：选择固定色作为背景。背景图像：选择图像作为背景。重复：使用图像作为背景的时，可以使用此项设置背景图像的重复方式。附件：选择图像做背景的时候，可以设置图像是否跟随网页一同滚动。水平位置：位置图像水平方向的位置。垂直位置：设置图像垂直方向的位置。3．“区块”选项用于设置CSS样式的区块格式。单词间距：英文单词之间的距离，一般使用默认设置。字母间距：设置英文字母间距，使用正值为增加字母间距，使用负值为减小字母间距。垂直对齐：设置对象的垂直对齐方式。文本对齐：设置文本的水平对齐方式。文本缩进：可以设置首行缩进。4．“方框”

7、选项用于设置CSS样式的方框格式。宽：设置对象的宽度。高：设置对象的高度。浮动：可以设置文字等对象的环绕效果。填充：指边和其中内容之间的空白区域。边界：是指边框外侧的空白区域。5．“边框”选项可以给对象添加边框，设置边框的颜色、粗细、样式。样式：设置边框的样式。宽度：设置4个方向边框的宽度。颜色：设置4个方向边框对应的颜色。6．“列表”选项设置CSS样式的列表格式。类型：设置引导列表项目的符号类型。项目符号图像：可以选择图像作为项目的引导符号。位置：决定列表项目缩进的程度。7．“扩展”选项利用CSS实现一些扩展功能。分页：通过样式来网页

8、添加分页符号。光标：通过样式改变鼠标形状。过滤器：使用CSS语言实现过滤器（滤镜）效果。实施建议1.从“任务分析”入手，分析该任务的制作思路，讲述CSS在网页设计中的重要功能。2.通过完成任务1的实作，掌握