《网站前端技术》教案第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的其

14、他标签的效果。4 .并集选择器【课堂互动】十【教师】提问什么是并集选择器？【学生】聆听、思考、回答并集选择器也叫群选择器，是由多个选择器通过逗号连接在一起的，任!可形式的选择器都可以作为并集选择器的一部分。并集选择器允许同时为多个选择器应用同一种样式。在声明各种CSS选择器时，如果某些选择器的风格完全相同或部分相同，便可以利用并集选择器同时声明这些选择器。其语法格i下：元素1.元素2样式声明【示例3-4-8编辑HTML文档标签的内容，代码如下：CSS并集选择器示例标题h2示/版题h3（详见教材）在HTML文档标签内写入CSS选择器：h2,h3,pColoEpurple;font-size:24

15、px;#one.h2.two,.twotext-decoration:underline:【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”并集选择器应用效果”图片（详见教材），并讲解效果：使用并集选择器控制标签的文字颜色为紫色、字号为24PX；使用并集选择器为示例标题h2示例文本p2”示例文本p3添加了下划线.5 .兄弟选择器兄弟选择器用来选择与某元素位于同一个父元素中,且位于该元素之后的同级元素。（1）临近兄弟选择器。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用临近兄弟选择

16、器。临近兄弟选择器用+连接。其语法格式如下：元素I+元素2样式声明【示例3-4-9】编辑HTML文档标签的内容，代码如下：动画世界vh2小猪佩奇大头儿子（详见教材）在HTML文档标签内写入CSS选择器：hl+h2fonl-style:italic;4【学生】聆听、上机操作、演示【教师】PPt展示“临近兄弟选择器应用效果”图片(详见教材)，并讲解效果：”hl+h2”选择器选中紧邻hl标签的h2标签，即大头儿子，文字为斜体。(2)普通兄弟选择器。如果需要选择某一个指定元素后面的所有兄弟元素，而且二者有相同的父元素，可以使用普通兄弟选择器。普通兄弟选择器用连接.其语法格式如下：元素1元素2样式声明【

17、示例3410】在【示例349】中将“hl+h2选择器修改为hlh2,即：h1h2font-style:i(alic:【教师】PPt展示普通兄弟选择器应用效果”图片(详见教材)，并讲解效果：hl之后所有的h2,即大头儿子和熊二”文字样式均为斜体.【学生】聆听、记录、理解3.4.3伪类选择器伪类选择器简称伪类，用于选择元素的特殊状态，如鼠标指针悬停、按下等；或根据HTML文档结构选择元素。伪类选择器通常由标签、类或id名加Z”构成。1.链接伪类选择器为了提高用户体验，一般需要为超链接的不同状态设置不同的样式。在CSS样式中，使用链接伪类选择器就可以实现这一效果。超链接a的伪类有以下四种：(1)a:

18、link:选择所有未被访问的超链接。(2)a:visited:选择所有已被访问的超链接。(3)a:hover：选择鼠标指针悬停在其上的超链接。(4)a:active：选择活动超链接，即鼠标按下但未弹起时的超链接。示例3-4-11编辑HTML文档body标签的内容，代码如下：ahref=hp:WWW天猫购物aahref=hllp:WWW”未来商城a在HTML文档slyle标签内写入CSS选择器：a:linkcoloured;texl-decoration:none;a:visitedcolor:saddlebrown;a:hovercolonskyblue;a:activecolor:green

19、;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“链接伪类选择器应用效果”图片(详见教材)，并讲解效果：未访问过的超链接为红色,无下划线；当鼠标指针移至超雌上时，文本变为天蓝色；当鼠标单击超链接不松开时，文本变为绿色；访问过超链接后，文本变为棕色。【提示】(I)链接伪类选择器需要按以下顺序声明才能生效：link,visited,hover,active.(2)实际开发中,a:link和a:hover选择器用得比较多。(3)CSS3允许伪类控制子元素的属性设置。【学生】聆听、记录、理解第二节课问题导入(

20、3min)【教师】提出以下问题除了链接伪类选择器之外，伪类选择器还包括哪种选择器？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知(37min)3.4.3伪类选择器2.结构伪类选择器【教师】讲解结构伪类选择器的基本语法与示例【课堂互动】十【教师】提问什么是结构伪类选择器?【学生】聆听、思考、回答结构伪类选择器主要根据HTML文档结构来选择元素，如选择某父元素下的第个子【教师】PPt展示表格”结构伪类元素表“(详见教材)，辅助并讲解结构伪类元素表(1)Eifirst-Child选择器和Ezlast-Child选择器。Ezfirst-Child选择器和EJast-ChiId选择器分别用

21、于选择某个父元素的子元素中符合条件的第一个和最后一个子元素。【示例3-4-12编辑HTML文档标签的内容，代码如下：公司介绍产品中心新闻动态va在HTML文档标签内写入CSS选择器：atext-decoration:none;color:#fff;.menuIiIisi-Styleznone:floacleft;margin-left:l()px;background-color:red;.(详见教材)【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示通过教师讲解、课堂互动、演示操作等方式，让学生了解结构伪类选择器、伪元素

22、选择器、属性选择器的语法及使用【教师】PPt展示“EfirsEhiId和Eilastchild应用效果”图片(详见教材)，并讲解效果:通过.menuIi选中菜单中的所有Ii元素并设置位置、大小和颜色等效果；通过.menuIizfirst-Child和.menuH:IaSlYhild分别选中菜单中的第一个和最后一个Ii元素并设置相应的圆角样式。(2)Emlh-child(n)j器。Emth-child(n)选择器用于选择某个父元素的一个或多个特定的子元素。该选择器的参数n可以是数字、公式或关键字。数字：可以是任何大于。的正整数。公式：格式为(an+b)。其中，a表示周期长度，n是计数器(从O开始

23、)，b是偏移值。关键字：包括Odd和even两个关键字。(详见教材)【示例3-4-13HTML文档CaSehml中输入以下代码：公司介绍产品中心.(详见教材)在HTML文档标签内写入CSS选择器：atext-decoration:none;color:#fff;.menuIiIist-Styleinone;floacleft;margin-left:!Opx;background-colorrred;(详见教材)【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“Emth-child(n)应用效果”图片(

24、详见教材)，并讲解效果：通过menuli:nh-child(2)选中菜单中的第二和第四个元素，并设置半径为10px的圆角。(3)Eionly-Child选择器。Eionly-Child选择器用于选择父元素中唯一的子元素(该父元素只有一个子元素)。【示例3-4-14】编辑HTML文档标签的内容，代码如下：这是一个段落。这是个标题.这是一个段落。在HTML文档VSIyIe标签内写入CSS选择器：p:OnIy-ChiIdbackground:#HDoO0;效果：第一行段落背景为红色。然为标签，但其不是标签的唯一子元素，所以没应用红色背景。(4)E:first-of-type选择器和E:IaSt-Of

25、-type选择器。这两个选择器用于匹配父元素下使用同种标签的第一个子元素和最后一个子元素。与EfrSt-Child、E:IaSt-ChiId不一样的是，这两个选择器强调的是同种标签的第一或最后一，也就是先找出所有的E元素再找到第一个或最后一个。【示例3-4-15编辑HTML文档VboUy标签的内容，代码如下：光头强熊大小猪佩奇熊二在HTML文档标签内写入CSS选择器：div:first-of-typefbnt-weighcbold;p:IaSt-Of-typefont-styIeiitalic:【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生

26、】聆听、上机操作、演示【教师】ppt展示“Efirst-of-type和EJastoftype应用效果”图片(详见教材)，并讲解效果：选择器divfrsi-oflype选中VSeCtion标签中的第一个子标签，控制熊大”文字为加粗；选择器MaSt-Of-IyPe选中标签中的最后一个子标签，控制小猪佩奇”文字为斜体。(5)E:nlh-of-lype(n)选择器和E:nth-lasl-of-lype(n)选择器。E:nth-of-type(n)用于匹配同种标签的第n个子元素。它的原理和E:first-of-type一样，如Efrst-of-IyPe等同于Emth-Of-Iype(I)eEmh-la

27、st-of-lype(n)用于匹配同种标签的倒数第n个子元素。它的原理和E:IaSl-Of-IyPe一样,如素lastoftype等同于:Mh-IaSbOf-type.(详见教材)【示例3-4-16编辑HTML文档标签的内容，代码如下：zeroonetwo在HTML文档标签内写入CSS选择器：.demoli:nth-child(2)background:yellow:.demolimth-of-type(2)colored;【教师】PPt展示“Enth-child(n)和Emth-of-type(n)选择器应用对比”图片(详见教材)，并讲解效果：one元素的背景颜色为黄色；lwo元素的文本颜色

28、为红色。【提示】(2).demoIimlh-OHype(2)是先把demo的所有类型为Ii的子元素找出来，然后选择其中的第2个，BPlitwoli(6)Ezonly-of-type选择器。E:Only-Of-type用于选择父元素中特定类型的唯一子元素(该父元素可有多个子元素)。示例3-4-17编辑HTML文档VbOdy标签的内容，代码如下：divp这是一个段落。pdivdivh3这是f段落.h3p这是一个段落。pdiv在HTML文档slyle标签内写入CSS选择器：p:only-of-typebackground:#ffDOOO:)效果：通过p：only-。JyPe指定属于父元素div的特定

29、类型的唯一子元素p,设置背景颜色为红色。(7):root选择器。:rool选择器用于匹配文档根元素。在HTML中，根元素始终是hlml元素。在网页设计中，如果使用：root设置了样式，将对所有页面元素都生效。示例3-4-18编辑HTML文档body标签的内容，代码如下：h1这是标题小1p第一个段落。ph3这是三级标题vh3在HTML文档style标签内写入CSS选择器：:rootfbnt-style:italic;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”:root应用效果”图片(详见教材)，并

30、讲解效果：100l选择了根元素，所以网页中所有的文字均被定义为斜体。(8)E:not选择器。在网页中使用Emot选择器可以排除网页中的某类元素。示例3-4-19编辑HTML文档VbOdy标签的内容，代码如下：h1这是标题h1P这是一个段落。pP这是另一个段落。pdiv这是di元素中的文本。div在HTML文档style标签内写入CSS选择器：pcolor:red;:not(p)(color:blue;效果：P选择器将p元素颜色设为红色；：not(p)选择器选中p元素之外的其他元素，将颜色设置为蓝色。（9）E:empty选择器。在CSS3中，Eiemply选择器用于选择不包含任何子元素或内容的元

31、素，即选择内容为空白的元素。【示例3-4-20编辑HTML文档body标签的内容，代码如下：248163264128256在HTML文档标签内写入CSS选择器：table,tr,tdborder:1pxsolidsilver;tdwidth:50px;height:50px;（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示E:empty选择器应用效果”图片（详见教材），并讲解效果：Idxmpty选中空元素,设置背景颜色为黄绿色。（IO）Eztarget选择器。Eaarget选择器可用于选取当

32、前活动的目标元素。只有用户单击页面中的超链接，并且跳转到target元素后，Exarget所设置的样式才会起作用。【示例3-4-21编辑HTML文档Vbo标签的内容，代码如下：粉色红色在HTML文档标签内写入CSS选择器：diVfloat:left;#pinkwidth:180px;height:!OOpx;background-color:pink）（洋见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“Etarget选择器应用效果”图片（详见教材），并讲解效果：#red:target,#pin

33、k:target设置了id选择器red和pink链接目标时的背景颜色为金色。【学生】聆听、记录、理解3.4.4伪元素选择器【教师】讲解伪元素选择器的分类与示例CSS中，伪元素选择器用于定义元素指定部分的样式，或者在元素的内容之前或之后插入内容。CSS中常用的伪元素选择器有before选择器和after选择器。1. E:bcfore选择器E:beforeconieni:文字URL();2. E:after选择器【教师】讲解E:after选择器Eiaftei选择器用于在被选元素的内容之后插入内容。其语法格式如下：Eiaftercontent:文字URL（）;【示例3-4-22编辑HTML文档标签的

34、内容，代码如下：床前明月光疑是地上霜举头望明月vppx氐头思故乡在HTML文档VSlyIe标签内写入CSS选择器：p:beibre,p:aftercontent:4tn;fbnt-size:30px;（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”:before和:after选择器应用效果”图片（详见教材），并讲解效果：使用选择器P：before和p:af（er分别在P元素的前后添加了引号并设置了引号的的格式。【学生】聆听、记录、理解3. 4.5属性选择器【教师】讲解属性选择器的分类与示例

35、【多媒体】组织学生扫码播放“属性选择器”视频（详见教材），让学生对这部分内容有一个大致地了解利用CSS的属性选择器可以根据标签的属性及属性值来选择元素。本节讲解其中的Eattr=valosEattr$=valkEattr=va选择器。1.EattrA=va属性选择器Egr=va门属性选择器用来选择E标签中有aur属性，且属性值以“val”开头的元素。需要注意的是此处的E可以省略，如果省略表示可以匹配任何满足条件的元素。【示例3-4-23编辑HTML文档标签的内容，代码如下：（详见教材）在HTML文档标签内写入CSS选择器：diVWidthJOOpx;height:l（X）x;e5z*(详见教材

36、)【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示,Eattr=val”属性选择器应用效果”图片(详见教材)，并讲解效果：使用divclassA=a选择了div标签中使用了class属性，且属性值以a开头的元素，即第1个和第3个元素，设置背景色为粉色。2. Eattr$=val”属性选择器Eattr$=va属性选择器用来选择E标签中有at【r属性，且属性值末尾匹配val的元素。同样，如果省略E表示可以匹配任何满足条件的元素。【示例3-4-24】修改【示例3-4-23中的divclassA=a选择器，代码

37、如下：divclassS=,abackground-color:Pink;效果：使用divclass$=a选择了div标签中使用了class属性,且属性值以a结尾的元素，即第1个和第5个元素，设置背景色为粉色。3. Eattr*=VaL属性选择器Eattr*=a门属性选择器用来选择E标签中有attr属性，其属性值包含val的元素。同样，如果省略E表示可以匹配任何满足条件的元素。【系列3425】修改【示例3-4-24】中的divclass$=a”选择器,代码如下：divclass*=,abackground-color:pink;效果：使用divclass*=a选择了div标签中使用了class

38、属性，且属性值包含a的元素，即第1、3、4、5个元素，设置背景色为粉色。【学生】聆听、记录、理解课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了CSS的五大选择器和选择器语法，包括基本选择器、关系选择器、伪类选择器、伪元素选择器、属性选择器等内容，希望通过本节课的讲解，大家可以掌握这些选择器的使用方法，提升操作技能。【学生】总结回顾知识点总结知识点，巩固学生对CSS选择器相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：在之前创建的CoUre.Hml文件中，设置网页所有a标签文本的样式为：去掉超链接的下划线，课程简介的文字颜色为id选择器green定义的“绿色”，其他文字颜色取决于标签选择器a,颜色为#666”,将未访问过的超链接设置为红色，且无下划线。【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课学生接触了新的知识，学习兴趣较高。不过知识点较多，全部消化还是匕限难。在教学中，教师要将学生作为教学的主体，时刻关注学生学习成绩、方法等各方面的变化，引导学生从被动学习转为自主学习和思考，从而提高学习的积极性和主动性。