《网站前端技术》（梁玲）621-7 教案 第11课 CSS与CSS3（二）_第1页
《网站前端技术》（梁玲）621-7 教案 第11课 CSS与CSS3（二）_第2页
《网站前端技术》（梁玲）621-7 教案 第11课 CSS与CSS3（二）_第3页
《网站前端技术》（梁玲）621-7 教案 第11课 CSS与CSS3（二）_第4页
《网站前端技术》（梁玲）621-7 教案 第11课 CSS与CSS3（二）_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第11课CSS与CSS3（二）课时2课时（90min）教学目标知识技能目标：熟悉CSS的五大选择器和选择器语法素质目标：掌握CSS的相关知识，加深学生对网页制作的进一步了解，提升学生的知识储备教学重难点教学重点：CSS基本选择器、关系选择器教学难点：CSS伪类选择器、伪元素选择器、属性选择器教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（38min）第2节课：→传授新知（37min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解CSS选择器的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题什么是CSS选择器？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（38min）3.4什么是CSS选择器【教师】讲解基本选择器、关系选择器和链接伪类选择器的相关内容CSS选择器用于指明样式对HTML文档中的哪些元素生效。在设计网页时，HTML文档中除个别标签使用内联样式外，都是通过不同的CSS选择器控制其样式的。【课堂互动】✈【教师】提问在CSS选择器有哪些？✈【学生】聆听、思考、回答CSS中有基本选择器、关系选择器、伪类选择器、伪元素选择器和属性选择器。3.4.1基本选择器✈【多媒体】组织学生扫码播放“基本选择器”视频（详见教材），让学生对这部分内容有一个大致地了解1.通配符选择器*{属性1:属性值1;属性2:属性值2;……}【示例3-4-1】在HTML文档<style>标签内写入CSS通配符选择器及声明：*{margin:0；padding:0；}效果：清除HTML文档中所有元素外边距和内边距。【提示】利用通配符选择器设置的样式对页面的所有标签生效，而不管标签是否需要该样式，反而降低了代码的执行速度，因此在实际开发中并不常用。即使使用，也放在文档的最开始，作为优先级较低的声明。2.标签选择器标签选择器是指用HTML标签名称作为选择器，以便为页面中某一类标签指定统一的CSS样式。其语法格式如下：标签名{属性1:属性值1;属性2:属性值2;……}【示例3-4-2】编辑HTML文档<body>标签的内容，代码如下：<ahref="">百度</a><ahref="">新浪</a><ahref="">hao123</a>在HTML文档的<style>标签内写入CSS标签选择器及声明：a{text-decoration:none;color:#666;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“设置<a>标签样式前的效果”、“设置<a>标签样式后的效果“图片（详见教材），并讲解效果：设置网页所有<a>标签文本的样式为：去掉超链接的下划线；文字颜色为“#666”（深灰色）。3.类选择器类选择器用于为设置了类名的HTML元素定义单独的样式。类选择器使用英文标点“.”进行表示，后面紧跟类名。其语法格式如下：.类名{属性1:属性值1;属性2:属性值2;……}其中，类名为HTML元素的class属性值，需要事先定义。class属性的语法格式为：class="value"“value”为类名。当需要为一个标签设置多个类时，使用空格分隔类名。【示例3-4-3】编辑HTML文档<body>标签的内容，代码如下：<p>我是楷体的文字</p><pclass="red">我是红色楷体的文字</p>……（详见教材）在HTML文档<style>标签内写入CSS选择器和声明：p{font-family:'楷体';}.red{color:red;}.font30{font-size:30px;}【教师】ppt展示“类选择器应用效果”图片（详见教材），并讲解效果：第一个段落<p>标签内容为楷体，颜色为默认的黑色；第二个段落<p>、二级标题<h2>标签内容均为红色；第三个段落不仅为红色，而且字号为30px。【提示】（1）上述示例中，通过标签选择器为所有段落标签<p>设置了楷体字体；为第二个段落<p>和二级标题<h2>标签定义了类名“red”，通过该类选择器将文字设置为红色；为第三个段落<p>标签同时定义了“red”和“font300”两个类名，设置了多个样式。（2）类名的第一个字符不能使用数字，并且类名严格区分大小写，一般习惯小写。4.id选择器id选择器用于为设置了id名的HTML元素定义单独的样式。id选择器使用“#”表示，后面紧跟id名。其语法格式如下：#id名{属性1:属性值1;属性2:属性值2;……}id名为HTML元素的id属性值，大多数HTML元素都可以定义id属性。与class属性不同的是，HTML元素的id属性值是唯一的，只能对应文档中的某个具体元素。【示例3-4-4】编辑HTML文档<body>标签的内容，代码如下：<ahref=""id="green">百度</a><ahref="">新浪</a><ahref="">hao123</a>在HTML文档<style>标签内写入CSS选择器和声明：a{text-decoration:none; color:#666;}#green{color:green;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“id选择器应用效果”图片（详见教材），并讲解效果：“百度”文字颜色为id选择器“green”定义的“绿色”，其他文字颜色取决于标签选择器a，颜色为“#666”。【提示】（1）同一个id属性值不能应用于多个HTML标签。否则，虽然设置的样式可以显示，但是在后期用JavaScript等语言调用id属性指定元素时会出错。（2）同一个HTML标签不能使用多个id属性值。3.4.2关系选择器✈【多媒体】组织学生扫码播放“关系选择器”视频（详见教材），让学生对这部分内容有一个大致地了解关系选择器也称复合选择器、派生选择器，是建立在基本选择器之上，由两个或多个基本选择器通过不同的方式组合而成的。利用关系选择器可以更准确、更高效地选择目标元素。1.后代选择器后代选择器又称为包含选择器，可以选择HTML父元素里面的子元素。其写法就是把外层元素写在前面，内层元素写在后面，中间用空格分隔。当元素发生嵌套时，内层元素就成为外层元素的后代。其语法格式如下：元素1元素2{样式声明}上述选择器用于定义元素1里面所有元素2的样式。【示例3-4-5】编辑HTML文档<body>标签的内容，代码如下：<div> <p>亲儿子为蓝色</p> <section><p>孙子也为蓝色</p></section></div><p>兄弟为红色</p>在HTML文档<style>标签内写入CSS选择器：p{color:red;}divp{color:blue;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“后代选择器应用效果”图片（详见教材），并讲解效果：<div>内的所有<p>元素为蓝色，其他<p>元素为红色，如图3-4-5所示。【提示】（1）元素1和元素2中间用空格隔开。（2）元素1是父级，元素2是子级，最终选择的是元素2。（3）元素2可以是第一层子元素，也可以是多层子元素，只要是元素1的后代即可。（4）元素1和元素2可以是任意基础选择器（类、标签、通配符、id）。2.子代选择器【课堂互动】✈【教师】提问什么是子代选择器？✈【学生】聆听、思考、回答子代选择器只能选择作为某元素的最近一级子元素，简单理解就是选“亲儿子”元素。其语法格式如下：元素1元素2{样式声明}上述选择器用于定义元素1里面所有直接子元素——元素2的样式。【示例3-4-6】编辑HTML文档<body>标签的内容，代码如下：<divid="father"> <p>我是father的子元素，我是蓝色的</p> <divid="son"> <p>我是father的孙子辈，我是红色的</p> </div></div><p>我是father的兄弟，我是红色的</p>在HTML文档<style>标签内写入CSS选择器：p{color:red;}#father>p{color:blue;}【教师】ppt展示“子代选择器应用效果”图片（详见教材），并讲解效果：只有#father包含的最近一层元素文字颜色为蓝色；其他段落文字为红色。【提示】（1）元素1和元素2中间用大于号隔开。（2）元素1是父级，元素2是子级，最终选择的是元素2。元素2必须是第一层子元素。3.标签指定式选择器【课堂互动】✈【教师】提问什么是标签指定式选择器？✈【学生】聆听、思考、回答标标签+类|id选择器{样式声明}【示例3-4-7】编辑HTML文档<body>标签的内容，代码如下：<div>普通文字是红色的</div><divclass="clr">div标签指定了clr样式，是紫色的</div><h3class="clr">h3指定了clr样式，是蓝色的。</h3>在HTML文档<style>标签内写入CSS选择器：div{color:red;}.clr{color:blue;}div.clr{color:purple;}【教师】ppt展示“标签指定式选择器应用效果”图片（详见教材），并讲解效果：只有第二行文字变为紫色。【提示】div.clr选择器仅应用于<divclass="clr">，而不会影响使用了.clr的其他标签的效果。4.并集选择器【课堂互动】✈【教师】提问什么是并集选择器？✈【学生】聆听、思考、回答并集选择器也叫群选择器，是由多个选择器通过逗号连接在一起的，任何形式的选择器都可以作为并集选择器的一部分。并集选择器允许同时为多个选择器应用同一种样式。在声明各种CSS选择器时，如果某些选择器的风格完全相同或部分相同，便可以利用并集选择器同时声明这些选择器。其语法格式如下：元素1,元素2{样式声明}【示例3-4-8】编辑HTML文档<body>标签的内容，代码如下：<h1>CSS并集选择器</h1><h2class="two">示例标题h2</h2><h3>示例标题h3</h3>……（详见教材）在HTML文档<style>标签内写入CSS选择器：h2,h3,p{color:purple; font-size:24px;}#one,h2.two,.two{ text-decoration:underline;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“并集选择器应用效果”图片（详见教材），并讲解效果：使用并集选择器控制<h2><h3><p>标签的文字颜色为紫色、字号为24px；使用并集选择器为“示例标题h2”“示例文本p2”“示例文本p3”添加了下划线。5.兄弟选择器兄弟选择器用来选择与某元素位于同一个父元素中，且位于该元素之后的同级元素。（1）临近兄弟选择器。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用临近兄弟选择器。临近兄弟选择器用“+”连接。其语法格式如下：元素1+元素2{样式声明}【示例3-4-9】编辑HTML文档<body>标签的内容，代码如下：<h2>动画世界</h2><h1>小猪佩奇</h1><h2>大头儿子</h2>……（详见教材）在HTML文档<style>标签内写入CSS选择器：h1+h2{font-style:italic;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“临近兄弟选择器应用效果”图片（详见教材），并讲解效果：“h1+h2”选择器选中紧邻<h1>标签的<h2>标签，即“大头儿子”，文字为斜体。（2）普通兄弟选择器。如果需要选择某一个指定元素后面的所有兄弟元素，而且二者有相同的父元素，可以使用普通兄弟选择器。普通兄弟选择器用“~”连接。其语法格式如下：元素1~元素2{样式声明}【示例3-4-10】在【示例3-4-9】中将“h1+h2”选择器修改为“h1~h2”，即：h1~h2{font-style:italic;}【教师】ppt展示“普通兄弟选择器应用效果”图片（详见教材），并讲解效果：<h1>之后所有的<h2>，即“大头儿子”和“熊二”文字样式均为斜体。【学生】聆听、记录、理解3.4.3伪类选择器伪类选择器简称伪类，用于选择元素的特殊状态，如鼠标指针悬停、按下等；或根据HTML文档结构选择元素。伪类选择器通常由标签、类或id名加“:”构成。1.链接伪类选择器为了提高用户体验，一般需要为超链接的不同状态设置不同的样式。在CSS样式中，使用链接伪类选择器就可以实现这一效果。超链接<a>的伪类有以下四种：（1）a:link：选择所有未被访问的超链接。（2）a:visited：选择所有已被访问的超链接。（3）a:hover：选择鼠标指针悬停在其上的超链接。（4）a:active：选择活动超链接，即鼠标按下但未弹起时的超链接。【示例3-4-11】编辑HTML文档<body>标签的内容，代码如下：<ahref="">天猫购物</a><ahref="">未来商城</a>在HTML文档<style>标签内写入CSS选择器：a:link{color:red; text-decoration:none;}a:visited{color:saddlebrown;}a:hover{color:skyblue;}a:active{color:green;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“链接伪类选择器应用效果”图片（详见教材），并讲解效果：【提示】（1）链接伪类选择器需要按以下顺序声明才能生效：link，visited，hover，active。（2）实际开发中，a:link和a:hover选择器用得比较多。（3）CSS3允许伪类控制子元素的属性设置。【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，使学生了解基本选择器、关系选择器和链接伪类选择器的语法及使用第二节课问题导入（3min）【教师】提出以下问题除了链接伪类选择器之外，伪类选择器还包括哪种选择器？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（37min）3.4.3伪类选择器2.结构伪类选择器【教师】讲解结构伪类选择器的基本语法与示例【课堂互动】✈【教师】提问什么是结构伪类选择器？✈【学生】聆听、思考、回答结构伪类选择器主要根据HTML文档结构来选择元素，如选择某父元素下的第n个子元素。【教师】ppt展示表格“结构伪类元素表”（详见教材），辅助并讲解结构伪类元素表（1）E:first-child选择器和E:last-child选择器。E:first-child选择器和E:last-child选择器分别用于选择某个父元素的子元素中符合条件的第一个和最后一个子元素。【示例3-4-12】编辑HTML文档<body>标签的内容，代码如下：<ulclass="menu"><li><ahref="#">公司介绍</a></li><li><ahref="#">产品中心</a></li><li><ahref="#">新闻动态</a></li></ul>在HTML文档<style>标签内写入CSS选择器：a{text-decoration:none;color:#fff;}.menuli{list-style:none; float:left; margin-left:10px; background-color:red;……（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“E:first-child和E:last-child应用效果”图片（详见教材），并讲解效果：通过.menuli选中菜单中的所有li元素并设置位置、大小和颜色等效果；通过.menuli:first-child和.menuli:last-child分别选中菜单中的第一个和最后一个li元素并设置相应的圆角样式。（2）E:nth-child(n)选择器。E:nth-child(n)选择器用于选择某个父元素的一个或多个特定的子元素。该选择器的参数n可以是数字、公式或关键字。①数字：可以是任何大于0的正整数。②公式：格式为(an+b)。其中，a表示周期长度，n是计数器（从0开始），b是偏移值。③关键字：包括odd和even两个关键字。……（详见教材）【示例3-4-13】HTML文档case.html中输入以下代码：<ulclass="menu"> <li><ahref="#">公司介绍</a></li> <li><ahref="#">产品中心</a></li>……（详见教材）在HTML文档<style>标签内写入CSS选择器：a{text-decoration:none;color:#fff;}.menuli{list-style:none; float:left; margin-left:10px; background-color:red;……（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“E:nth-child(n)应用效果”图片（详见教材），并讲解效果：通过.menuli:nth-child(2n)选中菜单中的第二和第四个元素，并设置半径为10px的圆角。（3）E:only-child选择器。E:only-child选择器用于选择父元素中唯一的子元素（该父元素只有一个子元素）。【示例3-4-14】编辑HTML文档<body>标签的内容，代码如下：<div> <p>这是一个段落。</p></div><div> <h3>这是一个标题。</h3> <p>这是一个段落。</p></div>在HTML文档<style>标签内写入CSS选择器：p:only-child{background:#ff0000;}效果：第一行段落背景为红色。【提示】上述示例中，选择器p:only-child选中<div>标签中的唯一一个<p>标签。第三行段落虽然为<p>标签，但其不是<div>标签的唯一子元素，所以没应用红色背景。（4）E:first-of-type选择器和E:last-of-type选择器。这两个选择器用于匹配父元素下使用同种标签的第一个子元素和最后一个子元素。与E:first-child、E:last-child不一样的是，这两个选择器强调的是同种标签的第一个或最后一个，也就是先找出所有的E元素再找到第一个或最后一个。【示例3-4-15】编辑HTML文档<body>标签的内容，代码如下：<section><p>光头强</p><div>熊大</div><p>小猪佩奇</p><div>熊二</div></section>在HTML文档<style>标签内写入CSS选择器：div:first-of-type{font-weight:bold;}p:last-of-type{font-style:italic;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“E:first-of-type和E:last-of-type应用效果”图片（详见教材），并讲解效果：选择器div:first-of-type选中<section>标签中的第一个<div>子标签，控制“熊大”文字为加粗；选择器p:last-of-type选中<section>标签中的最后一个<p>子标签，控制“小猪佩奇”文字为斜体。（5）E:nth-of-type(n)选择器和E:nth-last-of-type(n)选择器。E:nth-of-type(n)用于匹配同种标签的第n个子元素。它的原理和E:first-of-type一样，如E:first-of-type等同于E:nth-of-type(1)。E:nth-last-of-type(n)用于匹配同种标签的倒数第n个子元素。它的原理和E:last-of-type一样，如E:last-of-type等同于:nth-last-of-type(1)。……（详见教材）【示例3-4-16】编辑HTML文档<body>标签的内容，代码如下：<div> <ulclass="demo"> <p>zero</p> <li>one</li> <li>two</li> </ul></div>在HTML文档<style>标签内写入CSS选择器：.demoli:nth-child(2){background:yellow;}.demoli:nth-of-type(2){color:red;}【教师】ppt展示“E:nth-child(n)和E:nth-of-type(n)选择器应用对比”图片（详见教材），并讲解效果：<li>one</li>元素的背景颜色为黄色；<li>two</li>元素的文本颜色为红色。【提示】（1）.demoli:nth-child(2)是从.demo的所有子元素中找第二个子元素，且第二个子元素的类型必须是li，即<li>one</li>。（2）.demoli:nth-of-type(2)是先把.demo的所有类型为li的子元素找出来，然后选择其中的第2个，即<li>two</li>。（6）E:only-of-type选择器。E:only-of-type用于选择父元素中特定类型的唯一子元素（该父元素可有多个子元素）。【示例3-4-17】编辑HTML文档<body>标签的内容，代码如下：<div> <p>这是一个段落。</p></div><div> <h3>这是一个段落。</h3> <p>这是一个段落。</p></div>在HTML文档<style>标签内写入CSS选择器：p:only-of-type{background:#ff0000;}效果：通过p:only-of-type指定属于父元素<div>的特定类型的唯一子元素<p>，设置背景颜色为红色。（7）:root选择器。:root选择器用于匹配文档根元素。在HTML中，根元素始终是html元素。在网页设计中，如果使用:root设置了样式，将对所有页面元素都生效。【示例3-4-18】编辑HTML文档<body>标签的内容，代码如下：<h1>这是标题</h1><p>第一个段落。</p><h3>这是三级标题</h3>在HTML文档<style>标签内写入CSS选择器：:root{font-style:italic;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“:root应用效果”图片（详见教材），并讲解效果：:root选择了根元素，所以网页中所有的文字均被定义为斜体。（8）E:not选择器。在网页中使用E:not选择器可以排除网页中的某类元素。【示例3-4-19】编辑HTML文档<body>标签的内容，代码如下：<h1>这是标题</h1><p>这是一个段落。</p><p>这是另一个段落。</p><div>这是div元素中的文本。</div>在HTML文档<style>标签内写入CSS选择器：p{color:red;}:not(p){color:blue;}效果：p选择器将<p>元素颜色设为红色；:not(p)选择器选中<p>元素之外的其他元素，将颜色设置为蓝色。（9）E:empty选择器。在CSS3中，E:empty选择器用于选择不包含任何子元素或内容的元素，即选择内容为空白的元素。【示例3-4-20】编辑HTML文档<body>标签的内容，代码如下：<table> <tr><td>2</td><td>4</td><td>8</td></tr> <tr><td>16</td><td>32</td><td>64</td></tr> <tr><td>128</td><td>256</td><td></td></tr></table>在HTML文档<style>标签内写入CSS选择器：table,tr,td{border:1pxsolidsilver;}td{width:50px;height:50px;……（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“E:empty选择器应用效果”图片（详见教材），并讲解效果：td:empty选中空元素<td>，设置背景颜色为黄绿色。（10）E:target选择器。E:target选择器可用于选取当前活动的目标元素。只有用户单击页面中的超链接，并且跳转到target元素后，E:target所设置的样式才会起作用。【示例3-4-21】编辑HTML文档<body>标签的内容，代码如下：<ahref="#pink">粉色</a><ahref="#red">红色</a><br><divid="pink"></div><divid="red"></div>在HTML文档<style>标签内写入CSS选择器：div{float:left;}#pink{width:180px; height:100px; background-color:pink}……（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“E:target选择器应用效果”图片（详见教材），并讲解效果：#red:target,#pink:target设置了id选择器red和pink链接目标时的背景颜色为金色。【学生】聆听、记录、理解3.4.4伪元素选择器【教师】讲解伪元素选择器的分类与示例CSS中，伪元素选择器用于定义元素指定部分的样式，或者在元素的内容之前或之后插入内容。CSS中常用的伪元素选择器有::before选择器和::after选择器。1.E::before选择器【教师】讲解E::before选择器E::before选择器用于在被选元素的内容之前插入内容。使用该选择器时，需使用content属性来指定要插入的内容。其语法格式如下：E::before{content:文字/URL(……);}2.E::after选择器【教师】讲解E::after选择器E::after选择器用于在被选元素的内容之后插入内容。其语法格式如下：E::after{content:文字/URL(……);}【示例3-4-22】编辑HTML文档<body>标签的内容，代码如下：<p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p>在HTML文档<style>标签内写入CSS选择器：p::before,p::after{content:"“";font-size:30px;……（详见教材）【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“::before和::after选择器应用效果”图片（详见教材），并讲解效果：使用选择器p::before和p::after分别在p元素的前后添加了引号并设置了引号的的格式。【学生】聆听、记录、理解3.4.5属性选择器【教师】讲解属性选择器的分类与示例✈【多媒体】组织学生扫码播放“属性选择器”视频（详见教材），让学生对这部分内容有一个大致地了解利用CSS的属性选择器可以根据标签的属性及属性值来选择元素。本节讲解其中的E[attr^="val"]、E[attr$="val"]、E[attr*="val"]选择器。1.E[attr^="val"]属性选择器E[attr^="val"]属性选择器用来选择E标签中有attr属性，且属性值以"val"开头的元素。需要注意的是此处的E可以省略，如果省略表示可以匹配任何满足条件的元素。【示例3-4-23】编辑HTML文档<body>标签的内容，代码如下：<divclass="a"></div><div></div><divclass

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论