授课教师:牟勇
课时:100分钟
l 本章技能目标
n 会创建统一外观的字体文本
n 会创建无下划线的超连接样式
n 会创建个性化的表格
n 会创建个性化的表单
l 本章重点
nCSS语法规则
nCSS常用属性
l 本章难点
n会创建个性化的表格
n会创建个性化的表单
l 本章工作任务
u 美化“宝贝分类”页面
u 制作并美化“注册”页面
l 整章授课思路
n本章共有共有三个知识点:CSS语法规则,CSS用法,CSS常用属性
n因为4.0的学员在S1就已经学习过CSS,所以CSS语法规则部分可以采用回顾的方式来进行。
nCSS用法依然可以采用回顾的方式进行。
nCSS属性重点讲述边框属性。
n教员应多与学员互动,让学员参与课堂教学过程,及时进行鼓励和表扬,增强学员自信心。
回顾: [5分钟]
表单中提交数据的方法有那两种及其区别?
创建一个登录界面需要哪些表单元素?
target属性取值可以为哪些及其含义?
预习检查: [5分钟]
简述样式表的基本结构?
常用的样式属性有哪些?
课程知识点讲解:
CSS样式表规则:[10分钟]
为什么需要CSS样式表
答案:HTML可以对网页进行描述,但是离做出漂亮的网页还差很远,另外,通常网页内容和网页的外观是由不同的人来完成的,如果都使用HTML会造成冲突。而如果外观使用CSS来完成就可以解决这个问题,另外,由于网页的内容和外观进行了分离,也就让我们可以实现同样的内容用不同的外观来显示,大大提高了网页的变化,降低了网页维护成本。
样式表的基本语法
提问:我们在S1的时候就已经学习过了CSS,现在谁来说说,样式表的基本语法?
答案:
选择器名{
属性:值;
}
提问:样式规则可以分为哪几类?
答案:HTML选择器,class选择器,id选择器。
出示静夜思案例:
首先让学员猜测使用了什么标签使字体变成了红色?之后让学员看到HTML代码,里面并没有什么特殊的标签,只是p,那字体为什么会是红色的呢?指出是使用了HTML选择器,使p的样式发生了改变,并说明,所有的p都将受到样式表规则的影响。
问题:如果希望某几个p元素的样式不同于别的p,怎么办?
答案:类选择器。
<STYLE type="text/css">
.red {
color:red; font-family:"隶书"; font-size:24px;
}
……
</STYLE>
问题:如果希望某个p元素的样式独一无二,怎么办?
答案:ID选择器
<STYLE type="text/css">
#red {
color:red; font-family:"隶书"; font-size:24px;
}
……
</STYLE>
CSS三类应用方式:[20分钟]
引入:我们知道了样式表的写法,直接下来,我们怎么应用它们呢?
分类:
行内样式,内嵌样式,外部样式表
行内样式:
问题:如果希望某段文字和其他段落文字显示风格不一样(并且这个样式不会再其他地方反复使用了),如何解决?
答案:行内样式
写法:使用style属性
<HTML>
<HEAD>
<TITLE>设置属性</TITLE>
</HEAD>
<BODY>
<P style = "color:red;font-size:30px;font-family:隶书;">
这个段落应用了样式
<P>
这个段落按默认样式显示
</BODY>
</HTML>
教员应说明:行内样式使用范围更小,只适用于某一个标签,对其他标签不起作用
内嵌样式:
问题:如果我们希望一个网页内的样式保持一种风格,如何解决?
答案:内嵌样式。
写法:使用<style>标签
<STYLE type="text/css">
P
{ font-family:"隶书";
font-size:18px;
color:#FF0000;
}
</STYLE>
</HEAD>
……
<P>床前明月光,</P>
<P>疑是地上霜。</P>
<P>我是郭德刚,</P>
<P>低头思故乡。</P>
……
教员应说明:所有的段落都采用 P 样式,保证样式统一
外部样式表:
问题:如果我们希望一个网站内的所有网页都保持一种风格,我们又应该怎么解决?
答案:外部样式表。
写法:首先需要一个外部样式表文件(通常使用.css后缀),外部样式表文件的写法与内嵌样式的写法没有大的区别,不需要写<style>标签。其次,我们需要在网页中导入外部样式表。
根据关联的方式可以分为两种:链接(<link>)和导入(@import)
链接的写法:
<HEAD>
<LINK href="newsyle.css" rel="stylesheet" type="text/css">
</HEAD>
教员应强调三个属性的作用和写法。
导入的写法
<HEAD>
<STYLE TYPE="text/css">
@ import newstyle.css;
</STYLE>
</HEAD>
教员应强调:@import的结尾后需要加分号(这是学生很容易犯的错误)。
另外,教员应推荐学员使用@import,因为对于一些CSS支持不好的浏览器(主要指旧版本的浏览器)来说,它们会不支持@import,这样仅只是使外部样式表失效,而不至于把版面搞得很糟糕,甚至造成重要内容无法显示的情况。
CSS常用属性[50分钟]
引入:我们现在已经了解了样式表的语法,还有使用样式表的三种方式。通过前面的讲述,我们可以看出,写样式表,其实就是写它的各种属性。那样式表的常用属性有哪些?它们又有什么用处?我们一起来看一下。
文本属性
属性 |
说明 |
||
font-size |
字体大小 |
||
font-family |
字体类型 |
||
font-style |
|