Web前端开发HTML5 CSS3教案CSS选择器教案(1).doc

课程名称 WEB前端开发（1） 课次 9 任务、项目、课题名称 CSS选择器（1） 课时 2学时 教学内容 CSS选择器：标记选择器、类选择器、ID选择器 教学目标 掌握CSS选择器：标记选择器、类选择器、ID选择器 教学重点 CSS选择器：标记选择器、类选择器、ID选择器 教学难点 CSS选择器的使用方法 教学活动及主要环节 复习演示： 1.如何通过外链式进行样式设置？（操作演示） 导入新课： 什么是CSS选择器呢？ 新授： 一．CSS基本选择器 1.标记选择器 body,h1,h2,h6,p,ul,ol,dl,table,td,tr... 例如： h1{属性：值;属性：值;属性：值;属性：值;} h2{属性：值;属性：值;属性：值;属性：值;} p{属性：值;属性：值;属性：值;属性：值;} 2.类别选择器（类选择器） .class{属性：值;属性：值;} Class为选择器类别的名称（名称不能是中文，最好是英文单词或拼音） 例如： titleCSS类别选择器/title style type=text/css .title1{ background-color:#0CF; color:#fff;} .title2{ background-color:#9C0; color:#f00;} /style /head body p class=title1这是第一段的内容。/p p class=title2这是第二段的内容。/p /body /html 3.ID选择器(代表唯一) 例如： style type=text/css #one{ background-color:#0CF; color:#fff; width:200px; height:200px;} #two{ background-color:#9C0; color:#f00; width:200px; height:200px;} /style /head body div id=one这是第一个块的内容。/div div id=two这是第二个块的内容。/div /body /html 注意：CSS样式的优先规则：行内样式 ID样式 类别样式 标记样式 小结： 标记选择器 类选择器 ID选择器 作业： 课下巩固复习