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

黑侠 发表于 2008-6-3 01:43

CSS优化教程：CSS中简化属性的写法

在工作中编写CSS代码时，经常会出现冗余的代码，特别是用“可见即可得”工具来编写，为了提高代码的质量及文件压缩到最小，使代码具有可读性，我们不得不把CSS代码简化。 9\3PtT7X'~f
'~8dMQ:X4i

hY7S;L!Kw 下面用一些比较常用的属性来做示例： tZ:z*eE0?n bC?%e

*z I2pJ B!p"j`g 　　margin {
!U"Q J/[ r_
@7I*x7v,q Q 　　margin-top:1px;
fBg.{|{!o/\
0q|"O_,il$Sq/p 　　margin-right:1px;
2J
J`+d.D6g8l
,TV%q,|j? 　　margin-bottom:1px;
:\Va
K)}&J*K z:l-J*C{4q
　　margin-left:1px; }YU5Y(p TQT.P
\$W(~
kV
　　代码简化为：margin:{1px }:@N'e'vu$S*P ZY$j
s iAJ5n9pj7B,D
　　{margin-top:1px; [ c.muH
ro3s6SsB?
　　margin-right:2px; 3f;l`0FR0Z

5^J1L/`~1j 　　margin-bottom:1px;
\1_:v#to VU{8n
(`Hh;c/DBV 　　margin-left:2px; }
2fm7X$l#lxs E|%MJ)s6wA
　　代码简化为：margin:{1px 2px }
|3eG \B4E
yP\Q"?c|} 　　{margin-top:1px;
tc^.xOG&k [.W.w;W7yx1f7R
　　margin-right:2px;
!AQTX.X"a'f!~9D L6Lz e+fb#nU n L
　　margin-bottom:3px; g'Vv Vv"@z:df$O
6^p!L J2U
　　margin-left:2px; }
%GS*w0Aa3]\I %rjF/W7m
　　代码简化为：margin:{1px 2px 3px }
1y/XQl^+@,C f+X3q:[*y;s%F
　　{margin-top:1px; k5z9G0|#]1mEs
n`K
Ls e*p
　　margin-right:2px; "t&^a @c$|9w
8YJ9z3G)|/m0L+q"h+A"N"m"p
　　margin-bottom:3px; eG_~ ]I$uY+[0m

3o(]%cfjwT 　　margin-left:4px; }C A(wj;M]5z
D.XA)W{/Q
　　代码简化为：margin:{1px 2px 3px 4px }Go}/`y"])n

'w%j@`} 　　当属性值是0的时候单位可以不写如：0px 直接就写成0
0`ua2dA| ` :v];k9p8J
　　padding的书写方法和margin一样，在此就不多叙述 A2p/G}N(j~ d/}

T_{)L(M 　　border { E!Q?0eGJ9?

&U@hsn"_K 　　border-width:1px; #T_8HWv:O
xMaS/YKawU w"f
　　border-style:solid;
1j&P Z!HS Wo
2z3_lWdh5i!iR*v 　　border-color:#000000; }
0v&US&r2_ t3D7kcrQ#Lu+K,u
　　代码简化为：border:{1px solid #000 }D1D(I4V {|

h(? C/Z+l0M
}Z-C 　　background {
rlpO6m(x
| c-rf,Nc 　　background-color:#CCFFFF; $GKyb&U;X{#R
B {4{

g%rZ@jI 　　background-image:url(图片路径); d.P3}c|yyR2CN!q
nA^ oc~:A0yO#O
　　background-repeat:repeat-x;
3O8S+D5AN Z-niF
K]_oG 　　background-position:5px 4px; }Ki,Cx[B6i"^[5j*l g

R} xCr(u!ZxsB#| 　　代码简化为：background:{#CFF url(图片路径) repeat-x 5px 4px }
y+o#kHiL!a+c:fz%x #R2w)si/M,Pm\
　　font { Eitx.{+t{,J9rS

V ];p5G4sw 　　font-size:26px; n]:W.IS9|x
cM$G\ZQV
　　font-weight:bold;
{,MV2~WTB`uP 8w.{L/Ao%c_@O
　　font-family: “宋体”; }
A&[*o&j!m^
!{*yY$gW-s9p 　　代码简化为：font:{26px bold “宋体” }
qz:c3[+H p!`V9v
2?&hPg:V!Yin9{+q 　　color属性值
@_7i9M1i&kQ N+[ vd
d.J!\R
　　color:#000000;
Coe!^:PK iT_@:J)X5d8\
　　color:#ff0000; d.f @,EYB
1b
}W {oI1pj
　　代码简化为：color:#000, color:#f00

查看完整版本: CSS优化教程：CSS中简化属性的写法