标签：标题 实现 单词 命名 定义 ie浏览器 otto jpg 全局
1 基本规范
1.1 文件命名规范
基本样式：base.css
全局样式：global.css
框架布局：layout.css
字体样式：font.css
链接样式：link.css
打印样式：print.css
1.2 常用类Class规范
页眉：header 内容：content容器：container
页脚：footer 版权：cpright导航：nav
分页：pages 标志：logo留言：msg
标语：banner 标题：title边栏：sidebar
图标：icon 注释：note搜索：search
按钮：btn 登录：login链接：link
主导航：main-nav 子导航：sub-nav信息框：manage
说明：常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方注释。
对于二级类命名，则采用组合书写的模式，两个单词之间使用中横连“-”接，如：
搜索框：search-input
搜索图标：search-icon
搜索按钮：search-btn
1.3 派生选择器
可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时，也使结构更加的
清晰化，如：
.main-nav ul li { background:url(images/bg.gif;) }
1.4 辅助图片用背影图处理
这里的“辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、
提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：
.logo { background:url(images/logo.jpg) #FEFEFE no-repeat right bottom; }
1.5 结构与样式分离
在页面里只写入文档的结构，样式写于css文件中，通过外部调用CSS实现结构与样式分离。
1.6 文档的结构化
书写页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：
<div class="main-nav "> <ul> <li><a href="#" >首页</a></li> <li><a href="#" >介绍</a></li> <li><a href="#" >服务</a></li> </ul> </div>
/*主导航 S*/
.main-nav { width:100%; height:30px; background:url(images/mainMenu_bg.jpg) repeat-x; } .main-nav ul li { float:left; line-height:30px; margin-right:1px; cursor:pointer; }
/*主导航 E*/
1.7 鼠标手势
在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为
“pointer”，即 cursor:pointer;
1.8 注释书写规范
a 整段注释。分别在开始及结束地方加入注释，如1.6中所示；
b 协助注释。非作者维护时所加入的表示修改时间、修改人等标识信息。在区域注释或单行
注释的基础上加上修改人和修改时间等信息。如：
区域注释
/* ** S 注释内容[修改人和修改时间] */
.class{...}
.class{...}
/* ** E*/
单行注释
.class{/* 注释内容[修改人和修改时间] */
}
1.9 样式属性代码缩写
a 不同类有相同属性及属性值的缩写
对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以
合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量
并易于控制。如：
.main-nav { background:url(../images/bg.gif); border:1px solid #333; width:100%; height:30px; overflow:hidden; } .sub-nav { background:url(../images/bg.gif); border:1px solid #333; width:100%; height:20px; overflow:hidden; }
两个不同类的属性值有重复之处，刚可以缩写为：
.main-nav , .sub-nav { background:url(../images/bg.gif); border:1px solid #333; width:100%; overflow:hidden; } .main-nav { height:30px; } .sub-nav { height:20px; }
b 同一属性的缩写
同一属性根据它的属性值也可以进行简写，如：
.search { background-color:#333; background-image:url(../images/icon.gif); background-repeat: no-repeat; background-position:50% 50%; } .search { background:#333 url(../images/icon.gif) no-repeat 50% 50%; }
c 内外侧边框的缩写
在CSS中关于内外侧边框的距离是按照[上右下左]的顺序来排列的，当这四个属性值不同时，
也可直接缩写，是用顺时针的方向
.btn { margin-top:10px; margin-right:8px; margin-bottom:12px; margin-left:5px; padding-top:10px; padding-right:8px; padding-bottom:12px; padding-left:5px; }
则可缩写为：
.btn { margin:10px 8px 12px 5px; padding:10px 8px 12px 5px; }
而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可直接缩写为两个，如：
.btn { margin-top:10px; margin-right:5px; margin-bottom:10px; margin-left:5px; }
缩写为：
.btn { margin:10px 5px; }
而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：
.btn { margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px; }
缩写为：
.btn{ margin:10px; }
d 颜色值的缩写
当RGB三个颜色值数值相同时，可缩写颜色值代码。如：
.menu { color:#ff3333; }
可缩写为：
.menu { color:#f33; }
1.10 hack书写规范
因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，如
IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css的hack来进行调整，
当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。
a IE6、IE7、Firefox之间的兼容写法
[写法一]
IE都能识别*；
标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
根据上述表达，同一类/ID下的CSS的hack可写为：
.search-input { background-color:#333; /* 三者皆可 */ *background-color:#666 !important; /* 仅IE7 */ *background-color:#999; /* 仅IE6及IE6以下 */ }
一般三者的书写顺序为：FF、IE7、IE6。
[写法二]
IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可写为：
.search-input { background-color:#333; /* 通用 */ _background-color:#666; /* 仅IE6可识别 */ }
[写法三]
*+html 与 *html 是IE特有的标签, Firefox 暂不支持。
.search-input { background-color:#333; } *html .search-input { background-color:#666; } /* 仅IE6 */ *+html .search-input { background-color:#555; } /* 仅IE7 */
b 屏蔽IE浏览器
select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。
*:lang(zh) select { font:12px !important; } /* FF的专用 */ select:empty { font:12px !important; } /* safari可见 */
c IE6可识别
通过CSS注释分开一个属性与值，注释在冒号前。如：
select { display /* IE6不识别 */:none; }
d IE的if条件hack写法
所有IE识别 <!–[if IE]> Only IE <![end if]–>
仅IE5识别 <!–[if IE 5]> Only IE 5.0 <![end if]–>
IE5及IE5.5都识别 <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
仅IE6识别 <!–[if lt IE 6]> Only IE 6- <![end if]–>
IE5.x ~ IE6识别 <!–[if gte IE 6]> Only IE 6/+ <![end if]–>
仅IE7识别 <!–[if lte IE 7]> Only IE 7/- <![end if]–>
1.11 清除浮动
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，此时，用
这个清除浮动的hack来对父级做一次定义，可以解决该问题。如：
select:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
2 常见兼容问题
a DOCTYPE 影响 CSS 处理
b FF：div设置 margin-left, margin-right为 auto时已经居中, IE不行
d FF：body设置text-align，div需设置margin: auto(主要是margin-left,margin-right)
方可居中
e FF：设置padding后, div会增加 height 和 width, 但IE不会, 故需要用!important多设
一个 height 和 width
f FF：支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
g div 垂直居中:vertical-align:middle;将行距增加到和整个DIV同高line-height:200px;
然后插入文字。缺点是要控制内容不要换行
h cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
i FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设height，可在
menubar 中插入一个空格。
j 在mozilla firefox和IE中的BOX模型解释不一致导致相差2px。解决方法：
div{
margin:30px !important;
margin:28px;
}
注意这两个margin的顺序一定不能写反，所以不可以只写margin:**px !important;
k ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义程序代码
ul{
margin:0;padding:0;
}
3 其他说明
a 检查CSS
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。
CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。
b 确定错误发生位置
如果错误影响了整体布局，则可逐个删除div块，直到删除某个div块后显示正常，即可确定
错误发生的位置。利用border属性确定出错元素的布局特性，使用float属性布局易出错。
这时为元素添加border属性确定元素边界，错误原因即水落石出
c float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素内容如何，一定
要为其指定width属性。另外指定属性值时尽量使用em而不是px做单位。
d float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和
padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。
也可以使用hack方法为IE指定特别的值。
e float元素的宽度之和要小于100%
如果float元素宽度之和为100%，某些老浏览器不能正常显示。因此保证宽度之和小于99%。
f 是否重设了默认的样式
某些属性如margin、padding等，不同浏览器会有不同的解释。因此在开发前首先将全体的
margin、padding设置为0、列表样式设置为none等。
g 关于高度的问题
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，而如果是静态的内容，
高度最好定好。
标签：标题 实现 单词 命名 定义 ie浏览器 otto jpg 全局
原文地址：http://www.cnblogs.com/yw0131/p/7102368.html
