授课教师：牟勇 课时： 100 分钟 l 本章技能目标 n 会创建统一外观的字体文本 n 会创建无下划线的超连接样式 n 会创建个性化的表格 n 会创建个性化的表单 l 本章重点 n CSS 语法规则 n CSS 常用属性 l 本章难点 n 会创建个性化的表格 n 会创建个性化的表单 l
授课教师：牟勇
课时： 100 分钟
l 本章技能目标
n 会创建统一外观的字体文本
n 会创建无下划线的超连接样式
n 会创建个性化的表格
n 会创建个性化的表单
l 本章重点
n CSS 语法规则
n CSS 常用属性
l 本章难点
n 会创建个性化的表格
n 会创建个性化的表单
l 本章工作任务
u 美化[宝贝分类]页面
u 制作并美化[注册]页面
l 整章授课思路
n 本章共有共有三个知识点： CSS 语法规则， CSS 用法， CSS 常用属性
n 因为 4.0 的学员在 S1 就已经学习过 CSS ，所以 CSS 语法规则部分可以采用回顾的方式来进行。
n CSS 用法依然可以采用回顾的方式进行。
n CSS 属性重点讲述边框属性。
n 教员应多与学员互动，让学员参与课堂教学过程，及时进行鼓励和表扬，增强学员自信心。
回顾 : [5 分钟 ]
表单中提交数据的方法有那两种及其区别？
创建一个登录界面需要哪些表单元素？
target 属性取值可以为哪些及其含义？
预习检查 : [5 分钟 ]
简述样式表的基本结构？
常用的样式属性有哪些？
课程知识点讲解：
CSS 样式表规则： [10 分钟 ]
为什么需要 CSS 样式表
答案： HTML 可以对网页进行描述，但是离做出漂亮的网页还差很远，另外，通常网页内容和网页的外观是由不同的人来完成的，如果都使用 HTML 会造成冲突。而如果外观使用 CSS 来完成就可以解决这个问题，另外，由于网页的内容和外观进行了分离，也就让我们可以实现同样的内容用不同的外观来显示，大大提高了网页的变化，降低了网页维护成本。
样式表的基本语法
提问：我们在 S1 的时候就已经学习过了 CSS ，现在谁来说说，样式表的基本语法？
答案：
选择器名 {
属性 : 值 ;
}
提问：样式规则可以分为哪几类？
答案： HTML 选择器， class 选择器， id 选择器。
出示静夜思案例：
HTML p ，那字体为什么会是红色的呢？指出是使用了 HTML 选择器，使 p 的样式发生了改变，并说明，所有的 p 都将受到样式表规则的影响。
问题：如果希望某几个 p 元素的样式不同于别的 p ，怎么办？
答案：类选择器。
.red {
color:red; font-family:" 隶书 "; font-size:24px;
}
……
问题：如果希望某个 p 元素的样式独一无二，怎么办？
答案： ID 选择器
#red {
color:red; font-family:" 隶书 "; font-size:24px;
}
……
CSS 三类应用方式： [20 分钟 ]
引入：我们知道了样式表的写法，直接下来，我们怎么应用它们呢？
分类：
行内样式，内嵌样式，外部样式表
行内样式 ：
问题：如果希望某段文字和其他段落文字显示风格不一样 ( 并且这个样式不会再其他地方反复使用了 ) ，如何解决？
答案：行内样式
写法：使用 style 属性
设置属性
这个段落应用了样式
这个段落按默认样式显示
教员应说明：
内嵌样式：
问题：如果我们希望一个网页内的样式保持一种风格，如何解决？
答案：内嵌样式。
写法：使用
P
{ font-family:" 隶书 ";
font-size:18px;
color:#FF0000;
}
……
床前明月光，
疑是地上霜。
我是郭德刚，
低头思故乡。
……
教员应说明： 所有的段落都采用 P 样式，保证样式统一
外部样式表：
问题：如果我们希望一个网站内的所有网页都保持一种风格，我们又应该怎么解决？
答案：外部样式表。
写法：首先需要一个外部样式表文件 ( 通常使用 .css 后缀 ) ，外部样式表文件的写法与内嵌样式的写法没有大的区别，不需要写 。其次，我们需要在网页中导入外部样式表。
根据关联的方式可以分为两种：链接 () 和导入 (@import)
链接的写法：
教员应强调三个属性的作用和写法。
导入的写法
@ import newstyle.css;
教员应强调： @import 的结尾后需要加分号 ( 这是学生很容易犯的错误 ) 。
另外，教员应推荐学员使用 @import ，因为对于一些 CSS 支持不好的浏览器 ( 主要指旧版本的浏览器 ) 来说，它们会不支持 @import ，这样仅只是使外部样式表失效，而不至于把版面搞得很糟糕，甚至造成重要内容无法显示的情况。
CSS 常用属性 [50 分钟 ]
引入：我们现在已经了解了样式表的语法，还有使用样式表的三种方式。通过前面的讲述，我们可以看出，写样式表，其实就是写它的各种属性。那样式表的常用属性有哪些？它们又有什么用处？我们一起来看一下。
文本属性
属性
说明
font-size
字体大小
font-family
字体类型
font-style
字体样式
color
字体颜色
text-align
文本对齐
P { font-size: 12px;
font-family: " 宋体 ";
text-align:left; }
.focus
{ font-size: 16px;
color:red; }
【新闻】 [ 设搜狐为首页 ] 9 月 1 日
·世锦赛刘翔 12 秒 95 夺冠成就大满贯
·我国实施不安全食品召回制度 遏制非法出口
… ..
教员应强调： P 用作整体样式的定义，而 class 样式用作特别需要强调的样式定义。并且强调 class 样式的名称应该以这个样式的作用来命名，而不应该以这个样式是什么样子来命名 ( 以功能来命名，而不是根据颜色，位置等来命名 ) 。
小结 1 ：
编写如下图所示效果对应的 HTML 代码
/* 表格单元格大字体的样式 */
TD
{ font-size:20px;
font-family:" 黑体 ";
color:red;
text-align:center;
}
/* 小字体的样式 */
.smallFont
{ font-size: 14px;
color:blue; }
教员提供表格无样式的 HTML ，学员上机完成样式表。
背景属性：
属性
说明
background-image
背景图像
background-color
背景颜色
background-repeat
背景平铺方式：
repeat( 默认，两个方向的平铺，即平铺满整个范围 ),
repeat-x( 横向平铺，即在一行上平铺 ),
repeat-y( 纵向平铺，即在一列上平铺 ),
no-repeat( 不平铺 )
……
table
{
background-image: url(images/type_back1.jpg);
background-repeat:no-repeat;
}
……
教员讲解上面的关键代码，并说明 repeat 各个取值的含义。
方框属性：
属性
说明
margin-top
左边距
margin-right
右边距
margin-bottom
底边距
margin-left
左边距
border-style
边框样式
none : 无边框。与任何指定的 border-width 值无关
hidden : 隐藏边框。 IE 不支持
dotted : 在 MAC 平台上 IE4+ 与 WINDOWS 和 UNIX 平台上 IE5.5+ 为点线。否则为实线
dashed : 在 MAC 平台上 IE4+ 与 WINDOWS 和 UNIX 平台上 IE5.5+ 为虚线。否则为实线
solid : 实线边框
double : 双线边框。两条单线与其间隔的和等于指定的 border-width 值
groove : 根据 border-color 的值画 3D 凹槽
ridge : 根据 border-color 的值画菱形边框
inset : 根据 border-color 的值画 3D 凹边
outset : 根据 border-color 的值画 3D 凸边
border-width
边框宽度
dorder-color
边框颜色
padding-top
顶部填充
padding-right
右边填充
padding-bottom
底部填充
padding-left
左边填充
问题： 要实现下图所示的效果，该如何编写样式规则？
关键代码：
.tableBorder
{ border-right-width: 3px;
border-right-color:red;
border-right-style:dashed;
padding-top:20px;
padding-left:10px; }
TR { background:yellow; }
手机冲值
电子彩票
……
教员应重点讲解 border 各属性单词的意思及它们产生的效果，可以对应浏览器效果 ( 例如注释部分代码 ) 进行讲解。
细边框效果：
问题：要实现下图的效果，该如何编写代码？
关键代码：
.textBorder{
border-width:1px;
border-style:solid;
}
教员应重点说明 border-width 与 border-style 的意思与用法，在这里可以对 border-style 进行一个小结 ( 内容见前面边框属性的表格 )
超链接特殊样式
伪类
说明
a:link
超链接的默认样式
a:visited
超点击过的超链接样式
a:hover
鼠标停在超链接上的样式
a:active
鼠标按下但尚未松开时的样式
问题：如何编写下图中的超链接样式。
关键代码：
A { color: blue;
text-decoration: none;
}
A:hover{
color: red;
}
……
诺基亚 | 摩托罗拉
联想 | 戴尔
……
教员应重点说明超链接伪类的写法 (a 与 hover 之间是冒号 ( ： ) ，而不是逗号 (,) ，也不是分号 ( ； ) 更不是点 (.)) 。
小结 2 ：
编写如下图所示效果对应的 HTML 代码
教员应提供框架 (HTML) ，请二至三位学员上机做 (CSS) ，其他学员用纸做，教员应提示关键代码的写法。
/* 细边框的文本输入框 */
.textBaroder
{
border-width:1px;
border-style:solid
}
A{ /* 设置无下划线的超连接样式 */
color: blue;
text-decoration: none;
}
A:hover{ /* 鼠标在超链接上悬停时变为颜色 */
color: red;
text-decoration:underline
}
综合例子： 要实现下图图片按钮的效果，该如何编写样式规则？
教员可以选择多个学员上机共同完成此案例。
本章总结 [10 分钟 ]
方框属性有哪些常用属性？并分别说明其含义？
超链接样式有哪几种？
内嵌样式表、行内样式表、外部样式表文件分别适用什么场合？
考核点
CSS 命名语法
CSS 常用属性
扩展部分：
border-style 属性的常量值
学员问题汇总：
暂无
作业：
习题 1 ： 26 页至 27 页选择题
习题 2 ： 27 页第 1,2,3,4 题
习题 3 ：预习第二章，试做课后的选择题