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