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

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

2、式和判断分析问题的能力；5. 具有较强的网页设计创意思维、艺术设计素质。单元三：使用单元三：使用CSS样式美化页面样式美化页面设置如图所示的网页设置如图所示的网页v 效果图效果图任务描述任务描述:任务分析任务分析1.1.页面的结页面的结构分析构分析单元三：使用单元三：使用CSS样式美化页面样式美化页面任务分析任务分析单元三：使用单元三：使用CSS样式美化页面样式美化页面 要完成该页面的美化任务，必须使用要完成该页面的美化任务，必须使用CSS样式，对于样式，对于CSS样式的设置，需要考虑以下问题：样式的设置，需要考虑以下问题：1.1.什么是什么是CSSCSS样式？样式？2.2.如何定义如何定义C

3、SSCSS样式？样式？3.3.如何在网页中使用如何在网页中使用CSSCSS样样式？式？任务分析任务分析2.CSS2.CSS样式样式设计分析设计分析单元三：使用单元三：使用CSS样式美化页面样式美化页面技术要点技术要点一一. 什么是什么是CSS？二二.CSS选择器的分类选择器的分类三三.各类各类CSS选择器的定义与应用方法选择器的定义与应用方法四四.各类各类CSS选择器的应用区别及优先顺序选择器的应用区别及优先顺序单元三：使用单元三：使用CSS样式美化页面样式美化页面知识点：知识点：CSS简介简介单元三：使用单元三：使用CSS样式美化页面样式美化页面v一组样式可以被调用在多个对象上一组样式可以被

4、调用在多个对象上。只要定义一组样只要定义一组样式后，就可以随心所欲地被调用在任一段。式后，就可以随心所欲地被调用在任一段。v语法易学易懂语法易学易懂。v简化了网页的格式代码，外部的样式表还会被浏览器简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一上传的代码数量（因为重复设置的格式将被只保存一次）。次）。1.1.什么是什么是CSSCSS样式？样式？知识点：知识点：CSS简介简介单元三：使用单元三：使用CSS样式美化页面样式美化页面 张飞张飞 身高身高:185

5、cm;:185cm; 体重体重:105kg;:105kg; 性别性别: :男男; ; 性格性格: :暴躁暴躁; ; 民族民族: :汉族汉族; ; 对于对于“张飞张飞”这个对象的描这个对象的描述实际由述实际由3 3个要素组成的，个要素组成的，即即姓名姓名、属性属性和和属性值属性值。h2h2 font-familyfont-family: : 宋宋体体; ; font-size:15px font-size:15px; ; colorcolor: red;: red; text-decoration text-decoration: : underline;underline; 转换成网页代码的形

6、式知识点：知识点：CSS简介简介单元三：使用单元三：使用CSS样式美化页面样式美化页面1.1.什么是什么是CSSCSS样式？样式？vCSSCSS的思想就是首先指定对什么的思想就是首先指定对什么“对象对象”进行设置，然进行设置，然后指定对该对象的哪个方面的后指定对该对象的哪个方面的“属性属性”进行设置，最后给进行设置，最后给出该设置的出该设置的“值值”。v因此，概括来说，因此，概括来说，CSSCSS就是由就是由3 3个基本部分个基本部分“对象对象”、“属性属性”和和“值值”组成的。组成的。知识点：知识点：CSS选择器选择器单元三：使用单元三：使用CSS样式美化页面样式美化页面2 2. .CSSC

7、SS选择器选择器 在在CSSCSS的的3 3个组成部分中，个组成部分中，“对象对象”是很重要的，它指是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名定了对哪些网页元素进行设置，因此，它有一个专门的名称称选择器选择器（selectorselector）。）。 基本格式基本格式选择器选择器 属性属性1 1：属性值：属性值1 1；属性；属性2 2：属性值：属性值2 2； CSS 语法由三部分构成：语法由三部分构成：选择器选择器、样式属性样式属性和和值值。知识点：知识点：CSS选择器选择器单元三：使用单元三：使用CSS样式美化页面样式美化页面v类类（可应用于任何（可应用于任何HTML

8、HTML标签），也称自定义样式。标签），也称自定义样式。 v标签标签（重新定义特定标签的外观），也称（重新定义特定标签的外观），也称HTMLHTML标签样式。标签样式。可以将设置的样式属性自动对应所选的标签名称。可以将设置的样式属性自动对应所选的标签名称。vIDID选择器选择器（仅应用于一个仅应用于一个HTMLHTML标签标签）。）。 v复合选择器复合选择器，可以创建对某一具体的标签组合或者含有，可以创建对某一具体的标签组合或者含有特定特定IDID属性的标签、以及超级链接应用样式。属性的标签、以及超级链接应用样式。 1.1.各类不同的各类不同的CSSCSS选择器在选择器在使用时有何区别？使用时

9、有何区别？2.2.在实际应用中，该如何合在实际应用中，该如何合理地选择？理地选择？CSSCSS选择器的类别选择器的类别知识点：知识点：CSS选择器选择器单元三：使用单元三：使用CSS样式美化页面样式美化页面格式格式： HTMLHTML标签记名标签记名 属性属性1 1：属性值：属性值1 1；属性；属性2 2：属性值：属性值2 2； 作用作用：相当于：相当于重定义重定义HTML标记，在标记，在保留保留该标记原有功能的同时该标记原有功能的同时新新增增在在CSS规则中定义的功能。规则中定义的功能。应用方法应用方法：自动应用自动应用到网页中到网页中所有使用了该标记的元素所有使用了该标记的元素上。上。使用

10、场合使用场合：如果网页中：如果网页中所有同类所有同类的对象要使用的对象要使用同一种样式同一种样式，则通，则通过创建过创建“重定义标签重定义标签”的方式来设计样式的方式来设计样式标签选择器标签选择器 h1 color: red; font-size: 25px; 知识点：知识点：CSS选择器选择器单元三：使用单元三：使用CSS样式美化页面样式美化页面格式格式： . .类名类名 属性属性1 1：属性值：属性值1 1；属性；属性2 2：属性值：属性值2 2； 类选择器类选择器 .red color:red;font-size:18px; 作用作用：可以将定义的类样式应用于任何对象。：可以将定义的类样

11、式应用于任何对象。 。应用方法：应用方法：不能自动应用不能自动应用，必须由设计者选择在何种对象上使用。，必须由设计者选择在何种对象上使用。引用格式：引用格式：使用场合使用场合：如果同样的格式，要分别在不同的对象上应用，或者：如果同样的格式，要分别在不同的对象上应用，或者在某一同类对象的局部使用，则通过创建在某一同类对象的局部使用，则通过创建“类类” 的方法来分别创建的方法来分别创建不同的样式，并有不同的样式，并有选择性选择性地在相关对象上加以应用。地在相关对象上加以应用。知识点：知识点：CSS选择器选择器单元三：使用单元三：使用CSS样式美化页面样式美化页面格式格式：#ID#ID名名 属性属性

12、1 1：属性值：属性值1 1；属性；属性2 2：属性值：属性值2 2； 用法基本与类选择器相同，但是，用法基本与类选择器相同，但是，ID样式样式只能在一个对象上使用只能在一个对象上使用，其基本作用是对每一个页面中唯一的元素进行定义。其基本作用是对每一个页面中唯一的元素进行定义。引用方法：引用方法：ID选择器选择器知识点：知识点：CSS选择器选择器单元三：使用单元三：使用CSS样式美化页面样式美化页面a:hover：鼠标经过链接时的状态。：鼠标经过链接时的状态。 a:visited：已访问过的链接状态。：已访问过的链接状态。a:active：活动的链接状态。指鼠标左键按下时但还没有松开时：活动的

13、链接状态。指鼠标左键按下时但还没有松开时的状态的状态伪类选择器伪类选择器主要通过主要通过A:link, A:hover; A:active; A:visited来设置来设置链接对象的四种链接状态。链接对象的四种链接状态。注意：注意：如果是重定义如果是重定义A标签，则相当于同时定义链接的四种状态为标签，则相当于同时定义链接的四种状态为相同样式。相同样式。伪类选择器伪类选择器4 4种状态的设置顺序种状态的设置顺序为：为： LVHALVHA知识点：知识点：CSS选择器选择器单元三：使用单元三：使用CSS样式美化页面样式美化页面组合类型的选择器组合类型的选择器1）标签选择器、类选择器、）标签选择器、类

14、选择器、ID选择器是三种最选择器是三种最基本基本的选择器。的选择器。2）以这三种基本选择器为基础，通过组合，还可以）以这三种基本选择器为基础，通过组合，还可以产生更多种类的选择器，实现更强、更方便的选择产生更多种类的选择器，实现更强、更方便的选择功能。功能。3）复合选择器复合选择器就是由两个或多全基本选择器通过不就是由两个或多全基本选择器通过不同的组合方法得到的。同的组合方法得到的。知识点：知识点：CSS选择器选择器单元三：使用单元三：使用CSS样式美化页面样式美化页面组合类型的选择器组合类型的选择器1 1）交集选择器）交集选择器h3.class color: red; font-size:

15、23px; 选择器 属性 值 属性 值 声明 声明 标记 类别名称 交集选择器交集选择器由两个选择器直接连接而成，其是第由两个选择器直接连接而成，其是第1个个必须是必须是标签选择器标签选择器，第，第2个必须是个必须是类选择器或类选择器或ID选择器选择器，两个选择器之间必须连续书写，不能有空格。两个选择器之间必须连续书写，不能有空格。 这种样式定义的结果为二者的交集。这种样式定义的结果为二者的交集。知识点：知识点：CSS选择器选择器单元三：使用单元三：使用CSS样式美化页面样式美化页面组合类型的选择器组合类型的选择器1 1）交集选择器）交集选择器 普通段落文本（蓝色）普通段落文本（蓝色） 普通标

16、题文本（黑色）普通标题文本（黑色） 指定了指定了.special类别的段落文本（红色类别的段落文本（红色 指定了指定了.special类别的标题文本（绿色）类别的标题文本（绿色） CSS样式定样式定义部分义部分正文部分正文部分 P color:blue; p.Special color:red; .special color:green; 知识点：知识点：CSS选择器选择器单元三：使用单元三：使用CSS样式美化页面样式美化页面组合类型的选择器组合类型的选择器2 2）并集选择器）并集选择器 h1, h2, h3, h4, h5, p color:purple; font-size:15px; h

17、2.special, .special, #one text-decoration:underline; u并集选择器是由多个基本选择器通过逗号连接而成。并集选择器是由多个基本选择器通过逗号连接而成。u在声明各种选择器时，如果某些选择器的风格是完全相在声明各种选择器时，如果某些选择器的风格是完全相同的，或者部分相同，就可以利用并集选择器同时声明。同的，或者部分相同，就可以利用并集选择器同时声明。同时声明多同时声明多个标签个标签此处的声明此处的声明代表什么呢？代表什么呢？知识点：知识点：CSS选择器选择器单元三：使用单元三：使用CSS样式美化页面样式美化页面组合类型的选择器组合类型的选择器3.3

18、.后代选择器后代选择器u在在CSS选择器中，还可以通过嵌套的方式对特殊位置选择器中，还可以通过嵌套的方式对特殊位置的的HTML标记标记进行声明，如当进行声明，如当与与之间包含之间包含标记时，就可以用后代选择器进行控制。标记时，就可以用后代选择器进行控制。u后代选择器的写法是：将后代选择器的写法是：将外层的标记写在前面外层的标记写在前面，内层内层的标记写在后面的标记写在后面，中间有，中间有空格空格分隔。分隔。u当标记发生嵌套时，内层的标记就称为外层标记的后当标记发生嵌套时，内层的标记就称为外层标记的后代。代。知识点：知识点：CSS选择器选择器单元三：使用单元三：使用CSS样式美化页面样式美化页面

19、组合类型的选择器组合类型的选择器3)3)后代选择器后代选择器p span color:red; span color:blue; 嵌套使嵌套使用用CSS（红色）（红色）标记标记的方法的方法 嵌套之外的嵌套之外的标记（蓝色）标记（蓝色）不生效不生效定义定义P标记内标记内的的SPAN标记标记的格式为红色的格式为红色定义所有的定义所有的SPAN标记的标记的格式为蓝色格式为蓝色知识点：知识点：CSS选择器选择器单元三：使用单元三：使用CSS样式美化页面样式美化页面组合类型的选择器组合类型的选择器3)3)后代选择器后代选择器v 后代选择器的组合方式后代选择器的组合方式 后代选择器的使用非常广泛，不仅标记

20、选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套。v 后代选择器的组合实例后代选择器的组合实例 .special i color: red; 定义使用了类样式special的标记里面包含的的样式规则。 #one li padding-left:5px; 定义ID为one的标记里面包含的的样式规则 td.out .inside strong font-size: 16px; 多层嵌套的后代选择器在在HTMLHTML中使用中使用CSSCSS样式的方法样式的方法 外部样式表文件：将外部样式表文件：将CSSCSS样式的定义通过独立的样式的定义通过独立的.CSS.CSS文件保存。文件保存。

21、 行内式：将行内式：将CSSCSS样式的定义直接放在某样式的定义直接放在某HTMLHTML标记的标记的SYTLESYTLE属性中。属性中。 内嵌式：将内嵌式：将CSSCSS样式的定义嵌入到样式的定义嵌入到HTMLHTML文档的开头。文档的开头。u直接直接CSS样式的定义语句保存为扩展名为样式的定义语句保存为扩展名为.css的文件的文件u在网页中链接一个外部的在网页中链接一个外部的CSS样式文件语法格式：在网页样式文件语法格式：在网页头中加入以下语句头中加入以下语句 link href=mycss.css rel=stylesheet type=text/css如：如：红色的文字红色的文字在网页

22、头中输入如下语句在网页头中输入如下语句style type=“text/css”!- CSS的定义语句的定义语句-/style单元三：使用单元三：使用CSS样式美化页面样式美化页面知识点：知识点：CSS选择器选择器单元三：使用单元三：使用CSS样式美化页面样式美化页面组合类型的选择器组合类型的选择器3)3)后代选择器后代选择器v 后代选择器的组合方式后代选择器的组合方式 后代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套。v 后代选择器的组合实例后代选择器的组合实例 .special i color: red; 定义使用了类样式special的标记

23、里面包含的的样式规则。 #one li padding-left:5px; 定义ID为one的标记里面包含的的样式规则 td.out .inside strong font-size: 16px; 多层嵌套的后代选择器样式的优先级样式的优先级v 多重样式（多重样式（Multiple Styles）：如果外部样式、内部样式）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情和内联样式同时应用于同一个元素，就是使多重样式的情况。况。 v 一般情况下，优先级如下：一般情况下，优先级如下： v 外部样式外部样式内部样式内部样式内联样式内联样式CSS样式难点分析样式难点分析样式的

24、优先级样式的优先级v 有个例外的情况，就是如果外部样式放在内部样式的后面，有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。则外部样式将覆盖内部样式。v 示例如下：示例如下：CSS样式难点分析样式难点分析CSS样式难点分析样式难点分析CSS 优先级法则：优先级法则：v 选择器都有一个权值，权值越大越优先；选择器都有一个权值，权值越大越优先；v 当权值相等时，后出现的样式表设置要优于先出现的样式当权值相等时，后出现的样式表设置要优于先出现的样式表设置；表设置；v 创作者的规则高于浏览者：即网页编写者设置的创作者的规则高于浏览者：即网页编写者设置的CSS 样样式的优先权

25、高于浏览器所设置的样式；式的优先权高于浏览器所设置的样式；v 继承的继承的CSS 样式不如后来指定的样式不如后来指定的CSS 样式；样式；v 在同一组属性设置中标有在同一组属性设置中标有“!important”规则的优先级最规则的优先级最大。大。CSS样式难点分析样式难点分析任务实施任务实施1.站点配置站点配置 根据所提供的素材完成站点的配置。2.手工编写手工编写HTML文件文件 在已经配置好的站点下创建网页文件index.html，网页的内容通过手工编定HTML代码来完成。单元三：使用单元三：使用CSS样式美化页面样式美化页面任务实施任务实施3. 为网页设计为网页设计CSS样式并应用样式并应

26、用（1）设置body样式 重定义body标签，主要用于定义页面的整体设置。对于当前页面，需要进行整体设置的是页面文字和背景效果。单元三：使用单元三：使用CSS样式美化页面样式美化页面图 body的样式规则定义及效果任务实施任务实施3. 为网页设计为网页设计CSS样式并应用样式并应用（1）设置body样式样式代码如下：body font-family: 宋体; font-size: 12px; color: #666; background-image: url(images/bodybg.gif); background-repeat: repeat-x; background-color:

27、#D3F3FB;单元三：使用单元三：使用CSS样式美化页面样式美化页面任务实施任务实施3. 为网页设计为网页设计CSS样式并应用样式并应用（2）重定义table标记 通过重定义table标记定义表格的整体效果，包括：宽度、边框、背景、文字对齐方式等。单元三：使用单元三：使用CSS样式美化页面样式美化页面图 table的样式规则定义任务实施任务实施3. 为网页设计为网页设计CSS样式并应用样式并应用（2）重定义table标记样式代码为：table text-align: left; background-color: #FFF; border-bottom-width: 8px; border-

28、bottom-style: double; border-bottom-color: #32B5D2; width: 700px;单元三：使用单元三：使用CSS样式美化页面样式美化页面图 table的样式规则定义任务实施任务实施3. 为网页设计为网页设计CSS样式并应用样式并应用（3）重定义H2标记样式 H2的内容只有一幅图片，定义为居中显示。单元三：使用单元三：使用CSS样式美化页面样式美化页面h2 text-align: center; height: 40px;任务实施任务实施3. 为网页设计为网页设计CSS样式并应用样式并应用（4）重定义H3标记样式 单元三：使用单元三：使用CSS样式

29、美化页面样式美化页面h3 font-size: 13px; font-weight: bold;任务实施任务实施3. 为网页设计为网页设计CSS样式并应用样式并应用（5）分别定义类样式.title1,.title2,.title3 单元三：使用单元三：使用CSS样式美化页面样式美化页面 由于各H3标记对应的内容在颜色上是不一样的，所以分别定义三个类样式.title1,.title2,.title3来设置文字的颜色。.title1的样式定义规则如图所示。.title2和.title3的样式定义规则与.tilte1相同，只是文字颜色分别为#006600和#ff9933。图 .title1的样式规则

30、定 任务实施任务实施3. 为网页设计为网页设计CSS样式并应用样式并应用（5）分别定义类样式.title1,.title2,.title3 样式代码为： 单元三：使用单元三：使用CSS样式美化页面样式美化页面.title1 color: #006600; .title3 color: #ff9933; .title2 color: #206996; 任务实施任务实施3. 为网页设计为网页设计CSS样式并应用样式并应用（5）分别定义类样式.title1,.title2,.title3 单元三：使用单元三：使用CSS样式美化页面样式美化页面类样式定义完成后，分别应用在三个H3标记上，效果如图所示。

31、图 应用了类样式后的h3效果任务实施任务实施3. 为网页设计为网页设计CSS样式并应用样式并应用（6）重定义P标记 单元三：使用单元三：使用CSS样式美化页面样式美化页面p line-height: 20px; text-indent: 2em; 任务实施任务实施3. 为网页设计为网页设计CSS样式并应用样式并应用（7）设置底部图片之间的间距 为了控制底部两幅图片之间的距离，可以定义一个类样式.pic1（设置其margin属性），然后应用于第一幅图片的img标记上。 单元三：使用单元三：使用CSS样式美化页面样式美化页面.pic1 margin-right: 25px; margin-left

32、: 25px; 任务实施任务实施3. 为网页设计为网页设计CSS样式并应用样式并应用（8）定义列表的样式 可以通过重定义LI标记来设置列表的样式，设置的属性包括：列表符、背景、行高和缩进等。 单元三：使用单元三：使用CSS样式美化页面样式美化页面li background-image: url(images/t02.png);background-repeat: no-repeat;list-style-type: none;line-height: 25px;background-position: left center;height: 25px;text-indent: 20px;wid

33、th: 460px;border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #68A704;任务实施任务实施3. 为网页设计为网页设计CSS样式并应用样式并应用 单元三：使用单元三：使用CSS样式美化页面样式美化页面页面最终效果图要点解析要点解析1对于网页的整体效果设置，可以通过重定义对于网页的整体效果设置，可以通过重定义body标签来标签来实现。实现。2对于某个对于某个HTML元素的共同设置，可能通过重定义该来元素的共同设置，可能通过重定义该来实现。实现。3对于只在局部使用的效果，可以通过定义类样式或对于只在局部使用的效果，可以通过定义类样式或ID样样式来实现，但要注意式来实现，但要注意ID样式只能在一个样式只能在一个HTML元素上使用，元素上使用，而类样式则可以在任意而类样式则可以在任意HTML元素上使用。元素上使用。单元三：使用单元三：使用CSS样式美化页面样式美化页面v完成如图网页的制作完成如图网页的制作巩固练习巩固练习设计要求设计要求 网页的内容通过手工编写HTML代码来完成； 网页中各元素的样式效果通过定义CSS样式来完成； 所有的CSS样式必须保存