用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。