教案：S2-Y2转换课程第1章常见的CSS样式
授课教师：牟勇
课时：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 | 字体样式 |
| color | 字体颜色 |
| text-align | 文本对齐 |
<STYLE type="text/css"> P { font-size: 12px; font-family: "宋体"; text-align:left; } .focus { font-size: 16px; color:red; } </STYLE> </HEAD> <BODY> 【新闻】[设搜狐为首页] 9月1日 <P class=“focus">·世锦赛刘翔12秒95夺冠成就大满贯</P> <P>·我国实施不安全食品召回制度 遏制非法出口</P> …..
教员应强调：P用作整体样式的定义，而class样式用作特别需要强调的样式定义。并且强调class样式的名称应该以这个样式的作用来命名，而不应该以这个样式是什么样子来命名(以功能来命名，而不是根据颜色，位置等来命名)。
小结1：
编写如下图所示效果对应的HTML代码
<STYLE type="text/css"> /* 表格单元格大字体的样式*/ TD { font-size:20px; font-family:"黑体"; color:red; text-align:center; } /* 小字体的样式*/ .smallFont { font-size: 14px; color:blue; } </STYLE>
教员提供表格无样式的HTML，学员上机完成样式表。
背景属性：
| 属性 | 说明 |
| background-image | 背景图像 |
| background-color | 背景颜色 |
| background-repeat | 背景平铺方式： repeat(默认，两个方向的平铺，即平铺满整个范围), repeat-x(横向平铺，即在一行上平铺), repeat-y(纵向平铺，即在一列上平铺), no-repeat(不平铺) |
<STYLE type="text/css"> …… table { background-image: url(images/type_back1.jpg); background-repeat:no-repeat; } </STYLE> ……
教员讲解上面的关键代码，并说明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 | 左边填充 |
问题：要实现下图所示的效果，该如何编写样式规则？
关键代码：
<STYLE type="text/css"> .tableBorder { border-right-width: 3px; border-right-color:red; border-right-style:dashed; padding-top:20px; padding-left:10px; } TR { background:yellow; } <TABLE > <TR> <TD class="tableBorder">手机冲值</TD> <TD class="tableBorder">电子易做图</TD> </TR> ……
教员应重点讲解border各属性单词的意思及它们产生的效果，可以对应浏览器效果(例如注释部分代码)进行讲解。
细边框效果：
问题：要实现下图的效果，该如何编写代码？
关键代码：
<STYLE type="text/css"> .textBorder{ border-width:1px; border-style:solid; } </STYLE> <FORM name="form1" method="post" action=""> <P>名字： <INPUT name="fname" type="text" class="textBorder" ></P> <P>密码： <INPUT name="pass" type="password" class="textBorder" size="21"></P> </FORM>
教员应重点说明border-width与border-style的意思与用法，在这里可以对border-style进行一个小结(内容见前面边框属性的表格)
超链接特殊样式
| 伪类 | 说明 |
| a:link | 超链接的默认样式 |
| a:visited | 超点击过的超链接样式 |
| a:hover | 鼠标停在超链接上的样式 |
| a:active | 鼠标按下但尚未松开时的样式 |
问题：如何编写下图中的超链接样式。
关键代码：
<STYLE type="text/css"> A { color: blue; text-decoration: none; } A:hover{ color: red; } </STYLE> …… <TR> <TD><A href="#">诺基亚</A> | <A href="#">摩托罗拉</A></TD> <TD><A href="#">联想</A> | <A href="#">戴尔</A></TD> </TR>……
教员应重点说明超链接伪类的写法(a与hover之间是冒号(：)，而不是逗号(,)，也不是分号(；)更不是点(.))。
小结2：
编写如下图所示效果对应的HTML代码
教员应提供框架(HTML)，请二至三位学员上机做(CSS)，其他学员用纸做，教员应提示关键代码的写法。
<STYLE type="text/css"> /*细边框的文本输入框*/ .textBaroder { border-width:1px; border-style:solid } A{ /*设置无下划线的超连接样式*/ color: blue; text-decoration: none; } A:hover{ /*鼠标在超链接上悬停时变为颜色*/ color: red; text-decoration:underline } </STYLE>
综合例子：要实现下图图片按钮的效果，该如何编写样式规则？
教员可以选择多个学员上机共同完成此案例。
本章总结 [10分钟]
方框属性有哪些常用属性？并分别说明其含义？
超链接样式有哪几种？
内嵌样式表、行内样式表、外部样式表文件分别适用什么场合？
考核点
CSS命名语法
CSS常用属性
扩展部分：
学员问题汇总：
作业：
补充：Jsp教程,Java基础
