任务3美化简单学院网站.docVIP

教案名称

任务3美化简单学院网站

计划学时

4学时

知识目标

掌握CSS样式表的概念

掌握样式表的创建及使用方法

掌握CSS选择器：标记选择器、类选择器、ID选择器

掌握交集选择器、并集择器、后代选择器、通配符选择器

掌握CSS常用文本属性及使用方法

理解CSS的层叠性、继承性和优先级

能力目标

掌握使用CSS对网页进行美化的方法

素质目标

引导学生做好职业规划，在课程学习中树立职业理想。

激发学生爱国热情、为科技强国而努力学习

教学重点

样式表的创建及使用方法

CSS选择器：标记选择器、类选择器、ID选择器

交集选择器、并集择器、后代选择器、通配符选择器

CSS常用文本属性：字体、字号、粗细、倾斜、文本装饰、颜色、对齐方式、首行缩进、行高

CSS的层叠性、继承性和优先级

教学难点

CSS各种样式属性的灵活使用

教学模式

教学做一体化

线上+线下混合教学

教学活动及主要环节

思政元素

切入点

第1学时

（引入CSS样式）

课前发布任务：

观看学习通平台相关学习视频。

做课前测试题。

=1\*ROMANI.学生讨论：（5分钟）

为什么网页结构和样式要分离？分离的好处有哪些？

网页变得美观的途径有哪些？

=2\*ROMANII.重难点内容讲授：

一、HTML中引入CSS的方法（25分钟）

（1）行内式

行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。

例如：h1style=“color:white;background-color:blue”这是一行文本/h1

(2)嵌入式：即内部样式表

嵌入式将对页面中各种元素的设置写在head/head之间。

例如：

styletype=text/css

h1{

color:white;

background-color:blue

}

/style

(3)链接式:外部样式表最常用的方式

例：linkhref=mystyle.cssrel=stylesheettype=text/css/

二、练习：

将任务2中创建的个人介绍页面进行美化。（15分钟）

第2学时

（CSS基本选择器）

=1\*ROMANI.学生讨论：（10分钟）

CSS选择器的作用是什么？

=2\*ROMANII.重难点内容讲授：（30分钟）

一、CSS基本选择器

1.标记选择器

是指用HTML标记名称作为选择器，为页面中的该类标记指定统一的CSS样式，其语法格式如下：

例，使用p选择器定义HTML页面中所有段落的样式。

2.类选择器

类选择器指定的样式可以被网页上的多个标记元素选用。类选择器以“.”开始，其后跟类名称。其语法格式如下

.class{属性：值;属性：值;}

class为选择器类别的名称（名称不能是中文，最好是英文单词或拼音）

例如：

titleCSS类别选择器/title

styletype=text/css

.title1{background-color:#0CF;color:#fff;}

.title2{background-color:#9C0;color:#f00;}

/style

/head

body

pclass=title1这是第一段的内容。/p

pclass=title2这是第二段的内容。/p

/body

/html

3.ID选择器(代表唯一)

ID选择器用于对某个元素定义单独的样式，ID选择器以“#”开始，其语法格式如下:

例如：

styletype=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

divid=one这是第一个块的内容。/div

divid=two这是第二个块的内容。/div

/body

/html

注意：CSS样式的优先规则：

行内样式ID样式类别样式标记样式

4.交集选择器

交集选择器由两个选择器构成，第一个是标记选择器，第二个是类选择器，表示二者各自元素范围的交集。两个选择器之间不能有空格。其语法格式如下：

标记名称.类名称{属性：属性值；属性：属性值；...}

5.并集选择器

如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式，并集选择器由各个选择器通过逗号连接而成，任何形式的选择器（标记选择器、类选择器、ID选择器等），都可以作为