2024年3月6日发(作者：)

维普资讯

２００８年６月　电　脑　学　习　第３期　ＣＳＳ技术在ＷＥＢ设计中的应用　王晓雨’　摘　要：介绍了将ＣＳＳ加入网页中的四种方；去．并从几个方面论述了如何利用ＣＳＳ定义页面的样式．最后以一个实　例论证了ＣＳＳ的应用技巧。　关键词：ＣＳＳ样式表　Ｗｅｂ　置标　链接　中图分类号：ＴＰ３１１　文献标识码：Ｂ　文章编号：１０ｏ２—２４２２（２００８）０３－－００３９－０２　Ｔｈｅ　Ａｐｐｌｉｃａｔｉｏｎ　ｏｆ　ＣＳＳ　ｉｎ　Ｗｅｂ　Ｄｅｓｉｇｎ　Ｗａｎｇ　Ｘｉａｏｙｕ　Ａｂｓｔｒａｃｔ：Ｔｈｅ　ｐａｐｅｒ　ｐｕｔｓ　ｆｏｒｗａｒｄ　ｆｏｕｒ　ｍｅｔｈｏｄｓ　ｏｆ　ａｄｄｉｎｇ　ＣＳ￥ｉｎｔｏ　ｈｏｍｅｐａｇｅ．ａｎｄ　ｓｈｏｗｓ　ｈｏｗ　ｔｏ　ｄｅｆｉｎｅ　ｔｈｅ　ｐａｇｅ　ｓｔ－　ｙｌｅ　ｕｓｉｎｇ　ＣＳＳ　ｆｒｏｍ　ｓｅｖｅｒａｌ　ａｓｐｅｃｔｓ．Ａｔ　ｌａｓｔ　ｔｈｅ　ｐａｐｅｒ　ｐｒｏｖｅｓ　ｔｈｅ　ａｐｐｌｉｃａｔｉｏｎ　ｓｋｉｌｌ　ｏｆ　ＣＳＳ　ｉｎ　ａ｜１　ｅｘａｍｐｌｅ．　Ｋｅｙｗｏｒｄ：ＣＳＳ（Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ）　Ｗｅｂ　Ｔａｇ　Ｌｉｎｋ　ｌ添加层叠样式表的方法　＜／ｓｔｙｌｅ＞　１．１行内样式单　＜／ｈｅａｄ＞　行内样式单采用ＨＴＭＬ标签的“Ｓｔｙｌｅ”属性，特点是　以＠ｉｍｐｏｒｔ开头的联合样式表输入方法需要注意的　“定义某一个标签的样式单风格”，只对所定义的标签起作　是：（１）联合法输入样式表必须以＠ｉｍｐｏｒｔ开头；（２）如果　用，并非对整个页面起作用。例如：　同时输入多个样式表有冲突的时候，将按照第一个输入的　＜Ｐ　ｓｔｙｌｅ＝”ｃｏｌｏｒ：．ｂｌｕｅ；ｆｏｎｔ—ｓｉｚｅ：ｌＯｐｔ”＞荆楚理工学院＜　＞　样式表对网页排版；（３）如果输入的样式表和网页里的样式　１．２嵌入样式表　规则冲突时，使用外部的样式表。　将ＣＳＳ代码直接插入每个页面Ｈ，ＩＭＬ的＜ｈｅａｄ＞区，使　２用ＣＳＳ定义页面的样式　用＜ｓｔｙｌｅ＞…＜／ｓｔｙｌｅ＞标签。　２．１对网页中的字体和颜色等进行设置　＜ｈｅａｄ＞　＜／ｓｔｙｌｅ＞　＜ｓｔｙｌｅ＞　＜ｓｔｙｌｅ　ｔｙｐｅ＝　ｔｅｘｌ／ｅｓｓ”＞　＜／ｈｅａｄ＞　ａ｛ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ；ｃｏｌｏｒ：ｙｅｌｌｏｗ｝　＜！一样式表的具体内容一＞　ａ：ｈｏｖｅｒ｛ｔｅｘｔ－ｄｅｃｏｍｔｉｏｎ：ｕｎｄｅｒｌｌｎｅ；ｃｏｌｏｒ＇ｐｕｒｐｌｅ｝　１．３链接样式表　ｐ｛ｆｏｎｔ－ｓｉｅｚ：２０；ｂａｃｋｇｒｏｕｎｄ：ｒｅｄ；ｃｏｌｏｒ：ｂｌｕｅ｝　同样是添加在ＨＴＭＬ的头信息标识符＜ｈｅａｄ＞里。　＜／ｓｔｙｌｅ＞　＜ｈｅａｄ＞　将上述代码插入任一ＨＴＭＬ文档后，刷新显示，则所有　＜ｌｉｎｋ　ｒｅｌ＝”ｓｔｙｌｅｓｈｅｅｔ　ｈＩｅ。ｆ＝　．ＣＳＳ　ｔｙｐｅ＝”ｔｅｘｔ／ｅｓｓ＂＞　锚点变为普通字体，颜色为黄，但当鼠标移至其上时，则锚　＜／ｈｅａｄ＞　ｌ　点的提示字符变为带下划线的紫色字体；整个文档中被置　．ＣＳＳ是单独保存的样式表文件，其中不能包含＜ｓｙｔｌｅ＞　标Ｐ包围的文字将以红底蓝字、字体大小为２０个象素的形　标识符，并且只能以ｅｓｓ为后缀。　式出现。　Ｒｅｌ属性表示样式表将以何种方式与ＨＴＭＬ文档结合。　若文字需另加修饰，以单独的形式出现，例如：　取值范围：　＜Ｐ　ｓｔｙｌｅ＝＂ｆｏｎｔ－ｓｉｅｚ：３０；ｆｏｎｔ－ｗｅｉｇｈｔ　（１）Ｓｔｙｌｅｓｈｅｅｔ：指定一个外部的样式表；　：ｂｏｌｄｅｒ；ｂａｃｋｇｒｏｕｎｄ：ｗｈｉｔｅ；ｃｏｌｏｒ．ｂｌｕｅ　＞　（２）Ａｈｅｍａｔｅ　ｓｔｙｌｅｓｈｅｅｔ：指定使用一个交互样式表。　１．４联合使用样式表　＜／ｐ＞　添加在ＨＴＭＬ的头信息标识符＜ｈｅａｄ＞里：　则此段文字白底蓝字，３Ｏ个象素大小，且字体加粗。在　（ｈｅａｄ＞　＜！一一　上段代码中，若将“ｂａｃｋｇｒｏｕｎｄ：ｗｈｉｔｅ”用以下内容来代替：　＜ｓｔｙｌｅ　ｔｙｐｅ＝　ｔｅｘｌ／ｅｓｓ　＞＠ｉｍｐｏｒｔ　．ＣＳＳ　ｂａｃｋｇｒｏｕｎｄ－ｌｉｎｇ：ｕｒｌ（ｉｍａｇｅ．ｊｐｇ）；　其他样式表的声明　ｂａｃｋｇｒｏｕｎｄ－ｒｅｐｅａｔ：ｎｏ－ｒｅｐｅａｔ；ｍａｒｇｉｎ—ｆｉｈｇｔ：１５ｅｍ　一一＞　那么就可以将此段文字的白色背景用背景图案ｉｍａｇｅ．　每一个网络组成设备都是潜在的故障源。在使用计算机的　参考文献　同时，只有不断地遇到问题，不断地解决问题，才能提高排　［１田丰．现代计算机网络实用技术［１］Ｍ】．北京：冶金工业出　除计算机网络故障的水平。　版社，２００３：４０７—４２０．　收稿日期：２０ｃｒ７—１２－０５　｝王晓雨荆楚理工学院计算机系助教（湖北，荆门４４８０００）。　・　３９　・　

维普资讯

ＪＰｇ来代替；并设置背景图案不重复显示：另外还设置了页　边距Ｍａ嚼ｎ属性，指定页面的右侧边距为１５ｅｒａ。　２．２给文字加上划线、下划线、删除线和闪烁　下面是一个定义好上述效果的ＣＳＳ例子：　＜ｓ￣ｌｅ　ｔｙｐｅ＝＂ｔｅｘＶｃｓｓ　＞　＜！一一　．用一个事件来触发，一旦事件发生，则改变ＨＴＭＬ元素的属　性值，从而达到预期目的。　制作方法：　（１）在网页中输入一段文字，用“Ｓｐａｎ”标记括起来，　并加一个ＣＳＳ的“ＩＤ”属性：再插入一张图片，同样也用　“Ｓｐａｎ”括起来，也加一个“ＩＤ“属性，如：ＩＤ＝“ｉｍａｇｅｌ”；　（２）在网页源代码的（ｈｅａｄ）与（／ｈｅａｄ）之间加上下面　ｓｔｙｌｅｌ　Ｉ　ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｕｎｄｅｒｌｉｎｅ　ｏｖｅｒｌｉｎｅ　ｌｉｎｅ－ｔｈｒｏｕｇｈ　ｂｌｉｎｋ｝　－－＞　＜／ｓ￣ｌｅ＞　这段ＣＳＳ代码：　（ｓｔｙｌｅ　ｔｙｐｅ＝“ｔｅｘｔ／ｅ￣“）　ｕｎｄｅｒｌｉｎｅ是定义下划线；ｏｖｅｒｉｆｎｅ是定义上划线；ｌｉｎｅ—　ｔｈｒｏｕｇｈ定义的是删除线：ｂｌｉｎｋ定义的是文字闪烁。　２．３用ＣＳＳ样式固定表格宽度　在Ｔａｂｌｅ或Ｄｉｖ里显示文章的时候，如果是汉字，文章　会根据Ｔａｂｌｅ和Ｄｉｖ的Ｗｉｄｔｈ属性自动分行，但如果是英　文，当单词长度超过Ｔａｂｌｅ或Ｄｉｖ宽度的时候，Ｔａｂｌｏ，Ｄｉｖ便　会被撑开，有时候会造成页面很难看，为了避免表格因为图　片尺寸或者过长的英文字符而变形撑开，这时可以给Ｔａｂｌｅ／　Ｄｉｖ设置如下样式：ｗｏｒｄ—ｂｒｅａｋ：ｂｒｅａｋ—ａｌｌ；ｗｏｒｄ—ｗｒａｐ：ｂｒｅａｋ—ｗｏｒｄ；　单词超长的时候能够自动截断单词分行，避免上述情　况的发生。　２．４使背景图案静止不动　如何使背景图像不随文字一起“滚动”，利用ＣＳＳ可以　实现这样的目的，只要把下面这段源代码直接放在网页的　与标签之间就可以了，其中ｂｇ．Ｊｐｓ就是网页中的背景图像，　可以换成需要的背景图像：　（ｓｔｙｌｅ　ｔｙｐｅ＝　ｔｅｘＶｅｓｓ”）　（！一一　ＢＯＤＹ　ｆ　ｂａｃｋｇｒｏｕｎｄ：ｐｕｒｐｌｅ　ｕｒｌ（ｂｇ．ｊｐｇ）；　ｂａｃｋｇｒｏｕｎｄ－ｒｅｐｅａｔ：ｒｅｐｅａｔ—ｙ；　ｂａｃｋｇｒｏｕｎｄ－ａｔｔａｃｈｍｅｎｔ：ｉｆｘｅｄ｝　一一）　／（ｓｔｙｌｅ）　２．５用ＣＳＳ改变鼠标显示　用ＣＳＳ可控制鼠标的显示效果，可使鼠标移到普通文　本上也显示成手型等。用ＣＳＳ控制的语法如下：　＜ｓｐａｎ　ｓｔｙｌｅ＝＂ｅｕｒｓｏｒ：＊　＞文本或其它页面元素＜／ｓｐａｎ＞　可把女换成如下１５个效果的任意一种：ｈａｎｄ、ｅｒｏｓｓｈ—　ａｉｒ，ｔｅｘｔ，ｗａｉｔ，ｄｅｆａｕｌｔ，ｈｅｌｐ，ｅ－Ｆｅｓｉｚｅ，ｎｅ－ｒｅｓｉｚｅ，ｎ—ｒｅｓｉｚｅ，ｎｗｒｅ—　ｓｉｚｅ、ｗ—ｒｅｓｌｚｅ、ＳＷ—ｒｅｓｉｚｅ、ｓ—ｒｅｓｉｚｅ、ｓｅ—ｒｅｓｉｚｅ　Ⅱａｕｔｏ。　３用ＣＳＳ层叠样式表实现文字变图像特效　一段文字，当鼠标在文字上面单击，文字消失，原来文　字的地方却立即变成了一张图片，当鼠标在图片上单击，图　片又消失，原来的文字又重现了。这种效果用Ｄｒｅａｍｗｅａｖｅｒ　的Ｂｅｈａｖｉ￣功能也可实现，但那要增加一段Ｊａｖａｓｅｒｉｐｔ程　序，明显增加了不少代码。而用ＣＳＳ来制作这种效果，增加　的代码却要少得多。　原理：利用ＣＳＳ的属性值可动态改变的特点。　思路：定义一个ＨＴＭＬ元素ＣＳＳ属性的两种属性值，再　・４０・　（！一一　．ｓｔｙｌｅｌ　Ｉ　ｐｏｓｉｔｉｏｎ：ａｂｓｏｈｔｅ；ｔｏｐ：２００ｐｘ；ｌｅｆｔ：１８０ｐｘ；　ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ．＃ｃｃｃｃｆｆ；ｖｉｓｉｂｉｈｔｙ：ｈｉｄｄｅｎ｝　．ｓｔｙｌｅ２　ｌ　ｐｏｓｉｔｉｏｎ：ａｂｓｏｌｕｔｅ；ｔｏｐ：２００ｐｘ；ｌｅｆｔ：ｌｇ０ｐｘ；　ｂａｃｋｇｒｏｕｎｄ—ｃｏｌｏｒ：＃ｃｃｅｃｆ；｝　．ｓｔｙｌｅ３　Ｉ　ｐｏｓｉｔｉｏｎ：ｂａｓｏｌｕｔｅ；ｔｏｐ：１９０ｐｘ；ｌｅｆｔ：１８０ｐｘ；　ｖｉｓｉｂｉｉｌｔｙ：ｈｉｄｄｅｎ｝　．ｓｔｙｌｅ４　Ｉ　ｐｏｓｉｔｉｎｏ：ａｂｓｏｌｕｔｅ；ｔｏｐ：１９０ｐｘ；ｌｅｆｔ：１８０ｐｘ；｝　一一、　（／ｓｔｙｌｅ）；　（３）在“Ｔｅｘｔｌ”的那个“ｓｐａｎ”中加载ＣＳＳ的“．ｓｔｙｌｅ２”，　让那段文本一开始是显示的，并再加载一个“ｏｎｃｌｉｃｋ”触发　事件，一旦这个事件发生，将做两件事：一是让“ＴｅｘｔＩ”采　用ＣＳＳ的“．ｓｔｙｌｅｌ”，把文本隐藏；二是让“ｉｍａｇｅｌ”采用ＣＳＳ　的“．ｓｔｙｌ￣４”，让图像显示，这样，“ＴｅｘｔＩ”及那段文本的代　码是：　（ｓｐａｎ　ｉｄ＝“ｔｅｘｔ１“ｃｌａｓｓ＝“ｓｔｙｌｅ２　ｏｎｃｌｉｃｋ＝　ｄｏｃｕｍｅｎｔ．ａｌ１．ｔｅｘｔ１．ｅｌｓａｓＮａｍｅ＝　ｓｔｙｌｅ１　：　ｄｏｃｕｍｅｎｔ．ａｌ１．ｉｍａｇｅ１．ｃｌａｓｓＮａｍｅ＝　ｓｔｙｌｅ４　”）　（ｆｏｎｔ　ｃｏｌｏｒ＝“＃Ｏ０００ＦＦ“、　鼠标在这段文字上单击，文字消失变为图像。在图像上　单击，图像消失，恢复为文字；　（４）同样在“ｉｍａｇｅｌ”的那个“ｓｐａｎ”中加载ＣＳＳ的“．　ｓｔｙｌｅ３”，让那张图片一开始是隐藏的，并再加载一个　“ｏｎｃｌｉｃｋ”触发事件，一旦这个事件发生，将做两件事，一是　让“Ｔｅｘｔｌ”采用ＣＳＳ的“．ｓｔｙｌｅ２”，把文本显示；二是让“ｉｍ—　ａｇｅｌ”采用ＣＳＳ的“．ｓｔ￣ｅ３”，让图像隐藏，“ｉｍａｇｅｌ”及那张　图片的代码如下：　（ｓｐａｎ　ｉｄ＝“ｉｍａｇｅ１　ｄａｓｓ＝　ｓｔｙｌｅ３“ｏｎｄｉｃｋ＝ｎｄｏｃｕｍｅｎｔ．ａｌ１．ｔｅｘｔ１．ｃｌｓａｓ—　Ｎａｍｅ＝　ｓｔ￣ｅ２　；　ｄｏｃｕｍｅｎｔ．ａｌ１．ｉｍａｇｅ１．ｏｃｌａｓｓＮａｍｅ＝　ｓｔｙｌｅ３　“）　（ｉｍｇ　ｓｒｃ＝＇５５ｍａｇ￣ｃ．　ｔ　ｗｉｄｔｈ＝　３１６　ｈｅｉｇｈｔ＝　２６　ｐａｎ＞　参考文献　【１】于鹏．　网页设计语言教程（ＨＴＭＩＡ２ＳＳ）【Ｍ】　北京：电　子工业出版社，２００３．　【２】张月玲．网页设计与编程［Ｍ】．西安：西北工业大学出　版社，２００４．　［３】Ｂｕｄｄ　Ａ著．精通ＣＳＳ：高级Ｗｅｂ标准解决方案【Ｍ】．陈　剑瓯，译．北京：人民邮电工业大学出版社，２００６．