用CSS美化页面

Author: 扬子 Date: 2001年 18期

?牐犞谒苤谕持谱髦小R肱虐媲逍隆⒉季肿匀弧⒁趁嫫粒实笔褂肅SS是非常必要的。那么,CSS到底有些什么作用和功能呢?我们在此探讨一下:
  ?牐?1.可以用CSS定义文字的大小及颜色,使之不受“查看→文字大小”的改变而改变。例如代码:
  ?牐?<STYLE type=text/css>
  ?牐燘ODY {??
  ?牐燜ONT-FAMILY: 宋体; FONT-SIZE: 9pt;color:#cccccc
  ?牐爙??
  ?牐燭D {??
  ?牐燜ONT-FAMILY: serif; FONT-SIZE: 10pt
  ?牐爙??
  ?牐?</STYLE>
  ?牐犉渲芯投ㄒ辶薭ody中的字体为:宋体,大小为9pt,颜色为灰白色。而td中的字体为serif,大小为10pt。也许你很纳闷:双重定义的结果是怎么样 的?答案是就近原则,取最近的定义。
  ?牐?2.定义两段文字或者两行文字的距离。例如代码:
  ?牐?<P style=“MARGIN-BOTTOM:0px;MARGIN-TOP: 5px”>灰白人生欢迎你</p>
  ?牐牼捅硎菊饩浠昂推渖厦娴木嗬胛?0px,和下面一段话的距离为5px。
  ?牐?3.综合使用CSS和滤镜可以定义出特效字体和效果,例如代码:
  ?牐?<style type=text/css>
  ?牐?.3dfont{ ??
  ?牐燜ILTER: glow(color=444444,strength=0) shadow(color=eeeeee,direction:135); POSITION:relative; WIDTH: 60%;font-size:12pt;FONT-FAMILY:楷体_GB2312
  ?牐爙??
  ?牐?</style>
  ?牐犜谕车氖实蔽恢眉尤?<font class=3dfont>扬子欢迎你</font>,其中“扬子欢迎你”的字样将带给你惊喜。
  ?牐?4.如果你在使用表格的时候需要框架,但是嫌使用table定义的框架太丑陋。那么也可以通过CSS定义风格表格框架。例如代码:
  ?牐?<style type=text/css>
  ?牐?.framered {??
  ?牐燘ORDER-BOTTOM: #444444 1px solid; BORDER-LEFT: #aaaaaa 1px solid; BORDER-RIGHT: #444444 1px solid; BORDER-TOP: #aaaaaa 1px solid; FONT-SIZE: 9pt
  ?牐爙??
  ?牐?.frametop {??
  ?牐燘ORDER-BOTTOM: #aaaaaa 0px solid; BORDER-LEFT: #444444 0px solid;BORDER-RIGHT: #aaaaaa 0px solid; BORDER-TOP: #444444 1px solid; FONT-SIZE: 9pt
  ?牐爙??
  ?牐?</style>
  ?牐犜谑褂帽砀竦氖焙蛑恍枰ㄒ逦?<table class=framered……就可以看到风格的框架。如果你只是需要框架的上面(或左面加上面),只须修改就可以实现。
  ?牐犃硗猓绻桓霰砀裰挥幸桓鲂校桓隽小D敲茨憧梢栽趖able和td定义不同的颜色,使整个结构看起来很有立体感。
  ?牐?5.运用CSS还可以适当安排图片,比如说如果想使用某张图片做背景,可以用CSS定义让该图片平铺,可向x方向平铺也可向y方向平铺。代码为:BACKGROUND-REPEAT: repeat;??
  ?牐?6.用CSS定义左右边距也是一样使用排版的手段。例如代码:
  ?牐?<body leftmargin=0 topmargin=4>
  ?牐牼捅硎径ㄒ辶苏霭婷嬖谙允酒辽厦嫔厦婢嗬胛?4pt,左边为0pt。
  ?牐?7.在制作按钮以及文本输入框的时候,也可以用CSS使得具有自己特色。例如代码:
  ?牐?<INPUT class=account
  ?牐爉axLength=16 name=username
  ?牐爋nmouseout=“this.style.color='#000000'”
  ?牐爋nmouseover=“this.style.color='#3366cc'” size=12
  ?牐爏tyle=“BACKGROUND-COLOR:rgb(255,255,255); BORDER-BOTTOM: 1px double; BORDER-LEFT: 1px double;BORDER-RIGHT:1px double;BORDER-TOP:1px double;COLOR:rgb(0,0,0); FONT-FAMILY: 新细明体,宋体, Arial;FONT-SIZE: 9pt”
  ?牐爌adding-bottom??1px?> </SPAN>
  ?牐?<INPUT name=Submit style=“BACKGROUND-ATTACHMENT: scroll;BACKGROUND-COLOR:#ffffff;BACKGROUND-POSITION: 0% 50%;BACKGROUND-REPEAT: repeat;BORDER-BOTTOM: rgb(0,0,0)1px dashed;?? BORDER-LEFT: rgb(0,0,0)1px dashed; BORDER-RIGHT:rgb(0,0,0)1px dashed;?? BORDER-TOP:rgb(0,0,0)1px dashed; FONT-SIZE: 9pt;HEIGHT: 18px; WIDTH: 57px” type=submit value=登陆>
  ?牐犉渲芯投ㄒ辶宋谋臼淙肟颍ざ任?16pt,当鼠标移动到上面的时候颜色为黑色,鼠标移出的时候颜色为蓝色,大小为12pt,输入的字体为新细明体、 宋体、大小为9pt。
  ?牐牰ㄒ宓陌磁ィ罕尘吧咨挥衅狡蹋痔逦?9pt,厚度为18pt,宽度为57pt。
  ?牐燙SS的用途还将很多,由于本人能力和时间有限,现提出一些仅供参考。本文所有实例均可在我的个人站点找到:http://yangzitop.home.chinaren.com 。敬请来信批评指正!yangzi321@sina.com。