首页 > 代码库 > css

css

2024-07-03 10:38:23   225人阅读

4、选择器命名规范

  • #id选择符使用驼峰命名，只允许：大小写字母、数字。如：#userOperation
  • .class命名使用“-”连接，只允许：小写字母、数字、-。如：.mod-test .name{}

命名上尽量使用语义化的单词，不要使用如： false, div, new, true等

5、background-image使用格式

如果使用css sprites或者多个样式引用了同一张图片，如：

/*.img1,.img2使用了同一张图片*/
.img1{background:url(http://hi.bdimg.com/test.png) no-repeat 0 -10px;}
.img2{background:url(http://hi.bdimg.com/test.png) no-repeat 0 -20px;}

/**这时用下面的方式**/
.img1, .img2{background:url(http://hi.bdimg.com/test.png) no-repeat;}
.img1{background-position:0 -10px}
.img2{background-position:0 -20px}

并且.img1,.img2的CSS尽量放在文件顶部，方便查找

6、CSS Hack方式

尽量减少hack方式，如果必须使用的话，只允许下面的hack方式。

IE6 _property:value;
IE6/7 *property:value;
IE6/7/8/9 property:value\9;
非IE6 property//:value;

7、使用.clearfix清浮动

/**
* 清除浮动，不需要增加额外的标签，直接放在外层的class里即可
* 非IE下使用CSS2的after伪类属性
* IE下使用zoom:1触发haslayout
* \20是ascii的空白符，使用空白字符不用增加visibility:hidden
* zoom前不加*。如果页面中没有加IE7渲染的meta标签，IE8下不识别*zoom
*

*   <div class="clearfix">
*       <div class="grid-40"></div>
*       <div class="grid-50"></div>
*   </div>
**/
.clearfix:after{content:‘\20‘;display:block;height:0;clear:both;}
.clearfix{zoom:1;}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden;} /*兼容已有模板*/

 

 

 

11、背景图片选择格式

  • gif适合一个简单的icon，并且这些icon有全透明。如果用gif图片质量可以接受的话尽量使用gif,避免使用png8导致在ie6下要hack
  • 动画目前只能使用gif
  • 禁止使用jpg，除非有特殊情况，如：大图片作为背景图
  • 其他情况下都使用png
  • 没有alpha透明(可变透明)的情况下，使用png8。
  • 用到了alpha透明的时候，使用png32（ps里对应的是png24）,因为ie6下使用png8的alpha透明无法hack
  • 切图工具推荐使用fireworks
  • 用ps的话必须是存为web格式


联系
我们