《网站前端技术》（梁玲）621-7 教案 第10课 CSS与CSS3（一）_第1页
《网站前端技术》（梁玲）621-7 教案 第10课 CSS与CSS3（一）_第2页
《网站前端技术》（梁玲）621-7 教案 第10课 CSS与CSS3（一）_第3页
《网站前端技术》（梁玲）621-7 教案 第10课 CSS与CSS3（一）_第4页
《网站前端技术》（梁玲）621-7 教案 第10课 CSS与CSS3（一）_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第10课CSS与CSS3（一）课时2课时（90min）教学目标知识技能目标：熟悉CSS样式的基本语法和将CSS样式引入HTML文档的四种方式素质目标：掌握CSS的相关知识，加深学生对网页制作的进一步了解，提升学生的知识储备教学重难点教学重点：CSS样式语法教学难点：CSS样式的引用方法教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（25min）→头脑风暴（10min）第2节课：→传授新知（25min）→上机操作（10min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解CSS样式的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（8min）【教师】提出以下问题什么是CSS样式？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（25min）3.1.1什么是CSS样式【教师】讲解CSS样式的概念CSS是指层叠样式表（CascadingStyleSheets），主要用于定义如何显示HTML元素，包括设置HTML页面中文本内容的格式（字体、大小、对齐方式等）、图形图像的外形（宽高、边框、边距等）及版面布局等。CSS实现了网页结构（HTML）与样式（CSS）相分离，不仅使网页外观和布局设置更加灵活、高效，而且使网页外观更加多彩。【学生】聆听、记录、理解3.1.2CSS样式的发展【教师】讲解CSS样式的发展历程【课堂互动】✈【教师】提问你知道CSS样式经历了哪些发展阶段吗？✈【学生】聆听、思考、回答随着CSS的广泛应用，CSS技术也越来越成熟。CSS的发展经历了3个不同的标准，即CSS1、CSS2和CSS3。1.CSS1CSS1是CSS的第一个标准，发布于1996年12月，包含了字体、颜色与背景、文本、盒子等相关属性，用于定义HTML元素的一些样式。此外，还包含了ID选择器、类选择器和派生选择器，用于定义希望应用样式的HTML元素。2.CSS2CSS2于1998年5月正式发布。CSS2是基于CSS1开发的，其包含了CSS1的所有功能，添加了一些高级属性，如浮动和定位等；还添加了一些高级选择器，如子选择器和相邻选择器等。此外，CSS2还支持多媒体样式表，使得网页设计者能够根据不同的输出设备为网页文档制定不同的表现形式。3.CSS3CSS3目前仍在继续开发，各主流浏览器已支持其中的绝大部分特性。CSS3除增加了更多的选择器和属性外，其最大的特点是语言模块化，其中重要的模块包括盒子模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面等。模块化的开发有助于提高代码重用率和减小最终文件的大小，以及提高开发效率和便于代码维护等。【学生】聆听、记录、理解3.2.1CSS样式基本语法【教师】讲解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样式中的属性值如果由多个单词组成且中间包含空格，则必须为该属性值加上英文的引号""。（3）CSS样式中的空格不被浏览器解析，但是属性值的数字和单位之间不允许出现空格。【学生】聆听、记录、理解3.2.2CSS注释【教师】讲解CSS注释的相关内容为提高代码的可读性，可以使用“/*注释语句*/”对CSS代码进行注释，注释文本不会显示在浏览器窗口中。【课堂互动】✈【教师】提问在CSS中，多行注释如何表示？✈【学生】聆听、思考、回答在CSS中，无论多行注释还是单行注释，均被“/*”“*/”包括。【示例3-2-1】编辑HTML文档<body>标签的内容，代码如下：<div>CSS注释</div>在<style>标签内写入以下CSS代码：div{color:#B91720; width:800px; /*height:300px; background:red;*/}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：页面文本“CSS注释”，只应用了文本颜色（color:#B91720）属性和宽度属性（width:800px），没有应用高度属性（height:300px）和背景颜色属性（background:red）。【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，使学生了解CSS样式及其语法的相关内容头脑风暴（10min）【教师】根据头脑风暴主题，组织学生分组开展讨论（1）CSS1、CSS2、CSS3有什么区别？（2）CSS注释与Python、Java等语言的注释有何异同？【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入（5min）【教师】提出以下问题CSS样式是如何引用的？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（25min）3.3CSS样式的引用方法【教师】讲解CSS样式引用方法的具体内容✈【多媒体】组织学生扫码播放“CSS样式的引用方法”视频（详见教材），让学生对这部分内容有一个大致地了解要利用CSS样式控制HTML元素的显示，达到分离网页内容和样式代码的目的，需要在HTML文档中引用CSS样式。在HTML文档中引用CSS样式有4种方式：内联样式（也称为行内样式）、内部样式、引入外部样式文件和导入外部样式文件。3.3.1内联样式内联样式用于设置当前HTML元素的样式，只可应用一次。使用内联样式时，需要在相关HTML标签内使用style属性。style属性值可以包含任何CSS声明。【示例3-3-1】编辑HTML文档<body>标签的内容，代码如下：<pstyle="width:100px;height:40px;background:blue;color:#FFF;">我的段落</p>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“内联样式应用效果”图片（详见教材），并讲解效果：设置当前段落的宽度为100px、高度为40px，背景颜色为blue，文本颜色为白色。【提示】（1）属性和属性值之间用英文标点冒号“:”隔开；多对属性之间用英文标点分号“;”隔开。（2）内联样式只能设置当前标签样式，书写烦琐，没有实现网页结构与表现的分离，所以不推荐大量使用。3.3.2内部样式【课堂互动】✈【教师】提问什么是内部样式？✈【学生】聆听、思考、回答内部样式也称为内嵌式，是指将CSS样式集中写到HTML文档的<style></style>标签之间。内部样式可以放置在HTML文档的任意位置，但为了结构清晰，一般放在<head></head>标签内部。其语法格式如下：<head><styletype="text/css"> 选择器{属性1:属性值1;属性2:属性值2;……}</style></head>【示例3-3-2】在HTML文档中输入以下代码：<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"> <title>内嵌式练习</title> <styletype="text/css"> p{ width:150px; height:40px;……（详见教材）在以上示例中，<style></style>标签之间的行（7至12行）为嵌入的CSS样式代码。【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“内部样式应用效果”图片（详见教材），并讲解效果：网页文档中<p>段落标签的宽度为150px、高度为40px，背景颜色为黑色，文字颜色为白色。【提示】（1）内部样式可方便地控制当前整个页面中元素的样式。（2）内部样式代码结构清晰，但是并没有真正实现网页结构与样式完全分离。【学生】聆听、记录、理解3.3.3引入外部样式文件【课堂互动】✈【教师】提问如何引入外部样式文件？✈【学生】聆听、思考、回答引入外部样式文件是指将CSS样式表写入一个或者多个CSS文件中。CSS文件的扩展名为“.css”，通过<link>标签可将CSS文件链接到HTML文件中，从而使得HTML文件中的元素被CSS文件中的选择器及其样式有效控制。<link>标签的语法格式如下：<head> <linkrel="stylesheet"type="text/css"href="css文件的路径"/></head>link标签需要放在<head></head>中，并且指定三个属性：（1）href：定义所链接外部样式文件的URL，可以是相对路径或绝对路径。（2）type：定义所链接文件的类型，属性值“text/css”表示链接的外部文件为CSS样式文件。（3）rel：定义当前文件与被链接文件之间的关系，属性值“stylesheet”表示被链接的文件是一个样式文件。【示例3-3-3】HTML文档case.html中输入以下代码：<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> <linkrel="stylesheet"type="text/css"href="css/ex30303.css">……（详见教材）相关CSS文档ex30303.css中的代码如下：p{ width:300px; height:50px; background:green; color:yellow;}【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“引入外部样式文件效果”图片（详见教材），并讲解效果：网页文档中<p>段落标签的宽度为300px、高度为50px，背景颜色为绿色，文本颜色为黄色。【提示】（1）引入外部样式文件彻底实现了网页结构与表现的分离。（2）同一个外部样式文件可以被多个HTML文档引用，如此一来，只需要改变一个CSS文件样式表，就可以改变多个HTML文档相关元素的样式。（3）同一个HTML文档也可以引用多个外部样式文件。3.3.4导入外部样式文件【课堂互动】✈【教师】提问导入外部样式文件与引入外部样式文件的操作一样吗？✈【学生】聆听、思考、回答导入外部样式文件与引入外部样式文件基本相同，都是创建一个单独的CSS样式文件，然后导入到HTML文档中，但在语法和运作方式上有所区别。导入外部样式是在<style>标签内，使用@import导入一个外部CSS文件。其语法格式如下：<styletype="text/css"> @importurl(css文件的路径);或者@import"css文件的路径";</style>在该语法结构中，<style>标签内可以书写其他CSS内部样式，但是@import必须位于其他样式之前。如果将【示例3-3-3】代码中的斜体部分替换为以下代码，效果相同。<styletype="text/css"> @importurl(css/ex30303.css);</style>【学生】聆听、记录、理解通过教师讲解、课堂互动、演示操作等方式，让学生了解CSS样式的引用方法上机操作（10min）【教师】组织学生分组讨论，上机完成以下任务在之前创建的course.html文件的<style>标签中写入CSS代码，将文本颜色进行改变，在HTML标签内使用style属性，将标题文本颜色修改为白色，背景修改为蓝色。讨论、上机操作通过上机操作巩固所学知识课堂小结

（3min）【教师】简要总结本节课的要点本节课主要学习了CSS样式的发展、语法与引用方法等内容，希望通过本节课的讲解，大家可以对CSS样式有个初步的认识与了解，掌握CSS样式

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论