项目7CSS样式表.doc.doc

《 网页设计与制作 》课程教案 一、教案头 教学单元标题：CSS样式表 教学时数 6学时 上课地点 北区实D602，D603，D304 授课班级 15软件1班 15软件2班 15软件3班 上课时间 周三5-8节 周四5-6节，周五1-2节 周四7-8节，周五3-4节 教 学 目 标 能力（技能）目标 知识目标 1.CSS基本语法 2.新建与管理CSS样式表 3.CSS选择器的类型 4.内部样式表与外部样式表 5.设置CSS属性 1、CSS基本语法格式 2、新建CSS规则 3、内联样式表、内部样式表与外部样式表 4、CSS选择器：类、ID、标签和复合内容 5、编辑、移动、重命名、复制、删除CSS规则 6、移动CSS规则与附加样式表 7、设置文本样式：字体font-family、字号大小font-size、加粗font-weight、倾斜font-style、文字修饰text-decoration、行高（行距）line-height、文字间距wod-spacing、首行缩进text-indent、文本对齐text-align等 8、设置背景样式：背景颜色background-color、背景图像background-image、背景图重复background-repeat、背景图是否固定background-attachment、背景图位置background-position等 9、设置方框样式：宽度width、高度height、浮动float、清除clear、内边距padding、外边距margin等 10、设置边框样式：线型style、粗细width、颜色color等 11、设置列表样式：项目符号或编号爱管list-style-type、项目符号图像list-style-image、项目符号位置list-style-position等 教 学 重 难 点 教学难点 教学重点及解决方式 CSS基本语法 行距与首行缩进 背景样式 对象内边距与外边距 边框样式4. W3School 5. 素材资源库 6. 设计资源站 7. 网页制作大宝库 8. 站酷 9. 圆点视线 10. 站长素材 11. 千图网 / 12. 太平洋学院 /pcedu/sj/wz 13. 蓝色理想 14. 天极网 15. 网页设计师联盟 16. 七色鸟设计空间 二、教学设计 教学步骤 教学内容 教学方法 教学手段 学生活动 时间分配 知识基础 一、CSS概述 CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。 CSS样式有以下几个重要的作用： 1、将格式与结构分离 2、增强控制页面布局的能力 3、简化代码，提高下载速度 4、使维护和更新网页变得更加容易 5、代码兼容性更好 二、语法格式 ……} 例如：a{color:red;font-size:36px;} /* 使页面中的超链接文字显示为红色字体大小为px */ 三、新建 选择菜单【窗口】→【CSS样式】，打开“CSS样式”面板， 在该对话框中要分别设置“选择器类型”、“选择器名称”和“规则定义”三项内容。“选择器类型”包括四个选项：类（可应用于任何HTML元素）、ID（仅应用于一个HTML元素）、标签（重新定义HTML元素）、复合内容（基于选择的内容），这里可根据具体情况进行选择。“选择器名称”用来设置CSS规则中选择器的名称。“规则定义”用来选择CSS规则定义的位置，属于内部样式表或外部样式表。 四、内部样式表与外部样式表 CSS根据位置的不同，分为：内部样式表外部样式表和内联样式表。内联样式表优先级最高，其次是内部样式表，再次是外部样式表。 样式表是指在…/head之间，以style type=text/css，仅对当前网页有效，控制其他网页。时，将规则定义的位置为“仅限该文档”，即可创建内部样式表 外部样式表是指将在一个独立的样式表文件中，该文件以扩展名而网页中则以链接的方式来引用它。网页能链接多个样式表文件，而同一个样式表文件也可以被多个网页中时，将规则定义的位置设置为新建样式表”，即可创建外部样式表文件：link href=style1.css rel=stylesheet type=text/css /当前网页所在文件夹中的联样式表行内样式表”将嵌入在中，来定义仅对该标签有效。 p style=color:red; font-size:36px段落文字红色，字号px/p 五、设置CSS样式属性 1