CSS样式表教学课时：2节教学目标：介绍CSS样式表的概念、应用，及深化CSS样式知识点。
教学重点难点：１、样式表的导入和导出。
２、对两种以上链接样式的掌握。
教学过程：一、css样式表我们已经学习了如何在DW中使用CSS，我们通过CSS面板可以建立、修改、删除CSS 样式，我们也知道了新建CSS样式文件或仅对该文档建立样式。
但我们知道的仅此而已，离开DW软件，我们对CSS不无所知。
今天我们要来学习CSS语法，来深入了解CSS的实质。
CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。
优点是结构与格式分离；对网页布局、字体、背景和其它图文效果实现更加精确的控制；更好的易用性和扩展性，可以单独以一个文件的形式出现。
网页设计最初是用HTML标记来定义页面文档及格式，例如标题＜h1＞、段落＜p＞、表格＜table＞、链接＜a＞等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。
W3C把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。
你可以用CSS精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。
使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。
注意：CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持，有些效果需要更高版本的浏览器支持。
二、基础语法CSS语法主要有三种：①自定义CSS样式，格式为“样式名”如：.a1 定义样式名为.a1，颜色为红色，文字大小为12象素自定义样式名必须由“点”开头，样式名最好为字母或数字自定义样式通过"class=样式名"可被任何HTML标记运用如：＜p class="a1"＞...＜/p＞＜table class="a1"＞...＜/table＞＜div class="a1"＞...＜/div＞＜span class="a1"＞...＜/span＞②重定义HTML标记，格式为“HTML标记｛属性名：属性值；属性名：属性值；｝”如：h1 body重定义HTML标记的功能是改变HTML的原有功能，如上面的定义把“标题1”文字定义为红色字，网页的所有文字大小这12象素③CSS选择器，专用于控制链接的显示效果，共有4种选择器a:link 控制链接的默认显示效果a:visited 控制链接被单击后的显示效果a:hover 控制鼠标移到链接上时的显示效果a:active 控制鼠标按下时的显示效果（较少使用）以上4中选择器第4种较少使用，在定义选择器时，必须严格按此顺序定义，否则可能会无效练习一：分析以下CSS代码的功能，变上机验证.a1{color: #FF0000;}body {color: #333333;background-color: #FFCCFF;text-align: center;margin-top: 0px;font-size: 12px;line-height: 150%;}a:link{text-decoration: none;}a:visited{text-decoration: none;}a:hover{color: #FF0000;text-decoration: underline;}三、如何在网页中插入CSSCSS分类–嵌入式：在独立的文档用CSS样式–外部链接式：使用外部独立的CSS文件存放定义。
方法1：仅在该文档。
定义的CSS效果只在该文档中有效。
语法格式：在网页头中输入如下语句＜style type="text/css"＞＜!--CSS语句--＞方法2：链接一个外部的CSS样式文件，这种方法的最大好处是整个网站可以共享一个CSS 文件。
语法格式：在网页头中加入以下语句＜link href="mycss.css" rel="stylesheet" type="text/css"＞，其中mycss.css是形如.a1{color: #FF0000;}body {color: #333333;background-color: #FFCCFF;text-align: center;margin-top: 0px;font-size: 12px;line-height: 150%;}a:link{text-decoration: none;}a:visited{text-decoration: none;}a:hover{color: #FF0000;text-decoration: underline;}的文本文件。
练习一：分析以下代码，变上机验证＜style type="text/css"＞＜!--.a1.a2{padding: 6px;}.a3{border: 1px dotted #666666;}--＞＜/style＞......＜table width="400" border="1" cellpadding="0" cellspacing="0" class="a1"＞＜tr＞＜td＞table上设置下边界＜/td＞＜/tr＞＜/table＞＜table width="400" border="1" cellspacing="0" cellpadding="0"＞＜tr＞＜td＞＜/td＞＜/tr＞＜p＞＜/p＞＜table width="400" border="0" cellspacing="0" cellpadding="0"＞＜tr＞＜td width="6"＞＜/td＞＜td bgcolor="#CCCCCC" class="a2"＞td上设置“填充”＜/td＞＜td width="6"＞＜/td＞＜/tr＞＜/table＞＜p＞＜/p＞＜table width="400" border="0" cellpadding="0" cellspacing="0" class="a3"＞＜tr＞＜td＞一行一列的table上设置“边框”＜/td＞＜/tr＞＜/table＞.a1 .a2{padding: 6px;} .a3{border: 1px dotted #666666;}练习二：练习下载1、在1.htm网页中新建一个CSS样式表，要求在网页文字内容显示为9pt,行距150%,蓝色。
再把这个样式表导出到网站文件夹，保存名字为wz1.css，然后在2.htm和3.htm中应用这个样式，让三张网页风格一致。
2、在2.htm再新建一个CSS样式表，要求定义在wz1.css中，要求设置为中文本字体为楷体，颜色为灰色,背景为浅黄色，然后把三张网页的标题都设置为此样式。
3、修改刚才建好的wz1.CSS样式表，要求网页中的文字颜色为红色、背景为淡灰色。
练习三：设置body样式为：BODY字体为宋体大小为18px颜色为#333333背景颜色为#CCCCCC设置完后观察效果。
练习四：１、新建一个CSS样式表，要求在网页中的表格内文本显示颜色为红色，字体为黑体，大小为24，行高为50像素，并有删除线。
2、使用CSS选择器：请设置链接样式为：a:link--黑体36px，修饰选择“无”去掉下划线，行高为20像素，颜色为#333333灰色，以和文本默认的黑色有差别。
a:hover --黑体36px，颜色为红色#FF3300。
背景为#CCCCCCa:active --黑体36px，颜色为灰色#999999。
背景为#333333a:visited--黑体36px，下划线为“无”，颜色为黑色。
四、css深入思考：如果同一个页面有好几种链接样式呢？如：答案：我们在一张网页中要设置几种不同的链接样式，方法：第一步：在原网页上设置一组链接样式。
第二步：新建一张空白网页，设置出第二组链接样式，然后复制它的原代码到原网页中。
第三步：复制过来的这组链接代码名字作些改动，例如，我们定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色：a.red:link {color: #FF0000}a.red:visited {color: #0000FF}a.blue:link {color: #00FF00}a.blue:visited {color: #FF00FF}。