任务3美化简单学院网站电子教案 Web前端开发案例教程（HTML5+CSS3）中职 高三 工信版
2023-03-14
|
15页
|
125人阅读
|
4人下载
普通
内容正文：
教案名称
任务3 美化简单学院网站
计划学时
4学时
知识目标
掌握CSS样式表的概念
掌握样式表的创建及使用方法
掌握CSS选择器：标记选择器、类选择器、ID选择器
掌握交集选择器、并集择器、后代选择器、通配符选择器
掌握CSS常用文本属性及使用方法
理解CSS的层叠性、继承性和优先级
素质目标
引导学生做好职业规划，在课程学习中树立职业理想。
激发学生爱国热情、为科技强国而努力学习
教学重点
样式表的创建及使用方法
CSS选择器：标记选择器、类选择器、ID选择器
交集选择器、并集择器、后代选择器、通配符选择器
CSS常用文本属性：字体、字号、粗细、倾斜、文本装饰、颜色、对齐方式、首行缩进、行高
CSS的层叠性、继承性和优先级
教学难点
CSS各种样式属性的灵活使用
教学模式
教学做一体化
线上+线下混合教学
教学活动及主要环节
思政元素
切入点
第1学时
（引入CSS样式）
课前发布任务：
观看学习通平台相关学习视频。
做课前测试题。
I.学生讨论：（5分钟）
为什么网页结构和样式要分离？分离的好处有哪些？
网页变得美观的途径有哪些？
II.重难点内容讲授：
一、HTML中引入CSS的方法（25分钟）
（1）行内式
行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。
例如：<h1 style=“color:white; background-color:blue”>这是一行文本</h1>
(2)嵌入式：即内部样式表
嵌入式将对页面中各种元素的设置写在<head></head>之间。
例如：
<style type="text/css">
h1{
color:white;
background-color:blue
}
</style>
(3) 链接式:外部样式表 最常用的方式
例：<link href="mystyle.css" rel="stylesheet" type="text/css" />
二、练习：
将任务2中创建的个人介绍页面进行美化。（15分钟）
第2学时
（CSS基本选择器）
I.学生讨论：（10分钟）
CSS选择器的作用是什么？
II.重难点内容讲授：（30分钟）
一、CSS基本选择器
1.标记选择器
是指用HTML标记名称作为选择器，为页面中的该类标记指定统一的CSS样式，其语法格式如下：
例，使用p选择器定义HTML页面中所有段落的样式。
2.类选择器
类选择器指定的样式可以被网页上的多个标记元素选用。类选择器以“.”开始，其后跟类名称。其语法格式如下
.class{属性：值;属性：值;}
class为选择器类别的名称（名称不能是中文，最好是英文单词或拼音）
例如：
<title>CSS类别选择器</title>
<style type="text/css">
.title1{ background-color:#0CF; color:#fff;}
.title2{ background-color:#9C0; color:#f00;}
</style>
</head>
<body>
<p class="title1">这是第一段的内容。</p>
<p class="title2">这是第二段的内容。</p>
</body>
</html>
3.ID选择器(代表唯一)
ID选择器用于对某个元素定义单独的样式，ID选择器以“#”开始，其语法格式如下:
例如：
<style type="text/css">
#one{ background-color:#0CF; color:#fff; width:200px; height:200px;}
#two{ background-color:#9C0; color:#f00; width:200px; height:200px;}
</style>
</head>
<body>
<div id="one">这是第一个块的内容。</div>
<div id="two">这是第二个块的内容。</div>
</body>
</html>
注意：CSS样式的优先规则：
行内样式 > ID样式 > 类别样式 > 标记样式
4.交集选择器
交集选择器由两个选择器构成，第一个是标记选择器，第二个是类选择器，表示二者各自元素范围的交集。两个选择器之间不能有空格。其语法格式如下：
标记名称.类名称{属性：属性值； 属性：属性值；...}
5.并集选择器
如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式，并集选择器由各个选择器通过逗号连接而成，任何形式的选择器（标记选择
资源预览图
1
2
3
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。