资源简介

教案名称 任务3 美化简单学院网站 计划学时 4学时
知识目标 掌握CSS样式表的概念 掌握样式表的创建及使用方法掌握CSS选择器：标记选择器、类选择器、ID选择器掌握交集选择器、并集择器、后代选择器、通配符选择器掌握CSS常用文本属性及使用方法理解CSS的层叠性、继承性和优先级
素质目标 引导学生做好职业规划，在课程学习中树立职业理想。激发学生爱国热情、为科技强国而努力学习
教学重点 样式表的创建及使用方法CSS选择器：标记选择器、类选择器、ID选择器交集选择器、并集择器、后代选择器、通配符选择器CSS常用文本属性：字体、字号、粗细、倾斜、文本装饰、颜色、对齐方式、首行缩进、行高 CSS的层叠性、继承性和优先级
教学难点 CSS各种样式属性的灵活使用
教学模式 教学做一体化线上+线下混合教学
教学活动及主要环节 思政元素切入点
第1学时（引入CSS样式）课前发布任务：观看学台相关学习视频。做课前测试题。I.学生讨论：（5分钟）为什么网页结构和样式要分离？分离的好处有哪些？网页变得美观的途径有哪些？II.重难点内容讲授： 一、HTML中引入CSS的方法（25分钟）（1）行内式行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。例如：

这是一行文本

(2)嵌入式：即内部样式表嵌入式将对页面中各种元素的设置写在之间。例如： (3) 链接式:外部样式表 最常用的方式例：二、练习：将任务2中创建的个人介绍页面进行美化。（15分钟）第2学时（CSS基本选择器）I.学生讨论：（10分钟）CSS选择器的作用是什么？II.重难点内容讲授：（30分钟）一、CSS基本选择器1.标记选择器是指用HTML标记名称作为选择器，为页面中的该类标记指定统一的CSS样式，其语法格式如下：例，使用p选择器定义HTML页面中所有段落的样式。2.类选择器类选择器指定的样式可以被网页上的多个标记元素选用。类选择器以“.”开始，其后跟类名称。其语法格式如下.class{属性：值;属性：值;}class为选择器类别的名称（名称不能是中文，最好是英文单词或拼音）例如：

这是第一段的内容。

这是第二段的内容。

3.ID选择器(代表唯一)ID选择器用于对某个元素定义单独的样式，ID选择器以“#”开始，其语法格式如下:例如：注意：CSS样式的优先规则：行内样式 > ID样式 > 类别样式 > 标记样式4.交集选择器交集选择器由两个选择器构成，第一个是标记选择器，第二个是类选择器，表示二者各自元素范围的交集。两个选择器之间不能有空格。其语法格式如下：标记名称.类名称{属性：属性值； 属性：属性值；...}5.并集选择器如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式，并集选择器由各个选择器通过逗号连接而成，任何形式的选择器（标记选择器、类选择器、ID选择器等），都可以作为并集选择器的一部分。h1,h2,p{font-size:24px; color:blue;6.后代选择器后代选择器也叫包含选择器，用于对容器对象中的子对象进行控制，使其他容器对象中的同名子对象不受影响。后代选择器书写时将容器对象写在前面，子对象写在后面，中间用空格分隔。若容器对象有多层时，则分层依次书写。p strong{font-size:24px; color:red;} 7.通配符选择器通配符选择器用“*”表示，它是所有选择器作用范围最广的，能匹配页面中的所有元素。其基本语法格式如下：*{属性：属性值； 属性：属性值；...}III.课堂小结： （5分钟）重点理解引入CSS选择器的方式，CSS选择器的使用。作业1： 课本实训3作业2：使用学台的教学视频自学任务3中的CSS文本样式第3学时（CSS文本属性）课前发布任务：观看学台相关学习视频。做课前测试题。I.学生讨论：（10分钟）各种选择器书写方式有何区别？II.重难点内容讲授：（35分钟）一、CSS字体样式属性（1）font-weight:字体粗细 font-weight属性用于定义字体的粗细。例如：p{font-weight:bold;} h2{font-weight:normal;}(2) font-style:字体风格font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：normal：默认值，浏览器会显示标准的字体样式。italic：浏览器会显示斜体的字体样式。oblique：浏览器会显示倾斜的字体样式。(3)@font-face属性@font-face是CSS3新增属性，用于定义服务器字体。通过该属性，开发者可以在网页中使用任何喜欢的字体，而不管用户计算机是否安装这些字体。定义服务器字体的基本语法格式如下。二、CSS文本外观属性使用HTML可以对文本外观进行简单的控制，但是效果并不理想。为此CSS提供了一系列的文本外观样式属性，具体如下：(1)color:文本颜色color属性用于定义文本的颜色，其取值方式有如下3种：使用颜色的英文单词，如red，green，blue等。十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。(2) letter-spacing:字间距letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。(3) word-spacing:单词间距word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。(4) line-height:行间距，即行高。line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。例如，p{line-height:25px;}(5) text-transform:文本转换text-transform属性用于控制英文字符的大小写，其可用属性值如下：none：不转换（默认值）。capitalize：首字母大写。uppercase：全部字符转换为大写。lowercase：全部字符转换为小写。(6) text-decoration:文本装饰text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：none：没有装饰（正常文本默认值）。underline：下划线。overline：上划线。line-through：删除线。例如，a{text-decoration:none;} a:hover{ text-decoration:underline;}(7) text-align:水平对齐方式text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：left：左对齐（默认值）right：右对齐。center：居中对齐。例如，h1{text-align:center;} P{text-align:center;}(8) text-indent:首行缩进text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。例如，p{text-indent:2em;}(9) white-space:空白符处理使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。在CSS中，使用white-space属性可设置空白符的处理方式，其属性值如下：normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。pre：预格式化，按文档的书写格式保留空格、空行原样显示。nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记
。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。text-overflow 设置元素内文本溢出时如何处理。基本语法格式如下： 说明：clip：修剪元素内溢出的文本，使溢出的文本不显示，也不显示省略标记“…”。ellipsis：在元素文本末尾用省略标记“…”标示被修剪的文本。设置省略标记表示溢出文本的步骤如下：为包含文本的元素定义宽度。设置元素的white-space属性值为nowrap，强制文本不能换行。设置元素的overflow属性值为 hidden，使溢出文本隐藏。设置text-overflow属性值为ellipsis，显示省略标记。第4学时（CSS高级特性）I.学生讨论：（5分钟）先演示案例——我很调皮，猜猜我是什么颜色？再让学生讨论为什么显示案例中的颜色。

give you some color to see see

II.重难点内容讲授：（35分钟）CSS的高级特性是指CSS的层叠性、继承性和优先级等。对于网页设计师来说，应深刻理解这些特性。一、层叠性所谓层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式定义

标记字号大小为12像素，外部样式表定义

标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。二、继承性所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号等。例如，定义页面主体标记body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他标记都是body标记的子标记。注意：当为body元素设置字号属性时，标题文本不会采用这个样式。因为标题标记h1~h6有默认的字号样式。CSS优先级定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级问题。根据规定，样式表的优先级别从高到低为：行内样式、嵌入式和外部样式表。也就是最接近目标元素的样式优先级越高，即就近原则。任务实现：美化简单学院网站 本节在前面学习CSS内容的基础上，综合使用CSS样式属性将简单学院网站进行修饰美化。 将任务2创建的简单学院网站项目school复制一份，放入chapter03目录中，在HBilderX中，打开school目录，依次给每个页面添加CSS样式。1.美化首页样式分析分析首页效果图，可以为body元素统一设置字体、颜色等样式，标题、段落文字的对齐方式等信息分别设置即可。搭建结构定义CSS样式美化学院简介页面样式分析分析学院简介页面效果图，可以为body元素统一设置字体、颜色等样式，标题、段落和版权信息的样式须分别设置。搭建结构定义CSS样式美化学院新闻页面样式分析分析学院简介页面效果图，可以为body元素统一设置字体、颜色等样式，标题、列表项和版权信息的样式须分别设置。搭建结构定义CSS样式美化新闻详情页面样式分析分析新闻详情页面效果图，可以为body元素统一设置字体、颜色等样式，标题、副标题、正文和版版信息的样式须分别设置。搭建结构定义CSS样式说明：在操作演示时教师可适时停下来，让学生自行尝试。小组成员之间协作讨论，教师巡视，对疑难问题进行解答。II.课堂小结： （5分钟）重点理解灵活运用CSS选择器及各种样式，是完成本任务的关键。课后作业1： 课后实训3课后作业2：学台作业 随着互联网的飞速发展，各种智能终端的普及，前端开发越来越受到重视，人才需求量巨大，不仅仅是普通的静态页面，更多的是页面的冲击和美感的享受。激发学生学好该门课，成为未来的优秀Web前端开发工程师。通过编写CSS代码，让学生了解代码书写要遵循规范，小错误可能会影响大局面，要养成严谨细致的工匠精神。灵活运用多种选择器任务完成过程中，提高学生对美的鉴赏能力。

展开更多......

收起↑