《网站前端技术》教案第10课CSS与CSS3(一).docx

上传人:p** 文档编号:758421 上传时间:2024-02-26 格式:DOCX 页数:12 大小:226.95KB
下载 相关 举报
《网站前端技术》教案第10课CSS与CSS3(一).docx_第1页
第1页 / 共12页
《网站前端技术》教案第10课CSS与CSS3(一).docx_第2页
第2页 / 共12页
《网站前端技术》教案第10课CSS与CSS3(一).docx_第3页
第3页 / 共12页
《网站前端技术》教案第10课CSS与CSS3(一).docx_第4页
第4页 / 共12页
《网站前端技术》教案第10课CSS与CSS3(一).docx_第5页
第5页 / 共12页
《网站前端技术》教案第10课CSS与CSS3(一).docx_第6页
第6页 / 共12页
《网站前端技术》教案第10课CSS与CSS3(一).docx_第7页
第7页 / 共12页
《网站前端技术》教案第10课CSS与CSS3(一).docx_第8页
第8页 / 共12页
《网站前端技术》教案第10课CSS与CSS3(一).docx_第9页
第9页 / 共12页
《网站前端技术》教案第10课CSS与CSS3(一).docx_第10页
第10页 / 共12页
亲,该文档总共12页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述

《《网站前端技术》教案第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

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > IT计算机 > Web服务

copyright@ 2008-2023 1wenmi网站版权所有

经营许可证编号:宁ICP备2022001189号-1

本站为文档C2C交易模式,即用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。第壹文秘仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知第壹文秘网,我们立即给予删除!