《网站前端技术》教案第12课CSS与CSS3（三）.docx

《《网站前端技术》教案第12课CSS与CSS3（三）.docx》由会员分享，可在线阅读，更多相关《《网站前端技术》教案第12课CSS与CSS3（三）.docx（17页珍藏版）》请在优知文库上搜索。

1、.f.1.3出嗤三一；户课题第12课CSS与CSS3(三)课时2课时(90min)教学目标知识技能目标：(1)熟悉CSS的特性(2)熟悉CSS样式中的尺寸和颜色表达方式(3)熟悉CSS样式中的文本控制素质目标：掌握CSS的相关知识，加深学生对网页制作的进一步了解，提升学生的知识储备教学重难点教学重点：CSS的继承性、层叠性与优先级教学难点：CSS的尺寸与颜色、CSS字体样式和文本样式教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤(2min)一问题导入(5min)一传授新知(25min)一头脑风暴(13min)第2节课：

2、问题导入(3min)一传授新知(37min)一课堂小结(3min)一作业布置(2min)教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解CSS的相关特性。【学生】完成课前任务通过课前任务，使学生了解本次课的相关内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老帅要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入(5min)【教师】提出以下问题CSS三个非常重要的特性分别是什么？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，

3、引导学生主动思考，激发学生的学习兴趣传授新知(25min)3.5CSS的继承性、层叠性与优先级【教师】讲解CSS的继承性、层叠性与优先级等相关内容3.5.1 继承性【课堂互动】*【教师】提问通过教师讲解、课堂互动、演示操作等方式，使学生了解CSS的继承性、层叠性与优先级，以及CSS样式中的尺寸和颜色表什么是CSS的继承性？【学生】聆听、思考、回答CSS的继承性是指书写CSS样式时，子元素会自动继承为父元素设置的某些属性。【示例3-5-1】编辑HTML文档body标签的内容，代码如下：divp这是一个段落pvp这是一个段落pdivp这是一个p在HTML文档style标签内写入CSS选择器：div

4、coloured;效果：div标签的红色属性继承给子标签p,div标签之外的p标签文本为默认的黑色，没有变化。【示例3-5-2在【示例3-5-1的div选择器中追加边框相关声明，代码如下：border:2pxredsolid;效果：为div加了一个2px的红色实线边框，但没有继承给子元素p。【提示】(1)关于文字样式的属性都具有继承性，包括CoIor和以text-、Iine-、font-开头的属性。(2)所有关于盒子的、定位的、布局的属性都不能继承，但一般可以将子元素的相关属性的值设为inherit,来继承父元素的相关属性。3.5.2 层叠性使用相同的选择器为同一个元素设置相同的声明时,一个声

5、明会薄盖另一个有冲突的声明。层叠性主要解决声明冲突的问题，其原则是哪个声明书写在最后就执行哪个声明。【示例3-5-3编辑HTML文档body标签的内容，代码如下：Vdiv长江后浪推前浪，前浪推在沙滩上div在HTML文档style标签内写入CSS选择器：divcolorred;font-weight:700;divcolonblue:【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“层叠性效果”图片(详见教材)，并讲解效果：di标签的文本颜色属性设置层叠，第二次设置的蓝色覆盖第一次设置的红色；加粗样式只

6、设置了一次，不层叠。3.5.3 优先级在CSS样式中，当为同一元素设置多个声明时，会涉及声明的优先级问题，即优先执行哪些CSS声明。这主要通过各声明在CSS样式中的权重来实现.【课堂互动】+【教师】提问41 .选择器的优先级CSS为每种基础选择器都分配了一个权重，权重大小如下：内联样式id选择器类选择器（伪类选择器、属性选择器）标签选择器（伪元素选择器）通酉询选择器。【示例3-5-4编辑HTML文档标签的内容，代码如下：猜猜我什么颜色，红色？黄色？绿色？VPClaS3=conieni-class猜猜我什么颜色，红色？黄色？绿色？猜猜我什么颜色，红色？黄色？绿色？猜猜我什么颜色,红色?黄色？绿色

7、？在HTML文档标签内写入CSS选择器：#content-idcolored;.content-classcolor:yellow;pcolor:green;【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“选择器的优先级”图片（详见教材），并讲解效果：内联样式的优先级最高，所以第四行为紫色；id选择器的优先级高于类选择器，所以第三行为红色；类选择器的优先级高于标签选择器，所以第二行为黄色；标签选择器P控制第一行，颜色为绿色。2 .!important权重最大【教师】讲解!important权重最大CS

8、S样式属性中有!impOrtant”标识的优先级最高。【示例3S5】编辑HTML文档标签的内容，代码如下：猜猜我什么颜色，红色？黄色？绿色？在HTML文档VSIyIe标签内写入CSS选择器：#content-idcolor:red;.content-classcolor:yellow;divColorrgreen!important;【教师】PPt展示!important的优先级”图片（详见教材），并讲解效果：虽然标签选择器的优先级低于类选择器和id选择器，但因为在标签选择器div中有!imponanl标识代码，所以最终执行该选择器中的属性设置，文本颜色为绿色。3 .复合选择器的权重叠加对于由

9、多个基础选择器构成的复合选择器（并集选择器除外），其权重值可表示为，力，c.其中，,。，C分别为复合选择器中id选择器、类选择器（或同级选择器）和标签选择器（或同级选择器）出现的次数。无论b有多大，只要大于0的权重都小于a；以此类推。例如，有两个选择器，一个选择器的权重为O=I,=0fC=O,另夕1个选择器的权重为eO=15,C=U,则前者的权重更大。【示例3-5-6编辑HTML文档标签的内容，代码如下：试问这行字体是什么颜色的?在HTML文档标签内写入CSS选择器：#father#sonCok)r:blue;#fatherp.c2(color:black;div.clp.c2color:re

10、d;#fathercolor:green!important;效果：最终文字为蓝色。其中，第I个蟒器的权重为2,0,0,第2个蝌器的权重为1,1,1,第3个选择器的权重为0,2,2,第4个选择器的权重为1,0,0,因此最终应用了第1个选择器设置的颜色。要注意的是，第4个选择器虽然应用了!important标识，但由于第1个僻器已为son子元素设置了属性，因此其并没有继承father父元素的属性【提示】开发者通常用自己惯用的方式控制样式，并不会过多进行权重计算。【学生】聆听、记录、理解3.6CSS的尺寸与颜色【教师】讲解CSS样式中尺寸和颜色表达方式3.6.1 CSS尺寸1 .绝对尺寸CSS样式

11、中的绝对尺寸主要有以下几种单位：(1)cm：厘米。(2)mm：毫米。(3)in：英寸,1in=96px=2.54cm=72pt(4)px：像素。(5)pl：点。(6)pc：派卡，1pc=12pt2 .相对尺寸CSS样式中的相对尺寸主要有以下几种表示方式：(1)em：相对于当前容器内的字体尺寸，可用nem表示(n表示倍数，如】，2,3.下同)。(2)ex：相对于当前字体的高度，可用nex表示。(3)Ch：相对于数字0的宽度，可用nch表示。(4)rem：相对于根元素的字体尺寸，可用nrem表示。(详见教材)【课堂互动】+【教师】提问CSS绝对尺寸和相对尺寸有什么异同点？【学生】聆听、思考、回答颜

12、色关键字即颜色英文名称，共有140种，如红色的颜色关键字为red.2.使用十六进制颜色十六进制颜色是以#开头的6位十六进制数。从开始到结尾，每两位十六进制依次代表红色、绿色、蓝色，最终显示的颜色是这3种颜色的混合色。在CSS样式中使用十六进制表达颜色时，通常其中的A-F写成大写。此外，当六位十六进制数全部相同时，可以简写为三位十六进制数，如/FFFFFF可简写为#FFF。3 .使用RGB颜色RGB颜色是用红、绿、蓝三色混合而成的颜色。其在CSS样式中的表达格式为：rgb(red,green,blue)其中的red、green、blue的值均可以是整数0255,分别表示红色、绿色、蓝色的强度。例

13、如,rgb(255,0,0)表示红色；rgb(238,130,238)表示紫色，rgb(0,0,255)表示蓝色。4,使用RGBA颜色RGBA颜色是CSS3新增的颜色表示方法。其在CSS样式中的表达格式为：rgba(red,green,bue,alpha)其中前三个参数同RGBealpha是介于完全透明0。和完全不透明1.0之间的数字。【示例3-6-1编辑HTML文档标签的内容，代码如下：在HTML文档VSIyle标签内写入CSS选择器：#boxwidth:300px;height:3(X)px;background-color:rgba(20,200,200);将CSS代码中的background-color属性改写为以下代码。background-color:rgba(20,200,200.0.3);【教师】组织学生分组上机完成上面的任务,并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“rgba属性设置透明度效果的前后对比”图片(详见教材)，并讲解效果：图片不透明，#box盒子为半透明。【学生】聆听、记录、理解5 .使用HSL颜色HSL颜色是用色相