项目三使用CSS样式美化网页解析

项目三使用CSS样式美化网页网页设计与制作1CSS的基本概念2CSS的语法规则3CSS选择器的使用学习内容4CSS常用属性及式学习目标知识目标：了解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规则中定义的功能。应用方法：自动应用到网页中所有使用了该标记的元素上。使用场合：如果网页中所有同类的对象要使用同一种样式，则通过创建“重定义标签”的方式来设计样式标签选择器styleh1{color:red;font-size:25px;}/style知识点：CSS选择器单元三：使用CSS样式美化页面格式：.类名{属性1：属性值1；属性2：属性值2；……}类选择器style.red{color:red;font-size:18px;}/style作用：可以将定义的类样式应用于任何对象。。应用方法：不能自动应用，必须由设计者选择在何种对象上使用。引用格式：HTML标签class=类名使用场合：如果同样的格式，要分别在不同的对象上应用，或者在某一同类对象的局部使用，则通过创建“类”的方法来分别创建不同的样式，并有选择性地在相关对象上加以应用。知识点：CSS选择器单元三：使用CSS样式美化页面格式：#ID名{属性1：属性值1；属性2：属性值2；……}用法基本与类选择器相同，但是，ID样式只能在一个对象上使用，其基本作用是对每一个页面中唯一的元素进行定义。引用方法：HTML标签ID=ID样式名ID选择器知识点：CSS选择器单元三：使用CSS样式美化页面a:hover：鼠标经过链接时的状态。a:visited：已访问过的链接状态。a:active：活动的链接状态。指鼠标左键按下时但还没有松开时的状态伪类选择器主要通过A:link,A:hover;A:active;A:visited来设置链接对象的四种链接状态。注意：如果是重定义A标签，则相当于同时定义链接的四种状态为相同样式。伪类选择器4种状态的设置顺序为：LVHA知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器1）标签选择器、类选择器、ID选择器是三种最基本的选择器。2）以这三种基本选择器为基础，通过组合，还可以产生更多种类的选择器，实现更强、更方便的选择功能。3）复合选择器就是由两个或多全基本选择器通过不同的组合方法得到的。知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器1）交集选择器h3.classcolor:red;font-size:23px;选择器属性值属性值声明声明标记类别名称{}交集选择器由两个选择器直接连接而成，其是第1个必须是标签选择器，第2个必须是类选择器或ID选择器，两个选择器之间必须连续书写，不能有空格。这种样式定义的结果为二者的交集。知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器1）交集选择器bodyp普通段落文本（蓝色）/ph3普通标题文本（黑色）/h3pclass=“special”指定了.special类别的段落文本（红色/ph3class=“special”指定了.special类别的标题文本（绿色）/h3/bodyCSS样式定义部分正文部分styletype=text/cssP{color:blue;}p.Special{color:red;}.special{color:green;}/style知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器2）并集选择器styletype=text/cssh1,h2,h3,h4,h5,p{color:purple;font-size:15px;}h2.special,.special,#one{text-decoration:underline;}/style并集选择器是由多个基本选择器通过逗号连接而成。在声明各种选择器时，如果某些选择器的风格是完全相同的，或者部分相同，就可以利用并集选择器同时声明。同时声明多个标签此处的声明代表什么呢？知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器3.后代选择器在CSS选择器中，还可以通过嵌套的方式对特殊位置的HTML标记进行声明，如当p与/p之间包含spanspan标记时，就可以用后代选择器进行控制。后代选择器的写法是：将外层的标记写在前面，内层的标记写在后面，中间有空格分隔。当标记发生嵌套时，内层的标记就称为外层标记的后代。知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器3)后代选择器styletype=text/csspspan{color:red;}span{color:blue;}/stylebodyp嵌套使span用CSS（红色）/span标记的方法/p嵌套之外的span标记（蓝色）/span不生效/body定义P标记内的SPAN标记的格式为红色定义所有的SPAN标记的格式为蓝色知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器3)后代选择器后代选择器的组合方式后代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套。后代选择器的组合实例.speciali{color:red;}定义使用了类样式special的标记里面包含的i的样式规则。#oneli{padding-left:5px;}定义ID为one的标记里面包含的li的样式规则td.out.insidestrong{font-size:16px;}多层嵌套的后代选择器在HTML中使用CSS样式的方法—外部样式表文件：将CSS样式的定义通过独立的.CSS文件保存。—行内式：将CSS样式的定义直接放在某HTML标记的SYTLE属性中。—内嵌式：将CSS样式的定义嵌入到HTML文档的开头。直接CSS样式的定义语句保存为扩展名为.css的文件在网页中链接一个外部的CSS样式文件语法格式：在网页头中加入以下语句＜linkhref=mycss.cssrel=stylesheettype=text/css＞如：pstyle=“color:red”红色的文字/p在网页头中输入如下语句＜styletype=“text/css”＞＜!--CSS的定义语句--＞＜/style＞单元三：使用CSS样式美化页面知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器3)后代选择器后代选择器的组合方式后代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套。后代选择器的组合实例.speciali{color:red;}定义使用了类样式special的标记里面包含的i的样式规则。#oneli{padding-left:5px;}定义ID为one的标记里面包含的li的样式规则td.out.insidestrong{font-size:16px;}多层嵌套的后代选择器样式的优先级多重样式（MultipleStyles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下：外部样式内部样式内联样式CSS样式难点分析样式的优先级有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。示例如下：CSS样式难点分析CSS样式难点分析CSS优先级法则：选择器都有一个权值，权值越大越优先；当权值相等时，后出现的样式表设置要优于先出现的样式表设置；创作者的规则高于浏览者：即网页编写者设置的CSS样式的优先权高于浏览器所设置的样式；继承的CSS样式不如后来指定的CSS样式；在同一组属性设置中标有“!important”规则的优先级最大。CSS样式难点分析任务实施1.站点配置根据所提供的素材完成站点的配置。2.手工编写HTML文件在已经配置好的站点下创建网页文件index.html，网页的内容通过手工编定HTML代码来完成。单元三：使用CSS样式美化页面任务实施3.为网页设计CSS样式并应用（1）设置body样式重定义body标签，主要用于定义页面的整体设置。对于当前页面，需要进行整体设置的是页面文字和背景效果。单元三：使用CSS样式美化页面图body的样式规则定义及效果任务实施3.为网页设计CSS样式并应用（1）设置body样式样式代码如下：body{font-family:宋体;font-size:12px;color:#666;background-i