1、善用css缩写可以减少页面
文件大小，提高下载速度，同时使代码简洁可读。
& X3 m6 L1 Q, l. g# X# I5 b8 X* B. r
如：
复制内容到剪贴板
代码:
div{
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
border-right:1px soli #cccccc;
border-bottom:1px solid #cccccc;
}可以写为：
复制内容到剪贴板
代码:
p{border:1px solid #cccccc}再如：
复制内容到剪贴板
代码:
div{
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
}可以改写为：
复制内容到剪贴板
代码:
/*注意上、右、下、左的书写顺序*/
div{margin:10px 20px 30px 40px}
/*注意，数值与单位不能有空格，每个值之间用空格隔开*/2、可以同时为一个html元素的class属性设定多个规则(多重class定义)。
. w8 X) z6 r( A0 B% X' d ]
; O4 O6 M4 {9 S" b4 n! J7 [. z2 ~( v
通常我们写法为：<p class=”a”></p>
/ f4 I$ S" B; z, f& d1 n: s" u
) F6 H/ l' G2 u* k! v0 F h* b
实际上我们可以为p元素指定多个规则，如：
复制内容到剪贴板
代码:
CSS：
.a{…}
.b{….}
HTML：
<p class="a b">该元素同时包括a和b中设定的样式</p>注意：多个规则之间用空格分开。
6 z7 j, ~8 P. _0 K% _" e
8 G# _" z: y! x$ g 3、明确定义单位，除非值为0
: M# e& N: B5 Q1 V4 ^% s1 c( ^, ]5 y0 d8 P' _
忘记定义尺寸是css初学者新手普遍存在的问题。在html我们可以写width=”100”，但在css中应该给出一个准确的单位。如：width:100px;height:50px;font-size:9pt ，0值除外，因为不论对于任何单位。0值的大小都是相等的。
7 l3 F& ?* f3 W' q1 w2 ?7 d \; k' o8 n g
注意：不要在数值和单位之间加空格。
9 K) b" j7 H- a5 q- E- l
/ S: z' A" J# ^ K6 C, T3 y, _# D& { 4、区分大小写
* O' B9 \8 c2 {" ?0 B* P# j" l- M8 Q) j6 Y
在xhtml中，css定义的元素名称是区分大小写的，class和id的值在html和xhtml中也是区分大小写的，所以为了避免错误，推荐一律使用小写。如#aaa,与#AAA是不同的，在xhtml中，p和P也是不同的.他们之间不会覆盖。如果在css中定义了#aaa，在html元素中使用AAA来应用将不能得到#aaa中定义的样式。
- X! Z' Z$ a! {5 g9 T u
3 Z' M2 o; s1 p% ?. M
示例代码：
复制内容到剪贴板
代码:
CSS:
#aaa{border:1px solid #ccc}
HTML:
<div id="AAA">显示不出来1个像素的边线</div>5、CSS的最近优先原则
( b( J- t% ], I. J% o6 C9 m$ w2 n) Z3 {* x- p# e
如果对一个元素定义了多次样式，则以最近的一级优先，最近一级的样式将覆盖其他的样式定义。
5 M8 D" u) X! O" t* ~% F8 R
: D A4 v0 K3 `5 o& X, Y: F
如：
复制内容到剪贴板
代码:
CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:
<p>此处显示为红色</p>
<p class="blue">此处显示为蓝色</p>
<p class="blue" style="color:green">此处显示为绿色</p>
<p class="blue yellow">此处显示为黄色</p>注意：
1 \9 {" I! l d8 V8 ]
& g% r& e% g" _. {# g2 `# F5 V A （1）注意样式的几个优先顺序(优先级由上至下递减)：
( n' d6 K( i! i1 {
6 C1 G/ b$ Y7 M --元素style设定
1 V9 H) n* I" ~7 G
& K* m7 `% Z$ [, @ --head区<style></style>中的设定
. ^- E5 B7 q9 `# K2 ^) j2 v9 j& L$ @0 M
$ q; i/ w7 a# d --外部引用css文件
) Q$ C- B; T" b6 h/ j; x
1 _* ^9 L9 z2 y( d- C P （2）优先级不是按访问顺序来设定的，而是又css中的声明顺序来设定的。
1 _7 c( c6 n8 V* w6 R7 Z: S( P' ?' K) f* N
如上例中<p class="yellow blue">此处显示为黄色</p>也显示为黄色，因为在css定义中.yellow在.blue的后面。
6 T+ ]5 C- M: P- a# J2 \5 c) @
0 L( h2 V6 a& A) A% k' J, ~0 r! B 6、使用子选择器减少id和class的定义
3 Q6 `7 V4 m1 x8 P8 k3 J
G& }5 l. z6 a 例如：
复制内容到剪贴板
代码:
#contain{..}
#contain_ul{...}
.contail_li{...}
<div id="contain">
<ul id="contain_ul">
<li class="contain_li"></li>
<li class="contain_li"></li>
</ul>
</div>可以更改为：
复制内容到剪贴板
代码:
#contain{..}
#contain ul{...}
.contain ul li{...}
<div id="contain">
<ul>
<li></li>
<li></li>
</ul>
</div>7、不要给背景图片路径加引号
w; t$ z3 G) R( \" ^) K, {( q, T! f! x3 v9 R+ u
将background:url("xxx.gif")改为background:url(xxx.gif)，因为对于部分
浏览器加引号反而会引起错误。
' J6 u2 v1 e7 m+ c t# |
; { j8 n% G; X1 ^ 8、背景图片的路径是相对与当前css页面的路径。
5 r7 ]& o3 E1 j, s: N
' i/ o# h( ^& N& I$ ~0 K+ W/ { 例如：
- q! |+ B$ M- B& R$ y( |3 d' `2 i( N( c! k8 l$ r; l" H
有如下目录结构
& p+ T$ J3 \4 {% n" }3 K+ u
( @0 v1 l$ M0 c" H |--images
1 x! c2 s/ N/ g0 ?* Y- Y |--xxx.gif
% B8 f6 n* A; q |--css
3 w, o, v) e! ], [6 A3 O, Y" z8 x
|--xx.css
4 [4 g1 }. Y: ? ~" \6 G
|--index.html
5 k$ L! R0 K) x8 {1 s* R
2 @0 M, f9 B, e7 v5 }8 V 代码内容
复制内容到剪贴板
代码:
index.html引用xx.css文件。<link rel="stylesheet" href="css/xx.css" />
xx.css要引用xxx.gif图片其写法为：background:url(../images/xxx.gif)9、使用组选择器为不同元素应用相同的样式
5 i! ?, `. H$ L$ c3 W( _" G
9 O( {" \; U. y Z6 { w( i
如h1,h2,h3,div{font-size:16px;font-weight:bold}
/ q4 P8 b9 _: D/ M
' V" u( ^4 |" V# x0 d 则h1,h2,h3,div元素的样式都为字体16像素，字体粗体
6 `" c+ {# J+ a( y+ h) p3 d
+ q7 T! @9 W& G
10、书写正确的链接样式
/ M) u0 ]% [7 n5 X; F& L, u% V
/ J& C) |; {9 c* m- s9 ~( P3 ~ 当用css定义链接的各种状态时，一定要注意其书写顺序，即：:link :visited :hover :active。如果不按照该顺序书写可能无法达到自己希望的效果。为了记忆该顺序我们抽取每个单词的首字母：L V H A，你可以通过记忆LoVe,Hate,两个单词来记住其顺序。
4 J8 ]9 u; l. f" b ^! Y
2 g6 F( E; `+ y: a
11、禁止内容换行与强制内容换行
9 i Q7 E4 j) \& ?8 H
5 V& p! Q5 B; X' ]; \, S 在表格或层中我们可能希望内容不换行或强制换行，我们可以通过一些css属性来达到这些要求。
5 q n$ Z/ b! T/ k; o- x+ x# t; h2 | Z5 b, Q! \5 S4 E0 L
禁止换行：white-space:nowrap
% B( _/ E) m# x9 c4 f) I' p# M' J
强制换行：word-wrap: break-word;
word-break: normal;
' p0 k" d, m& P% Q6 E3 z" J/ A
$ O* b, g5 [! G6 y9 N/ k
12、区别relative和absolute
1 i a" O0 Q4 \2 ~) u" O6 g: W- p. {# I, D2 W
Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
. ^4 n2 E) V; u0 o0 d& i, c) ^, u0 e2 Z# q; ]1 F* c( p
Relative，CSS中的写法是：position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
+ q- S3 L0 e" f
. t/ \0 J( W9 W, R1 T 13、区别div和span
0 ]" R6 K% M7 L3 l/ ?4 A
, ^ |7 Q* P) A/ h& |7 p
div是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。
6 r4 j. n9 b0 ]5 C! M4 |( R& u
# W3 y' t% n9 U' h& k span是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上<span></span>标记可以通过在span上定义样式来设定其内容的样式。
7 u2 C. P2 F6 R. a6 h( ?+ P: E- z
+ ^. J6 h, C' @( q# _3 B
14、区别display和visibility
! l; V* q3 A! H# ~
' b4 }9 `% u) H. K! u display:none和visibility:hidden都可以隐藏一个元素
8 M' z2 C# L+ b4 _" E8 K! Y1 J7 j' _. S- N" P
但visibility:hidden只是隐藏了元素的内容，但其使用的位置空间仍然被保留。而display:none则相当把元素从页面中去除，其占用位置也将被删除。
