《3.2 CCS3样式属性教学设计》
课题名称
CCS3样式属性教学设计
课 时
4课时
教学目标
知识目标
掌握CSS3中各基本属性的应用
能力目标
通过学习运用CSS样式表优化网页制作，让学生学习正确、合理运用技术，了解技术服务于内容的原则。
情感目标
培养学生独立思考、动手实践的能力；培养学生自主探究性、协作性学习能力；激发学生学习网页制作的兴趣。
教学重难点
重点
CSS3中各基本属性的应用
难点
html设置字体颜属性
利用CSS3样式表美化综合性页面
教学方法
教法
任务驱动法
学法
自主学习、小组合作学习
环节
教师活动
学生活动
课前准备
自主学习
课前下发阅读材料
学生利用课余时间自主学习CSS3基本属性
设计意图
通过自主学习为课堂教学打下基础，培养学生自主学习能力。
课堂实施
课堂引入
展示一张使用CSS3美化后的网页，吸引学生。
展示页面作品，引导和激发学生学习积极性
设计意图
讲述页面背后的制作原理和使用技术，以激发学生学习兴趣。
CSS3文本样式属性
CSS通过设置文本的相关属性对文本的字体、大小、颜、粗细、斜体、下划线、顶划线、删除线、对齐方式、缩进方式、字符间距、行间距、段落样式、溢出等进行设置，实现对网页文字的风格统一。
font-family属性（字体类型）
body{font-family:Arial,”Times New Roman”,微软雅黑”,”宋体”,”黑体”;}
font-size属性(字体大小)
p{font-size:12px;}
color属性（字体颜）
p{color:#FF00000;}
或 p{color:#F00;}
font-style属性(字体风格)
p{font-style:italic;}
font-weight属性(字体粗细)
p{font-weight:bold;}
@font-face属性（使用服务器端字体）
    @font-face{
        font-famliy:字体名称;
        src:字体路径;
    }
text-transform属性（英文字体大小写）
p{text-transform:capitalize;}
text-decoration属性（文字修饰）
p{text-decoration:underline line-through;}
text-shadow属性（阴影效果）
选择器{text-shadow:h-shadow v-shadow blur color;}
text-align属性（水平对齐方式）
h1{text-align:center;}
text-indent属性（首行缩进）
p{text-indent:2em;}
letter-spacing属性（字符间距）
p{letter-spacing:20px;}
line-height属性（行间距）
p{line-height:18px;}
学生学习，通过案例巩固CSS3的文本样式属性的应用
设计意图
了解并掌握CSS3文本样式属性的应用
学习CSS3背景样式属性
body{background-color:#CCCCCC;}
background-color属性（背景颜）
background-image属性（背景图像）
body{background-image:url(“images/bg01.jpg”);}
background-repeat属性（背景图像平铺方式）
body{background-image:url(“images/bg01.jpg”);}
background-repeat属性（背景图像平铺方式）
body{
background-image:url("images/bg01.jpg");
background-repeat: no-repeat;
}
background-position属性（背景图像位置）
body{
    background-image: url("images/bg01.jpg");
    background-repeat: no-repeat;
    background-position:right top;  /*设置背景图像的位置*/
}   
background-attachment 属性（背景图像固定）
    body{
        background-image: url("images/bg01.jpg");
        background-repeat: no-repeat;
        background-position:right top;
        background-attachment:fixed;
        }   
background-size属性（背景图像大小）
    body{
        background-image: url("images/bg01.jpg");
        background-repeat: no-repeat;
        background-position:right top;
        background-attachment:fixed;
        background-size:400px 300px;
    }   
学生学习，通过案例来巩固CCS3背景样式属性的应用
设计意图
了解并掌握CSS背景样式属性的应用
学习CSS3渐变属性
在CSS3之前如果要添加渐变效果，通常需要设置背景图像来实现。CSS3中增加了渐变属性，通过渐变属性可轻松实现渐变效果。CSS3的渐变属性主要包括线性渐变、径向渐变、重复渐变。
线性渐变
background-image:linear-gradient(渐变角度,颜值1,颜值2,...,颜值n)
径向渐变
background-image:radial-gradient(渐变形状 圆心位置,颜值1,颜值2,...,颜值n)
学生学习，通过案例来巩固CCS3渐变属性的应用
设计意图
了解并掌握CCS3渐变属性的应用
学习CSS3的列表样式属性
列表是网页制作中很常用的元素，通过CSS属性控制列表，能够从更多方面控制列表的外观，使列表看起来更加整齐和美观，使网站实用性更强。CSS样式中提供了如list-style-type、list-style-image等属性来控制列表样式。
list-style-type属性（列表符号）
（1）无序列表
无序项目列表是网页中运用得非常多的一种列表形式，用于将一组相关的列表项目排列在一起，并且列表中的项目没有特别的先后顺序。
（2）有序列表
有序列表具有明确先后顺序，默认情况下，创建的有序列表在每条信息前加上序号1、2、3...。
list-style-image属性（自定义列表符号）
网页制作中除了CSS样式中列表符号，往往还会需要制作更加精美的列表符号，可以使用list-style-image属性来自定义列表符号，该属性可以设置图片作为列表符号，只需要输入图片的路径。
.list1{
    list-style-image:url(images/li.jpg);
}
学生学习，通过案例来巩固CCS3列表样式属性的应用
设计意图
了解并掌握CSS3列表样式属性的应用
学习CSS3的边框样式属性
网页制作中元素的边框是经常需要美化和修饰的，通过HTML定义的元素边框风格单一，无法满足网页美观的要求。在CSS样式中，通过对boder属性进行定义边框的宽度、样式、颜、圆角边框等，可以使网页元素的边框有更丰富的样式，从而使元素的效果更加美观。
border-width属性（边框宽度）
border-style属性（边框样式）
border-color属性（边框颜）
border-color属性用于设置边框颜，属性值可以使用预定义关键字、十六制和RGB等方式进行设置。
border-radius属性（圆角边框）
border-image属性（图像边框）
学生学习，通过案例来巩固CCS3边框样式属性的应用
设计意图
了解并掌握CSS3列表边框属性的应用
综合实训
美化景点排行榜页面
根据所学CSS知识，完成对景点排行榜网页的CSS美化。
   
学生在老师引导下，逐步完成景点排行榜页面的美化
设计意图
学生在页面美化过程中，进一步巩固前期所学的CSS基本属性
评价小结
汇总展示学生完成的景点排行榜作品并进行点评。
学生对作品制作中遇到的问题进行相互探讨帮助。
设计意图
通过自评、互评作品，进一步巩固相关知识。