《网站前端技术》教案第10课CSS与CSS3（一）.docx
课题第10课CSS与CSS3(一)课时2课时(90min)教学目标知识技能目标：熟悉CSS样式的基本语法和将CSS样式引入HTML文档的四种方式素质目标：掌握CSS的相关知识，加深学生对网页制作的进一步了解，提升学生的知识储备教学重难点教学重点：CSS样式语法教学难点：CSS样式的引用方法教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤（2min）一问题导入（8min）一传授新知（25min）一头脑风暴（IOmin）第2节课：问题导入（5min）一传授新知（25min）一上机操作（IOmin）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解CSS样式的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（8min）【教师】提出以下问题什么是CSS样式？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（25min）3.1.1什么是CSS样式【教师】讲解CSS样式的概念CSS是指层叠样式表（CascadingStyleSheets）,主要用于定义如何显示HTML元素,包括设置HTML页面中文本内容的格式（字体、大小、对齐方式等）、图形图像的外形（宽高、边框、边距等）及版面布局等。CSS实现了网页结构（HTML）与样式（CSS）相分离，不仅使网页外观和布局设置更加灵活、高效，而且使网页外观更加多彩。【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，使学生了解CSS样式及其语法的相关内容3.1.2CSS样式的发展【教师】讲解CSS样式的发展历程【课堂互动】+【教师】提问你知道CSS样式经历了哪些发展阶段吗？*【学生】聆听、思考、回答随着CSS的广泛应用，CSS技术也越来越成熟。CSS的发展经历了3个不同的标准，BPCSSlsCSS2和CSS3.1. CSSlCSSl是CSS的第一个标准，发布于1996年12月，包含了字体、颜色与背景、文本、盒子等相关属性，用于定义HTML元素的一些样式。此外，还包含了ID选择器、类选择器和派生选择器，用于定义希望应用样式的HTML元素。2. CSS2CSS2于1998年5月正式发布。CSS2是基于CSSI开发的，其包含了CSSl的所有功能，添加了一些高级属性，如浮动和定位等；还添加了一些高级选择器，如子选择器和相邻选择器等。此外，CSS2还支持多媒体样式表，使得网页设计者能够根据不同的输出设备为网页文档制定不同的表现形式。3. CSS3CSS3目前仍在继续开发，各主流浏览器已支持其中的绝大部分特性。CSS3除增加了更多的选择器和属性外，其最大的特点是语言模块化,其中重要的模块包括盒子模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面等。模块化的开发有助于提高代码重用率和减小最终文件的大小，以及提高开发效率和便于代码维护等。【学生】聆听、记录、理解3.1.1 CSS样式基本语法【教师】讲解CSS样式的基本语法÷【多媒体】组织学生扫码播放"CSS样式基本语法”视频（详见教材），让学生对这部分内容有一个大致地了解CSS样式由两个主要的部分构成：选择器、一条或多条声明。设置CSS样式的具体语法规则如下：选择器属性1：属性值1：属性2:属性值2:在上面的规则中,选择器用于选择需要设置样式的HTML元素；（内部是一条或者多条声明，每条声明由一个属性和属性值组成，以键值对的形式出现。多条声明之间用英文分号"；"分隔，属性和属性值之间用英文冒号"："分隔。【教师】PPt展示图片"CSS样式的基本结构示例”（详见教材），辅助并讲解CSS样式的基本结构示例P是CSS中的选择器名称，它指向要设置样式的HTML元素段落标签<P>.font-weight是属性名称，bold是属性值，表示把段落文字设置为加粗。*font-size也是属性名称，30px是属性值，表示把段落文字的字号设置为30px.【提示】(1)CSS样式中的选择器严格区分大小写，声明不需要区分大小写，一般习惯小写。(2)CSS样式中的属性值如果由多个单词组成且中间包含空格，则必须为该属性值加上英文的引号Z(3)CSS样式中的空格不被浏览器解析，但是属性值的数字和单位之间不允许出现空格。【学生】聆听、记录、理解3.2.2 CSS【教师】讲解CSS注释的相关内容为提高代码的可读性，可以使用"/*注释语句*/"对CSS代码进行注释，注释文本不会显示在浏览器窗口中。【课堂互动】+【教师】提问在CSS中，多行注释如何表示？中【学生】聆听、思考、回答在CSS中，无论多行注释还是单行注释，均被"*"m*h包括。【示例3-2-1编辑HTML文档body标签的内容，代码如下：divCSS注释vdiv在style标签内写入以下CSS代码：divColo亡#B91720;width:800px;*heighc300px;background:red;*/)【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进彳王寅示,演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面文本hCSS注释”，只应用了文本颜色(color:#B91720)属性和宽度属性(Width:80OPX),没有应用高度属性(height:300px)和背景颜色属性(background:red)。头脑风暴(10 min)【学生】聆听、记录、理解【教师】根据头脑风暴主题，组织学生分组开展讨论(I)CSSkCSS2、CSS3有什么区别？【学生】思考、讨论通过头脑风暴的 形式，活跃课堂气 氛，引发学生思考, 培养学生的创新能 力和团队精神(2)CSS注释与PyIhOn、Java等语言的注释有何异同？问题导入(5min)【教师】提出以下问题CSS样式是如何引用的？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知(25min)3.3 CSS样式的引用方法【教师】讲解CSS样式引用方法的具体内容÷【多媒体】组织学生扫码播放"CSS样式的引用方法“视频(详见教材)，让学生对这部分内容有一个大致地了解要利用CSS样式控制HTML元素的显示,达到分离网页内容和样式代码的目的，需要在HTML文档中引用CSS样式。在HTML文档中引用CSS样式有4种方式：内联样式(也称为行内样式)、内部样式、引入外部样式文件和导入外部样式文件。33.1 内联样式内联样式用于设置当前HTML元素的样式，只可应用一次。使用内联样式时，需要在相关HTML标签内使用style属性。style属性值可以包含任何CSS声明。【示例3-3-1编辑HTML文档<body>标签的内容，代码如下：<pstyle="width:10OPx;heighl:40px;background:blue;Cok)r:#FFF;”>我的段落<>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“内联样式应用效果”图片(详见教材)，并讲解效果：设置当前段落的宽度为100px、高度为40PX,背景颜色为blue,文本颜色为白色。【提示】(I)属性和属性值之间用英文标点冒号"："隔开；多对属性之间用英文标点分号"；"隔开。(2)内联样式只能设置当前标签样式，书写烦琐，没有实现网页结构与表现的分离，所以不推荐大量使用。3.3.2内音解式【课堂互动】十【教师】提问什么是内部样式？十【学生】聆听、思考、回答通过教师讲解、课堂互动、演示操作等方式，让学生了解CSS样式的引用方法-,一内部样式也称为内嵌式，是指WCSS样式集中写到HTML文档的<slyle></SlyIe>标签之间。内部样式可以放置在HTML文档的任意位置，但为了结构清晰，一般放在<head><head>标签内部。其语法格式如下：<head><styletype="textcss,>选择器属性1：属性值1；属性2:属性值2;.<style><head>【示例3-3-2在HTML文档中输入以下代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>内嵌习<title><styletype=',textcss">p(wid(h:I50px;height:40px:(详见教材)在以上示例中，<style><style>标签之间的行(7至12行)为嵌入的CSS样式代码。【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“内吾解式应用效果”图片(详见教材)，并讲解效果：网页文档中<p>段落标签的宽度为150px、高度为40px,背景颜色为黑色，文字颜色为白色。【提示】(1)内部样式可方便地控制当前整个页面中元素的样式.(2)内部样式代码结构清晰，但是并没有真正实现网页结构与样式完全分离。【学生】聆听、记录、理解3.3.3 引入外部样式文件【课堂互动】【教师】提问如何引入外部样式文件？十【学生】聆听、思考、回答引入外部样式文件是指将CSS样式表写入一个或者多个CSS文件中。CSS文件的扩展名为"css",通过Vlink>标签可将CSS文件链接至IHTML文件中，从而使得HTML文件中的元素被CSS文件中的选择器及其样式有效控制。<link>标签的语法格式如下：<head><linkrel="stylesheet"type=',textcss"href="css文件的路径”/><head>link标签需要放在<head><head>中，并且指定三个属性：(1)href：定义所链接外部样式文件的URL,可以是相对路径或绝对路径。(2)type淀义所链接文件的类型，属性值"texl/css”表示链接的外部文件为CSS样式文件.(3)rd：定义当前文件与被链接文件之间的关系,属性值"SiyIesheeT'表示被链接的文件是一个样式文件。【示例3-3-3】HTML文档case.html中输入以下代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document<title><linkrel="stylesheet"type=*'textcss"href=',cssex3O3O3.css">(详见教材)相关CSS文档ex3O3O3.css中的代码如下：p(width:300px;heighc5Opx;background:green:color:yellow;)【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示”引入外部样式文件效果”图片(详见教材)，并讲解效果：网页文档中<p>段落标签的宽度为300px、高度为50PX,背景颜色为绿色，文本颜色为黄色。【提示】(1)引入外部样式文件彻底实现了网页结构与表现的分离。(2)同一个外部样式文件可以被多个HTML文档引用，如此T,只需要改变TCSS文件样式表，就可以改变多个HTML文档相关元素的样式。(3)同一个HTML文档也可以引用多个外部样式文件。3.3.4 导入外部样式文件【课堂互动】【教师】提问导入外部样式文件与引入外部样式文件的操作一样吗?十【学生】聆听、思考、回答导入外部样式文件与引入外部样式文件基本相同,都是创建一个单独的CSS样式文件，然后导入到HTML文档中，但在语法和运作方式上有所区别。导入外部样式是在<style>标签内，使用import导入一个外部CSS文件。其语法格式如下：<styletype="textcss,>importurl(css文件的路径);或者import"css文件的路径”：<style>L在该语法结构中，<style>标签内可以书写其他CSS内部样式，但是import必须位于其他样式之前.如果将【示例3-3-3】代码中的斜体部分替换为以下代码，效果相同。<styletype="textcss">importurl(cssex3O3O3.css);<style>【学生】聆听、记录、理解上机操作(10min)【教师】组织学生分组讨论，上机完成以下任务在之前创建的CoUrSe.html文件的<slyle>标签中写入CSS代码，将文本颜色进行改变，在HTML标签内使用style属性，将标题文本颜色修改为白色，背景修改为蓝色。【学生】讨论、上机操作通过上机操作巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了CSS样式的发展、语法与引用方法等内容，希望通过本节课的讲解，大家可以对CSS样式有个初步的认识与了解，掌握CSS样式的基础知识，从而为后面的学习做好准备。【学生】总结回顾知识点总结知识点，巩固学生对CSS样式的语法、引用方法等相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题团队作业：围绕第一节课制定的主题项目，使用本节课所学的CSS样式与属性进行设计，并形成文档上传至APP【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力教学反思本节课中学生能够在互动环节深入沟通，效果不错。教学中，教师要多与学生进行深入的沟通和交流，引导学生在探讨中发现、认识自身学习中存在的问题并及时纠正，从而掌握科学有效的学习方法，提高学习质量和效率。
