CSS样式表
教学课时:2节
教学目标:介绍CSS样式表的概念 、应用,及深化CSS样式知识点。
教学重点难点:1 、样式表的导入和导出 。
2 、对两种以上链接样式的掌握。
教学过程:
一 、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象素
自定义样式名必须由“点”开头,样式名最好为字母或数字
自定义样式通过"可被任何HTML标记运用
如:＜p >...＜/p>＜table >...＜/table> ＜div >...＜/div>＜span >...＜/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 cellpadding="0" cellspacing="0" >
＜tr>
＜td>table上设置下边界＜/td>
＜/tr>
＜/table>
＜table cellspacing="0" cellpadding="0">
＜tr>
＜td>＜/td>
＜/tr>
＜p>＜/p>＜table cellspacing="0" cellpadding="0">
＜tr>
＜td >＜/td>
＜td bgcolor="#CCCCCC" >td上设置“填充”＜/td>
＜td >＜/td>
＜/tr>
＜/table>
＜p>＜/p>
＜table cellpadding="0" cellspacing="0" >
＜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
设置完后观察效果 。
练习四:
1、新建一个CSS样式表,要求在网页中的表格内文本显示颜色为红色,字体为黑体,大小为24,行高为50像素,并有删除线。
2 、使用CSS选择器:
请设置链接样式为:
a:link--黑体36px,修饰选择“无”去掉下划线,行高为20像素,颜色为#333333灰色,以和文本默认的黑色有差别 。
a:hover --黑体36px,颜色为红色#FF3300 。背景为#CCCCCC
a:active --黑体36px,颜色为灰色#999999 。背景为#333333
a:visited--黑体36px,下划线为“无”,颜色为黑色 。
四 、css深入
思考:如果同一个页面有好几种链接样式呢?如:http://www.blueidea.com
答案:我们在一张网页中要设置几种不同的链接样式,方法:
第一步:在原网页上设置一组链接样式。
第二步:新建一张空白网页,设置出第二组链接样式,然后复制它的原代码到原网页中 。第三步:复制过来的这组链接代码名字作些改动,例如,我们定义一组链接为红色,访问后为蓝色;另一组为绿色,访问后为黄色:
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
。
