1. 属性写在一行内,属性之间、属性名和值之间以及属性与“{}”之间须有空格,例如:.class { width: 400px; height: 300px; }
5 ~9 B! p3 f: v0 {: k2. 属性的书写顺序:" g, {9 [! l5 V L: u
2.1. 按照元素模型由外及内,由整体到细节书写,大致分为五组:% ` j" k5 ~9 H7 Q+ P
位置:position,left,right,float% t* B& s" |$ w0 o$ k2 d; o
盒模型属性:display,margin,padding,width,height& K" U, V8 d* _: A* A6 Q* a- j- g0 v
边框与背景:border,background
; C4 m, [# l; `/ D+ y& Z段落与文本:line-height,text-indent,font,color,text-decoration,.../ l m5 V: j( g5 B
其他属性:overflow,cursor,visibility,...
1 G9 p! q; a5 J/ U! m. f* ?0 u2.2. 针对特殊浏览器的属性,应写在标准属性之前,例如:-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;1 W+ f3 l- j* Z: O) c) p
3. 谨慎添加新的选择符规则,尤其不可滥用 id,尽可能继承和复用已有样式
* c3 j. p0 ^2 i/ ]' P8 [$ o4. 选择符、属性、值均用小写(格式的颜色值除外),缩写的选择符名称须说明缩写前的全称,例如 .cl -> clearfix$ R% r J/ D( W+ X5 ^
5. 避免使用各种 css hack,如需对 ie 进行特殊定义,请参阅下节“关于 css hack 的说明”
9 k% {/ U- g: [6 O7 P3 v6. 勿使用冗余低效的 css 写法,例如:
$ h z: q+ l2 V @- @! Yul li a span { ... }5 {: B1 U2 d9 z- f7 t' w2 C+ B
7. 慎用 !important2 ^" j! ?6 G/ q; I6 u3 u) _
8. 建议使用在 class/id 名称中的词语
6 N# [1 g @) ~+ A6.1. 表示状态:a->active
o: H1 h' l7 y3 E: h6.2. 表示结构:h->header,c->content,f->footer
, I9 ~7 h6 H H l/ P# {% V6 \6.3. 表示区域:mn->main,sd->side,nv-navigation,mu->menu
0 F8 Q$ l K! D. N) p! P$ L6.4. 表示样式:l-list,tab,p_pop; x0 u' z% ^5 g E2 I2 ]3 Z& z
9. 开发过程中的未定事项,须用 [!] 标出,以便于后续讨论整理
8 X8 a5 L1 x8 j: T# w9 b5 G7 K! _/ C8 z* J
更多网页制作信息请查看: 网页制作 |
|