用层叠样式表CSS技术实现网页特效

第２６卷第３期　２０１０年５月　昆明冶金高等专科学校学报　Ｊｏｕｒｎａｌ　ｏｆ　Ｋｕｎｍｉｎｇ　Ｍｅｔａｌｌｕｒｇｙ　Ｃｏｌｌｅｇｅ　Ｖ０１．２６　Ｎｏ．３　Ｍａｖ．２０ｌ１０　ｄｏｉ：１０．３９６９／ｊ．ｉｓｓｎ．１００９—０４７９．２０１０．０３．００２　用层叠样式表ＣＳＳ技术实现网页特效　丁海燕　，邹　疆ｈ，邱　莎　（１．云南大学信息学院，云南昆明６５００９１；２．昆明学院ａ．现代教育技术中心；ｂ．计算机系，云南昆明６５００３１）　摘要：ＣＳＳ是为了弥补ＨＴＭＬ在样式编排上的不足所制定的一套扩展样式标准。ＣＳＳ技术在ＨＴＭＬ中不仅可以　美化网页，还可以改善ＨＴＭＬ文档的结构，减少格式重复代码，增强ｗｅＩ】编程的灵活性，提高程序源码的可读　性和执行效率。阐述了ＣＳＳ样式的概念，对比了ＣＳＳ与ＨＴＭＬ样式，介绍了ＣＳＳ的几种定义和引用方法，最后　用实例展现了ＣＳＳ典型网页效果：　关键词：ＣＳＳ：滤镜；网页特效　中图分类号：ＴＰ３９３．０９　文献标识码：Ａ　文章编号：１００９—０４７９一（２０１０）０３—０００５—０４　Ｗｅｂｐａｇｅ　Ｓｐｅｃｉａｌ　Ｅｆｉｃａｃｙ　ｂｙ　Ｕｓｉｎｇ　ＣＳＳ　Ｔｅｃｈｎｏｌｏｇｙ　ｆＤＩＮＧ　Ｈａｌ—ｙａｎ　，ＺＯＵ　Ｊｉａｎｇ　，ＱＩＵ　Ｓｈａ　（１．Ｆａｃｕｌｔｙ　ｏｆ　Ｉｎｆｏｒｍａｔｉｏｎ　Ｓｃｉｅｎｃｅ，Ｙｕｎｎａｎ　Ｕｎｉｖｅｒｓｉｔｙ，Ｋｕｎｍｉｎｇ　６５００９１，Ｃｈｉｎａ；２．Ｕｎｉｖｅｒｓｉｔｙ　Ｋｕｎｎｆｉｎｇ　ａ．Ｍｏｄｅｒｎ　Ｅｄｕｃａｔｉｏｎ　ａｎｄ　Ｔｅｃｈｎｏｌｏｇｙ；ｂ．Ｄｅｐａｒｔｍｅｎｔ　ｏｆ　Ｃｏｍｐｕｔｅｒ　Ｓｃｉｅｎｃｅ，Ｋｕｎｍｉｎｇ　６５００３　１，Ｃｈｉｎａ）　Ａｂｓｔｒａｃｔ：Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔ（ＣＳＳ）ｉｓ　ａ　ｓｅｔ　ｏｆ　ｓｔｙｌｅ　ｓｔａｎｄａｒｄｓ　ｅｓｔａｂｌｉｓｈｅｄ　ｂｙ　Ｗ３　Ｃ　ｔｏ　ｍａｋｅ　ｕｐ　ｔｈｅ　ｓｈｏｒｔａｇｅ　ｏｆ　ｓｔｙｌｅ　ｌａｙｏｕｔ　ｉｎ　ＨＴＭＬ．ＣＳＳ　ｔｅｃｈｎｏｌｏｇｙ　ｎｏｔ　ｏｎｌｙ　ｃａｎ　ｂｅａｕｔｉｆｙ　ｗｅｂｐａｇｅ，ｂｕｔ　ａｌｓｏ　ｉｍｐｒｏｖｅ　ｓｔｒｕｅ—　ｔｕｒｅ　ｏｆ　ＨＴＭＬ　ｄｏｃｕｍｅｎｔ，ｒｅｄｕｃｅ　ｆｏｒｍａｔ　ｒｅｐｅｔｉｔｉｏｎ　ｃｏｄｅｓ，ｅｎｈａｎｃｅ　ｔｈｅ　ａｇｉｌｉｔｙ　ｏｆ　ｗｅｂ　ｐｒｏｇｒａｍｍｉｎｇ　ａｎｄ　ｉｍ—　ｐｒｏｖｅ　ｓｏｕｒｃｅ　ｃｏｄｅ　ｒｅａｄａｂｉｌｉｔｙ　ａｎｄ　ｅｘｅｃｕｔｉｏｎ　ｅｆｉｃｉｆｅｎｃｙ．Ｔｈｅ　ｐａｐｅｒ　ｅｘｐａｔｉａｔｅｄ　ｔｈｅ　ｃｏｎｃｅｐｔ　ｏｆ　ＣＳＳ，ｃｏｎｔｒａｓ—　ｔｅｄ　ＣＳＳ　ｗｉｔｈ　ＨＴＭＬ，ｉｎｔｒｏｄｕｃｅｄ　ｓｅｖｅｒａｌ　ｄｅｆｉｎｉｔｉｏｎｓ　ｏｆ　ＣＳＳ　ａｎｄ　ｉｔｓ　ｃｉｔａｔｉｏｎ　ｍｅｔｈｏｄｓ　ａｎｄ　ｓｈｏｗｅｄ　ｓｏｍｅ　ｔｙｐｉ—　ｃａｌ　ＣＳＳ　ｅｆｉｃａｃｙ　ｗｉｆｔｈ　ｅｘａｍｐｌｅｓ．　Ｋｅｙ　ｗｏｒｄｓ：ＣＳＳ；ｆｉｌｔｅｒ；ｗｅｂｐａｇｅ　ｓｐｅｃｉａｌ　ｅｆｉｃａｃｙ　ｆＣＳＳ（Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔ）的中文全称为层叠样式表，应用ＣＳＳ可以扩展ＨＴＭＬ的功能，使得用　户可以重新定义ＨＴＭＬ元素的显示方式。ＣＳＳ所能改变的性质有字体、文字问的空问、列表、颜色、背　景、Ｍａｒｇｉｎ、位置等。ＣＳＳ可以将显示格式和内容分离、灵活控制页面布局、简化网页的格式代码、加　快下载显示的速度，也减少了需要上传的代码数量和重复劳动。ＣＳＳ现已为大多数浏览器所支持，成为　网页设计必不可少的工具之一。　１　ＣＳＳ的概念　ＣＳＳ是一种格式化网页的便捷技术，应用在网页设计中，易于精确控制网页布局、提高代码重用率、　简化ＨＴＭＬ中的各种繁琐标记、提高网页传输速率、便于网页的更新与维护　。ＣＳＳ扩充了ＨＴＭＬ各标记　的属性设定（即样式），而且ＣＳＳ样式可通过Ｓｃｒｉｐｔ程序来控制，这样便可以有效地对网页的外观和布局　进行更精确的控制，从而使网页的表现方式更加灵活和美观。引入ＣＳＳ的主要目的在于将网页要显示的内　容与样式设定分开，也就是将网页的外观设定信息从网页内容中独立出来，并集中管理。网页的样式设定　２０ｌＯ一０５一Ｏ７　收稿日期：　基金项目：　２００９年云南省教育厅科学研究项目：现代私塾式虚拟教学模式的研究（０９Ｙ００４７）；高等学校“第三批特色　专业建设点”资助项目（ＴＳＩ１１３５）。　　作者简介：　丁海燕（１９７４一），女，云南昆明人，讲师，工学硕士，主要从事网络与数据库研究。

６　昆明冶金高等专科学校学报　２０１０年５月　和内容分离的好处除了可集中管理外，如果进一步将ＣＳＳ样式信息存成独立的文件，只需修改一个样式表　文件就能改变多个网页的外观和格式，这样可省却在每一个网页文件中重复设定的麻烦。　２　ＣＳＳ样式与ＨＴＭＬ样式　文档结构和样式的混合一直是ＨＴＭＬ的一大缺陷，ＨＴＭＬ中的每一个样式都可以在标签内直接用　“属性名＝属性值”的方法设置样式，如＜ｕｌ　ｔｙｐｅ＝ｓｑｕａｒｅ＞。ＣＳＳ样式与ＨＴＭＬ样式相比功能强大得　多，具有以下两个突出的优点　：　（１）ＣＳＳ样式提供比ＨＴＭＬ样式更多的文字属性控制，可以控制所有文字的属性。　（２）可以套用到多个网页，甚至整个网站的网页上。当ＣＳＳ样式更新或修改时，所有使用该样式表　的文档格式也会自动更新　。　３　ＣＳＳ在网页中的定义方式　在使用样式表之前，必须要先定义样式。定义好的样式可以保存成单独的外部样式表文件，也可以　嵌入当前网页的头部或以ｓｔｙｌｅ属性嵌入标记符内。外部样式表文件建好后可为多个ＨＴＭＬ文件所使用。　ＣＳＳ的定义格式如下：ｓｅｌｅｃｔｏｒ｛Ｐ　ｐｒｏｐｅｒｔｙ：ｖａｌｕｅ；Ｐ　ｐｒｏｐｅｒｔｙ：ｖａｌｕｅ；｝。其中，ｐｒｏｐｅｒｔｙ就是那些将　要被修改的性质（属性），如ｃｏｌｏｒ；ｖａｌｕｅ是给ｐｒｏｐｅｒｔｙ赋的值（参数），ｓｅｌｅｃｔｏｒ是样式定义选择符，　用来指定样式定义的对象，ｓｅｌｅｃｔｏｒ包括六种　Ｊ：　１）ＨＴＭＬ或ＸＨＴＭＬ标记符　如Ｐ，ＢＯＤＹ；Ｐ｛ｃｏｌｏｒ：ｒｅｄ；｝定义所有的段落文字颜色为红色。　２）自定义ＩＤ　＜Ｐ　ｉｄ＝“ａｕｔｈｏｒ’’＞＜／ｐ＞　・　￣ｌｌ＃ａｕｔｈｏｒ｛ｔｅｘｔ—ａｌｉｇｎ：ｒｉｇｈｔ；ｆｏｎｔ－ｓｉｚｅ：９ｐｘ；｝。任何标签只要用属性ｉｄ＝ＩＤ号即可引用该样式，如　３）自定义类名　如．ｃｏｎｔｅｎｔ｛ｃｏｌｏｒ：ｒｅｄ；ｆｏｎｔ．ｓｉｚｅ：９ｐｘ；｝。任何标签只要用属性ｃｌａｓｓ：类名即可引用该样式，如＜　Ｐ　ｃｌａｓｓ＝“ｃｏｎｔｅｎｔ”＞＜／ｐ＞　４）标签组合　‘　．　‘　可以为嵌套的标签组合定义样式，如ｔｄ　ｈ１｛ｃｏｌｏｒ：ｒｅｄ｝。这种定义方式只对包含在单元格内的Ｈ１　起作用，对单独的Ｈ１不起作用。　５）虚类　虚类是专用于超链接标记的选择符，使用虚类可以为访问过的、未访问过的、激活的以及鼠标悬停　于其上的４种状态的超链接定义不同的显示样式　ｊ。如：　Ａ：ｌｉｎｋ｛ｃｏｌｏｒ：ｂｌｕｅ；ｆｏｎｔ．ｓｉｚｅ：３２ｐｘ；｝未被访问过的超链接样式　Ａ：ｖｉｓｉｔｅｄ｛ｃｏｌｏｒ：ｂｌａｃｋ；ｆｏｎｔ－ｓｉｚｅ：３２ｐｘ；｝已访问过的超链接样式　Ａ：ａｃｉｖｅ｛ｃｏｌｏｒ：ｙｅｌｌｏｗ；ｆｏｎｔ—ｓｉｚｅ：３２ｐｘ；ｔｅｘｔ—ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ｝当超链接处于选中状态的样式　Ａ：ｈｏｖｅｒ｛ｃｏｌｏｒ：ｒｅｄ；ｆｏｎｔ．ｓｉｚｅ：１５０％；ｔｅｘｔ．ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ｝当鼠标悬停于超链接上的样式　６）并列选择符　若有多个不同的标记符定义的样式相同，则可以使用并列选择符简化定义，如Ｐ，ＦＯＮＴ，ＤＩＶ　｛ｃｏｌｏｒ：ｒｅｄ｝。　４　ＣＳＳ在网页中的引用方式　ＣＳＳ样式在网页文档中的三种引用方式是：外部文件方式、内部文档方式、直接插入方式　。　１）外部文件方式　此方式是将ＣＳＳ写成一个文件的方式，文件的扩展名为．ＣＳＳ。在ＨＴＭＬ文档头通过文件引用进行　风格控制，ＣＳＳ文件的引用是在ＨＴＭＬ的＜ｈｅａｄ＞＜／ｈｅａｄ＞标签之间加入下列语句：　

第３期　丁海燕，邹疆，邱莎：用层叠样式表ＣＳＳ技术实现网页特效　７　＜Ｌｉｎｋ　Ｒｅｌ＝”ＳＴＹＬＥＳＨＥＥＴ”Ｈｒｅｆ＝”文件名．ＣＳＳ”Ｔｙｐｅ＝”ｔｅｘｔ／ｃｓｓ”＞。　应用ＣＳＳ文件的最大好处就是可以在每个ＨＴＭＬ文件中引用这个文件，这使得整个站点的ＨＴＭＬ　文件在风格上保持一致。另外，需要对整个网站的ＣＳＳ样式风格进行修改时，只需直接修改ＣＳＳ文件　就可以，而不必每个ＨＴＭＬ文件都修改　。　２）内嵌样式　采用内嵌样式，将ＣＳＳ样式直接定义在文档头＜ｈｅａｄ＞＜／ｈｅａｄ＞之间，而不是形成文件。样式使用　范围也仅限于本网页。　＜ｓｔｙｌｅ　ｔｙｐｅ＝“ｔｅｘｔ／ｃｓｓ’’＞　．１　１｛ｌｅｔｔｅｒ—ｓｐａｃｉｎｇ：３ｐｘ；ｔｅｘｔ—ａｌｉｇｎ：ｌｅｆｔ；ｗｏｒｄ—ｓｐａｃｉｎｇ：３ｐｔ；ｗｈｉｔｅ－ｓｐａｃｅ：ｎｏｒｍａｌ；｝　＜／ｓｔｙｌｅ＞　应用ＣＳＳ内嵌样式的主要用处是：在使用ＣＳＳ外部文件样式使整个网站风格统一的前提下，可针对具体页　面进行具体调整。ＣＳＳ内嵌样式与ＣＳＳ外部文件方式并不相互排斥，而是相互补充。比如在ＣＳＳ外部文件中　定义了Ｐ标签的字体颜色ｆｏｎｔ—ｃｏｌｏｒ为ｂｌｕｅ，在文档头部可具体定义该标签的字体颜色ｆｏｎｔ—ｃｏｌｏｒ为ｇｒｅｅｎ，而在　内部文档中可再次具体定义其字体颜色为ｒｅｄ。套用样式时使用就近原则，这就是“层叠样式表”的真正含义。　３）直接插入式　直接插入式，只需要在每个ＨＴＭＬ标签后书写ＣＳＳ属性就可以了。这种方式很简单、很直接。例如　＜Ｐ　ｓｔｙｌｅ＝”ｃｏｌｏｒ：ｒｅｄ；ｆｏｎｔ—ｓｉｚｅ：ｌＯｐｔ”＞．直接插入式主要用于对具体的标签做具体的调整，其作用　的范围只限于本标签。　５　ＣＳＳ样式应用　ＣＳＳ样式可以通过编写代码方式设置，　也可以通过Ｄｒｅａｍｗｅａｖｅｒ或Ｖｉｓｕａｌ　ｓｔｕｄｉｏ　２００５的样式生成器，　利用可视化界面设置样式　ｊ。　１）ＣＳＳ文本效果　＜ＳＴＹＬＥ＞　．ｔｉｔｌｅ｛ｆｏｎｔ：ｂｏｌｄｅｒ　ｉｔａｌｉｃ；ｆｏｎｔ—ｆａｍｉｌｙ：楷体一ＧＢ２３１２；　冬夜读书示子聿　ｔｅｘｔ—ａｌｉｇｎ：ｃｅｎｔｅｒ；　图１　ＣＳＳ文字效果　ｂａｃｋｇｒｏｕｎｄ—ｉｍａｇｅ：ｕｒｌ（ｂａｃｋｇｒｏｕｎｄ．ｊＰｇ）｝　＜／ＳＴＹＬＥ＞　以上代码定义了字体加粗，倾斜，字体为楷体一ＧＢ２３１２，文本对齐方式为居中，背景图ｂａｃｋ—　ｇｒｏｕｎｄ．ｊＰｇ，效果如图１所示。　２）ＣＳＳ图片　ＣＳＳ样式还可通过脚本程序来控制　，本例将ＣＳＳ滤镜的ｗａｖｅ属性作用于图片２２．ｊＰｇ，使其完成　图片的倒影效果。代码如下，效果如图２所示。　＜ｂｏｄｙ　ｂｇｃｏｌｏｒ＝“＃ＦＦＦＦＦＦ”ｏｎｌｏａｄ＝“ｍｙｆ（）”　＞＜ｉｍｇ　ｉｄ＝ｍｙｉｍｇ　ｓｒｃ＝　“２２．ｊＰｇ”　＞＜ＢＲ＞　＜ｓｃｒｉｐｔ　ｌａｎｇｕａｇｅ＝ＪａｖａＳｃｒｉｐｔ＞　ｆｕｎｃｔｉｏｎ　ｍｙｆ（）　｛ｓｅｔｌｎｔｅｒｖａｌ（“ｍｙｄｉｖ．ｆｉｌｔｅｒｓ．ｗａｖｅ．ｐｈａｓｅ＋＝１０”，１００）；｝　ｉｆ（ｄｏｃｕｍｅｎｔ．ａｌ１）　｛ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（‘＜ｉｍｇ　ｉｄ＝ｍｙｄｉｖ　ｓｒｃ＝’‘＋ｄｏｃｕｍｅｎｔ．　ａｌＩ．ｍｙｉｍｇ．ｓｒｃ＋’‘ｓｔｙｌｅ＝　ｆｉｌｔｅｒ：ｗａｖｅ（ｓｔｒｅｎｇｔｈ＝３，ｆｒｅｑ＝３，　ｐｈａｓｅ＝０，ｌｉｇｈｔｓｔｒｅｎｇｔｈ＝３０）　ｂｌｕｒ（）ｆｌｉｐｖ（）”＞’）　图２　ＣＳＳ图片倒影效果　｝＜／ｓｃｒｉｐｔ＞＜／ｂｏｄｙ＞　３）滚动条效果　

８　昆明冶金高等专科学校学报　２０１０年５月　通过ＣＳＳ可以实现彩色滚动条，以下代码效果如图３所示。　＜ｓｔｙｌｅ　ｔｙｐｅ＝“ｔｅｘｔ／ｃｓｓ”＞　ＢＯＤＹ｛Ｂａｃｋｇｒｏｕｎｄ—ｃｏｌｏｒ：￣０９９ｆｆ；ｓｃｒｏｌｌｂａｒ—ａｒｒｏｗ—ｃｏｌｏｒ：＃ｆｆｆｆｆ；　ｓｃｒｏｌｌｂａｒ—ｂａｓｅ—ｃｏｌｏｒ：＃６ｄ８６９３；ｓｃｒｏｌｌｂａｒ—ｓｈａｄｏｗ—ｃｏｌｏｒ：＃１３１３１３；　ｓｃｒｏｌｌｂａｒ—ｆａｃｅ—ｃｏｌｏｒ：＃Ｏ０ｃｃｆｆ；ｓｃｒｏｌｌｂａｒ—ｈｉｇｈｌｉｇｈｔ—ｃｏｌｏｒ：＃１３１３１３；　图３　ＣＳＳ彩色滚动条效果　ｓｃｒｏｌｌｂａｒ—ｄａｒｋ．ｓｈａｄｏｗ．ｃｏｌｏｒ：ｗｈｉｔｅ；ｓｃｒｏｌｌｂａｒ．３ｄ－ｌｉｇｈｔ．ｃｏｌｏｒ：９ｂａａｃｌ；｝＜／ｓｔｙｌｅ＞　４）滤镜特效　ＣＳＳ滤镜是ＣＳＳ的扩展部分，使用这种技术能把可视化的滤镜和转换效果添加到一个标准的ＨＴＭＬ　元素上。滤镜是通过“ｆｉｌｔｅｒ”样式表单属性来对ＨＴＭＬ产生作用的。定义滤镜样式的语法是ｆｉｌｔｅｒ：ｆｉｌ－　ｔｅｒｎａｍｅ（ｐａｒａｍｅｔｅｒｓ）。常用的滤镜属性如表１所示　』。　表１常用滤镜属性表　属性名称　属性功能　属性名称　属性功能　ａｌｐｈａ　设置透明度ｓｅｔ　ｔｒａｎｓｐａｒｅｎｃｙ　ｌｉｇｈｔ　设置灯光投影ｓｅｔ　ｌｉｇｈｔ　ｐｒｏｊｅｃｔｉｏｎ　设置透明膜ｓｅｔ　ｔｒａｎｓｐａｒｅｎｔ　ｆｉｌｍ　ｂｌｕｒ　设置模糊效果ｓｅｔ　ｂｌｕｒ　ｅｆｆｅｃｔ　ｍａｓｋ　ｅａｋ　ｐｉｃｔｕｒｅ　ｕｓｉｎｇｓｉｎｅ　ｗａｖｅ　ｃｈｒｏｍａ　设置指定颜色透明ｓｅｔ　ｓｐｅｃｉｆｉｅｄ　ｃｏｌｏｒ　ｔｒａｎｓｐａｒｅｎｃｙ　ｗａｖｅ　利用正弦波打破图片ｂｒｄｒｏｐ　ｓｈａｄｏｗ　设置投射阴影ｓｅｔ　ｐｒｏｊｅｃｔ　ｓｈａｄｏｗ　ｘｒａｙ　只显示轮廓ｄｉｓｐｌａｙ　ｏｕｔｌｉｎｅ　ｓｈａｄｏｗ　设置阴影ｓｅｔ　ｓｈａｄｏｗ　ｂｌｅｎｄｔｒａｎｓ　图形渐变ｇｒａｐｈ　ｇｒａｄｕａｌ　ｃｈａｎｇｅ　ｌｆｉｐｈ　水平翻转ｆｌｉｐ　ｈｏｒｉｚｏｎｔａｌ　ｇｌｏｗ　为对象增加光效Ｉｎｃｒｅａｓｅ　ｌｉｇｈｔ　ｅｆｆｅｃｔ　ｌｆｉｐｖ　垂直翻转ｆｌｉｐ　ｖｅｒｔｉｃａｌ　ｉｎｖｅｒｔ　设置底片效果ｓｅｔ　ｎｅｇａｔｉｖｅ　ｅｆｆｅｔ　下列代码　实现的效果如图４所示。　＜ＳＴＹＬＥ＞　．嫩段文本馕甩　赫　龋效果　Ｓｔｒｅｎｇｔｈ：６）；　ｂｌｕｒｌ｛ｆｉｌｔｅｒ：Ｂｌｕｒ（Ｄｉｒｅｃｔｉｏｎ＝１３５，　ｄｒｏｐｓａｈｄｏｗ｛ｆｉｌｔｅｒ：ＤｒｏｐＳｈａｄｏｗ（Ｃｏｌｏｒ＝ｇｒａｙ，ＯｆｆＸ：　ｗｉｄｔｈ＝８００｝　．３，ＯｆｆＹ＝３）；ｗｉｄｔｈ＝８００｝　．　．ｇｌｏｗ｛ｆｉｌｔｅｒ：Ｇｌｏｗ（ＣｏＩｏｒ＝ｒｅｄ，Ｓｔｒｅｎｇｔｈ＝１０）；　‘　＝８００｝　ｍａｓｋ｛ｆｉｌｔｅｒ：Ｍａｓｋ（Ｃｏｌｏｒ＝ｇｒｅｅｎ）；ｗｉｄｔｈ＝ｓｏｏ｝　＜／ＳＴＹＬＥ＞　‘　图４　ＣＳＳ文字滤镜效果　ｓｈａｄｏｗ｛ｆｉｌｔｅｒ：Ｓｈａｄｏｗ（Ｃｏｌｏｒ＝ｇｒａｙ，Ｄｉｒｅｃｔｉｏｎ＝１３５）；ｗｉｄｔｈ＝８００｝　６结语　ＣＳＳ应用于网页中可美化网页，实现内容与显示样式的分离，弥补ＨＴＭＬ格式化功能的不足，在　ＸＨＴＭＬ规范中，使用ＳＴＹＬＥ属性或样式表来格式化网页，使得网页布局和维护更加灵活和方便。　参考文献：　［１］杜涛．ＣＳＳ技术在网页设计中的应用与优化［Ｊ］．长治学院学报，２００７，２４（５）：３５—３７．　［２］马骏．ＡＳＰ．ＮＥＴ网页设计与网站开发［Ｍ］．北京：人民邮电出版社，２００８．　［３］孙荣侠．在Ｄｒｅａｍｗｅａｖｅｒ　Ｍｘ中ＣＳＳ样式的应用探索［Ｊ］．多媒体技术及其应用，２００７（５）：１４１５—１４１６．　［４］赵丰年．网页制作教程［Ｍ］．北京：人民邮电出版社，２００１．　［５］王丹玲．ＣＳＳ层叠样式表在ＤＨＴＭＬ中的应用［Ｊ］．鞍山师范学院学报，２００６，８（２）：６３—６５．　［６］杨选辉．网页设计与制作教程［Ｍ］．北京：清华大学出版社，２００８．　［７］马骏．ｃ｝｝网络应用编程基础［Ｍ］．北京：人民邮电出版社，２００８．　［８］余平．ＣＳＳ在网页制作中的应用［Ｊ］．甘肃科技纵横，２００６，３５（４）：２０—２３．　［责任编辑：贾朝光］