一.使用css缩写
$ a p6 n% W' y( L使用缩写可以帮助减少你css文件的大小,更加容易阅读。css缩写的主要规则请参看《css基本语法》。4 V/ Y( ~9 c* x+ N$ J/ s# q
二.明确定义单位,除非值为07 T Q1 g2 F) S6 ]
忘记定义尺寸的单位是css新手普遍的错误。在html中你可以只写;100,但是在css中,你必须给一个准确的单位,比如: width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。
" G7 I5 ]& Y {5 p+ H. G三.区分大小写; ]" U" k0 y' e% E
当在xhtml中使用css,css里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。/ `# T( h* n- x
class和id的值在html和xhtml中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在css的定义和xhtml里的标签是一致的。9 W# H% j! h0 J& e4 K) F
四.取消class和id前的元素限定
( a6 r( ^: E$ Z0 u' Y当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为id在一个页面里是唯一的,鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如:* g1 P# _) _! E2 q
div#content { /* declarations */ }
. b+ \( x. ~; X# R6 B% Zfieldset.details { /* declarations */ }
4 {( o6 j1 H3 V* ~+ f8 z! W可以写成
, P9 c5 g3 m* R2 v. f#content { /* declarations */ }
# v3 }& C [$ n' K$ D.details { /* declarations */ }
% y' x1 i1 |1 N. O; t0 e% W; k这样可以节省一些字节。
9 B6 T0 B6 y# k, L w五.默认值6 j- X0 {* H% O% ]$ P% t: ^
通常padding的默认值为0,background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样:3 y( Z p" f" @6 e: r3 r
* { , ^$ z. {8 j3 x
margin:0;
" I; v& y1 J; a) S# Gpadding:0;
% N1 x# `0 A+ x( U" r) ^% K}+ ?$ q9 r7 a8 w* z
六.不需要重复定义可继承的值4 h% v2 Y& t @. _* o
css中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。但是要注意,浏览器可能用一些默认值覆盖你的定义。
) S9 b5 @5 T& @1 [2 u; X七.最近优先原则
, \! F9 z) |6 d- K如果对同一个元素的定义有多种,以最接近(最小一级)的定义为最优先,例如有这么一段代码/ g n6 u0 u" k% a
update: lorem ipsum dolor set
6 S" c' z2 Y0 |. [' u在css文件中,你已经定义了元素p,又定义了一个classupdate
2 w! T5 t! r, Z. H. P, fp { 7 s+ w7 p7 t& E9 R
margin:1em 0; 7 L% c7 P0 i5 n/ v2 f
font-size:1em; - n- C9 H6 X, S: V
color:#333;
' i- y+ c/ K$ o7 }}
2 l& P) [! H: m.update { / Z0 p" z9 ~$ ^
font-weight:bold; " Y. V" @& H D7 U5 a A
color:#600; 4 l4 }1 n+ n: L7 ~; n
}( Z2 v. J# {5 }1 z* s
这两个定义中,class=update将被使用,因为class比p更近。你可以查阅w3c的《 calculating a selector’s specificity》 了解
0 S5 E1 K* X8 `# ]( G( l更多网页制作信息请查看: 网页制作 |
|