网页设计与制作（HTML5 CSS3 JavaScript）（第5版）（微课版） 教案 第3章 CSS基础与应用.docx

PAGE

PAGE1

第3课CSS基础与应用（6学时）

本章内容：

3种CSS样式

5种基本的选择器

颜色与背景属性

字体属性

文本属性

综合练习与作业——电影欣赏网站

1、3种CSS样式

制作一个简化版的唐诗宋词网站，重点复习超链接；

加入页面样式style/style，body{margin设置页面宽度、背景图案}，h1{字体大小、字体样式、下划线、对齐方式}，p{字体大小、字体样式}

改为站点样式link（参见p39代码），为所有页面链接样式

站点样式与页面样式一起，形成网站的风格

使用行内样式style属性，测试设计效果

5种基本选择器

标记符选择器：重新定义标记符的显示效果，覆盖默认效果

类选择器：对每首诗歌添加“解析”段落，为这些解析段落设置样式p.jiexi{背景颜色、字体大小等}

id选择器：导航条、面包屑、页脚导航等，添加效果

伪类选择器：LoVeHAte，设置超链接效果。结合id选择器，设置特定超链接的效果。

群组选择器：用逗号分组

3、颜色与背景属性

p45：color,background-color,background-image,background-attachment,background-position,background-repeat,background。自行做教材p46示例。

4、字体属性

P46-47：font-family,font-size,font-style,font-variant,font-weight,font（注意表达式）。自行做教材p48示例。

5、文本属性

P48-49：line-height、text-align、text-decoration、text-indent。自行做教材p49示例。

6、综合实例与作业

（1）综合实例

教材49-54页综合实例：电影欣赏（边敲代码，边讲解，尤其是讲解迭代的思想）

作业：电影欣赏网站

现场做，现场指导。至少2学时。