教案：S2

授课教师：牟勇 课时： 100 分钟 l 本章技能目标 n 会创建统一外观的字体文本 n 会创建无下划线的超连接样式 n 会创建个性化的表格 n 会创建个性化的表单 l 本章重点 n CSS 语法规则 n CSS 常用属性 l 本章难点 n 会创建个性化的表格 n 会创建个性化的表单 l

授课教师：牟勇

课时：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选择器。

出示静夜思案例：

HTMLp，那字体为什么会是红色的呢？指出是使用了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日

“focus">·世锦赛刘翔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;

}

名字：

密码：

size="21">

教员应重点说明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：预习第二章，试做课后的选择题

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• mysql中什么是外键
• mysql索引之间有什么区别
• mysql字段怎么判断是否存在
• mysql怎么查看数据库保存在哪
• 教案：S2

• 接口与抽象类01
• 类的composer自动加载机制
• composer原理与常用命令03
• composer原理与常用命令02

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论

立即提交

专题推荐

• 独孤九贱-php全栈开发教程

  全栈 170W+

  主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

• 玉女心经-web前端开发教程

  入门 80W+

  主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

• 天龙八部-实战开发教程

  实战 120W+

  主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

认证0级讲师

发布技术文章

• 最新文章
• 热门排行

• mysql索引之间有什么区别
• mysql中什么是外键
• mysql查询怎么区分大小写
• mysql字段怎么判断是否存在
• mysql怎么查看数据库保存在哪
• 一起聊聊Mysql索引底层及优化
• 一起聊聊两条INSERT语句引发的死锁
• 实例讲解MySQL与InnoDB下共享锁与排他锁

• mysql怎么卸载干净？
• sql增删改查语句是什么？
• sql是什么意思
• 什么是最大公约数和最小公倍数？
• 数据库里的id是什么?
• mysql和oracle的区别有哪些
• 数据库是什么
• 详解2021MySQL安装（图文教程）

推荐视频教程

javascript初级视频教程

jquery 基础视频教程

视频教程分类

• php视频教程
• html视频教程
• css视频教程
• JS视频教程
• jQuery视频教程
• mysql视频教程
• Linux视频教程
• Python视频教程

• 网站首页
• PHP视频
• PHP实战
• PHP代码
• PHP手册
• 词条
• 手记
• 编程词典
• php培训

：公益在线php培训，帮助PHP学习者快速成长！

Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠广告合作