CSS样式.pptVIP

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