网页设计基础第六章.ppt

1、第第6 6章章 CSSCSS高级应用高级应用第第5章介绍了章介绍了CSS的概念、语法结构和如何在网页中插入的概念、语法结构和如何在网页中插入CSS，以及字体、文本、背景和边框等以及字体、文本、背景和边框等CSS的基础应用。通过学习的基础应用。通过学习CSS的基础应用掌握了利用的基础应用掌握了利用CSS来设置网页元素样式、美化网页的基来设置网页元素样式、美化网页的基本方法。为了使网页更加美观和表现出多样化的效果，本方法。为了使网页更加美观和表现出多样化的效果，CSS还提还提供了包括列表属性、定位属性以及滤镜属性等在内的高级应用。供了包括列表属性、定位属性以及滤镜属性等在内的高级应用。6.1 6.

2、1 列表列表在在HTML中，使用中，使用和和标签来表示所建立的列表为有序列标签来表示所建立的列表为有序列表和无序列表。利用表和无序列表。利用CSS来定义列表，可以使列表样式设置得更来定义列表，可以使列表样式设置得更加丰富美观，如列表符号不仅可以使用圆点、方块和数字，还可加丰富美观，如列表符号不仅可以使用圆点、方块和数字，还可以使用图像等。以使用图像等。6.1.1 6.1.1 列表样式列表样式列表样式是指列表项目的符号类型，在列表样式是指列表项目的符号类型，在CSS中使用中使用list-style-type属性来进行设置，其语法格式如下：属性来进行设置，其语法格式如下：list-style-ty

3、pe:属性值属性值list-style-type的属性值可以选择的属性值可以选择disc（圆点）、（圆点）、circle（圆圈）、（圆圈）、square（方块）、（方块）、decimal（十进制数）、（十进制数）、lower-roman（小写罗（小写罗马字母）、马字母）、upper-roman（大写罗马字母）、（大写罗马字母）、lower-alpha（小写（小写字母）、字母）、upper-alpha（大写字母）和（大写字母）和none（无）。（无）。【例【例6-16-1】定义样式定义样式.p1.p9共共9种不同的列表样式，设置不同的列表样式。种不同的列表样式，设置不同的列表样式。样式代码如下：

4、样式代码如下：.p1list-style-type:disc.p2list-style-type:square.p3list-style-type:circle.p4list-style-type:decimal.p5list-style-type:lower-roman.p6list-style-type:upper-roman.p7list-style-type:lower-alpha.p8list-style-type:upper-alpha.p9list-style-type:none网页中元素应用这些样式后，在浏览器中的显示效果如图网页中元素应用这些样式后，在浏览器中的显示效果如图6

5、-1所所示。示。图图6-16-1设置列表样式设置列表样式6.1.2 6.1.2 列表图像列表图像列表图像属性列表图像属性list-style-image用来设置作为列表符号的图像类型。用来设置作为列表符号的图像类型。选择合适的列表图像可以丰富和美化列表符号。设置列表图像的选择合适的列表图像可以丰富和美化列表符号。设置列表图像的语法格式如下：语法格式如下：list-style-image:none|urllist-style-image的属性值的属性值none表示不使用图像符号，表示不使用图像符号，url表示指定表示指定图像的路径和名称。图像的路径和名称。【例【例6-26-2】定义样式定义样式.

6、p1设置列表不采用列表图像，样式设置列表不采用列表图像，样式.p2设置列表采用列设置列表采用列表图像，图像地址是相对路径表图像，图像地址是相对路径images/item.jpg。样式代码如下：。样式代码如下：.p1list-style-image:none.p2list-style-image:url(images/item.jpg)网页中元素应用这些样式后，在浏览器中的显示效果如图网页中元素应用这些样式后，在浏览器中的显示效果如图6-2所所示。示。图图6-26-2设置列表图像设置列表图像6.1.3 6.1.3 列表位置列表位置列表位置属性列表位置属性list-style-position用来

7、设置列表符号是否缩进，其用来设置列表符号是否缩进，其语法格式如下：语法格式如下：list-style-position:outside|inside其中，其中，outside（默认值）表示列表符号不向内缩进，（默认值）表示列表符号不向内缩进，inside表示表示列表符号向内缩进。列表符号向内缩进。【例【例6-26-2】定义样式定义样式.p1设置列表采用向内缩进，项目符号在段落的内部。设置列表采用向内缩进，项目符号在段落的内部。样式样式.p2不采用向内缩进，项目符号在段落之外。样式代码如下：不采用向内缩进，项目符号在段落之外。样式代码如下：.p1list-style-position:insid

8、e.p2list-style-position:outside网页中元素应用这些样式后，在浏览器中的显示效果如图网页中元素应用这些样式后，在浏览器中的显示效果如图6-3所所示。示。图图6-36-3设置列表位置设置列表位置6.2 6.2 定位定位在设计网页时，利用在设计网页时，利用HTML基本标签进行文字和图像的定位是一基本标签进行文字和图像的定位是一件很困难的事情，即使使用表格标签，也不能保证定位的精确性，件很困难的事情，即使使用表格标签，也不能保证定位的精确性，因为浏览器和操作平台的不同，会使显示的结果发生变化。然而，因为浏览器和操作平台的不同，会使显示的结果发生变化。然而，利用样式表就可以

9、精确地设定对象的位置，还能使各对象实现重利用样式表就可以精确地设定对象的位置，还能使各对象实现重叠效果。叠效果。6.2.1 6.2.1 定位方式定位方式样式表的样式表的position属性用来设置对象的定位方式，其语法格式如属性用来设置对象的定位方式，其语法格式如下：下：position:static|absolute|relative|fixedstatic（默认值）表示不设置元素的定位方式，其在文档中出现（默认值）表示不设置元素的定位方式，其在文档中出现的位置由浏览器文档流决定；的位置由浏览器文档流决定；absolute表示将元素定位在浏览器表示将元素定位在浏览器中的某个绝对位置（由中的某

10、个绝对位置（由top、bottom、left和和right的值决定的值决定)；relative是指相对于元素在文档中原本应该出现的位置，并依照是指相对于元素在文档中原本应该出现的位置，并依照top、bottom、left、和、和right的值来确定在浏览器中的位置；的值来确定在浏览器中的位置；fixed表示将元素定位在浏览器中的某个固定位置（由表示将元素定位在浏览器中的某个固定位置（由top、bottom、left和和right的值决定的值决定)，并且当用户拖动网页滚动条时，元素的位，并且当用户拖动网页滚动条时，元素的位置也不会改变。置也不会改变。6.2.1 6.2.1 定位方式定位方式可以看

11、出，除了默认值可以看出，除了默认值static，其他几种属性值通常需要配合定，其他几种属性值通常需要配合定位位置属性位位置属性top、bottom、left、right来一起使用。下面在介绍定来一起使用。下面在介绍定位位置属性时一并进行实例说明。位位置属性时一并进行实例说明。6.2.2 6.2.2 定位位置定位位置定位位置属性定位位置属性top、bottom、left、right用来设置对象距离上、下、用来设置对象距离上、下、左、右边界的距离，其语法格式如下：左、右边界的距离，其语法格式如下：top:长度长度|百分比百分比bottom:长度长度|百分比百分比left:长度长度|百分比百分比ri

12、ght:长度长度|百分比百分比长度包括长度值和长度单位，这和本章中介绍过的使用长度的各长度包括长度值和长度单位，这和本章中介绍过的使用长度的各种属性的用法相同；百分比是指相对其上一级元素的长度的百分种属性的用法相同；百分比是指相对其上一级元素的长度的百分比。比。【例【例6-46-4】以第以第5章综合实例中的网页为例，定义章综合实例中的网页为例，定义3个定位位置的样式个定位位置的样式类类.p1.p3，分别对应不设置定位方式、定位方式为，分别对应不设置定位方式、定位方式为absolute和定和定位方式为位方式为relative，后两个样式中距边界的距离均为上边距，后两个样式中距边界的距离均为上边距

13、80px、左边界左边界60px。样式代码如下：。样式代码如下：.p1position:static;.p2position:static;top:80px;left:60px;.p3position:static;top:80px;left:60px;网页中的图片元素应用这些样式后，在浏览器中的显示效果如图网页中的图片元素应用这些样式后，在浏览器中的显示效果如图6-4图图6-6所示。所示。图图6-4 6-4 不设置定位方式不设置定位方式图图6-5 6-5 定位方式为定位方式为absolute absolute 图图6-6 6-6 定位方式为定位方式为relative relative【例【例6

14、-46-4】图图6-4中的图片由于采用中的图片由于采用static的元素定位方式，按照网页的一般的元素定位方式，按照网页的一般格式顺序依次排列。图格式顺序依次排列。图6-5中的图片采用中的图片采用absolute的定位方式，图的定位方式，图片从文档中脱离，对应的边界是窗口的边界，所以位置是距窗口片从文档中脱离，对应的边界是窗口的边界，所以位置是距窗口上边界上边界80px、左边界、左边界60px。图。图6-6中的图片采用中的图片采用relative的定位方的定位方式，图片没有从文档中脱离，只是相对于它原来所在的位置距上式，图片没有从文档中脱离，只是相对于它原来所在的位置距上边界边界80px、左边

15、界、左边界60px。6.2.3 6.2.3 叠放次序叠放次序当定位多个对象并将其重叠时，可以使用当定位多个对象并将其重叠时，可以使用z-index属性来设定对属性来设定对象的层叠次序，其语法格式如下：象的层叠次序，其语法格式如下：z-index:整数值整数值z-index的属性值必须是整数，数值越大，叠放时越靠上层。的属性值必须是整数，数值越大，叠放时越靠上层。【例【例6-56-5】采用采用id选择符定义选择符定义3个样式类，并指定其个样式类，并指定其z-index属性的值。属性的值。#div-1 position:absolute;top:80px;left:60px;background-

16、color:#ff0000;z-index:1#div-2position:absolute;top:120px;left:120px;background-color:#00ff00;z-index:3#div-3 position:absolute;top:160px;left:80px;background-color:#0000ff;z-index:2 网页中元素应用这些样式后，在浏览器中的显示效果如图网页中元素应用这些样式后，在浏览器中的显示效果如图6-7所所示。示。图图6-76-7设置元素叠放次序设置元素叠放次序6.3 6.3 滤镜滤镜滤镜是滤镜是CSS的一种高级应用，它可以用来改

17、变图像的外观，以增的一种高级应用，它可以用来改变图像的外观，以增加其视觉效果。在网页内使用加其视觉效果。在网页内使用CSS的定义语法，即可将滤镜效果的定义语法，即可将滤镜效果添加到网页中。滤镜的效果只能在添加到网页中。滤镜的效果只能在IE 4.0以上的浏览器上实现。以上的浏览器上实现。CSS的滤镜很多，下面对一些常用的的滤镜很多，下面对一些常用的CSS滤镜进行介绍。滤镜进行介绍。6.3.1 Alpha6.3.1 AlphaAlpha滤镜用于设置目标元素的透明度。而且，可以通过指定坐滤镜用于设置目标元素的透明度。而且，可以通过指定坐标，来指定元素中特定范围的透明度并按照特定方式实现透明渐标，来指

18、定元素中特定范围的透明度并按照特定方式实现透明渐变效果。变效果。Alpha滤镜的语法格式如下：滤镜的语法格式如下：filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)6.3.1 Alpha6.3.1 Alpha其中，其中，Opacity为起始透明度值，取值为为起始透明度值，取值为0100，0为完全透明，为完全透明，100为完全不透明。其余参数为可选参数：为完全不透明。其余参数为可选参数：Fi

19、nishOpacity表示结表示结束时的透明度值；束时的透明度值；Style表示透明区域的样式，其中表示透明区域的样式，其中0代表统一变代表统一变化，化，1代表线形变化，代表线形变化，2代表放射状变化，代表放射状变化，3代表长方形变化；代表长方形变化；“StartX，StartY”表示透明区域起始坐标值；表示透明区域起始坐标值；“FinishX，FinishY”表示透明区域结束坐标值。表示透明区域结束坐标值。【例【例6-66-6】定义样式定义样式.p1.p9共共9种不同的透明滤镜效果，并将其应用到网页元素中。种不同的透明滤镜效果，并将其应用到网页元素中。.p1filter:Alpha(Opac

20、ity=100).p2filter:Alpha(Opacity=50).p3filter:Alpha(Opacity=20).p4filter:Alpha(Opacity=80,Style=1).p5filter:Alpha(Opacity=80,Style=2).p6filter:Alpha(Opacity=80,Style=3).p7filter:Alpha(Opacity=0,FinishOpacity=80,Style=1).p8filter:Alpha(Opacity=0,FinishOpacity=80,Style=1,StartX=50,FinishX=0).p9filter:A

21、lpha(Opacity=0,FinishOpacity=80,Style=1,StartX=50,StartY=0,FinishX=20,FinishY=20)网页中的图片在应用这些样式后，在浏览器中的显示效果如图网页中的图片在应用这些样式后，在浏览器中的显示效果如图6-8所示。所示。图图6-8 6-8 设置透明效果设置透明效果6.3.2 Blur6.3.2 BlurBlur滤镜用来设置目标元素的模糊效果。其语法格式如下：滤镜用来设置目标元素的模糊效果。其语法格式如下：filter:Blur(Add=add,Direction=direction,Strength=strength)其中，其

22、中，Add用来指定图像是否设置成模糊效果，其属性值可以是用来指定图像是否设置成模糊效果，其属性值可以是true和和1或者或者false和和0；Direction用来设置模糊方向，模糊效果按用来设置模糊方向，模糊效果按照顺时针方向每照顺时针方向每45为一个单位，默认值是为一个单位，默认值是-270；Strength用用于设置受到模糊效果影响的像素宽度，默认值是于设置受到模糊效果影响的像素宽度，默认值是5px。【例【例6-76-7】定义样式定义样式.p1.p4共共4种不同的模糊样式。种不同的模糊样式。样式代码如下：样式代码如下：.p1filter:Blur(Add=0).p2filter:Blur

23、(Add=1,Direction=45,Strength=10px).p3filter:Blur(Add=1,Direction=90,Strength=20px).p4filter:Blur(Add=1,Direction=135,Strength=30px)网页中的元素应用这些样式后，在浏览器中的显示效果如图网页中的元素应用这些样式后，在浏览器中的显示效果如图6-9所示。所示。图图6-9 6-9 设置模糊效果设置模糊效果6.3.3 Chroma6.3.3 ChromaChroma滤镜用来将一个元素中的指定颜色设为透明色，其语法滤镜用来将一个元素中的指定颜色设为透明色，其语法格式如下：格式如

24、下：filter:Chroma(Color=color)Color是指需要设为透明的颜色值，其属性值可以是关键字或是指需要设为透明的颜色值，其属性值可以是关键字或RGB值。值。【例【例6-86-8】定义样式定义样式.p1将颜色值为将颜色值为#00CC00的颜色均设为透明色，定义样的颜色均设为透明色，定义样式式.p2将颜色值将颜色值#CC0000的颜色设为透明色。样式代码如下：的颜色设为透明色。样式代码如下：.p1filter:Chroma(Color=#00CC00).p2filter:Chroma(Color=#CC0000)网页中的元素应用这些样式后，在浏览器中的显示效果如图网页中的元素应

25、用这些样式后，在浏览器中的显示效果如图6-10所示。所示。图图6-10 6-10 设置透明色设置透明色6.3.4 Shadow6.3.4 Shadow和和DropShadowDropShadowShadow和和DropShadow滤镜都可以用来设置目标元素的投影效果，滤镜都可以用来设置目标元素的投影效果，二者在效果和语法格式上稍有不同。二者在效果和语法格式上稍有不同。Shadow的投影是从原始元的投影是从原始元素延伸出的投影，而素延伸出的投影，而Dropshadow的投影距原始元素有一定的位的投影距原始元素有一定的位移效果。移效果。Shadow和和Dropshadow滤镜的语法格式分别如下：滤

26、镜的语法格式分别如下：filter:Shadow(Color=color,Direction=direction)filter:DropShadow(Color=color,OffX=offx,OffY=offy,Positive=positive)6.3.4 Shadow6.3.4 Shadow和和DropShadowDropShadow在这两个滤镜中都使用到的在这两个滤镜中都使用到的Color表示投影的颜色；表示投影的颜色；Shadow中的中的Direction表示投影的方向，其用法与表示投影的方向，其用法与Blur属性中的参数属性中的参数Direction的概念相同；的概念相同；Drop

27、Shadow中的中的OffX表示横向偏离值；表示横向偏离值；OffY表示表示纵向偏离值；纵向偏离值；Positive可以选择可以选择1或或0，其中，其中1表示为非透明像素建表示为非透明像素建立可见的投影，立可见的投影，0表示为透明像素部分建立可见的投影。表示为透明像素部分建立可见的投影。【例【例6-96-9】定义样式定义样式.p1和样式和样式.p2分别用分别用Shadow和和DropShadow滤镜设置目滤镜设置目标元素的投影效果。样式代码如下：标元素的投影效果。样式代码如下：.p1filter:Shadow(Color=“#6699CC”,Direction=“45”).p2filter:D

28、ropShadow(Color=“#6699CC”,OffX=“5”,OffY=“5”,Positive=“1”)网页中的元素应用这些样式后，在浏览器中的显示效果如图网页中的元素应用这些样式后，在浏览器中的显示效果如图6-11所示。所示。图图6-11 6-11 设置投影效果设置投影效果6.3.6 FlipH6.3.6 FlipH和和FlipVFlipVFlipH滤镜用于设置对象的水平翻转效果，滤镜用于设置对象的水平翻转效果，FlipV滤镜用于设置对滤镜用于设置对象的垂直翻转效果。这两个滤镜的语法格式分别如下：象的垂直翻转效果。这两个滤镜的语法格式分别如下：filter:FlipH filter

29、:FlipVFlipH和和FlipV的属性比较简单，不需要对参数进行赋值，直接使的属性比较简单，不需要对参数进行赋值，直接使用该属性即可实现目标元素的翻转效果。用该属性即可实现目标元素的翻转效果。【例【例6-106-10】定义样式定义样式.p1和样式和样式.p2分别用分别用FlipH和和FlipV设置目标元素水平翻设置目标元素水平翻转和垂直翻转的效果。样式代码如下：转和垂直翻转的效果。样式代码如下：.p1filter:FlipH.p2filter:FlipV使用使用FlipH和和FlipV属性设置图片翻转的效果如图属性设置图片翻转的效果如图6-12所示。所示。图图6-12 6-12 设置翻转效

30、果设置翻转效果6.3.7 Glow6.3.7 Glow属性属性Glow属性用来为对象的外边界增加光效，形成类似发光的效果。属性用来为对象的外边界增加光效，形成类似发光的效果。其语法格式如下：其语法格式如下：filter:Glow(Color=color,Strength=strength)其中，其中，Color用于设置发光颜色，用于设置发光颜色，Strength用于设置发光强度，用于设置发光强度，强度值范围从强度值范围从0255。【例【例6-116-11】设置样式设置样式.p1用用Glow滤镜设置目标元素边界光效颜色和强度，实滤镜设置目标元素边界光效颜色和强度，实现类似发光的效果。样式代码如下

31、：现类似发光的效果。样式代码如下：.p1filter:Glow(Color=#6699CC,Strength=5)网页中的元素应用网页中的元素应用.p1样式后，在浏览器中的显示效果如图样式后，在浏览器中的显示效果如图6-13所示。所示。图图6-13 6-13 设置发光效果设置发光效果本章小结本章小结本章介绍了本章介绍了CSS的一些高级应用，包括列表、定位和的一些高级应用，包括列表、定位和CSS滤镜效滤镜效果。这些高级应用实现的显示效果通常是无法通过果。这些高级应用实现的显示效果通常是无法通过HTML标签实标签实现的。其中，现的。其中，CSS中的定位属性为网页设计提供了新的页面布局中的定位属性为

32、网页设计提供了新的页面布局方法，而滤镜则通过方法，而滤镜则通过CSS实现了类似于图像处理的多种显示效果。实现了类似于图像处理的多种显示效果。习题习题6 6填空题填空题1.利用利用CSS中的中的_属性可以实现用图片作为列表符号。属性可以实现用图片作为列表符号。2.对于对于CSS中的中的z-index属性，数值越属性，数值越_，叠放层次越高。，叠放层次越高。3.在网页制作中，如果要实现图片的透明渐变效果，除了可以利在网页制作中，如果要实现图片的透明渐变效果，除了可以利用 图 像 处 理 软 件 处 理 图 片 外，还 可 以 使 用用 图 像 处 理 软 件 处 理 图 片 外，还 可 以 使 用 C S S 中 的中 的_滤镜来实现。滤镜来实现。4.在在CSS中，可以使用中，可以使用_滤镜来将一个元素中的指定颜滤镜来将一个元素中的指定颜色设为透明色。色设为透明色。操作题操作题将一篇文章制作成一个网页，要求不同的段落采用不同的滤镜将一篇文章制作成一个网页，要求不同的段落采用不同的滤镜效果，文章中的插图要求使用设置透明色和翻转效果进行滤镜效果，文章中的插图要求使用设置透明色和翻转效果进行滤镜特效处理。特效处理。