23单元1201第12章使用CSS样式美化网页.pptVIP

Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院　陈承欢 《网页设计与制作》教学课件 教学单元24：使用CSS美化网页 主要教学环节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 （一）课程引导 Dreamweaver 8中的样式与Word中的样式似，能够让用户更加方便、有效地对网页元素进行控制。创建一个样式，可以将该样式应用到多处，达到“创 建一次，使用多次”的目的，大大提高了网页排版的 效率，方便网页制作者统一网站的整体风格。 （二）明确知识技能目标 （1）掌握CSS样式表的基本语法和定义位置。 （2）掌握标签样式、高级样式、类样式的定义方法。 （3）掌握样式的编辑方法。 （4）掌握如何使用CSS样式表美化页面。 （三）展示网页浏览效果 本章制作的网页13.html的浏览效果如图所示。 1．预览网页 图12-1　　网页13.html的预览效果 （四）分析操作任务 （1）在“长沙世界之窗”站点下创建文件夹“13美化网页”，在“13美化网页”文件夹中创建网13.html。 （2）建立多种CSS样式，对13.html进行美化。 （五）知识讲解与操作示范（1） CSS是“Cascading Style Sheet”的缩写，称为“层叠样式表”，一般简称为“样式表”，“层叠”是指多个样式可以同时应用于同一个页面或网页中的同一个元素。 CSS样式表的主要优点是提供便利的更新功能，更新CSS样式时，使用该样式的所有文档的格式都自动更新为新样式。 CSS具有更好的易用性与扩展性，CSS样式表可以应用到很多页面中，从而使不同的页面获得相同的布局和外观。 12.1　CSS概述 12.1.1　CSS的概念 （五）知识讲解与操作示范（2） 创建名称为“13_1.html”的网页，该网页只包含一个2行1列的表格，表格中只有文字，对该网页进行如下设置： （1）通过“页面属性”对话框设置“页面字体大小”为“12px”，“左边距”、“右边距”设置为“10px”。 （2）通过属性面板将表格中第一行的文字“长沙世界之窗欢迎你”的“字体”设置为“隶书”，“大小”设置为“18px”，文字颜色设置为“#0000FF”。 （3）切换到代码视图，在代码窗口设置表格中第二行的文字的“大小”设置为“10px”，文字颜色设置为“#FF6600”。 12.1.2　CSS样式表的应用举例 （五）知识讲解与操作示范（3） 1．CSS样式表的定义位置 （1）CSS样式定义在HEAD内 CSS一般位于HTML文件的头部，即head与/head标记内，并且以style开始，以/style结束，例如如下的代码定义了body、td、th标记使用的字号。 style type=text/css body,td,th { font-size: 12px; } style 12.1.3　CSS样式表的基本语法 （五）知识讲解与操作示范（4） （2）CSS样式嵌入BODY内部 代码style=font-size: 10pt; color: #FF6600;用于控制段落文字的字号和颜色，采用style= 的格式把样式写在HTML中的任意行内，“=”右边的属性设置放入双引号中，多个属性用“;”分隔。 （3）在独立的外部文件中定义 CSS的定义既可以在HTML文档内部，也可以单独在外部文件（例如style.css）中定义。把编辑好的CSS文档保存成外部文件，然后在HEAD中添加如下所示的代码： link rel=stylesheet href=style.css type=text/css 12.1.3　CSS样式表的基本语法 （五）知识讲解与操作示范（5） 2．CSS样式表的定义形式 （1）定义标签样式 这一种方式主要是针对于某一个标记，所定义 的样式也只应用于选择的标记。定义形式为：标记 名称　{　属性名称：