教科版（云南）信息技术八上 第十三课 使用CSS样式美化网页 课件（50张PPT）

第十三课 使用CSS样式美化网页 主题网站的设计与制作 1 CSS的基本概念 2 创建CSS的样式 3 应用css样式 学习内容 4 图片的CSS样式 学习目标 知识目标： 了解CSS的意义；掌握CSS样式的添加、删除和修改方法；掌握各类CSS样式的创建方法；掌握各类CSS样式的应用方法。。 技能目标： 通过任务的分析讲解与巩固练习，使学生能熟练掌握css 的定义及应用方法，能根据页面设计的需要合理地利用CSS样式实现页面的美化。 素质目标： 1. 具有勤奋学习的态度，严谨求实、创新的工作作风； 2. 具有良好的心理素质和职业道德素质； 3. 具有高度责任心和良好的团队合作精神； 4. 具有一定的科学思维方式和判断分析问题的能力； 5. 具有较强的网页设计创意思维、艺术设计素质。 单元三：使用CSS样式美化页面 设置如图所示的网页 效果图 任务描述: 任务分析 1.页面的结构分析 单元三：使用CSS样式美化页面 任务分析 单元三：使用CSS样式美化页面 要完成该页面的美化任务，必须使用CSS样式，对于CSS样式的设置，需要考虑以下问题： 1.什么是CSS样式？ 2.如何定义CSS样式？ 3.如何在网页中使用CSS样式？ 任务分析 2.CSS样式设计分析 单元三：使用CSS样式美化页面 技术要点 一. 什么是CSS？ 二.CSS选择器的分类 三.各类CSS选择器的定义与应用方法 四.各类CSS选择器的应用区别及优先顺序 单元三：使用CSS样式美化页面 知识点：CSS简介 单元三：使用CSS样式美化页面 一组样式可以被调用在多个对象上。只要定义一组样式后，就可以随心所欲地被调用在任一段。 语法易学易懂。 简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。 1.什么是CSS样式？ 知识点：CSS简介 单元三：使用CSS样式美化页面 张飞 { 身高:185cm; 体重:105kg; 性别:男; 性格:暴躁; 民族:汉族; } 对于“张飞”这个对象的描述实际由3个要素组成的，即姓名、属性和属性值。 h2{ font-family: 宋体; font-size:15px; color: red; text-decoration: underline; } 转换成网页代码的形式 知识点：CSS简介 单元三：使用CSS样式美化页面 1.什么是CSS样式？ CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。 因此，概括来说，CSS就是由3个基本部分———�对象”、“属性”和“值”组成的。 知识点：CSS选择器 单元三：使用CSS样式美化页面 2.CSS选择器 在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称———选择器（selector）。 基本格式 选择器{属性1：属性值1；属性2：属性值2；……} CSS 语法由三部分构成：选择器、样式属性和值。 知识点：CSS选择器 单元三：使用CSS样式美化页面 类（可应用于任何HTML标签），也称自定义样式。 标签（重新定义特定标签的外观），也称HTML标签样式。可以将设置的样式属性自动对应所选的标签名称。 ID选择器（仅应用于一个HTML标签）。 复合选择器，可以创建对某一具体的标签组合或者含有特定ID属性的标签、以及超级链接应用样式。 1.各类不同的CSS选择器在使用时有何区别？ 2.在实际应用中，该如何合理地选择？ CSS选择器的类别 知识点：CSS选择器 单元三：使用CSS样式美化页面 格式： HTML标签记名{属性1：属性值1；属性2：属性值2；……} 作用：相当于重定义HTML标记，在保留该标记原有功能的同时新增在CSS规则中定义的功能。 应用方法：自动应用到网页中所有使用了该标记的元素上。 使用场合：如果网页中所有同类的对象要使用同一种样式，则通过创建“重定义标签”的方式来设计样式 标签选择器