Web前端技术项目式教程电子教案 第3章 使用DIV+CSS实现中国传统文化网站首页布局 任务三教案-1_第1页
Web前端技术项目式教程电子教案 第3章 使用DIV+CSS实现中国传统文化网站首页布局 任务三教案-1_第2页
Web前端技术项目式教程电子教案 第3章 使用DIV+CSS实现中国传统文化网站首页布局 任务三教案-1_第3页
Web前端技术项目式教程电子教案 第3章 使用DIV+CSS实现中国传统文化网站首页布局 任务三教案-1_第4页
全文预览已结束

下载本文档

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

文档简介

PAGE4PAGE第3章使用DIV+CSS实现中国传统文化网站首页布局课程名称网页设计项目名称CSS语法规则任务名称CSS语法规则课时2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标能力目标：1.掌握使用CSS选择器获取网页元素。2.掌握使用CSS的盒模型、区块、浮动、定位等设计网页布局。知识目标：1.熟悉CSS的基本语法规则。2.熟悉盒模型的基本原理。3.了解CSS的层叠和继承。素质目标：1.培养学生对中华优秀传统文化的深刻理解和认同。2.培养学生良好的职业道德，根据《中华人民共和国网络安全法》制作和发布网页信息。教学内容1.任务描述2.任务展示与实现（1）CSS基本语法规则（2）利用CSS语法规则美化网页元素（3）利用CSS层叠和继承特性优化CSS代码（3）学生动手操作3.教师讲解本任务涉及的知识点教学重点1.CSS基本语法规则2.利用CSS语法规则美化网页元素教学难点1.CSS层叠和继承特性2.利用CSS语法规则美化网页元素教学准备1.装有VScode的电脑2.教学课件PPT3.教材：《Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap）》作业设计1．使用CSS规则美化广东云景旅游公司首页页面元素教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】分别介绍CSS规则基本语法、CSS选择器的种类及语法，CSS规则的使用方式，以及如何运用CSS规则修改网页元素的样式。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习知识的要求和目标。CSS规则基本语法CSS选择器种类CSS选择器分为基本选择器和高级选择器。（1）基本选择器基本选择器分为标签选择器、类选择器和ID选择器。=1\*GB3①标签选择器：是指以网页中已有的HTML标签名作为名称的选择器，该样式定义后文档中所有此类标签都会自动应用该样式。=2\*GB3②类选择器：在进行HTML结构设计时，可根据需要为多个HTML标签使用class自定义名称，类名以“.”号开头。=3\*GB3③ID选择器：id选择器可以为标有特定id的HTML元素指定特定的样式。（2）高级选择器高级选择器分为子选择器、后代选择器、属性选择器、通用选择器、伪类和伪元素选择器、分组选择器。=1\*GB3①子选择器。语法：选择器1>选择器2>….>选择器n{}。 =2\*GB3②后代选择器。语法：选择器1选择器2….选择器n{}。=3\*GB3③属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。 =4\*GB3④通用选择器。语法：*{}。=5\*GB3⑤伪类和伪元素选择器。=6\*GB3⑥分组选择器。 语法：选择器1,选择器2,…..选择器n{}，多个选择器之间用逗号分隔。CSS规则的应用方式在HTML文档中使用CSS的方法分为外部样式、内部样式和行内样式。（1）外部样式当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，开发者可以通过改变一个文件来改变整个站点的外观。每个页面均使用<link>标签链接到样式表。（2）内部样式当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表。（3）行内样式行内样式就是直接把CSS代码添加到HTML的标记中，即作为HTML标记的属性标记存在。由于要将内容和表现混杂在一起，行内样式会失去CSS的许多优势。尽量不要使用这种方法。四、CSS的层叠和继承（1）层叠两个或两个以上的CSS规则同时叠加在同一个元素上时，CSS样式会产生冲突。层叠特性可以简单地理解为“冲突”的解决方案。换句话说就是应该优先使用哪个样式。（2）继承 CSS继承指的是子标签会继承父标签的所有样式风格，并可以在父标签样式风格的基础上再加以修改，产生新的样式，而子标签的样式风格完全不影响父标签。同步训练：1.CSS基本选择器2.CSS高级选择器3.CSS选择器的应用方式4.CSS继承<styletype="text/css"> body{ font-family:"楷体";/*设置网页正文字体为＂楷体＂*/}p{ color:red; }</style><body> <p>CSS样式表<em>继承特性</em>的演示代码</p> <ul> <li>CSS选择器</li> <li>盒子模型</li> <li>浮动与定位</li> </ul></body>通过学习，学生能够掌握CSS规则的基本语法、以及如何使用CSS规则美化网页元素。本节课主要运用案例教学法，通过对CSS选择器的深入理解，掌握使用CSS规则美化网页元素的方法，深入探讨CSS规则的使用方法，通过实例的方

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论