CSS样式表2课时

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;}

三、如何在网页中插入CSS

CSS分类

–嵌入式：在独立的文档用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＞