css样式表的使用方法
第3章 CSS样式表的使用方法
一、教学目标
1.理解什么是CSS样式表，及CSS样式表在网页制作中的重要作用
2.掌握CSS样式表的基本结构；
3.掌握常见的三种（标签名、类、ID）选择器
4.理解在 HTML 中引用CSS样式表的三种方法。
二、教学重点
1.掌握常见的三种（标签名、类、ID）选择器使用的区别
2.CSS样式表的三种引用方法：内联、内部引用、外部引用
三、教学难点
能根据网页制作的需要选择不同的选择器创建样式表
四、教学过程
（一）复习
1.在表单中定义表单数据从浏览器传递到服务器的方法有哪几种？
2.列举常见的表单元素，并说出其作用
（二）导课
通过前面几次课的学习我们已经能通过HTML代码完成简单网页的制作，同时我们通过标签的一些属性达到美化网页的目标，但由于将网页的结构与表现混杂在一起，HTML代码较为复杂，同时相同的格式需要反复设置，加大了网页制作的工作量。这次课我将和大家一起学习一个新知识：CSS样式表，使用CSS样式表来格式化网页。
（三）新课
1、基本概念
1）、什么是CSS样式表：CSS是CascadingStyle Sheet 的缩写。译作「层叠样式表单，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
样式表的作用就相当于“一件华丽的衣服”，仔细观察下图。
2）、样式表能实现内容与样式的分离，方便团队开发
3）、样式表的基本结构
<style type="text/css"> 样式表开始，类型为CSS样式
P{color:red;font-size:30px;font-family:隶书;}; 样式规则
style> 样式表结束
注：样式表应定义于头部区域
4）、样式表中的三种选择器
l 标签名选择器
<head>
<title>CSS样式表选择器的使用title>
<style type="text/css">
P{color:red;font-size:30px;font-family:隶书;};
style>
head>
<body>
<p>我使用了p标签选择器哦！p>
body>
效果如下：
² 仔细观察你会发现，样式表中的样式名与标签的属性名很相似
l 类选择器
<head>
<title>CSS样式表选择器的使用title>
<style type="text/css">
.css1{color:blue;font-size:30px;font-family:隶书;}
style>
head>
<body>
<span class="css1">我使用了类选择器哦！ span>
<span>我没有使用类选择器！span>
body>
效果如下：
l ID选择器
<head>
<title>CSS样式表选择器的使用title>
<style type="text/css">
#css1{color:blue;font-size:30px;font-family:隶书;}
style>
head>
<body>
<span id="css1">我使用了ID选择器哦！ span><br />
<span>我没有使用ID选择器！span>
body>
效果如下：
| 选择器类型 |
样式表命名规则 |
引用方式 |
| 标签样式 |
标签名 |
定义后自动生效 |
| 类样式 |
.样式名 |
Class=“样式名” |
| ID样式 |
#样式名 |
Id=“样式名” |
5）、样式表中的三种引用方式
l 内联
<p style="color:Red">p>
l 内部引用（也就是我们上面讲的三种选择器的使用方法）
l 外部引用
当样式比较多、比较杂的时候，我们需要分门别类，将部分定义的CSS样式表保存到CSS文件中去，这时候我们通过外部引用CSS文件的方式来完成样式表的功能，同时区域引用CSS文件。
<head>
<link type="text/css"rel="stylesheet"href="S1.css"/>
head>
2、基本操作
1）.使用类选择器进行设计。
2）.使用标签名选择器进行设计
五、教学总结
1、样式表的作用，能够解决网页设计中哪些问题；
2、样式表的三种选择器及其使用方法。
3、样式表的三种引用方法。
六、作业
1、请阐述CSS样式表的有哪三种选择器，并例子的形式来说明各自的使用方法
2、具体描述一下CSS样式表的三种引用方法.
七、教学后记