课题名称：CSS样式应用
教学目的：
知识目标：1、掌握css基本语法
2、了解css 特点
能力目标：运用CSS样式布局网页的能力
情感目标：提高学生团结合作精神，提高学生竞争意识
教学重点：1、css基本语法
2、css基本特点
教学难点：样式表的应用
教学方法：讲授法、演示法、讨论法
课时安排：2课时
教学环境：多媒体教室
学习过程：
教学环节教学内容学生活动
新课导入请同学们观看下面两幅图，对比说出两幅图的差异：
图一未应用CSS样式找出两幅图片的差异，并由组长进行总结
图二应用了CSS样式
任务1 CSS样式应用
利用CSS将页面独立成更多的区域，在打开页面的时候，逐
层加载。
这就避免了象表格嵌套那样将整个页面圈在一个大
表格里，使得页面体积变小，浏览速度变快。
一、如何插入样式表
当浏览器读到一个样式表时，浏览器会根据它来格式化
HTML文档。
插入样式表的方法有三种：
（1）外部样式表
顾名思义，外部样式表是指储存在html文档之外的独立
CSS文件中的样式表。
当样式需要应用于很多页面时，外部
样式表将是理想的选择。
在使用外部样式表的情况下，你可
以通过改变一个文件来改变整个站点的外观。
每个页面使用
<link>元素链接到样式表。
<link> 元素在（文档的）头部
<head></head>中：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从文件mystyle.css中读到样式声明，并根据它
美化HTML文档。
外部样式表可以在任何文本编辑器中进行
编辑，但该文件中不能包含任何的html元素。
样式表应该
以.css 扩展名进行保存。
下面是一个样式表文件的例子：
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
不要在属性值与单位之间留有空格。
例如使用
“margin-left: 20 px” 而不是“margin-left: 20px”，它仅在IE6中
有效，但是在Mozilla/Firefox或Netscape中却无法正常工作。
（2）内部样式表
新建html文
件，输入样式
表代码，熟悉
语法规则
对于小范围应用的样式，为了精简外部样式表的规模，常常在该html文档中直接定义样式表，故命名为内部样式表。
此时可以使用<style 元素在HTML文档头部<head>
</head>中定义内部样式表，如下所示：
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
（3）内联样式
由于要将样式和内容混杂在一起，内联样式会损失掉样式表的许多优势，请慎用这种方法。
例如仅当样式需要在某个元素上应用一次时采用内联样式。
要使用内联样式，你需要在相关的元素内使用样式（style）属性。
Style属性可以包含任何CSS属性。
如下代码改变段落的颜色和左外边距：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
任务2 选择器的使用二、CSS主要是在相应的元素中应用样式，来渲染相对应用
的元素，那么这样我们选择相应的元素就很重要了，如何选
择对应的元素就需要我们所说的选择器。
选择器主要是用来
确定html的树形结构中的DOM元素节点，作用是使样式表
作用与指定的元素。
CSS中有多种选择器，这里介绍两个常用选择器：id选
择器和类选择器。
（1）id 选择器
id 选择器可以为标有特定id的HTML元素指定特定的样
式。
id选择器以“#” 来定义。
下面的两个id选择器，第一个
定义元素的颜色为黑色，第二个定义元素的颜色为蓝色：
<style>
#black {color:black;}
#blue {color:blue;}
</style>
下面的HTML代码中，id属性为black的p元素显示为黑
色，而id属性为blue的p元素显示为蓝色。
<p id=" black ">这个文字是黑色。
</p>
<p id=" blue ">这个文字是蓝色。
</p>
观看教师演
示，并动手操
作
（2）类选择器
在CSS中，类选择器以一个点号“.”定义：.center
{text-align: center;......}，即可以让所有拥有center 类的HTML 元素均为居中。
在下面的HTML代码中，h1和p元素都有center类。
这意味着两者都将遵守".center"选择器中的规则。
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>什么是DOM </title>
<style>
#black {color:black;}
#blue {color:blue;}
.center {text-align: center;border:2px solid #a1a1a1; <!--
border-radius 属性用于创建圆角-->
padding:10px 40px; background:#dddddd;width:350px;
border-radius:25px;}</style>
</head>
<body>
<h1 class="center">DOM中一切都是节点</h1>
<p id="black">Document：文档，是个平面文件</p>
<p class="center">Object：将平面文件抽象为可处理的对象</p>
<p id="blue">Model：模型，从文档到对象的建模过程</p> </body>
</html>
显示如下图所示：
板书设计CSS样式应用
一、CSS样式应用
（1）外部样式表
（2）内部样式表
（3）内联样式
二、选择器的使用
（4）id选择器
（5）类选择器
课堂小结1、样式应用范围
2、选择器使用
课后反思本次主要讲述css样式应用，里面涉及到很多代码，学生学起来稍微吃力，很多标签都需要记忆，处于还在摸索的阶段。