第8次课 CSS初接触（一）（教案）《电子商务网页设计与制作》（电子工业出版社）

授课章节及主题 CSS初接触（一） 课次 8 教学 目标 知识目标 1. 掌握什么是CSS 2. 掌握CSS语法结构 3. 掌握CSS选择器的分类与区别。 能力目标 1. 能够初步掌握CSS的基本概念与语法； 2. 能够掌握CSS简单的使用方法。 素养目标 1. 培养学生清晰有序的逻辑思维； 2. 培养学生数据分析与总结的意识； 3. 培养学生系统分析与解决问题的能力。 学情 分析 知识基础 学生已经具备了一定的计算机操作能力和Photoshop、Dreamweaver软件的基本操作技能，对HTML标记语言有一些基本的了解。 学生特点 1.学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难。 2．前续内容的知识绝大部分同学掌握较好，少部分同学操作不太熟练。 3．解决复杂问题能力弱，缺乏知识迁移能力。 教学 重点 1. CSS的语法结构 2. CSS的选择符 3. CSS的继承与层叠特性 教学 难点 不同选择符的使用场合与语法区别。 教学 方法 讲授法 案例演示法 讨论法 实践法 线上线下混合式 教学资源与平台 教学平台 超星学习通https://www.xueyinonline.com/detail/221724252 参考书 1.《电子商务网页设计与制作》，电子工业出版社 2.《HTML5+CSS3网页设计与制作》，人民邮电出版社 参考网络资源 1.菜鸟教程：https://www.runoob.com/ 2.虎课网：https://huke88.com/ 教学过程设计 环节 教学内容 教师活动 学生活动 任务导入（2min） 通过第一单元的学习，小明已经基本认识源代码中的HTML元素了，并能够用HTML元素编写简单的网页了。但是小明很快就发现，网页中各元素的排列太难看了。为此，他特意去请教了网页设计老师，老师告诉他：“小明，你用CSS规则对网页各元素进行重新设置吧！” 小明听了老师的话，决定要好好地把CSS学好，争取做一个美美的网页效果出来！ 1.【任务导入】教师通过案例导入本次课的学习目标。 1.学生了解本次课学习的目标。 任务描述（3min） 本任务是利用“csslogo.jpg”与“bg.png”两张图片，添加文字信息，制作如图2-1-1所示的网页效果。 图2-1-1 CSS初接触网页效果 1.【任务描述】讲师引入与描述任务内容与效果。 1.学生了解本次课要完成的任务。 知识准备 （35min） （一）什么是CSS CSS（Cascading Style Sheet，层叠样式表）是一组用来控制网页外观的规则。它是一种不需要经过编译，直接由浏览器执行的标记语言。通过使用CSS样式控制页面各元素的属性显示，可将网页的内容与表现形式进行分离。 （X）HTML与CSS的关系就是“内容”与“形式”的关系，由（X）HTML确定网页的内容，而通过CSS来决定网页的表现形式。 （二）CSS语法结构 CSS语言由两部分构成，选择符（selector）与一条或者多条声明，其中声明由一个属性（property）和一个属性值（value）组成。 基本格式如下： 选择符{ 属性名：属性值； } 例如，将网页中字体设置为黑体，字体大小为20像素，其代码如下： body { font-size:20px; font-family:黑体; } 在这个例子中，body是选择符，font-size和font-family是属性，20px和黑体是属性值。如图2-1-2所示。 图2-1-2 CSS语法结构 （三）CSS选择符 选择符（selector）是CSS中非常重要的概念，所有HTML语言中标签样式都是通过不同的CSS选择符进行控制的，用户只需要通过选择器对不同的HTML标签进行选择，并赋予各种样式声明，即可实现各种效果。 CSS选择符分为基本选择符与复合选择符，基本选择符有通配选择符、标签选择符、类选择符与ID选择符，复合选择符有交集选择符、并集选择符与后代选择符。 （1） 通配选择符 （2） 标签选择符 （3） ID选择符 （4） 类选择符 类选择符是以句点“.”开头，这个句号用来标识一个类选择符，类名可以随便命名，但最好根据元素的用途来定义一个有意义的名称，属性和值也必须符号CSS规范，如图2-1-7所示。 图2-1-7 类选择符 注意： ID选择符与类选择符最大的区别在于，ID选择符定义的CSS规则，仅作用于一个元素，而类选择符定义的CSS规则，可以同时作用于多个元素。 （5） 交集选择符 交集选择符是由两个选择符直接连接而成的，其结果是选中二者各自元素范围的交集。其中第一个必须是标签选择符，第二个必须是类选择符或者ID选择符。这两个选择符中间不能有空格，必须连续书写。图2-1-9是标签类选择符，图2-1-10是标签ID选择符，是交集复合选择符的两种形式。 图2-1-9 标签类选择符 以上代码是定义名为left的段落样式为：左浮动，字体大小12像素。 图2-1-10 标签ID选择符 以上代码是定义名为one的DIV样式为：左浮动，字体大小12像素。 （6） 并集选择符 并集选择符也叫群组选择符，当需要对一组不同的选择符进行相同样式的定义时，并集选择符就派上了用场。交集选择符是同时选中各个基本选择符的范围。任何形式的选择符（包括标签选择符、类选择符、ID选择符等）都可以作为并集选择符的一部分。 并集选择符是多个选择符通过逗号进行分隔的。比如，若要将标题1、标题2、标题3、标题4、标题5、标题6、段落、类选择符.left、ID选择符#one等设置成相同的样式：蓝色，字体18像素，CSS规则形式如下： h1, h2, h3, h4, h5, h6, .left, #one, p { color: blue; font-size: 18px; } （7） 后代选择符 后代选择符也称之为包含选择符，是一种CSS选择符嵌套的方式。后代选择符的写法就是将外层的标签（可以是标签选择符、类选择符、ID选择符）写在前面，内层的标签（可以是标签选择符、类选择符、ID选择符）写在后面，之间用空格分隔。当发生嵌套时，内层的标签就成为外层标签的后代。 例如想要定义p元素中span元素颜色为红色时，就可以使用后代选择符进行相应的设置。形式如下： p span { color:red； } 以下代码都是后代选择符的正确形式： p .left { colorblue； } .left p { colorblue； } p #left { colorblue； } #left p { colorblue； } （8） CSS的继承特性 CSS继承指的是子标签会继承父标签的所有样式风格，并可以在父标签样式风格的基础上再加以修改，产生新的样式，而子标签的样式风格完全不会影响父标签。 <p>CSS继承指的是子标签会继承父标签的所有样式风格，并可以在<span>父标签样式风格</span>的基础上再加以修改，产生新的样式，而子标签的样式风格完全不会影响父标签。</p> 以上HTML代码中，<p></p>是父标签，<span></span>是子标签，<span></span>会继承<p></p>标签所有的样式风格，<span></span>也可以有新的样式，不会影响到<p></p>。 （9） CSS的层叠特性 当多个选择符用在一个HTML元素上时，各个优先级规则可以表述为： 行内样式（Style=””）> ID选择符>类选择符>标签选择符 1.【知识讲授】教师讲解CSS的定义、CSS语法结构、CSS的选择符等知识点。 2.【课堂讨论】1：什么是CSS？CSS语法结构是什么样的？ 3.【课堂讨论】2：ID选择符与类选择符的区别？ 1.听取教师讲解知识点； 2.积极参与课堂活动。 知识检测（10min） 1、先选人再抢答：选择符名是以“#”开头的是什么选择器？（#） 2、先选人再抢答：类选择符的名称是以什么开头？（.） 3、先选人再抢答：类选择符和ID选择符的区别是什么呢？（ID选择符定义的CSS规则仅作用于一个元素，而类选择符定义的CSS规则可以同时作用于多个元素） 4、先选人再抢答：下图的CSS选择符是是哪种类型？（并集选择符） 5、先选人再抢答：下图交集选择符表示正确的是（） 6、先选人再抢答：下图后代选择符表示正确的是（ABCD） 1.【发布任务】教师在学习通发布活动任务。 2.【归纳总结】来回巡视，及时帮助学生解决问题。 完成知识检测。 技能训练 （35min） 请同学利用所学的CSS语法与选择符等知识，自主尝试完成 “启源网页”效果。 1.【实操演示】教师分析效果网页，并进行实操演示。 2.【发布任务】教师在学习通发布技能任务。 3.【实践指导】来回巡视，及时帮助学生解决问题。 1.观看实操演示，掌握CSS语法与选择符的应用。 2.完成技能训练题。 课堂小结（3min） 通过对本次课的学习，让学生掌握CSS基础知识，为以后课程的学习奠定一个基础。 作业布置 1.继续完成技能训练任务，并提交至学习通 2.预学下一次课的内容 教学反思 学科网（北京）股份有限公司 $$