日照职业技术学院RIZHAO

POLYTECHNIC《Web网站开发技术》教案1课题2-2CSS选择器课型理实一体化授课班级授课时数教学目标掌握CSS基础选择器,能够运用CSS选择器定义标记样式.
掌握CSS3中新增加的属性选择器,能够运用属性选择器为页面中的元素添加样式.

理解关系选择器的用法,能够准确判断元素与元素间的关系.
掌握常用的结构化伪类选择器,能够为相同名称的元素定义不同样式.
掌握伪元素选择器的使用,能够在页面中插入所需要的文字或图片内容.

掌握CSS伪类,会使用CSS伪类实现超链接特效.
教学重难点属性选择器、结构化伪类选择器、伪元素选择器、链接伪类.
学情分析教学效果教后记日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案2任务1:基础选择器了解选择器的概念掌握CSS基础选择器的使用方法区分基础选择器分组讨论对新课进行讲解前,先让学生分组讨论以下问题:如果把一个网页看成一个人的话,HTML5就相当于人的骨架,是结构;CSS相当于人的衣服,是表现.
那么如何使用CSS去修饰页面呢其实,给网页应用样式首先需要使用CSS中的选择器.
那么,CSS基础选择器主要有哪些又有哪些不同呢请小组代表对以上问题发表见解.
教师对上述问题进行解释:CSS基础选择器主要包括四种,具体如下:标记选择器.
标记选择器是指用HTML标记名称作为选择器.
用标记选择器定义的样式对页面中该类型的所有标记都有效.
类选择器.
类选择器使用".
"进行标识,后面紧跟类名.
其最大的优势是可以为元素对象定义单独或相同的样式.
id选择器.
id选择器使用"#"进行标识,后面紧跟id名.
元素的id值是唯一的,只能对应于文档中某一个具体的元素.
属性选择器.
属性选择器用于描述一组元素的样式,class选择器有别于id选择器,class可以在多个元素中使用各种各样的属性,给元素增加很多附加信息.
通配符选择器.
通配符选择器用"*"号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素.
知识点讲解讲解"CSS基础选择器"(1)、教师展示PPT对"CSS选择器"的概念及用法进行讲解.
(2)、教师分别对"标记选择器"、"类选择器"、"id选择器"、"属性选择器"及"通配符选择器"的基本语法格式进行详细讲解并通过代码进行演示.

(3)、教师对比"标记选择器"、"类选择器"、"id选择器"及"通配符选择器"的使用方法及应用效果,并指出其优缺点.
(4)、学生练习,教师巡视,对疑难问题进行解答.
阶段小结小结日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案3重点:CSS基础选择器.
易错点:注意区分标记选择器、类选择器、id选择器及通配符选择器.
答疑教师询问学生对于知识点还有什么不理解的地方.
针对学生不理解的知识点给与解释.
巩固练习巩固本课时知识点学完知识点后,教师带领学生对本课时所学知识点进行回顾.
以此使学生更熟练地掌握"CSS样式规则、引入CSS样式表、CSS基础选择器"等知识点.
通过"补充案例"加强学习教师分发测试题目及案例素材给学生,对于掌握较好的同学,可以通过补充案例对相关知识点进行巩固.
布置作业完成"补充案例",通过平台提交给教师,教师下节课进行点评.
预习【关系选择器】.
任务2关系选择器了解兄弟选择器区分临近兄弟选择器和普通兄弟选择器掌握兄弟选择器的使用方法分组讨论对新课进行讲解前,先让学生分组讨论以下问题:在CSS3中,兄弟选择器分为哪两种,分别为何含义呢请小组代表对以上问题发表见解.
教师对上述问题进行解释:兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种.
其中,临近兄弟选择器选择器使用加号"+"来链接前后两个选择器.
选择器中的两个元素有同一个父亲,而且第二个元素必须紧跟第一个元素.
普通兄弟选择器使用"~"来链接前后两个选择器.
选择器中的两个元素有同一个父亲,但第二个元素不必紧跟第一个元素.

知识点讲解讲解"子代选择器(>)"(1)、教师展示PPT对"子代选择器(>)"的书写格式进行讲解.
(2)、教师展示PPT对"子代选择器(>)"的用法进行讲解并通过代码进行演示.
(3)、学生练习,教师巡视,对疑难问题进行解答.
日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案4讲解"兄弟选择器(+、~)"(1)、教师展示PPT对"兄弟选择器(+、~)"的书写格式进行讲解.
(2)、教师展示PPT对"兄弟选择器(+、~)"的用法进行讲解并通过代码进行演示.
(3)、区分"临近兄弟选择器"和"普通兄弟选择器"的用法.
(4)、学生练习,教师巡视,对疑难问题进行解答.
阶段小结小结重点:兄弟选择器的用法.
易错点:注意区分临近兄弟选择器和普通兄弟选择器的书写方式及含义.

答疑教师询问学生对于知识点还有什么不理解的地方.
针对学生不理解的知识点给与解释.
巩固练习巩固本课时知识点学完知识点后,教师带领学生对本课时所学知识点进行回顾.
以此使学生更熟练地了解"子代选择器(>)、兄弟选择器(+、~)"等知识点.
通过"补充案例"加强学习教师分发测试题目及案例素材给学生,对于掌握较好的同学,可以通过补充案例对相关知识点进行巩固.
布置作业完成"补充案例",通过平台提交给教师,教师下节课进行点评.
预习4.
3节【结构化伪类选择器】.
任务3伪类选择器了解伪类选择器first-child和:last-child选择器、:nth-child(n)和:nth-last-child(n)选择器、:before选择器、:after选择器、注意区分:nth-child(n)和:nth-last-child(n)选择器与:nth-of-type(n)和:nth-last-of-type(n)选择器掌握伪类选择器的使用方法分组讨论对新课进行讲解前,先让学生分组讨论以下问题:图中的这种翻页效果相信大家都不陌生,标号"1"的背景颜色与其他的有所不同,在学习结构化伪类选择器之前,我们可以通过添加class属性的方法为"1"设置背景样式,但class属性本身没有语义,它完全是用来为CSS样式服务的,日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案5属于多余属性.
因此,我们可以通过引入结构化伪类选择器来实现相同的效果.