CSS优化教程：CSS中简化属性的写法
在工作中编写CSS代码时，经常会出现冗余的代码，特别是用“可见即可得”工具来编写，为了提高代码的质量及文件压缩到最小，使代码具有可读性，我们不得不把CSS代码简化。 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站* e3 Y) L: B2 B' p; n
打造最好的电脑自学交流论坛& W9 u& q- B( z3 a
. u' x: R( L3 q2 {' x' F. ]! k电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站下面用一些比较常用的属性来做示例：
5 L' W! m( M* _8 ?, x# d9 b打造最好的电脑自学交流论坛
. T. D8 u/ u* h& A我爱电脑技术论坛 margin {打造最好的电脑自学交流论坛+ I2 h; U; @6 C/ `5 Q1 B# D! H
打造最好的电脑自学交流论坛+ u: `; e) s0 R% @1 |
margin-top:1px; www.520diannao.com. w [! _9 U9 `. o
+ h. F$ R( l: ]# N& g. A我爱电脑技术论坛 margin-right:1px;
' A+ O( b" Y9 u' C电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站+ s7 v. u2 ^/ e! i! b8 Y6 r0 i( H
margin-bottom:1px; www.520diannao.com2 q( D/ s4 K9 _4 k. _; j
/ m* ~! A+ K# n; u我爱电脑技术社区--打造最好的电脑技术自学交流平台 margin-left:1px; }
) U4 ]. |. l8 j4 G( Awww.520diannao.com
1 `0 V/ {4 S7 _8 |; u我爱电脑技术论坛 代码简化为：margin:{1px }: A/ ^) |% P6 ^) a0 p
# q0 A' y% I% c' S我爱电脑技术社区--打造最好的电脑技术自学交流平台 {margin-top:1px;
- E% c, P( h1 `9 Z我爱电脑技术论坛
. y- U9 O3 b% w1 y1 e电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站 margin-right:2px; 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站2 e! A6 E' R4 l4 f1 w/ x
; [% L& ^8 n4 S& _5 x6 Y, zwww.520diannao.com margin-bottom:1px; 我爱电脑技术论坛1 e( p; e8 `. V" N/ |- q' L
我爱电脑技术社区--打造最好的电脑技术自学交流平台7 k+ ]' ?5 m( C& A
margin-left:2px; }
8 N0 A1 o5 d8 u t1 x: R
$ G0 i% p I( I; c. }电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站 代码简化为：margin:{1px 2px }
& O. [! V- S* X6 r5 twww.520diannao.com打造最好的电脑自学交流论坛" v3 }8 n5 m8 u) f) F; H6 [
{margin-top:1px;
8 l8 q1 q( x. Y, N我爱电脑技术论坛
( Y: z6 E6 c* O- [+ S我爱电脑技术社区--打造最好的电脑技术自学交流平台 margin-right:2px; www.520diannao.com: {* h, e( N1 X) L3 i) d1 _- v
: r5 S4 t6 Y# [( M' H/ U margin-bottom:3px; 我爱电脑技术论坛. W- W4 h+ j! j
打造最好的电脑自学交流论坛8 q; M' l d. M) k `6 X: g
margin-left:2px; }打造最好的电脑自学交流论坛, P3 j5 V% J6 X
_2 s8 N2 J/ z- e打造最好的电脑自学交流论坛 代码简化为：margin:{1px 2px 3px }打造最好的电脑自学交流论坛3 `9 b/ x" W1 B( [& D0 m
, d6 b9 R( ?* l- ?7 t {margin-top:1px; 我爱电脑技术社区--打造最好的电脑技术自学交流平台9 L* j( u) ^: r/ A) w: D
7 F8 J% F4 W7 G* g! P' D U) ~我爱电脑技术论坛 margin-right:2px; 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站' e% A. v' L8 g( E: X; _+ n; ~
2 s. J4 H2 H& W" \/ m打造最好的电脑自学交流论坛 margin-bottom:3px; 打造最好的电脑自学交流论坛0 a/ M; I: [/ U) q G
www.520diannao.com! ]- q8 q2 a) W
margin-left:4px; }www.520diannao.com& Q0 U( [, K& J- z4 ?
打造最好的电脑自学交流论坛$ k- Y9 M V$ U1 F
代码简化为：margin:{1px 2px 3px 4px }
/ t! t$ ]2 J) A' r- U# S" H我爱电脑技术社区--打造最好的电脑技术自学交流平台我爱电脑技术社区--打造最好的电脑技术自学交流平台, S, B% L9 G3 @' f, x- T& r' V
当属性值是0的时候单位可以不写如：0px 直接就写成0
$ u5 a- U3 I2 g( K; ?/ ^+ `( O& z我爱电脑技术论坛
: K, V5 V. I1 u- l- k3 pwww.520diannao.com padding的书写方法和margin一样，在此就不多叙述
$ g. o5 V+ s; `# u% z' y- E我爱电脑技术论坛我爱电脑技术社区--打造最好的电脑技术自学交流平台) T6 g' `, ^+ r7 y
border {
8 a/ _0 r/ y2 D我爱电脑技术社区--打造最好的电脑技术自学交流平台www.520diannao.com! s8 ^6 Q1 J% {- \" p# L
border-width:1px;
K' `5 W6 W+ B J5 ^' L/ R+ r我爱电脑技术论坛
1 w9 ^ t" P; L7 F, a电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站 border-style:solid; 我爱电脑技术社区--打造最好的电脑技术自学交流平台' S! j1 m: [( J8 F! b, p) B
5 n) l- _; l2 x9 m我爱电脑技术论坛 border-color:#000000; }电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站2 E6 D1 q% s6 {% u
打造最好的电脑自学交流论坛* Q9 H) d" H5 j: G; D
代码简化为：border:{1px solid #000 }我爱电脑技术论坛2 Y! F: [' B) ~4 q: I3 Q# c+ P" f
电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站5 y( c: F% C; d5 h+ V! w* E
background {打造最好的电脑自学交流论坛. L3 n( c6 Q, g* t' n( G
) _5 q3 h; s, f, U5 H9 b& y
background-color:#CCFFFF; 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站0 i4 e8 O' F1 f$ `" o# D6 _# S
& T' r- ?. E! L0 h9 @1 t* D电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站 background-image:url(图片路径); 我爱电脑技术论坛# f; y+ m3 A# m$ `% g
6 I& C7 d# T5 `' O我爱电脑技术论坛 background-repeat:repeat-x;
$ p- H# c0 x! e8 W/ X电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站打造最好的电脑自学交流论坛) W3 z' L' z- e; |1 [
background-position:5px 4px; }我爱电脑技术论坛' J7 K I* d2 C i
4 V6 J( n+ |# P2 j1 u3 @2 D V电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站 代码简化为：background:{#CFF url(图片路径) repeat-x 5px 4px }电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站+ `* L* L* z, t6 y1 Q* \
打造最好的电脑自学交流论坛! G: b8 k6 ~3 c0 a4 R
font {www.520diannao.com' E/ |+ S" {/ p6 @0 a9 h4 Q9 A# v0 d
我爱电脑技术论坛0 L9 m% {- P( c5 l* u
font-size:26px;
5 l2 N2 S. [& Z我爱电脑技术论坛我爱电脑技术论坛* Z# x) F, b! d* _" `2 l: j1 r
font-weight:bold;
: _: J) d v) B1 z( Z2 j+ Mwww.520diannao.com
* B" U p3 t& ?: u* @www.520diannao.com font-family: “宋体”; }
( M8 G9 g9 t! n0 m, d我爱电脑技术社区--打造最好的电脑技术自学交流平台www.520diannao.com1 F5 N# x! t1 b- D% g! U& g1 p% g
代码简化为：font:{26px bold “宋体” }www.520diannao.com, a' q2 q" j; }/ i+ M) x! ^0 _- W
% R% `2 @5 w! K% k/ s5 i color属性值
) D/ R; v9 w+ e% H我爱电脑技术社区--打造最好的电脑技术自学交流平台
- b( R2 n$ [) L0 w7 q打造最好的电脑自学交流论坛 color:#000000; www.520diannao.com) F% p2 n( w( p4 C$ q( Q* r1 J
我爱电脑技术论坛$ J7 O7 Z$ M, u+ T9 h" T( T- b/ l
color:#ff0000;
5 X; F) Z$ L( L/ h9 [# h+ e
2 E6 g+ K5 L/ w. j8 Y9 f1 u7 t S打造最好的电脑自学交流论坛 代码简化为：color:#000, color:#f00
