我爱电脑技术论坛 » 网站建设 » CSS教程：简化CSS中属性的示例

黑侠 发表于 2008-5-31 18:22

CSS教程：简化CSS中属性的示例

在工作中编写CSS代码时，经常会出现冗余的代码，特别是用“可见即可得”工具来编写，为了提高代码的质量及文件压缩到最小，使代码具有可读性，我们不得不把CSS代码简化。 I,p4{WU@+e
PR|!nL$TO
　　下面用一些比较常用的属性来做示例： E2UQo)n-lT
f`Gv4\%W:~*T&`
　　margin
zh\4z3oGe6X-NF
N 　　margin-top:1px;
m\Jv'p5Gp 　　margin-right:1px;
:V4a3i gO9p~ 　　margin-bottom:1px;
zS%ZV? 　　margin-left:1px;
%Yq+Y&B9L^:{(p 　　代码简化为：margin:1px"n R_WzKwf

.Y*qi Kkvk 　　margin-top:1px;
,dS.Wx,VZhfwZ] 　　margin-right:2px;
j@HJa/B)} 　　margin-bottom:1px;
t+duq1k V2Gf\ 　　margin-left:2px;7t~pX6m8o5|
　　代码简化为：margin:1px 2px|E(K @/h8n*[;N
E%jG5A)i
　　margin-top:1px;
Mpd$}^P^#~ U 　　margin-right:2px;
V*Q/~3fNv7Q 　　margin-bottom:3px;+{[V
tY*K!e
　　margin-left:2px;)z8rO"OY w
j
　　代码简化为：margin:1px 2px 3px
&O*^F~Ro J.c4]f,bF+B"r3]
　　margin-top:1px;#kODF,V4e_)EM
b_ @
　　margin-right:2px;
2HQ6yJ&U~s 　　margin-bottom:3px;&ETBjeY MW0d
　　margin-left:4px;GTmhKmS
　　代码简化为：margin:1px 2px 3px 4px
)I.t-P:y1@1xn&f%H$E
j.x Ek kc*L^!D m 　　当属性值是0的时候单位可以不写如：0px 直接就写成0 0T*G-S(xi\ k u6G
　　padding5CE#P"N_
　　padding的书写方法和margin一样，在此就不多叙述 E4Ih/l1|2ZbQ:x
　　border1Sr;U7sd
　　border-width:1px;Lz)o_/oa;q!I
　　border-style:solid;
DH"j{N#n,FP6yesZ/m 　　border-color:#000000;
k6^;v7aQ1Y
U\ 　　代码简化为：border:1px solid #000 N#z)sx@f
1l-W&ys.Y3r(`y
　　background
&m&mF-Sc0@ F"w!~ 　　background-color:#CCFFFF;
F)E A7Y1n9| 　　background-image:url(图片路径);
dSvdg'z 　　background-repeat:repeat-x;
&Q m/x&p(voJ
z 　　background-position:5px 4px;
,B9sF}P 　　代码简化为：background:#CFF url(图片路径) repeat-x 5px 4px y%|qheQ)Wj5d

#J7u!q%_O 　　font"O {gL(ny(mG&`
　　font-size:26px;
c6Zq'v QzW 　　font-weight:bold;
1@"@|Pnce/`Q 　　font-family: “宋体”;
&|,|;C-h!]2q3h 　　代码简化为：font:26px bold “宋体”
`o/pr:C]\2h6z_ 　　color属性值
BR J&[5Q9jM 　　color:#000000;
'zTsw{rc} 　　color:#ff0000;v5GTP;Ol
　　代码简化为：color:#000, color:#f00

查看完整版本: CSS教程：简化CSS中属性的示例