CSS样式.

Presentation on theme: "CSS样式."— Presentation transcript:

1 CSS样式

2 复习提问 Word中最常见的统一格式的方法？ 统一网页元素的设计方法？ 已有解决方法：修改HTML代码（1）
依次设置格式 格式刷 样式 统一网页元素的设计方法？ 已有解决方法：修改HTML代码（1） 目标解决方法：（2、3） 使用CSS样式统一网站风格

3 课程引导 CSS≈Word中的样式 能够让用户更加方便、有效地对网页元素进行控制。
创建一个样式，可以将该样式应用到多处，达到“创建一次，使用多次”的目的，大大提高了网页排版的效率，方便网页制作者统一网站的整体风格。

4 知识目标 （1）CSS样式表的基本语法和定义位置。 （2）标签样式、高级样式、类样式的定义方法。 （3）CSS样式的编辑方法。

5 案例展示 “巴黎三日游记”网站

6 任务分析 1、使用什么方法定义主页图像的格式？链接的格式？ 2、使用什么方法统一子页的风格？ 段落格式、标题格式
（行间距、字间距、表格边框等） 任务完成：CSS样式

7 知识讲解（一） 1．CSS的概念：CSS——“层叠样式表”，简称为“样式表”，“层叠”是指多个样式可以同时应用于同一个页面或网页中的同一个元素。 CSS样式表的主要优点：自动更新。 CSS具有更好的易用性与扩展性，用于不同页面，统一网站风格（相同的布局和外观） 2．CSS样式表的使用 （1）CSS样式表的定义位置 CSS样式定义在HEAD内——文档内样式 CSS样式嵌入标签内——行内样式 独立的外部样式表文件——外部样式 （2）CSS样式表的定义形式 定义类样式——应用于任何标签 定义标签样式——应用于指定标签 定义高级样式——ID和CSS选择器（链接） 3． CSS样式表的应用举例

8 操作示范（一） 4、使用CSS美化页面——巴黎三日游记 （1）打开paris2.htm，导入样式表 （2）为paris3.htm建立样式：
标签样式（左）不需要应用；应用自定义样式（右） 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;} .poem { font-size: 12pt; letter-spacing: 2pt; font-family: "新宋体"; } .boxblack { border: 1px solid #000000; .imgdes {

9 知识讲解与操作示范（二） a:link { font-size: 10pt; color: #FFFFFF; } a:visited {
5. 建立高级样式： 设计链接样式 操作：修改主页链接样式 a:link { font-size: 10pt; color: #FFFFFF; } a:visited { color: #FF0000; a:hover { 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); }

10 课堂模仿 按演示案例完成“巴黎三日游记”网站的CSS样式，统一网站风格。 练习不同类型的CSS样式 设计不同应用范围的CSS样式
设计链接样式 设计滤镜等高级样式

11 疑难解析 问题1：如何使网页具有“首行缩进”功能 问题2：CSS的三种用法在同一个网页文档中可 以混用吗？

12 归纳总结 CSS样式弥补了HTML语言的不足，可以实现HTML代码一些无法实现的效果，使CSS美化页面更加简洁、方便。 本单元重点、难点：
标签样式、高级样式、类样式的定义与应用 使用CSS样式表美化页面

13 扩展性任务 “足行天下”网站（CSS统一）

14 结束