[方法技巧] CSS的常用技巧放送

ofly

管理员

Rank: 9 Rank: 9 Rank: 9

1^# 大中小发表于 2006-12-8 09:31 只看该作者

CSS的常用技巧放送

CSS的常用技巧放送(一)8 C/ D" p) t* k- j& ]: Z

一.使用css缩写; v4 N+ m( a7 Q. b) j8 b1 Y8 \

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。% W6 @9 G3 d  j

二.明确定义单位，除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width: 100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
7 m6 q) W' t! {6 W
三.区分大小写
: Q* R4 o; Q" t, }
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。  b+ F, a- n8 v" ^  N8 z

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。) e1 q0 Z- D5 X& _! i1 F

四.取消class和id前的元素限定

当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如：+ e3 v7 W" V$ h( N9 L
9 W1 @# F+ Z2 C, C( G
% `/ C3 W: s; l! N% X6 Z- K
div#content { /* declarations */ }

fieldset.details { /* declarations */ }
& z- U: g% [1 ~& p& J; z( S
: z+ |" e4 D5 M* T; f9 Z, t+ J  @# q
可以写成
+ F# S9 N( {- V1 f- a6 p7 ~
* e9 X& [# w' r9 @, Z
#content { /* declarations */ }
$ C6 y; n5 J. [9 d$ Q; R
.details { /* declarations */ }

这样可以节省一些字节。

五.默认值, O+ I8 n, L0 W$ q' A; b0 [
& }  Y; @3 S" D* B. X: c
通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：

* { 0 L3 Q+ J3 S7 z9 J& i, r. U1 y

margin:0;* O  b3 \8 @- P3 b  S! I, r. \

padding:0;  r/ _  X$ q& x! X3 b: }& A8 @$ p
' h) B3 i/ \' L# ]
}
9 E" R, N* ?6 W" F

六.不需要重复定义可继承的值

CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。0 @) A* P8 r0 k+ P5 }8 X- v

七.最近优先原则
% [( r0 b- {& ]- K& S
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

Update: Lorem ipsum dolor set
0 @2 m, s* O. [
在CSS文件中，你已经定义了元素p，又定义了一个classupdate
! _: C5 ^' N3 h
: K. B, @9 h+ z( |- n) B5 p
p { 9 P) V6 W/ p( w3 U
( H1 k) o2 O5 A0 t' a1 I" X
margin:1em 0;+ N4 d' K3 l! d2 Y0 S
8 T) m, h4 {" `
font-size:1em;& e) A$ A4 P1 n: C9 g! W0 e

color:#333;
$ Y5 `; q$ u8 ]: ?
}% Y# E' K5 \2 ]3 h# ?6 Z
  Y+ P# j& y$ d/ `$ J% F
.update {+ C* ?7 j  W/ Z+ k, h

font-weight:bold;! P0 T$ g2 K) E! g7 K* K  K* b6 ?; A5 Y
0 I, H8 @. f. j3 m
color:#600;
5 x' p2 J3 C8 l1 I: {2 ~
}
' Y8 I/ J) K0 M: l4 ]+ [8 u
6 e* q, L0 ^, o

这两个定义中，class=update将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》了解更多。
) ]' |6 L2 j& p3 T& d
八.多重class定义; w  i/ @4 t: j' N0 A2 P, ]

一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。
7 q8 D1 e& Z) z+ q  P
! }0 `4 u' p. m; ]/ ^" e+ D
.one{width:200px;background:#666;}

.two{border:10px solid #F00;}) D0 c2 `6 T# r3 a: y# d

在页面代码中，我们可以这样调用

<div class=one two></div>

这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。
/ X" [* s" P4 M: n$ e) T3 ]3 D! ?' H9 w) W
九.使用子选择器(descendant selectors)

CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

; H6 r. `! P  {7 p! a
<div id=subnav>
. ?1 H& T- L  O" C) }% |4 _" c
<ul>
7 V6 U# J2 S' p  K" n6 C
<li class=subnavitem> <a href=# class=subnavitem>Item 1</a></li>>

<li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> </li>
' V5 I9 `7 U  _
<li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li>* b) E5 ?# @4 f' G* ?1 q
  ]- A6 s2 I/ g$ y( j5 s
</ul>; m7 ^3 R/ R& R+ n4 b

</div>

, R! _0 K5 c9 s3 F$ k
这段代码的CSS定义是：
3 U8 p: r: v& e% Y. p5 _
1 b) G* c. f& Q, A+ o( c& {
div#subnav ul { /* Some styling */ }
  t. l8 z  ~2 w" e/ t
div#subnav ul li.subnavitem { /* Some styling */ }

div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
, o7 E+ {1 \$ F9 X' ?2 W5 \& D' T/ j
div#subnav ul li.subnavitemselected { /* Some styling */ }

div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

你可以用下面的方法替代上面的代码
: T, z0 l' |% ^/ ^
! N: z( ]$ b8 S7 ?; V
<ul id=subnav>
5 y3 C. b0 f4 R- {
<li> <a href=#> Item 1</a> </li>  J/ E( W: o6 D/ H7 Z
: e, u: j' H. x+ r4 O3 `5 t
<li class=sel> <a href=#> Item 1</a> </li>8 }$ r5 w7 j) K8 B1 r
: n: C& s6 s( n/ ?
<li> <a href=#> Item 1</a> </li>
) r1 n) ]# ]1 Y9 x2 r4 P* b( I6 T) }
</ul>! ~" z, F, ~6 c  `
  Q; E/ l, j9 K8 j( s
$ E$ W! d) g: g0 a. s% b; A0 }
样式定义是：
# R5 v/ o/ e% x+ D$ W. w' s" B  L0 g

#subnav { /* Some styling */ }

#subnav li { /* Some styling */ }
- C6 k( a1 X5 h8 i0 y
#subnav a { /* Some styling */ }. ~6 ?, F1 J; W" E8 N, w7 _: x

#subnav .sel { /* Some styling */ }# e% @1 b' ?. G5 b
# k$ {8 O4 E: \* R8 s
#subnav .sel a { /* Some styling */ }) K" G& }3 _1 y; Q1 A  q2 n. b! Q
! _4 D* I4 ]2 @
) R' r& |4 h7 }7 a2 I
用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。4 F0 O& N# j' d' i0 M+ q4 e

十.不需要给背景图片路径加引号0 p. ?5 F, q! a4 m

为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：/ H0 z9 _' d8 j4 o( f# y0 U

background:url(images/***.gif) #333;

可以写为3 x, \5 {+ o7 U6 d1 T) _8 V+ {

background:url(images/***.gif) #333;

如果你加了引号，反而会引起一些浏览器的错误。$ t( }2 Q' L, G
/ _2 p* K+ o' z$ X' a
十一.组选择器(Group selectors)5 |/ M! J/ i2 ?' [2 [" I$ Q

当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。& T; j, `6 t  U6 u" p8 ]: J
& u; H% y3 U" A

例如：定义所有标题的字体、颜色和margin，你可以这样写：

) i9 g; _8 E" r9 X" q$ |
h1,h2,h3,h4,h5,h6 { : J7 X5 x  ?2 u: ?7 S# y  N
) Q  M* }0 ]- ]2 ^8 u1 w( ^; B, v
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;0 @, c/ p1 p5 `2 R5 T2 A1 v

color:#333;
2 @% ]( i9 {/ j7 q5 i: d5 o4 D. m
margin:1em 0;$ G) Y0 k4 [/ k5 {/ \* g
9 d+ w2 j, i+ i7 O$ |% n% J( p
}
  X- ^; w9 }& A% v- J. t4 e

如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：
' N  `6 j6 c6 \) E3 H/ F

h1 { font-size:2em; } $ D0 U( O( n6 I  u) R

h2 { font-size:1.6em; }" c9 Z9 R. r# X3 C/ i9 O: z
/ D. x! Y5 W* u( X( G/ ]' r

十二.用正确的顺序指定链接的样式, T3 G+ L/ @) p3 C5 N- s- p! s6 K
7 I# @8 o7 f: b4 P- c4 ?! ?% B
当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是LVHA，你可以记忆成LoVe HAte(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。- p0 _, w5 R7 L% {6 i# o+ Z* E
9 |$ H1 }7 |- [; l$ B9 X; L+ G
如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。* O' X% o3 t$ @
! L6 B4 r% s5 r& y+ b
十三.清除浮动

一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。. E$ ?; s4 t5 z; W7 n% a) y
! R5 S2 T% R+ d  s6 [/ i1 b( l
通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注：本站将尽快翻译此文)。8 }: n2 P/ S  n) A% @* R3 G2 M+ @

上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》4 E7 |& h8 X/ S: d# E4 L# C' N4 E+ v
* i# M; ~2 K; {8 X( Y, Y& Y. ]
十四.横向居中(centering)
; K& [# W9 \2 l& E; c' u

这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：5 Y% \( n8 L& I2 K; k
4 u2 C! L& W) K3 R" M* Q8 |
! V, S. \* o5 C3 n6 N1 n/ X

你可以这样定义使它横向居中：
8 o4 s# d3 W7 U$ \. x
( S3 ?- ^7 R2 p* T6 G) R; o
#wrap {

width:760px; /* 修改为你的层的宽度 */
: \- g6 r/ G: \; J9 L
margin:0 auto;

}- ?  }, x5 R/ j5 P

但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：& v9 g- T. ?) x4 |6 X" h3 p
; w( j7 }( |5 P/ \

body {

text-align:center;
, t5 y3 [2 u' H: J
}; `7 t! j9 {& U9 t' S  {

#wrap {3 n( E" V, [# P0 n

width:760px; /* 修改为你的层的宽度 */

margin:0 auto;4 j; d1 c, O/ ]0 n7 `6 {4 ?9 ?
0 x: G5 }) B/ i' w
text-align:left;& f! S2 N5 H0 a# S& D' _! i

}
2 ^# i$ n5 i9 Y& c& N6 j; M

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。( R+ G5 U0 r8 s

十五.导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

@import url(main.css);# D3 x4 q4 a4 p- R# f1 p

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：
/ n1 ]' R8 c" Y( w( s1 a7 G  F# j
@import main.css;
8 U+ E/ q( E, `& Q% z$ H+ d
这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》. Q3 v3 ^: Q. w% T

十六.针对IE的优化: Z$ {  d0 {) K- g  y3 V! L5 T

有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1.注释的方法
+ T8 {8 e* }: g4 C  P/ {5 y0 \) D1 t' G
(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):

html>body p {9 Q7 a% s8 c& O7 Q

/* 定义内容 */
0 [+ ^/ G, [& P" _
}5 J5 \5 F6 A7 O) e5 g  V; j* W
$ m  D: h5 I4 D( {5 S
(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)

* html p {* D5 M) a4 ~/ |- J8 [
- a1 U1 ^8 _# w: @& n+ N
/* declarations */
+ h3 q4 V# j* }+ i$ N, Z( `7 ~
}% n) a2 u/ @. W% B" ~' K

(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：

/* */) b- e! D& e% y  W7 P" H$ [9 h
. O: X1 D/ _, l- J$ ^- o
* html p {! h! P4 _& |6 s2 C
% L% k5 u# u6 {  W# m
declarations+ C$ l+ u. c8 Q  Q/ y" [' ]* s/ h
3 B( M+ G+ X, N3 i. R
}
: @" z1 a! Z0 i  ^4 \8 \: E  c
/* */
( k9 _, E; R/ s5 Y: T/ H
2.条件注释(conditional comments)的方法

另外一种方法，我认为比CSSHacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：, Z; J7 R  a' K% _$ b+ X8 K
9 S; q& f$ `! V& U) M6 V


6 M) E+ ^  y5 c* }1 L# a

十七.调试技巧：层有多大？1 s2 g- K% l5 u/ ~+ ]9 \
) f& K! D1 E# e; H) i& `$ ^/ M
. I& V3 k' Y, ?4 d: D% y  A2 e
当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用 border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。& q5 S# M2 X& D
6 e; `# r4 R% n$ Q+ Q0 @) z
另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代码书写样式
' E; f, R! o+ p0 c. D1 i

在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：
' H! `, W+ y. n; t' x$ r

selector1,

selector2 {: Q) C' q1 w' R# H8 f
% d$ B! Y$ `0 V, A1 {
property:value;
) {+ m% g- Y, @
}
. {' c9 C4 {: j. P  ^0 P! y, j7 ?

当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。
) R$ R  _3 s% E3 Y( Q
我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。" j  }! K" q' Q+ c( Z. `/ ]
. y* E& a+ U2 c' K
最后，关闭的大括号}单独写一行。
$ C3 I0 V2 Z8 J  @8 K! n8 N
空格和换行有助与阅读。

TOP

设计图片在线处理软件

‹‹ 上一主题 | 下一主题 ››