山东理工职业学院单元教学过程设计首页
课程所属院(部):软件工程学院 2016--- 2017学年 第二学期
课程名称
《Web前端开发》
任课教师
单元标题
在html中使用CSS3的方法
上课地点
8208微机室
学时
2
授课班级
授课时间
第 周
第 周
第 周
第 周
第 周
第 周
星期
星期
星期
星期
星期
星期
第 节
第 节
第 节
第 节
第 节
第 节
月 日
月 日
月 日
月 日
月 日
月 日
教学目标
能力目标
知识目标
1. 掌握html中使用CSS3的方法;
2.熟练使用CSS设计页面;
CSS3的引用类型
教学任务
1.掌握CSS3的引用类型及在html中使用CSS3的方法;
2.在html中熟练使用CSS;
教学重、难点
重点:CSS3的引用类型
难点:在html中使用CSS3的方法
教学材料或用具
教材、教案、课程标准、案例素材、DreamWeaver CS6软件及微机室
课后任务
网页制作软件对比
山东理工职业学院单元教学过程设计
步骤及时间
教学内容
教师活动
学生活动
5分钟
5分钟
20分钟
30分钟
25分钟
5分钟
【组织教学】
1、检查学生出勤,作好学生考勤记录。
2、课堂提问,了解学生掌握所学知识情况。
3、强调课堂纪律,加强互动,活跃课堂气氛。
【课题导入】
HTML的一系列标记和属性主要描述网页的结构和定义基本的格式,如果需要对网页的布局、背景、颜色进行更加精确的定位,需要使用CSS样式。
【讲授新课】
13.3.1 行内样式
行内样式表是最简单的一种使用方式,该方式直接把CSS代码添加到HTML的代码行中,由
13.3.2 嵌入样式
嵌入样式将样式定义作为网页代码的一部分,写在HTML文档的
和之间,通过标记来声明。嵌入的样式与行内样式有相似的地方,但是又不同,行内样式的作用域只有一行,而嵌入的样式可以作用于整个HTML文档中。示例13-5是包含行内样式和嵌入样式
13.3.3 链接样式
链接样式是在HTML中引入CSS使用频率最高的方法,它很好地体现了“页面内容”和“样式定义”分离,实现了内容描述和CSS代码的分离,使得网站的前期制作和后期维护都十分方便。
链接样式需要首先定义一个扩展名为“.css”的文件(即外部样式表),该文件包含需要用到的CSS规则,不包含任何其他的HTML代码。链接样式表的方法就是在HTML文件的
部分添加代码,格式如下。开展计算思维教学是计算机科学发展的必然结果。
计算机早期的发展,在计算机科学的引领下,指导什么能做,什么不能做;什么做的快,什么做的慢;什么做的好,什么做的不好。
现在已经没有章法了,似乎计算机没有不能做的。而且计算机的超快计算速度和超大存储能力傲视着理论研究。这掩盖了一些深层次的本质问题。
13.3.4 导入样式
导入样式和链接样式的操作过程基本相同,都需要一个单独的外部CSS文件,然后再将其导入到HTML文件中,但在语法和运行过程上有所差别。导入样式是HTML文件初始化时将外部CSS文件导入到HTML文件内,作为文件的一部分,类似于嵌入效果。
导入外部样式需要在内嵌样式表的
@import "mystyle.css";
13.3.5 样式的优先级
1.行内样式和嵌入样式比较
2.嵌入样式和链接样式比较
3.链接样式和导入样式
链接样式的优先级高于导入样式的优先级。
通过前面的例子,CSS样式表方式的优先顺序由高到低次依为:行内样式、嵌入样式