日照职业技术学院RIZHAO

csshack  时间:2021-02-11  阅读:()

POLYTECHNIC《Web网站开发技术》教案1课题2-2CSS选择器课型理实一体化授课班级授课时数教学目标掌握CSS基础选择器,能够运用CSS选择器定义标记样式.
掌握CSS3中新增加的属性选择器,能够运用属性选择器为页面中的元素添加样式.

理解关系选择器的用法,能够准确判断元素与元素间的关系.
掌握常用的结构化伪类选择器,能够为相同名称的元素定义不同样式.
掌握伪元素选择器的使用,能够在页面中插入所需要的文字或图片内容.

掌握CSS伪类,会使用CSS伪类实现超链接特效.
教学重难点属性选择器、结构化伪类选择器、伪元素选择器、链接伪类.
学情分析教学效果教后记日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案2任务1:基础选择器了解选择器的概念掌握CSS基础选择器的使用方法区分基础选择器分组讨论对新课进行讲解前,先让学生分组讨论以下问题:如果把一个网页看成一个人的话,HTML5就相当于人的骨架,是结构;CSS相当于人的衣服,是表现.
那么如何使用CSS去修饰页面呢其实,给网页应用样式首先需要使用CSS中的选择器.
那么,CSS基础选择器主要有哪些又有哪些不同呢请小组代表对以上问题发表见解.
教师对上述问题进行解释:CSS基础选择器主要包括四种,具体如下:标记选择器.
标记选择器是指用HTML标记名称作为选择器.
用标记选择器定义的样式对页面中该类型的所有标记都有效.
类选择器.
类选择器使用".
"进行标识,后面紧跟类名.
其最大的优势是可以为元素对象定义单独或相同的样式.
id选择器.
id选择器使用"#"进行标识,后面紧跟id名.
元素的id值是唯一的,只能对应于文档中某一个具体的元素.
属性选择器.
属性选择器用于描述一组元素的样式,class选择器有别于id选择器,class可以在多个元素中使用各种各样的属性,给元素增加很多附加信息.
通配符选择器.
通配符选择器用"*"号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素.
知识点讲解讲解"CSS基础选择器"(1)、教师展示PPT对"CSS选择器"的概念及用法进行讲解.
(2)、教师分别对"标记选择器"、"类选择器"、"id选择器"、"属性选择器"及"通配符选择器"的基本语法格式进行详细讲解并通过代码进行演示.

(3)、教师对比"标记选择器"、"类选择器"、"id选择器"及"通配符选择器"的使用方法及应用效果,并指出其优缺点.
(4)、学生练习,教师巡视,对疑难问题进行解答.
阶段小结小结日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案3重点:CSS基础选择器.
易错点:注意区分标记选择器、类选择器、id选择器及通配符选择器.
答疑教师询问学生对于知识点还有什么不理解的地方.
针对学生不理解的知识点给与解释.
巩固练习巩固本课时知识点学完知识点后,教师带领学生对本课时所学知识点进行回顾.
以此使学生更熟练地掌握"CSS样式规则、引入CSS样式表、CSS基础选择器"等知识点.
通过"补充案例"加强学习教师分发测试题目及案例素材给学生,对于掌握较好的同学,可以通过补充案例对相关知识点进行巩固.
布置作业完成"补充案例",通过平台提交给教师,教师下节课进行点评.
预习【关系选择器】.
任务2关系选择器了解兄弟选择器区分临近兄弟选择器和普通兄弟选择器掌握兄弟选择器的使用方法分组讨论对新课进行讲解前,先让学生分组讨论以下问题:在CSS3中,兄弟选择器分为哪两种,分别为何含义呢请小组代表对以上问题发表见解.
教师对上述问题进行解释:兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种.
其中,临近兄弟选择器选择器使用加号"+"来链接前后两个选择器.
选择器中的两个元素有同一个父亲,而且第二个元素必须紧跟第一个元素.
普通兄弟选择器使用"~"来链接前后两个选择器.
选择器中的两个元素有同一个父亲,但第二个元素不必紧跟第一个元素.

知识点讲解讲解"子代选择器(>)"(1)、教师展示PPT对"子代选择器(>)"的书写格式进行讲解.
(2)、教师展示PPT对"子代选择器(>)"的用法进行讲解并通过代码进行演示.
(3)、学生练习,教师巡视,对疑难问题进行解答.
日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案4讲解"兄弟选择器(+、~)"(1)、教师展示PPT对"兄弟选择器(+、~)"的书写格式进行讲解.
(2)、教师展示PPT对"兄弟选择器(+、~)"的用法进行讲解并通过代码进行演示.
(3)、区分"临近兄弟选择器"和"普通兄弟选择器"的用法.
(4)、学生练习,教师巡视,对疑难问题进行解答.
阶段小结小结重点:兄弟选择器的用法.
易错点:注意区分临近兄弟选择器和普通兄弟选择器的书写方式及含义.

答疑教师询问学生对于知识点还有什么不理解的地方.
针对学生不理解的知识点给与解释.
巩固练习巩固本课时知识点学完知识点后,教师带领学生对本课时所学知识点进行回顾.
以此使学生更熟练地了解"子代选择器(>)、兄弟选择器(+、~)"等知识点.
通过"补充案例"加强学习教师分发测试题目及案例素材给学生,对于掌握较好的同学,可以通过补充案例对相关知识点进行巩固.
布置作业完成"补充案例",通过平台提交给教师,教师下节课进行点评.
预习4.
3节【结构化伪类选择器】.
任务3伪类选择器了解伪类选择器first-child和:last-child选择器、:nth-child(n)和:nth-last-child(n)选择器、:before选择器、:after选择器、注意区分:nth-child(n)和:nth-last-child(n)选择器与:nth-of-type(n)和:nth-last-of-type(n)选择器掌握伪类选择器的使用方法分组讨论对新课进行讲解前,先让学生分组讨论以下问题:图中的这种翻页效果相信大家都不陌生,标号"1"的背景颜色与其他的有所不同,在学习结构化伪类选择器之前,我们可以通过添加class属性的方法为"1"设置背景样式,但class属性本身没有语义,它完全是用来为CSS样式服务的,日照职业技术学院RIZHAOPOLYTECHNIC《Web网站开发技术》教案5属于多余属性.
因此,我们可以通过引入结构化伪类选择器来实现相同的效果.

CloudServer:$4/月KVM-2GB/50GB/5TB/三个数据中心

CloudServer是一家新的VPS主机商,成立了差不多9个月吧,提供基于KVM架构的VPS主机,支持Linux或者Windows操作系统,数据中心在美国纽约、洛杉矶和芝加哥机房,都是ColoCrossing的机器。目前商家在LEB提供了几款特价套餐,最低月付4美元(或者$23.88/年),购买更高级别套餐还能三个月费用使用6个月,等于前半年五折了。下面列出几款特别套餐配置信息。CPU:1cor...

Webhosting24:$1.48/月起,日本东京NTT直连/AMD Ryzen 高性能VPS/美国洛杉矶5950X平台大流量VPS/1Gbps端口/

Webhosting24宣布自7月1日起开始对日本机房的VPS进行NVMe和流量大升级,几乎是翻倍了硬盘和流量,价格依旧不变。目前来看,日本VPS国内过去走的是NTT直连,服务器托管机房应该是CDN77*(也就是datapacket.com),加上高性能平台(AMD Ryzen 9 3900X+NVMe),还是有相当大的性价比的。此外在6月30日,又新增了洛杉矶机房,CPU为AMD Ryzen 9...

raksmart:全新cloud云服务器系列测评,告诉你raksmart新产品效果好不好

2021年6月底,raksmart开发出来的新产品“cloud-云服务器”正式上线对外售卖,当前只有美国硅谷机房(或许以后会有其他数据中心加入)可供选择。或许你会问raksmart云服务器怎么样啊、raksm云服务器好不好、网络速度快不好之类的废话(不实测的话),本着主机测评趟雷、大家受益的原则,先开一个给大家测评一下!官方网站:https://www.raksmart.com云服务器的说明:底层...

csshack为你推荐
Anthemmy支持ipad支持ipadpublicationethics.org支持ipad支持ipad支持ipadphotoshop技术ps是一种什么技术??????tracerouteping命令和traceroute(tracert )在功能上的区别有哪些?win10关闭445端口win10怎么关闭445的最新相关信息
域名停靠 万网域名查询 解析域名 域名批量查询 域名抢注 火山主机 kdata 鲨鱼机 国外空间服务商 轻博客 免费名片模板 12u机柜尺寸 windows2003iso 京东商城双十一活动 元旦促销 135邮箱 免费吧 广州服务器 gtt 华为云盘 更多