1、1,CSS样式,2,复习提问,Word中最常见的统一格式的方法？依次设置格式格式刷样式 统一网页元素的设计方法？已有解决方法：修改HTML代码（1）目标解决方法：（2、3） 使用CSS样式统一网站风格,3,课程引导,CSSWord中的样式 能够让用户更加方便、有效地对网页元素进行控制。 创建一个样式，可以将该样式应用到多处，达到“创建一次，使用多次”的目的，大大提高了网页排版的效率，方便网页制作者统一网站的整体风格。,4,知识目标,（1）CSS样式表的基本语法和定义位置。 （2）标签样式、高级样式、类样式的定义方法。 （3）CSS样式的编辑方法。 （4）使用CSS样式表美化页面。,5,案例展示
2、,“巴黎三日游记”网站,6,任务分析,1、使用什么方法定义主页图像的格式？链接的格式？ 2、使用什么方法统一子页的风格？ 段落格式、标题格式 （行间距、字间距、表格边框等） 任务完成：CSS样式,7,知识讲解（一）,1CSS的概念：CSS“层叠样式表”，简称为“样式表”，“层叠”是指多个样式可以同时应用于同一个页面或网页中的同一个元素。CSS样式表的主要优点：自动更新。CSS具有更好的易用性与扩展性，用于不同页面，统一网站风格（相同的布局和外观） 2CSS样式表的使用 （1）CSS样式表的定义位置CSS样式定义在HEAD内文档内样式CSS样式嵌入标签内行内样式独立的外部样式表文件外部样式 （2
3、）CSS样式表的定义形式定义类样式应用于任何标签定义标签样式应用于指定标签定义高级样式ID和CSS选择器（链接） 3 CSS样式表的应用举例,8,操作示范（一）,4、使用CSS美化页面巴黎三日游记 （1）打开paris2.htm，导入样式表 （2）为paris3.htm建立样式：标签样式（左）不需要应用；应用自定义样式（右）,9,知识讲解与操作示范（二）,5. 建立高级样式：设计链接样式 操作：修改主页链接样式,6. 编辑样式 操作：为主页图像加入边框样式 7. 应用CSS滤镜制作各种文字和图像特效 操作：为主页图像加入Alpha滤镜样式 .img1 padding: 10px; height
4、: 200px; width: 200px; border: 1px solid #FF0000; margin: 5px; filter: Alpha(Opacity=50); ,10,课堂模仿,按演示案例完成“巴黎三日游记”网站的CSS样式，统一网站风格。 练习不同类型的CSS样式 设计不同应用范围的CSS样式 设计链接样式 设计滤镜等高级样式,11,疑难解析,问题1：如何使网页具有“首行缩进”功能 问题2：CSS的三种用法在同一个网页文档中可 以混用吗？,12,归纳总结,CSS样式弥补了HTML语言的不足，可以实现HTML代码一些无法实现的效果，使CSS美化页面更加简洁、方便。 本单元重点、难点： 标签样式、高级样式、类样式的定义与应用 使用CSS样式表美化页面,13,扩展性任务,“足行天下”网站（CSS统一）,14,结束,
