使用CSS统一WEB页面的界面风格

使用CSS统一WEB页面的界面风格
[2 byte] By [petermi-志在必得] at [2007-12-11]
# 1
使 用 CSS 文 件的 forum.css 全 文 如 下
/*
在css里面可以写一些注释,注释的写法正如你
看到的那样是标准C注释的写法
*/
body {
background: #Ffffef;
/*设定背景色,在IE4下如果您同时还使用了背景图片
图片将不被显示,而NN4显示背景图片CSS无效,所以
如果你要使用图片,就不要使用body的背景色
*/
font-size: 75%;
/*通常宋体显示的时候,总是让人觉得字的边缘有点参次
模糊的感觉,加了上面这句,局面马上改观
*/
font-family: 宋体;
/*
设定字体名称
*/
}
/*CSS 可以设定html tag的风格
如果这么写
TAG {...}
则对所有未使用class的TAG都起作用
如果这么写
TAG.classname {...}
则需要在引用的时候注名class: <TAG class="className" ...>
*/
p{
font-size:9pt;
/*
将字体的大小设定为9个point
你也可以用px(pixel)指定字体的大小
但是使用的pt的一个好处就是在不同分辨率下,字体
大小是一致的。
在实际使用的时候我发现 9pt和 11pt
比较好看
*/
}
li{
font-size:9pt;
}
input.smallInput
{
font-size:9pt;
background-color: white;
color:rgb(0,0,128) ;
}
textarea.smallarea
{
font-size:9pt;
background-color: white;
color: rgb(0,0,128) ;
}
select.smallSel
{
font-size:9pt;
background-color: white;/* rgb(210,233,255);*/
color: rgb(0,0,128) ;
}
input.buttonface
{
/*
使用这种风格的按钮背景色为黄色
但在nn4中无效,当然也不会出错。
调用的时候应这么写,
<input type='button' class='buttonface' ...>
也适用于submit、reset按钮
*/
font-size:9pt;
background-color: rgb(255,204,51);
/*
rgb配色方式
也可以这么写 #FFCC33
十六进制
FF=255 CC=204 33=51
*/
color: rgb(0,0,128) ;
}
fn123-华威 at 2007-10-24 > top of Msdn China Tech,PowerBuilder,控件与界面...
# 2
下面就是一个很好的例子!你的意思是什么?
BODY {
MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
FORM {
MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
INPUT {
MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
BODY {
BACKGROUND-COLOR: #336699; BORDER-BOTTOM: buttonface 1px solid; BORDER-LEFT: threeddarkshadow 1px solid; BORDER-RIGHT: buttonface 1px solid; BORDER-TOP: threeddarkshadow 1px solid; PADDING-BOTTOM: 11px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 11px; TEXT-ALIGN: center
}
BODY {
COLOR: #000000; FONT-FAMILY: 宋体; FONT-SIZE: 12px; TEXT-DECORATION: none
}
TABLE {
COLOR: #000000; FONT-FAMILY: 宋体; FONT-SIZE: 12px; TEXT-DECORATION: none
}
INPUT {
COLOR: #000000; FONT-FAMILY: 宋体; FONT-SIZE: 12px; TEXT-DECORATION: none
}
SELECT {
COLOR: #000000; FONT-FAMILY: 宋体; FONT-SIZE: 12px; TEXT-DECORATION: none
}
A {
COLOR: #000000; FONT-FAMILY: 宋体; FONT-SIZE: 12px; TEXT-DECORATION: none
}
FORM {
COLOR: #000000; FONT-FAMILY: 宋体; FONT-SIZE: 12px; TEXT-DECORATION: none
}
BODY {
TEXT-ALIGN: center; VERTICAL-ALIGN: middle
}
TD {
TEXT-ALIGN: center; VERTICAL-ALIGN: middle
}
INPUT {
TEXT-ALIGN: center; VERTICAL-ALIGN: middle
}
IMG {
BORDER-BOTTOM: 0px; BORDER-COLLAPSE: collapse; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px; TABLE-LAYOUT: fixed
}
TABLE {
BORDER-BOTTOM: 0px; BORDER-COLLAPSE: collapse; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px; TABLE-LAYOUT: fixed
}
A:hover {
COLOR: #CCFF00
}
A.a1 {
COLOR: #000000
}
A.a1:hover {
COLOR: #CCFF00; TEXT-DECORATION: none
}
A.a2 {
COLOR: #ffffff
}
A.a2:hover {
COLOR: #000000; TEXT-DECORATION: none
}
A.a3 {
COLOR: #ffffff
}
A.a3:hover {
COLOR: #fafafa; TEXT-DECORATION: none
}
.fst {
BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; HEIGHT: 79px; WIDTH: 770px
}
.fsttd1 {
BACKGROUND: #336699; BORDER-RIGHT: #000000 1px solid; HEIGHT: 77px; WIDTH: 158px
}
.fsttd2 {
BACKGROUND: #006699; HEIGHT: 77px; WIDTH: 468px
}
.fsttd3 {
BACKGROUND: #009999; HEIGHT: 77px; WIDTH: 142px
}
.fsttb1 {
BORDER-TOP: #000000 1px solid; HEIGHT: 17px; WIDTH: 468px
}
.fsttb1 TD {
BORDER-LEFT: #000000 1px solid; HEIGHT: 17px; WIDTH: 58px
}
.fsttb1 TD A {
BACKGROUND-COLOR: transparent; COLOR: #ffffff; HEIGHT: 16px; LETTER-SPACING: 3px; PADDING-TOP: 2px; WIDTH: 57px
}
.fsttb1 TD A:hover {
BACKGROUND-COLOR: #CCFF00; COLOR: #000000
}
.fsttb2 {
HEIGHT: 77px; WIDTH: 142px
}
.fsttb2 TD {
BACKGROUND-IMAGE: url(/images/02_0003.gif); BACKGROUND-POSITION: left 0px; BACKGROUND-REPEAT: no-repeat; BORDER-LEFT: #000000 1px solid; HEIGHT: 16px; WIDTH: 71px
}
.fsttb2 TD A {
BACKGROUND-COLOR: transparent; COLOR: #000000; HEIGHT: 16px; PADDING-TOP: 2px; WIDTH: 70px
}
.fsttb2 TD A:hover {
BACKGROUND-COLOR: #CCFF00; COLOR: #000000
}
.snd {
BACKGROUND-COLOR: transparent; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; WIDTH: 770px
}
.sndtd1 {
BORDER-RIGHT: #000000 1px solid; VERTICAL-ALIGN: top; WIDTH: 158px
}
.snddiv31 {
BORDER-BOTTOM: #000000 1px solid; HEIGHT: 19px; LETTER-SPACING: 2px; PADDING-TOP: 3px
}
.sndspan31 {
BORDER-BOTTOM: #000000 1px solid; HEIGHT: 19px; LETTER-SPACING: 2px; PADDING-TOP: 3px
}
.sndspan32 {
BORDER-BOTTOM: #000000 1px solid; HEIGHT: 19px; LETTER-SPACING: 2px; PADDING-TOP: 3px
}
.snddiv31 {
BACKGROUND: #009999; COLOR: #ffffff; PADDING-TOP: 0px
}
.sndspan31 {
BACKGROUND: transparent; COLOR: #CCFF00; CURSOR: hand; WIDTH: 50%
}
.sndspan32 {
BACKGROUND: transparent; COLOR: #CCFF00; CURSOR: hand; WIDTH: 50%
}
.sndspan32 {
BORDER-RIGHT: #000000 1px solid
}
.sndtb1 {
BACKGROUND: transparent; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 50px; WIDTH: 100%
}
.sndinput1 {
BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid
}
.snddiv41 {
BACKGROUND: transparent; BORDER-BOTTOM: #000000 1px solid; PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 10px
}
.snddiv42 {
BACKGROUND: transparent; BORDER-BOTTOM: #000000 1px solid; COLOR: #ffffff; LINE-HEIGHT: 17px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; TEXT-ALIGN: left
}
.snddiv42 SPAN {
COLOR: #000000
}
.snddiv43 {
BACKGROUND: transparent; BORDER-BOTTOM: #000000 1px solid; COLOR: #000000; LINE-HEIGHT: 20px; PADDING-BOTTOM: 16px; PADDING-LEFT: 8px; PADDING-RIGHT: 8px; PADDING-TOP: 16px; TEXT-ALIGN: left
}
.sndtb2 {
BACKGROUND: #000000; HEIGHT: 27px; WIDTH: 100%
}
.sndtd2 {
BACKGROUND: transparent; VERTICAL-ALIGN: top; WIDTH: 610px
}
.snddiv0 {
COLOR: #408906; PADDING-BOTTOM: 9px; PADDING-LEFT: 9px; PADDING-RIGHT: 9px; PADDING-TOP: 9px
}
.sndtb0 {
HEIGHT: 24px; WIDTH: 585px
}
.sndtb0 INPUT {
BACKGROUND: #9ec380; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid
}
.sndtb3 {
BACKGROUND: #9ec380; WIDTH: 483px
}
.sndtb3 TD {
BACKGROUND: #ffffff; HEIGHT: 14px; LINE-HEIGHT: 12px; PADDING-TOP: 2px
}
.sndtb3 TD.sndtd31 {
BACKGROUND: #99CCFF
}
.sndspan1 {
HEIGHT: 150px; MARGIN: 0px 12px 13px; PADDING-BOTTOM: 0px; PADDING-LEFT: 12px; PADDING-RIGHT: 5px; PADDING-TOP: 0px; TEXT-ALIGN: right
}
.sndspan2 {
HEIGHT: 150px; MARGIN: 0px 12px 13px; PADDING-BOTTOM: 0px; PADDING-LEFT: 12px; PADDING-RIGHT: 5px; PADDING-TOP: 0px; TEXT-ALIGN: right
}
.sndspan1 {
WIDTH: 280px
}
.sndspan2 {
WIDTH: 585px
}
.sndspan11 {
HEIGHT: 26px; PADDING-TOP: 4px; TEXT-ALIGN: left
}
.sndspan21 {
HEIGHT: 26px; PADDING-TOP: 4px; TEXT-ALIGN: left
}
.sndspan11 {
WIDTH: 133px
}
.sndspan21 {
WIDTH: 438px
}
.sndspan12 {
HEIGHT: 26px; LETTER-SPACING: 1px; PADDING-RIGHT: 20px; PADDING-TOP: 4px
}
.sndspan12 {
WIDTH: 130px
}
.snddiv11 {
HEIGHT: 104px; LINE-HEIGHT: 16px; OVERFLOW: hidden; PADDING-BOTTOM: 0px; PADDING-LEFT: 8px; PADDING-RIGHT: 8px; PADDING-TOP: 6px; TEXT-ALIGN: left; scrollbar-face-color: #9FC383; scrollbar-shadow-color: #000000; scrollbar-highlight-color: #000000; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #404040; scrollbar-arrow-color: #FFFFFF
}
.snddiv21 {
HEIGHT: 104px; LINE-HEIGHT: 16px; OVERFLOW: hidden; PADDING-BOTTOM: 0px; PADDING-LEFT: 8px; PADDING-RIGHT: 8px; PADDING-TOP: 6px; TEXT-ALIGN: left; scrollbar-face-color: #9FC383; scrollbar-shadow-color: #000000; scrollbar-highlight-color: #000000; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #404040; scrollbar-arrow-color: #FFFFFF
}
.snddiv11 {
WIDTH: 263px
}
.snddiv21 {
WIDTH: 568px
}
.snddiv12 {
HEIGHT: 20px; PADDING-TOP: 3px; WIDTH: 130px
}
.snddiv12 IMG {
BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px; CURSOR: hand; HEIGHT: 17px; MARGIN: 0px 6px; WIDTH: 18px
}
.trd {
BACKGROUND: #000000; WIDTH: 770px
}
.trd TD {
BACKGROUND: #006699; HEIGHT: 16px; WIDTH: 95px
}
.trd TD A {
BACKGROUND-COLOR: #006699; COLOR: #000000; HEIGHT: 16px; PADDING-TOP: 2px; WIDTH: 95px
}
.trd TD A:hover {
BACKGROUND-COLOR: #CCFF00; COLOR: #000000
}
vbnet-Tiamo at 2007-10-24 > top of Msdn China Tech,PowerBuilder,控件与界面...