[方法技巧] CSS超级技巧大放送合集

ofly

管理员

Rank: 9 Rank: 9 Rank: 9

1^# 大中小发表于 2007-1-14 19:01 只看该作者

CSS超级技巧大放送合集

一.使用css缩写* q) H! u% U  U% _

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。/ k$ u9 `! F" A. t" b* y9 }

二.明确定义单位，除非值为0
9 J  ^; w7 q1 w* }( m
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。! t* j1 z( E% O
$ u/ T9 w7 I- a. H4 z
三.区分大小写+ e* ^( B5 ^8 T; g  h5 q, V, r4 [4 k

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
- h8 R+ O0 j: W" e! n
四.取消class和id前的元素限定; C" k; U  l! j" w7 S7 M! p  E

当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如：

div#content { /* declarations */ }8 r# d/ Z3 p  j/ D9 e7 r( S
6 v4 ~; x2 \0 ?
fieldset.details { /* declarations */ }

% W/ y5 {. n, M+ ~

可以写成3 ]/ ~7 P6 t; V: d1 I& `/ ~( _

#content { /* declarations */ }

.details { /* declarations */ }# R5 h5 R$ O4 P. e, |" u# x1 D

# U& @# B/ l$ j( K
2 W7 t  F* D1 m! A0 g& Y3 T

, E+ T7 \1 s! P5 \7 {
这样可以节省一些字节。( `6 ^0 X; Z1 N. F
9 d: f" `7 g: e, Z0 L
五.默认值

通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：* J( ~; s; {8 X4 x8 l$ Y& N
5 E/ S5 ]( t2 G  ?: l. p3 x6 ?) ]+ u

* {
" @% l# N$ v. `1 {( l; j: I1 T# y) D
margin:0;, e, M/ D" _: L5 T5 V! _

padding:0;3 o; ^" M4 I8 m5 T

}5 ?, M4 [& \: m& Q
$ u( l$ W6 ^4 g6 k7 s

1 t1 K: T  o4 s' d8 W, D/ u

  f6 ~6 E- }7 ^0 B) g
六.不需要重复定义可继承的值
9 ^9 Q, y! O; i" u* b3 T" r0 X
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。2 k* ~$ R. F8 M$ \
& `4 j9 m8 b7 T) t0 p
七.最近优先原则

如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码* N  I. c) P# H9 `
4 x7 e) j/ e8 _. b6 s- i
Update: Lorem ipsum dolor set
, Q7 `0 _7 a6 ~# B- K3 K. v1 ?
在CSS文件中，你已经定义了元素p，又定义了一个classupdate" ?4 V7 r& ?* T: V

" K4 t$ [% o7 A% J
p {* [( p2 g- E3 y) q3 O7 @& d, E
: K0 x8 i$ X0 I5 x" S+ @
margin:1em 0;, S8 I. P- p4 K5 T. m4 Z+ \( U
4 D) Y+ ~0 g) j2 w; C
font-size:1em;. R, ?, [2 A# P+ o
- t. E7 @- W& ^; h1 I: i4 w4 [9 `: m
color:#333;
7 V9 V7 ^) w, Q; B8 v
}4 _# F  ?  `# o+ A, u

.update {

font-weight:bold;
& a" g- {' o  d8 v5 Z  B3 h
color:#600;
) z5 z) \9 i/ Y9 x/ \* w2 ?' c
}* M5 C6 a" k9 B1 ~& _/ B; T' }1 u6 H
7 ?' J0 x+ w' I3 n6 G
8 \- F* H; R" b2 b' v
. {/ A; r! }1 M: a; D+ {  }
" T0 t$ w: @: j/ O  h2 k  T  x8 K
8 V+ c1 }, C4 R! ~  K+ p) D/ r0 {. H3 o
5 z+ H8 K1 d. C7 b

八.多重class定义
7 D7 ?6 j2 e# r) L5 o6 }
一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为"http://www.28600.com/article1/#"666；第二个样式有10 px的边框。1 M5 }) x2 w9 k9 A' a' g$ ^; H
. I3 k9 e: Y- K* }6 F, z0 q! f+ u9 p

.one{width:200px;background:"http://www.28600.com/article1/#"666;}
4 X% M% w% W( a1 G7 N' I
.two{border:10px solid "http://www.28600.com/article1/#"F00;}: T) Z4 q: ^/ v* B$ Q6 }
/ D: [& x5 d/ O  ?$ s$ \1 R

) w& f; C; c3 P/ l: Y# o4 C: M* x+ \

: \, t* u( I- G( h/ x$ W" \6 n1 G
. E$ G. R1 P3 o7 T7 i% a

$ X% w/ B* Z7 r/ c; O
在页面代码中，我们可以这样调用:

<div class=one two></div>! X3 X  Y  \( s6 T) j) M* d

这样最终的显示效果是这个div既有"http://www.28600.com/article1/#"666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。
/ |2 \. D3 I7 L% G1 X" {9 y
4 {, O, ^$ n- i: B: C' C: u( \# Y
. o+ X( x! I' `2 T
九.使用子选择器(descendant selectors)
' I0 O2 W, z9 U( K( m
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：  W6 V$ c8 E& n

$ Z1 |# Z& F0 s* q4 \, v- |( Y
<div id=subnav>
; q* \6 D3 v5 {
<ul>' r8 }  B9 S: [! b' B. B

<li class=subnavitem> <a href="http://www.28600.com/article1/#" class=subnavitem>Item 1</a></li>>- C/ X! W; _3 P0 m7 d% J

<li class=subnavitemselected> <a href="http://www.28600.com/article1/#" class=subnavitemselected> Item 1</a> </li>  E1 H) E7 [7 C- _! @; S3 C

<li class=subnavitem> <a href="http://www.28600.com/article1/#" class=subnavitem> Item 1</a> </li>

</ul>
4 Q0 g! P# F: y# o
</div>

$ P+ t* T" V% z9 b9 G! d1 \: V& L+ W
- N% Q1 _1 Z, C0 R

! o  s: ^' ?7 H
7 p% Y& I+ M8 z. v
这段代码的CSS定义是：

div#subnav ul { /* Some styling */ }/ \" N+ ^& U( K2 j+ J

div#subnav ul li.subnavitem { /* Some styling */ }4 {1 o& q  a% |8 J% K/ P
3 O0 V5 [( o% h
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }

div#subnav ul li.subnavitemselected { /* Some styling */ }3 ?5 Q/ Z0 ^- u6 l) F% N1 l
, v- _- j, S- m5 [/ b9 r3 |
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }9 I) r! ?* ?; c9 `( B& H. i* L
4 T: I. M9 X' j/ f% q& V9 G6 S( Y" d

; x" b8 f: b* q, k
! G, M2 w: l5 K0 R+ }& `
0 h  h  _8 |# S6 ]% V

你可以用下面的方法替代上面的代码

8 z6 W8 Y/ m; z/ K8 Z/ b* J
<ul id=subnav>
0 d5 B4 e- L: h3 k
<li> <a href="http://www.28600.com/article1/#>" Item 1</a> </li>
# j2 q  j" ]9 n, V3 ?8 k
<li class=sel> <a href="http://www.28600.com/article1/#>" Item 1</a> </li>

<li> <a href="http://www.28600.com/article1/#>" Item 1</a> </li>
% d: Y* J1 l+ S# t
</ul>  p3 @3 f3 k) @2 G( s+ k
/ M3 @/ S6 e9 ~3 o- Y- Y

样式定义是：) j- j6 W6 m& T: r6 g& m  q

#subnav { /* Some styling */ }% M, E$ A' M! s! @
( o$ l- L' Q4 d, x0 E
#subnav li { /* Some styling */ }: k2 c0 G+ Q4 f- R

#subnav a { /* Some styling */ }
- V! O& a# L9 g" D$ k: }, M
#subnav .sel { /* Some styling */ }; ^1 {$ x/ m. G1 z5 t
" ?; ]; S* z* J4 n; \
#subnav .sel a { /* Some styling */ }2 N6 v" D- _! ~( U

8 `+ p% P0 N! k$ Y8 M

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。5 O! i3 j0 T5 M8 N! \% A) D

十.不需要给背景图片路径加引号

为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：

background:url(images/***.gif) #333;- J2 E. C; N  Z* U
. d4 ?0 U2 a% H9 ^
可以写为:% Y) y4 ~4 [! E( C' x

background:url(images/***.gif) #333;
' N8 ]$ `' A8 W* F6 q. O
如果你加了引号，反而会引起一些浏览器的错误。

十一.组选择器(Group selectors)

当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。
' B8 s5 W, v7 O( M5 `" J% N" d+ a! o
例如：定义所有标题的字体、颜色和margin，你可以这样写：

h1,h2,h3,h4,h5,h6 {

font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;/ I) m, X! b+ U* o
5 Q+ p0 ~$ [+ L$ Z& A; t, h: I) k
color:#333;

margin:1em 0;

}

& \) l* b: S  q  w7 D. g
2 y4 }0 C% H6 J8 D) P
; K2 b" X7 R% H, B) a* H6 V) ^

如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：

h1 { font-size:2em; }

h2 { font-size:1.6em; }+ h9 M2 V! v1 Z  u$ z6 ]$ f! Z, p" C
) V8 k, ]/ f0 J/ |: q
- \' _1 x" a/ N1 Q1 \, V
' X0 y2 h" h2 |' R9 G
6 O0 q! P" [. C" p: F+ w" D% j( x; D
$ f# b: ]" m5 N

十二.用正确的顺序指定链接的样式- t% L0 a/ E  v$ q% ^2 s/ x: B
3 z& h0 I1 Q) ~& g8 |* u  c
当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是LVHA，你可以记忆成LoVe HAte(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。/ y8 l/ U+ D/ k0 S# t5 G5 _
" V+ X5 M9 J7 G& @
如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。; b' i1 g1 l, N% n  L; d2 I5 ^

十三.清除浮动: {% a3 Y9 N2 X* `

一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。, m7 c+ _+ x9 o: E, E
) ~; {; D$ x& W8 v% j) q
通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注：本站将尽快翻译此文)。4 q0 x/ i% A; _% J; X1 a( E

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

上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》
. |; O) ?9 o# ~/ \( q& ?

! Y7 I$ P" t0 D$ D
十四.横向居中(centering)9 P2 I9 x& x2 Q( i- v, e

这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：

3 B; _& P+ ^3 H+ J! K" B


你可以这样定义使它横向居中：9 L2 ^. l! i) N; i1 ^1 y4 H
# d( j! l# M. q2 k# R
#wrap {1 k. {% N8 \+ w8 S% X
2 f: {, l: A% L* z3 x5 p
width:760px; /* 修改为你的层的宽度 */2 ^2 G( {8 U2 {+ }& f

margin:0 auto;, ]% ^7 S4 h4 b& r* ^) G; N

}5 O& l) l! I3 A" {) ]- V
- b& b1 E; Z1 ]+ K7 i7 f  I, o) ^

但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：

body {

text-align:center;

}
( L) S1 g+ D' _/ |+ t
#wrap {* o% [: z; p7 i8 D1 H

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

margin:0 auto;8 g) H+ _7 j5 b6 C, U

text-align:left;
! ~8 l# K1 {( h7 A1 M
}8 y9 R+ h" \9 {- ]! {: t6 k% ?: u. ~7 y
9 _% O# u" h# U% x2 Q: F6 G

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
+ |7 b$ O3 r! u/ H+ n
十五.导入(Import)和隐藏CSS  p/ u4 w9 b% O8 d; k" m
0 h) ~# M& X: T7 w( W: M- t/ L
因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：
& K' e- s" `/ D# d! Z
@import url(main.css);! ~# ~. `& L1 G  `& \
. [0 r( U) U1 t- x% G, }1 }8 I
然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：6 G' Q5 t  R9 w8 h0 z

@import main.css;" A9 b3 I  i6 y. M

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》5 P7 G- A& j- J% r

十六.针对IE的优化0 N$ H; [0 z8 |4 @8 I# A
: [4 k7 e1 Z. O- [
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1.注释的方法4 m; h6 d" X! g+ m: N0 n' ~3 t: L

(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):

html>body p {) L8 p$ t, i- Q+ i: K# X" p- R

/* 定义内容 */5 j) S7 l! v; N
2 c: I' C/ B4 }' N0 G
}! O/ F: X7 @2 j' p# b

/ Q' v3 k. Z: H# i( `

(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏), t4 g7 S" C9 V* U" W5 G! T
0 N) e( {! H; d' V# ]' ]$ [
7 d& r6 \4 ~+ G  G( N+ ?: g; H4 n
* html p {

/* declarations */

}* h" O$ {6 L8 K" Q
. ~$ g' c% z4 L6 T, g4 d

$ G, k8 S- b7 `1 c+ L2 q7 E8 J' x
(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：

/* */

* html p {
& C) C4 Y7 i9 \+ f
declarations
1 a; |# u% a% k, a# F1 z+ j* K
}5 t$ c8 }+ X( ?! K
: r  S1 a2 N& O) k
/* */' x, ^- H0 k! Z( r

" [/ t" I7 o" E0 v4 q7 u

2.条件注释(conditional comments)的方法  `0 L; ?3 g' A$ @; A

另外一种方法，我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：



+ P: ^+ Y% {* `
- e# M- {: |0 N9 a0 W" f

十七.调试技巧：层有多大？
- G' \6 l% J2 H9 l
当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。! o, k! j; o, G' y

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。
5 c6 j% z! {" v7 }" x
十八.CSS代码书写样式
- K) B. M" n2 Y/ y$ h
在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：
. W2 [% e4 j6 i+ O9 z5 u6 r7 b

selector1,
1 s3 j5 R; g8 O
selector2 {; R* Z, q( ^2 K* R
) q" ]- a! c+ o4 p$ D/ h
property:value;; o" H1 d3 e: v% @5 C9 ]+ f9 \

}* t1 V. S2 H$ o: {/ l. i
# k4 d, y. s8 V* X# y8 |9 L

: X. z  V# ^% R* @
& h/ y5 Z- X( V! \' A# Z8 H
当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。
; P; T+ C; e/ j8 c& P5 k- _
我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。

最后，关闭的大括号}单独写一行。, R* p8 g" t8 d4 V' b3 {; {% m( T

空格和换行有助与阅读。

TOP

设计图片在线处理软件

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