《Web开发技术》课件第4章.ppt

1、第4章CSS4.1 CSS简介简介4.2 CSS语法语法 4.3 常用常用CSS属性属性 4.4 CSS滤镜滤镜 4.5 IDV+CSS布局布局 习题习题 4.1 CSS 简简 介介4.1.1 CSS概念概念网页设计用HTML标记来定义页面文档及格式，例如通过、等标记来表达“标题”、“段落”、“表格”、“链接”之类的信息。由于这些标记不能满足更多的文档样式需求，浏览器(Netscape和IE等)不断推出新的HTML标记和属性到HTML规范之中，致使文档内容要独立于文档表现形式变得越来越困难。为了解决这个问题，万维网联盟(The World Wide Web Consortium，简称W3C)肩

2、负起了HTML标准化的使命，将动态网页(Dynamic HTML，简称DHTML)分为脚本语言(包括JavaScript、VBScript等)、支持动态效果的浏览器和CSS样式表三个部分来实现。样式表(Style Sheet)是专门描述结构文档表现方式的文档，它既可以描述文档如何在屏幕上显示，也可以描述文档的打印效果，甚至声音效果。CSS就是Cascading Style Sheets的缩写，中文翻译为“层叠样式表”，简称样式表。CSS是一种格式化网页的标准方式，它极大地扩展了HTML的功能。CSS具有如下优点：(1)降低网站的维护工作量。CSS可以定义HTML中各类字体、边框、颜色、背景等属

3、性，通过定义外部风格文件(.css)来实现整个网站页面风格的统一，只要更改CSS文件就可以使网站的所有网页显示风格随时更新，从而大大降低了网站的开发和维护工作量。(2)CSS文件体积小。CSS不仅能定义各类文字样式，还可以为文字创造出丰富多彩的图形效果。使用文字加样式表来代替部分图形，可减小网页文件的大小，提高网页的浏览访问速度。运用CSS可使HTML文件的源代码更少，从而使文件的下载速度更快。(3)CSS便于网络信息检索。CSS实现了样式描述和数据描述相分离。由于网页的样式描述并不影响文档中数据的内在结构，因此，网络搜索引擎对文档进行搜索时，不会被种种显示描述标记所影响。(4)CSS功能强大

4、。CSS具有丰富的表达效果，支持文字和图像的精确定位、三维技术和交互操作等，对文档的表现力远远超过了HTML标记。4.1.2 CSS声明方法声明方法 CSS声明方法主要分为三种：基本声明、集体声明和分项声明。1基本声明基本声明 基本声明格式为：标记 性质名称:设定值 例如：H3 COLOR:BLUE -即为一组声明2集体声明集体声明 CSS同时声明数个元素(标记)的一组或数组样式规则，格式为：标记A,标记B,标记C,.性质名称1:设定值1;性质名称2:设定值2;例如：TD,P,DIV COLOR:BLUE;font-size:30pt;3分项声明分项声明 声明的标记性质不同，则声明方式不会互相

5、抵触。如果对同样一个性质作了重复的声明，则以“后声明”的值为准。分项声明格式为：标记A性质名称1:设定值1;性质名称2:设定值2;性质名称3:设定值3;例如：TD COLOR:BLUE;font-size:30ptTD font-family:Arial;line-height:150%4.1.3 CSS种类种类Cascading Style Sheet中的Cascading是“层叠”的意思，也就是说在同一个Web文档中可以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会在显示时被采用。按样式表插入的形式可将CSS分为以下三种：内嵌样式(Inline Style)

6、；内部样式表(Internal Style Sheet)；外部样式表(External Style Sheet)。1内嵌样式内嵌样式 内嵌样式是将STYLE属性直接加在超文本标记内。格式如下：标记 STYLE=“性质1:设定值1;性质2:设定值2;.【例4.1】内嵌样式举例。图4.1 内嵌样式显示效果内嵌样式运行结果如图4.1所示。由于内嵌样式将表现和内容混杂在一起，任意地嵌入到各个标签中，使得整篇文件缺乏“统一性”，因此请慎用这个方法。2内部样式表内部样式表 内部样式表将样式规则写在标签之中，分为两步：(1)在html文件头(head)加入：。(2)在文档体(body)加入即可。【例4.2】

7、内部样式表举例。New Html Document H1.mylayout border-width:1;border:solid;text-align:center;color:red 内部样式表3外部样式表外部样式表使用外部样式表最便于管理整个网站的网页风貌，它让网页的文字内容和版面设计分开。在一个外部样式表文档内定义网页的外观风貌，所有链接此文档的网页都会反映出相同的外观。外部样式表由如下两种方式引入：(1)使用link引入。格式为：将定义的样式保存为单独一个文件home.css，通过link引入到当前网页文件中。通常将link标签写在网页的部分中。(2)使用import引入，类似LIN

8、K用法，但必须放在中。格式为：import url(home.css);说明：行末的分号必须存在。【例4.3】外部样式表举例。home.css文件：H1.mylayout border-width:1;border:solid;text-align:center;color:redhtml文件：方法一，使用link引入：这个标题使用了Style。这个标题没有使用Style。rel是“关联”的意思，是指关联“样式表”。type总是设置成text/css，用于描述使用link标签载入的数据类型。这样，浏览器就知道这是层叠样式表。方法二：使用import引入：import url(home.css)

9、;这个标题使用了Style。这个标题没有使用Style。外部样式表可以在任何文本编辑器中编辑，只是文件中不能包含任何的html标签。样式表应该以css为扩展名来保存。4.2 CSS 语语 法法CSS的定义由三个部分组成：选择符(selector)、属性(properties)和属性的取值(value)。其基本格式是：selector property:value4.2.1 选择符选择符任何HTML元素都可以是一个CSS选择符，如body、p、table等。例如：body color:black其中，选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值。这样做的效

10、果是使页面中的文字为黑色。属性和值要用冒号隔开。如果属性的值由多个单词组成，必须在值上加引号。例如，字体的名称经常是几个单词的组合，则必须加引号，如p font-family:“sans serif”。如果需要对一个选择符指定多个属性，则需使用分号将所有的属性和值分开。例如：ptext-align:center;color:black;font-family:arial解释如下：段落排列居中，段落中文字为黑色，字体是arial。选择符组是指将相同属性和值的选择符组合起来，用逗号将选择符分开，这样可以减少样式重复定义，例如：p，tablefont-size:9pt /*段落和表格里的文字尺寸都为

11、9号字*/效果完全等效于：p font-size:9pt table font-size:9pt【例4.4】选择符举例。h1,p,acolor:#FF0000;font:Arial,Helvetica,sans-serif;CSS选择符1CSS选择符2集体选择符新浪浏览器显示效果如图4.2所示。图4.2 选择符举例4.2.2 类选择符类选择符如果要让相同的标记具有不同的样式，比如想使例4.4中的两个h1标记具有不同的样式定义，那么需要用到类选择符。在定义类选择符时，需要在自定义类的名称前面加上一个点号。例如，在页面段落中，有的文字居中，有的文字左对齐，此时可以定义如下的两个类选择符：p.lef

12、ttext-align:leftp.centertext-align:center在页面中使用如下的方法：段落文字左对齐。段落文字居中。4.2.3 伪类伪类伪类作为一种特殊的类选择符，其最大的用处就是使链接在不同状态下具有不同的样式效果。例如将活动状态、已被访问状态、未被访问状态和鼠标悬停状态等用不同的颜色标记，表示为对象(选择符)在某个特殊状态下(伪类)的样式。伪类的取值如表4.1所示。伪类和类不同，它是CSS已经定义好的，不能像类选择符一样可以由我们自己随意定义。伪类的语法是在选择符原有的语法里加上一个伪类(pseudo-class)。格式如下：selector:pseudo-class

13、property:value 即(选择符:伪类 属性:值)或 选择符.类:伪元素 属性:值 注意：在CSS定义中，a:hover必须被置于a:link和a:visited之后才是有效的。同时，a:active必须被置于a:hover之后也才是有效的。伪类名称对大小写不敏感。【例4.5】伪类举例。a.one:link color:#ff0000/*设定未被访问链接样式*/a.one:visited color:#0000ff/*设定已被访问链接样式*/a.one:hover color:#ffcc00/*设定鼠标移到链接上时的样式*/a.two:link color:#ff0000a.two:v

14、isited color:#0000ffa.two:hover font-size:150%a.three:link color:#ff0000a.three:visited color:#0000ffa.three:hover background:#66ff66a.four:link color:#ff0000a.four:visited color:#0000ffa.four:hover font-family:monospacea.five:link color:#ff0000;text-decoration:nonea.five:visited color:#0000ff;text-

15、decoration:nonea.five:hover text-decoration:underlineMouse over the links to see them change layout.This link changes colorThis link changes font-sizeThis link changes background-colorThis link changes font-familyThis link changes text-decoration浏览器显示效果如图4.3所示。读者可以将鼠标移动到运行结果的每一行，看看会有什么效果。图4.3 伪类举例4.

16、2.4 伪元素伪元素伪元素指元素的一部分，经常应用于表示段落的第一个字母等场合。伪元素的取值如表4.2所示。下面介绍两种伪元素。(1)首行伪元素。通常报纸上的文章的首行都会以粗体、全部大写的形式出现。CSS将其作为首行伪元素，可以用于任何块级元素(例如P、H1等等)。例如：P:first-line font-variant:small-caps;font-weight:bold(2)首个字母伪元素。报纸上的文章的每段首行的第一个字母都会以粗体、大写的形式出现。CSS将其作为首个字母伪元素。首个字母伪元素可以用于任何块级元素。【例4.6】伪元素举例。P:first-letter font-siz

17、e:300%;float:left 这是首个字母伪元素浏览器显示效果如图4.4所示，首个字母比普通字体加大三倍。图4.4 伪元素举例4.2.5 ID选择符选择符在HTML页面中，页面元素可以使用ID选择符来标识。定义ID选择符时在ID名称前面加一个“#”号，有如下两种应用：(1)在“#”号前指定标记名，只能应用于指定标记中具有此ID的元素。(2)以“#”号开头，可应用于所有具有此ID的元素。【例4.7】ID选择符举例。#onecolor:#FF0000;#twocolor:#000000;ID选择符1ID选择符2浏览器显示效果如图4.5所示。图4.5 ID选择符举例4.2.6 CSS继承继承

18、一般情况下，嵌套的选择符会继承外层选择符指定的属性值，除非另外更改。例如，一个在BODY中定义的颜色值会被文本中的选择符应用。CSS的继承规则有如下三条：(1)外部的元素样式会保留下来继承给该元素。(2)当样式表继承遇到冲突时，以最后定义的样式为准。(3)不同的选择符定义相同的元素时，其优先级次序依次从高到低为行内样式、ID样式、类别样式、标记样式。除非使用!important改变提升某样式的优先权，例如：Pcolor:#FF0000!important.blue color:#0000FF#id1 color:#FFFF00三种样式用于一个段落元素color时，最后会使!important申

19、明的HTML标记选择符样式为红色文字，因为!important优先级别最高。如果去掉!important，则优先权最高的ID选择符为黄色文字。【例4.8】CSS继承规则第2条举例。h3 color:red;text-align:left;font-size:8pt;内部样式表对h3选择器的两个属性设定如下：h3 text-align:right;font-size:20pt;假如拥有内部样式表的页面与外部样式表链接，则其最终得到的样式如下：color:red;text-align:right;font-size:20pt;即颜色属性将被继承于外部样式表，而文字排列(text-alignment

20、)和字体尺寸(font-size)会被内部样式表中的规则取代。【例4.9】CSS继承的优先规则举例。h1color:#000000;.yellowcolor:#FF0000;.greencolor:#00FF00;#bluecolor:#0000FF;这里以标记选择符为准 这里以类选择符为准 这里以前一个为准 这里以行内定义的样式为准 这里以ID选择符定义的为准浏览器显示效果如图4.6所示。图4.6 继承优先规则图4.2.7 注释注释在CSS中通过插入注释来说明代码的意思。注释有利于编程者或别人在随后的编辑和更改代码过程中较为方便地理解代码的含义。在浏览器中，注释的内容是不显示的。CSS注释以

21、“/*”开头，以“*/”结尾，例如：P /*定义段落样式表*/text-align:center;/*文本居中排列*/color:black;/*文字为黑色*/font-family:arial /*字体为arial*/4.3 常用常用CSS属性属性CSS对HTML页面中的各种元素，如图片、文字、表格等元素的效果进行控制，可以做到HTML所无法达到的效果，使得网页更加美观。4.3.1 字体属性字体属性CSS 字体属性允许改变HTML中字体的种类、粗细、尺寸以及样式。其说明如表4.3所示。【例4.10】font-family属性设置。字体名称属性 font-family.s1 font-fami

22、ly:Arial.s2 font-family:Tahoma.s3 font-family:Courier.s4 font-family:Verdana.s5 font-family:“Book Antiqua”The font-family value of the text is the browser default font.The fon-family value of the text is“Arial”。The fon-family value of the text is“Tahoma”。The fon-family value of the text is“Courier”。

23、The fon-family value of the text is“Verdana”。The fon-family value of the text is“Book Antiqua”。运行结果如图4.7所示。图4.7 font-family属性运行结果【例4.11】font-size属性设置。字体大小属性 font-sizeBODYfont-size:10pt.s1 font-size:16px.s2 font-size:16pt/*相对于基本单位的百分率大小*/.s3 font-size:80%/*相对于IE默认值大小*/.s4 font-size:larger/*相对于中所用的数字参

24、数：xx-small x-small small medium large x-large xx-large*/.s5 font-size:xx-large这段文字大小是10pt。这段文字大小是16px。这段文字大小是16pt。这段文字大小是10pt的80%。这段文字的大小比10pt大。这段文字的大小是特大号(xx-large)。运行结果如图4.8所示。图4.8 font-size属性运行结果【例4.12】font-style属性设置。字体风格属性 font-style.s1 font-style:italic.s2 font-style:oblique这段文字风格是normal，正常显示。n

25、ormal是字体风格属性(font-style)的缺省值。这段文字的字体风格(font-style)属性值是italic，斜体显示。运行结果如图4.9所示。图4.9 font-style属性运行结果【例4.13】font-weight属性设置。字体浓淡属性 font-weight这段文字没有设浓淡属性。这段文字字体的浓淡属性(font-weight)值是bold。这段文字字体的浓淡属性(font-weight)值是lighter。这段文字字体的浓淡属性值(font-weight)是200。这段文字字体的浓淡属性值(font-weight)是800。运行结果如图4.10所示。图4.10 font

26、-weight属性运行结果【例4.14】字体属性。字体属性 font.s1 font:italic normal bold 11pt Arial.s2 font:normal small-caps normal 14pt Courier这段文字的字体风格(font-style)属性值是italic，字体变量(font-variant)属性值是normal，字体浓淡(font-weight)属性值是bold，字体大小(font-size)属性值是11pt，字体名称(font-family)属性值是Arial。这段文字的字体风格(font-style)属性值是normal，字体变量(font-va

27、riant)属性值是small-caps，字体浓淡(font-weight)属性值是normal，字体大小(font-size)属性值是14pt，字体名称(font-family)属性值是Courier。运行结果如图4.11所示。图4.11 字体属性运行结果【例4.15】颜色属性。颜色属性 color.p1color:gray.p2color:#FF0000.p3color:#3300FF这段没有设置颜色属性(color)。这段的颜色属性(color)值是灰色。这段的颜色属性(color)值是红色。这段的颜色属性(color)值是蓝色。运行结果如图4.12所示。图4.12 颜色属性运行结果4.

28、3.2 文本属性文本属性CSS 文本属性用来控制文本的外观。文本属性可以改变文本的颜色，增加或减少文本中的字符间距，排列、装饰文本。文本属性说明如表4.4所示。【例4.16】文本对齐属性。文本对齐属性 text-align.p1text-align:left.p2 text-align:right.p3text-align:center这段的本文对齐属性(text-align)值为居左。这段的本文对齐属性(text-align)值为居右。这段的本文对齐属性(text-align)值为居中。运行结果如图4.13所示。图4.13 文本对齐属性运行结果【例4.17】文本修饰属性。文本修饰属性 tex

29、t-decoration.p1text-decoration:none.p2 text-decoration:underline.p3text-decoration:line-through.p4 text-decoration:overline文本修饰属性(text-decoration)的缺省值是none。这段的文本修饰属性(text-decoration)值是underline。这段的文本修饰属性(text-decoration)值是line-through。这段的文本修饰属性(text-decoration)值是overline。运行结果如图4.14所示。图4.14 文本修饰属性运行结

30、果【例4.18】文本缩进属性。文本缩进属性 text-indent.p1 text-indent:20mm.p2 text-indent:50%下面两端都设定CSS文本缩进属性(text-indent)，第一段用长度方法设值，第二段用百分比方法设值。第一段用长度方法设值第二段用百分比方法设值运行结果如图4.15所示。图4.15 文本缩进属性运行结果【例4.19】行高属性。行高属性 line-height.p1 line-height:1cm.p2 line-height:2cm.p3 line-height:3cm这个段落的CSS行高属性值为1cm，即每行之间的距离是1厘米。这个段落的CSS行

31、高属性值为2cm，即每行之间的距离是2厘米。这个段落的CSS行高属性值为3cm，即每行之间的距离是3厘米。运行结果如图4.16所示。图4.16 行高属性运行结果【例4.20】大小写属性。p.uppercase text-transform:uppercasep.lowercase text-transform:lowercasep.capitalize text-transform:capitalizeThis is some text in a paragraphThis is some text in a paragraphThis is some text in a paragraph运

32、行结果如图4.17所示。图4.17 大小写属性运行结果4.3.3 颜色和背景属性颜色和背景属性CSS背景属性允许控制HTML元素的背景颜色，可以将图像设置为网页背景等。颜色和背景属性说明如表4.5所示。【例4.21】背景和颜色属性。p1 color:rgb(80%,0%,0%);p2 color:#00FF00;p3 color:blue; 通过rgb控制颜色 通过十六进制数控制颜色 通过描述控制颜色运行结果如图4.18所示。图4.18 背景和颜色属性运行结果4.3.4 容器属性容器属性CSS把HTML中的部分称为容器(BOX)。BOX有三类属性：边框属性(bor

33、der)、填充距属性(padding)和边距属性(margin)。容器属性示意图如图4.19所示。图4.19 容器属性示意图1边框属性边框属性CSS边框属性允许规定元素边框的样式和颜色。在HTML中，我们使用表格(table)来创建文本周围的边框。而使用CSS边框属性，不但可以创建出效果出色的边框，而且可以应用于任何元素。边框属性说明如表4.6所示。【例4.22】边框风格属性。边框风格属性 border-style.d1 border-style:none;.d2 border-style:solid;.d3 border-style:dotted;.d4 border-style:dashe

34、d;.d5 border-style:double;.d6 border-style:groove;.d7 border-style:ridge;.d8 border-style:inset;.d9 border-style:outset;1.这个div的CSS边框风格(border-style)属性缺省值是none。2.这个div的CSS边框风格(border-style)属性是none。3.这个div的CSS边框风格(border-style)属性是solid。4.这个div的CSS边框风格(border-style)属性是dotted。5.这个div的CSS边框风格(border-sty

35、le)属性是dashed。6.这个div的CSS边框风格(border-style)属性是double。7.这个div的CSS边框风格(border-style)属性是groove。8.这个div的CSS边框风格(border-style)属性是ridge。9.这个div的CSS边框风格(border-style)属性是inset。10.这个div的CSS边框风格(border-style)属性是outset。运行结果如图4.20所示。图4.20 边框风格属性运行结果【例4.23】边框宽度属性。边框宽度 border-width.d1 border-style:solid;.d2 border

36、-width:thin;border-style:solid;.d3 border-width:thick;border-style:solid;.d4 border-width:10px;border-style:solid;.d5 border-width:5mm;border-style:solid;这个div的CSS边框宽度(border-width)属性缺省值是medium。这个div的CSS边框宽度(border-width)属性值是thin。这个div的CSS边框宽度(border-width)属性值是thick。这个div的CSS边框宽度(border-width)属性值是10

37、px。这个div的CSS边框宽度(border-width)属性值是5mm。运行结果如图4.21所示。图4.21 边框宽度属性运行结果【例4.24】边框颜色属性。边框颜色属性 border-color.d1 border-color:#FFA500;border-style:solid;.d2 border-color:#33CC00;border-style:solid;.d3 border-color:#6600FF;border-style:solid;.d4 border-color:#FF6347;border-style:solid;.d5 border-color:gray;bo

38、rder-style:solid;这个div的CSS边框颜色(border-color)属性值是橙色。这个div的CSS边框颜色(border-color)属性值是绿色。这个div的CSS边框颜色(border-color)属性值是蓝色。这个div的CSS边框颜色(border-color)属性值是番茄红。这个div的CSS边框颜色(border-color)属性值是灰色。运行结果如图4.22所示。图4.22 边框颜色属性运行结果【例4.25】单个边框属性。单个边框属性.d1 border-top:5px solid#FF0000.d2 border-bottom:5px solid#FF00

39、00.d3 border-left:5px solid#FF0000.d4 border-right:5px solid#FF0000 单个边框属性：设置上边框用border-top设置下边框用border-bottom设置左边框用border-left设置右边框用border-right运行结果如图4.23所示。图4.23 单个边框属性运行结果2边距属性边距属性CSS边距属性用于定义元素周围的空间，可以对上、右、下、左边距进行改变。边距属性说明如表4.7所示。【例4.26】边距属性。CSS边距属性 margin.D1border:5px solid#FF0000;.D2border:5px

40、solid gray;.D3margin:1cm;border:3px solid gray;没有margin上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。和上面两个div的CSS属性设置唯一不同的是，下面两个div中，里面的那个div设置了边距属性(margin)，边距为1厘米，表示这个div上下左右的边距都为1厘米。margin设为1cm运行结果如图4.24所示。图4.24 CSS边距属性运行结果3填充距属性填充距属性CSS填充距属性定义了元素边框和元素内容之间的空白。填充距

41、属性说明如表4.8所示。【例4.27】填充距属性。h1 padding-bottom:10px 4.3.5 定位属性定位属性CSS的定位属性可以准确地定位一个页面的样式，如颜色、字体、边框等，主要对页面的布局和控制进行定义，使页面展现得更加完美，更加富有动感。CSS提供的定位属性如表4.9所示。1绝对定位绝对定位(position:absolute)绝对定位能精确地定位要素在页面的独立位置，而不去考虑页面的其他要素的定位设置。如果元素被定义为绝对定位属性，则其位置将从IE浏览器左上角的0点开始计算。当需要确定某个元素在浏览器内容区的某个位置时，就可以采用绝对定位。【例4.28】绝对定位举例。绝

42、对定位 绝对定位从例4.28中可以看出，content的位置不再与container的位置相关了，其左边距离页面上边界30px，上边距离上边界为30px。代码的执行效果如图4.25所示。图4.25 绝对定位运行结果注意：top、right、bottom、left属性在配合position属性使用时，表示DIV各个边界距离页边边框的距离。2相对定位相对定位(position:relative)相对定位是指元素在相对于文档布局的原始位置上进行偏移，即所定位的要素位置相对于在文件中所分配的位置。相对定位属性的标签在所属的范围内可以进行上、下、左、右的移动。这里所指的移动和padding或是margi

43、n所产生的位置变化是不一样的。padding与margin是元素本身的一种边距与填充距离，而并不是真正的位置移动。但是，被定义为relative的元素是真正的移动，所产生的移动距离是从margin的外围到父级标签内侧之间这一段。【例4.29】相对定位举例。相对定位 相对定位当content的position属性设置为relative时，它的位置变成了相对位置。它距离container左边10px，距离container上边框15px。代码的执行效果如图4.26所示。注意：使用相对定位时要小心，否则容易将页面弄得非常乱。除了相对定位和绝对定位外，还可以使用静止(static)参数值。图4.26

44、相对定位运行结果4.3.6 列表样式属性列表样式属性在Word软件中有“项目符号和编号”的功能，可将相关的并列内容垂直排列。同样，CSS 列表样式属性也是这样的。它允许放置、更改列表标记，或者将图像作为分级标记，从而使得网页内容排版整齐，给浏览者一目了然的感觉。列表样式包括列表符号、图形符号、列表位置三部分。列表样式属性如表4.10所示。1列表符号列表符号【例4.30】list-style-type属性。ol.decimal list-style-type:decimalol.lroman list-style-type:lower-romanol.uroman list-style-type

45、:upper-romanol.lalpha list-style-type:lower-alphaol.ualpha list-style-type:upper-alphaCoffeeTeaCoca ColaCoffeeTeaCoca ColaCoffeeTeaCoca ColaCoffeeTeaCoca ColaCoffeeTeaCoca Cola运行结果如图4.27所示。图4.27 list-style-type属性运行结果2图形符号图形符号 图形符号用来将原来列表的项目符号用图形来代替。其基本格式如下：list-style-image：url 其中，URL用来代替项目符号的图形文件的地址

46、，可以使用相对地址或绝对地址。3列表位置列表位置 列表位置描述列表在何处显示。其基本格式如下：list-style-position：参数 其中，参数值是：inside：在BOX模型内部显示。outside：在BOX模型外部显示。4.3.7 鼠标属性鼠标属性 在网页上，鼠标平时呈箭头形，指向链接时成为手形，等待网页下载时成为沙漏形也就是说，当系统处于不同的状态时，都会使鼠标的形状发生改变。CSS可以改变鼠标的属性，当鼠标移动到不同的元素对象上面时，让鼠标以不同的形状、图案显示。cursor属性如表4.11所示。【例4.31】cursor属性。鼠标变形 鼠标移到相应的位置观看效果 手的形状移动

47、反方向 等待求助 4.3.8 媒体属性媒体属性样式单的一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、纸媒介等。某些 CSS 属性仅仅被设计为针对某些媒介，比如“voice-family”属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介。例如，“font-size”属性可被用于显示器以及印刷媒介，但是也许会带有不同的值。显示器上显示的文档通常会需要比纸媒介文档更大的字号。同时，在显示器上，sans-serif字体更易阅读；而在纸媒介上，serif 字体更易阅读。media规则可以在相同的样式表中使用不同的样式规则来针对不同的媒介。媒体属性说明如表4.12所示。【例4.32】

48、在显示器上显示14个像素的Verdana字体。但是假如页面需要被打印，将使用10个像素的Times字体。media screenp.test font-family:verdana,sans-serif;font-size:14pxmedia printp.test font-family:times,serif;font-size:10pxmedia screen,printp.test font-weight:bold.注意：不论针对显示器还是纸媒介，font-weight都被设置为粗体。4.4 CSS滤镜滤镜CSS功能十分强大，不仅可以实现类似于Word的很多功能，还可以实现Photos

49、hop软件的滤镜功能。CSS滤镜属性使得可视化的滤镜和转换效果应用于一个标准的HTML元素(如图片、文本容器等)，以实现特殊的艺术效果。其语法结构如下：style=“filter:filtername(fpara1,fpara2)其中：filtername为滤镜名；fpara1，fpara2为滤镜参数。CSS滤镜属性如表4.13所示。4.4.1 alpha滤镜滤镜alpha滤镜的基本格式为：STYLE=“filter:alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX,StartY=startY

50、,FinishX=finishX,FinishY=finishY)”alpha滤镜属性说明如表4.14所示。【例4.33】alpha滤镜。/*原图*/*alpha滤镜*/*alpha滤镜*/运行效果如图4.28所示。图4.28 alpha滤镜的制作效果4.4.2 blur滤镜滤镜blur滤镜的基本格式为：STYLE=“filter:blur(Add=add,Direction=direction,Strength=strength)”blur滤镜属性说明如表4.15所示。【例4.34】blur滤镜。blur滤镜的制作效果如图4.29所示。图4.29 blur滤镜的制作效果4.4.3 DropS