返回列表 发新帖

discuzx系统 css 编码规范、css属性书写顺序

142.9k 7
swmozowtfl 发表于 2015-7-18 00:12:58|湖北 | 查看全部 阅读模式
1. 属性写在一行内,属性之间、属性名和值之间以及属性与“{}”之间须有空格,例如:.class { width: 400px; height: 300px; }' ^3 ?; B; T0 Q; a2 F) \
2. 属性的书写顺序:
' a. e; I/ B$ w! V- s2.1. 按照元素模型由外及内,由整体到细节书写,大致分为五组:
; Q& w& a  p6 f, H1 j  X" @位置:position,left,right,float
6 Y5 p: T$ A, C2 L) w1 r2 n盒模型属性:display,margin,padding,width,height6 {6 x- F2 N# d9 S/ S+ I
边框与背景:border,background
$ `# _, A4 f* I! t  v4 G+ s! Q' u段落与文本:line-height,text-indent,font,color,text-decoration,...
7 f9 A, j$ h2 Y6 V其他属性:overflow,cursor,visibility,...% ?/ I! u6 F' y
2.2. 针对特殊浏览器的属性,应写在标准属性之前,例如:-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;
! m! g$ M4 P0 E6 U+ d3. 谨慎添加新的选择符规则,尤其不可滥用 id,尽可能继承和复用已有样式
+ `9 M& X: }& ^  f" r. ]4. 选择符、属性、值均用小写(格式的颜色值除外),缩写的选择符名称须说明缩写前的全称,例如 .cl -> clearfix- [! \+ [. h+ k, u
5. 避免使用各种 css hack,如需对 ie 进行特殊定义,请参阅下节“关于 css hack 的说明”( R+ a! Q8 Z% t4 M6 q# [3 T
6. 勿使用冗余低效的 css 写法,例如:
. J7 a+ p! ]( t) H% l( sul li a span { ... }
& L3 }* q; B" {9 U5 x3 g7. 慎用 !important- w; y) q2 I" Q- v3 a: F
8. 建议使用在 class/id 名称中的词语( d( z* m7 M% A2 P9 c7 i
6.1. 表示状态:a->active( f4 s+ {! _8 \$ s6 m5 E, E
6.2. 表示结构:h->header,c->content,f->footer8 `0 P- j% j4 z# @& J* l
6.3. 表示区域:mn->main,sd->side,nv-navigation,mu->menu7 P! N! N/ [* R& n# q
6.4. 表示样式:l-list,tab,p_pop$ Y# y* f; h8 e  u  m) X
9. 开发过程中的未定事项,须用 [!] 标出,以便于后续讨论整理% @4 D5 O7 b9 f; V4 J

9 U) e7 a) k, T  L! ~3 d更多网页制作信息请查看: 网页制作

回复|共 7 个

wwdu926a 发表于 2015-11-1 14:43:23|江苏 | 查看全部
这日子没法过了....
buingeEvineus 发表于 2015-11-1 14:44:09|美国 | 查看全部
在这个处女都要验证码的时代不得不弄个会员来当每天看贴无数基本上不回 后来发现很傻,很多比我注册晚的级别都比我高,我终于觉悟于是我就把这段文字保存在记事本里,每看一贴就复制粘贴一次。
mwxny 发表于 2015-11-1 14:44:18|美国 | 查看全部
感谢党和人民的关爱~~~
buingeEvineus 发表于 2015-11-1 14:44:56|美国 | 查看全部
你可是难得来坐坐啊~~~
buingeEvineus 发表于 2015-12-6 14:42:11|美国 | 查看全部
呵呵 你想就来嘛~~
buingeEvineus 发表于 2015-12-6 14:42:33|美国 | 查看全部
命不能争,运可以造,弱者认命,强者抗命,能者求命,智者造命。
wwzcdenleclv 发表于 2015-12-6 14:43:36|德国 | 查看全部
呵呵  我傻了‘~~哈哈

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

得知互动是一个融创意、设计、开发、营销、生活、互联网于一体的专业交流分享平台。
Copyright © 2026 得知互动-专注Ai与站长技术交流社区-Ai交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表