前端html css中的考点,web前端开发 知识点2：在html中使用CSS的方法 电子教案.doc...

山东理工职业学院单元教学过程设计首页

课程所属院(部)：软件工程学院 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样式表方式的优先顺序由高到低次依为：行内样式、嵌入样式