项目三使用CSS样式美化网页解析课件.ppt

《项目三使用CSS样式美化网页解析课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、项目三使用CSS样式美化网页网页设计与制作1CSS的基本概念2CSS的语法规则3CSS选择器的使用学习内容4CSS常用属性及式学习目标知识目标：了解CSS的意义；掌握CSS样式的添加、删除和修改方法；掌握各类CSS样式的创建方法；掌握各类CSS样式的应用方法。。技能目标：通过任务的分析讲解与巩固练习，使学生能熟练掌握css的定义及应用方法，能根据页面设计的需要合理地利用CSS样式实现页面的美化。素质目标：1.具有勤奋学习的态度，严谨求实、创新的工作作风；2.具有良好的心理素质和职业道德素质；3.具有高度责任心和良好的团队合作精神；4.具有一定的科学思维方式和判断分析问题的能

2、力；5.具有较强的网页设计创意思维、艺术设计素质。单元三：使用CSS样式美化页面设置如图所示的网页效果图任务描述:任务分析1.页面的结构分析单元三：使用CSS样式美化页面任务分析单元三：使用CSS样式美化页面要完成该页面的美化任务，必须使用CSS样式，对于CSS样式的设置，需要考虑以下问题：1.什么是CSS样式？2.如何定义CSS样式？3.如何在网页中使用CSS样式？任务分析2.CSS样式设计分析单元三：使用CSS样式美化页面技术要点一.什么是CSS？二.CSS选择器的分类三.各类CSS选择器的定义与应用方法四.各类CSS选择器的应用区别及优先顺序单元三：使用CSS样式美化

3、页面知识点：CSS简介单元三：使用CSS样式美化页面一组样式可以被调用在多个对象上。只要定义一组样式后，就可以随心所欲地被调用在任一段。语法易学易懂。简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。1.什么是CSS样式？知识点：CSS简介单元三：使用CSS样式美化页面张飞{身高:185cm;体重:105kg;性别:男;性格:暴躁;民族:汉族;}对于“张飞”这个对象的描述实际由3个要素组成的，即姓名、属性和属性值。h2{font-family:宋体;font-size:15px;

4、color:red;text-decoration:underline;}转换成网页代码的形式知识点：CSS简介单元三：使用CSS样式美化页面1.什么是CSS样式？CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。因此，概括来说，CSS就是由3个基本部分——“对象”、“属性”和“值”组成的。知识点：CSS选择器单元三：使用CSS样式美化页面2.CSS选择器在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）。基本格式选择器{属性

5、1：属性值1；属性2：属性值2；……}CSS语法由三部分构成：选择器、样式属性和值。知识点：CSS选择器单元三：使用CSS样式美化页面类（可应用于任何HTML标签），也称自定义样式。标签（重新定义特定标签的外观），也称HTML标签样式。可以将设置的样式属性自动对应所选的标签名称。ID选择器（仅应用于一个HTML标签）。复合选择器，可以创建对某一具体的标签组合或者含有特定ID属性的标签、以及超级链接应用样式。1.各类不同的CSS选择器在使用时有何区别？2.在实际应用中，该如何合理地选择？CSS选择器的类别知识点：CSS选择器单元三：使用CSS样式美化页面格式：HTML标签记名

6、{属性1：属性值1；属性2：属性值2；……}作用：相当于重定义HTML标记，在保留该标记原有功能的同时新增在CSS规则中定义的功能。应用方法：自动应用到网页中所有使用了该标记的元素上。使用场合：如果网页中所有同类的对象要使用同一种样式，则通过创建“重定义标签”的方式来设计样式标签选择器知识点：CSS选择器单元三：使用CSS样式美化页面格式：.类名{属性1：属性值1；属性2：属性值2；……}类选择器

7、作用：可以将定义的类样式应用于任何对象。。应用方法：不能自动应用，必须由设计者选择在何种对象上使用。引用格式：使用场合：如果同样的格式，要分别在不同的对象上应用，或者在某一同类对象的局部使用，则通过创建“类”的方法来分别创建不同的样式，并有选择性地在相关对象上加以应用。知识点：CSS选择器单元三：使用CSS样式美化页面格式：#ID名{属性1：属性值1；属性2：属性值2；……}用法基本与类选择器相同，但是，ID样式只能在一个对象上使用，其基本作用是对每一个页面中唯一的元素进行定义。引用