《网站前端技术》教案第11课CSS与CSS3（二）.docx

《《网站前端技术》教案第11课CSS与CSS3（二）.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第11课CSS与CSS3（二）.docx（21页珍藏版）》请在优知文库上搜索。

1、课题第n课CSS与css3（二）课时2课时(90min)教学目标知识技能目标：熟悉CSS的五大选择器和选择器语法素质目标：掌握CSS的相关知识，加深学生对网页制作的进一步了解，提升学生的知识储备教学重难点教学重点：CSS基本选择器、关系选择器教学难点：CSS伪类选择器、伪元素选择器、属性选择器教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤（2min）一问题导入（5min）一传授新知（38min）第2节课：问题导入（3min）一传授新知（37min）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设

2、计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系,让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解CSS选择器的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题什么是CSS选择器？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（38min）3.4什么是CSS选择器【教师】讲解基本选择器、关系选择器和链接伪类

3、选择器的相关内容CSS选择器用于指明样式对HTML文档中的哪些元素生效。在设计网页时，HTML文档中除个别标签使用内联样式外，都是通过不同的CSS选择器控制其样式的。【课堂互动】+【教师】提问在CSS选择器有哪些？通过教师讲解、课堂互动、演示操作等方式，使学生了解基本选择器、关系选择器和链接伪类选择器的语法及使用十【学生】聆听、思考、回答CSS中有基本选择器、关系选择器、伪类选择器、伪元素选择器和属性选择器.3.4.1基本选择器【多媒体】组织学生扫码播放”基本选择器”视频（详见教材），让学生对这部分内容有一个大致地了解1 .通配符选择器通酉暗选择器用号表示，作用范围最广，能匹配页面中的所有元素

4、。其语法格式如下：*（属性1：属性值1；属性2:属性值2;.）【示例3-4-1】在HTML文档slyle标签内写入CSS通配符选择器及声明：*margin:。；padding:O；效果：清除HTML文档中所有元素外边距和内边距。【提示】利用通配符选择器设置的样式对页面的所有标签生效，而不管标签是否需要该样式，反而降低了代码的执行速度，因此在实际开发中并不常用。即使使用，也放在文档的最开始，作为优先级较低的声明。2 .标签选择器标签选择器是指用HTML标签名称作为选择器，以便为页面中某一类标签指定统一的CSS样式。其语法格式如下：标签名属性1：属性值1：属性2:属性值2:【示例3-4-2编辑HT

5、ML文档body标签的内容，代码如下：ahref=http:WWW百度aahref=hup:/WWW.$ina.C新浪aahref=hao123a在HTML文档的style标签内写入CSS标签选择器及声明：atext-decoration:none;color:#666;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“设置a标签样式前的效果、设置a标签样式后的效果”图片（详见教材），并讲解效果：设置网页所有a标签文本的样式为：去掉超链接的下划线；文字颜色为#666（深灰色）。3 .类选择器类选择器用于

6、为设置了类名的HTML元素定义单独的样式。类选择器使用英文标点进行表示，后面紧跟类名。其语法格式如下：.类名属性I：属性值1；属性2:属性值2;.其中，类名为HTML元素的ClaSS属性值，需要事先定义。ClaSS属性的语法格式为：class-,valueovalue为类名。当需要为一个标签设置多个类时，使用空格分隔类名。4pCIaSS=red我是红色楷体的文字p.(详见教材)在HTML文档slyle标签内写入CSS选择器和声明：pfont-family:楷体:.redColonred;).font30font-size:30px;【教师】PPt展示”类选择器应用效果”图片(详见教材)，并讲解

7、效果：第一个段落P标签内容为楷体，颜色为默认的黑色；第二个段落P、二级标题h2标签内容均为红色；第三个段落不仅为红色，而且字号为30px【提示】(1)上述示例中，通过标签选择器为所有段落标签p设置了楷体字体；为第二个段落p和二级标题h2标签定义了类名red,通过该类选择器将文字设置为红色；为第三个段落p标签同时定义了red和font300两个类名，设置了多个样式。(2)类名的第一个字符不能使用数字,并且类名严格区分大4泻，一般习惯泻.4 .id选择器id选择器用于为设置了id名的HTML元素定义单独的样式。id选择器使用步表示，后面紧跟id名。其语法格式如下：#id名(属性1:属性值1;属性2

8、:属性值2;.id名为HTML元素的id属性值，大多数HTML元素都可以定义id属性。与class属性不同的是，HTML元素的id属性值是唯一的，只能对应文档中的某个具体元素。【示例3-4-4编辑HTML文档body标签的内容，代码如下：ahref=htlp:/WWWid=green百度aahref=http:/WWW”新浪aahref=hao123a在HTML文档VSIyle标签内写入CSS选择器和声明：atext-decoration:none;color:#666;#greencolor:green;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进

9、行点评【学生】聆听、上机操作、演示【教师】ppt展示“id选择器应用效果”图片(详见教材)，并洪解效果：百度文字颜色为id选择器green定义的绿色，其他文字颜色取决于标签选择器a,颜色为“#666”。【提示】(1)同一个id属性值不能应用于多个HTML标签。否则，虽然设置的样式可以显示，但是在后期用JavaScript等语言调用id属性指定元素时会出错。(2)同fHTML标签不能使用多个id属性值。3.4.2关系选择器【多媒体】组织学生扫码播放”关系选择器“视频(详见教材)，让学生对这部分内容有一个大致地了解关系选择器也称复合选择器、派生选择器,是建立在基本选择器之上，由两个或多个基本选择器

10、通过不同的方式组合而成的。利用关系选择器可以更准确、更高效地选择目标元素。1.后代选择器后代选择器又称为包含选择器，可以选择HTML父元素里面的子元素。其写法就是把外层元素写在前面，内层元素写在后面，中间用空格分隔。当元素发生嵌套时，内层元素就成为外层元素的后代。其语法格式如下：元素1元素2样式声明1糙择器用于定义元素1里面所有元素2的样式。【示例3-4-5编辑HTML文档标签的内容,代码如下：亲儿子为蓝色孙子也为蓝色兄弟为红色在HTML文档标签内写入CSS选择器：pColorred;1divpcolor:blue;【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完

11、成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“后代选择器应用效果”图片(详见教材)，并讲解效果：内的所有元素为蓝色，其他元素为红色，如图3-4-5所示。【提示】(1)元素1和元素2中间用空格隔开。(2)元素I是父级，元素2是子级，最终选择的是元素2(3)元素2可以是第一层子元素，也可以是多层子元素，只要是元素1的后代即可.(4)元素1和元素2可以是任意基础选择器(类、标签、通配符、id)2.子代选择器【课堂互动】+【教师】提问什么是子代选择器？十【学生】聆听、思考、回答子代选择器只能选择作为某元素的最近一级子元素，简单理解就是选“亲儿子元素。其语法格式如下：元素1元素2样式声

12、明上述选择器用于定义元素1里面所有直接子元素一元素2的样式。我是father的孙子辈，我是红色的我是father的兄弟，我是红色的在HTML文档标签内写入CSS选择器：pcoloured;#fatherpcolor:blue;【教师】PPt展示“子代选择器应用效果”图片（详见教材），并讲解效果：只有#falher包含的最近一层元素文字颜色为蓝色；其他段落文字为红色。【提示】3）元素1和元素2中间用大于号隔开。（2）元素1是父级，元素2是子级，最终选择的是元素2元素2必须是第一层子元素。3 .标签指定式选择器【课堂互动】【教师】提问什么是标签指定式选择器？十【学生】聆听、思考、回答标翩定式选择器

13、又叫交集邮器，是由两个锵器触隹接构成的，其中第T必须是标签僻器,第二个必须逑陲器或者id僻器。这两个蝌器之间不能有空格，必须竣书写。其语法腐如下：标签+类Iid选择器样式声明【示例3-4-7编辑HTML文档标签的内容，代码如下：普通文字是红色的div标签指定了clr样式，是紫色的h3指定了clr样式，是蓝色的。在HTML文档标签内写入CSS选择器：divcoloured;.clrcolonblue;div.clrcolonpurple;【教师】PPt展示标签指定式选择器应用效果”图片（详见教材），并讲解效果：只有第二行文字变为紫色.【提示】div.clr选择器仅应用于,而不会影响使用了dr的其他标签的效果。4 .并集选择器【课堂互动】十【教师】提问什么是并集选择器？【学生】聆听、思考、回答并集选择器也叫群选择器，是由多个选择器通过逗号连接在一起的，任!可形式的选择器都可以作为并集选择器的一部分。并集选择器允许同时为多个选择器应用同一种样式。在声明各种CSS选择器时，如果某些选择器的风格完全相同或部分相