css规范: <仅为个人笔记,不喜勿喷。欢迎留言指教>
1.CSS共用样式放在base.css
2.常见的样式common.css
3.文件目录
-1.存放其它图片文件夹命名规范:imgaes;
-2.存放广告图的文件夹bannerImg
-3.文件名应该注意使用小驼峰命名法则或者单词之间-间隔规范
-4.JS文件:js
-5.确保文档或模板中只包含html,把用到的样式都写到样式表文件中,把脚本都写到js文件中。
4.样式规范化
(1)
-1.每个样式后面(必须)加 ‘;’,方便压缩工具断句,
-2 class类命名规范,(‘-‘划分层级)产品线-产品-模块-子模块
-3 以下规范必须执行
1》选择器 与 { 之间必须包含空格。如:
. selector { }
2》属性名之后必须要有空格,属性名前不能有空格
-----IE6有个bug
3》连字符CSS选择器命名规范
长名称或词组可以使用中横线来为选择器命名。不建议使用“_”下划线来命名CSS选择器。
常见css命名规范:
头:header,内容:content | 容器 :container 页脚 | 尾:footer
导航:nav子导航:subnav 侧栏:sidebar 栏目:column 页面外围布局宽度:warpper
左中右:left center right 广告:banner 菜单:menu 子页面:subpage 页面主体:main ;
子菜单:submenu 下拉菜单 dropmenu 栏目标题:title 热点:hot 标志:logo 登录条:loginbar
4》属性定义必须另起一行。如:
.selector {
margin: 0;
padding: 0;
} ------------禁止将样式写在同一行{width:15px;height:12px;.....}
5》多级选择器每个选择器占一行。
eg:
a.btn
input.btn
input[type="button"]{
/*自定义样式*/
}
6》CSS书写顺序,以提高代码的可读性。
位置属性(position, top, right, z-index, display, float等) /*定位*/
大小(width, height, padding, margin) /*盒模型*/
文字系列(font, line-height, letter-spacing, color- text-align等) /*文字颜色*/
背景(background, border等) /*图案背景*/
其他(animation, transition等) /*动画等*/
7》去掉小数点前的“0”
8》使用16进制表示颜色值,除非表示的是透明度
9》rest.css样式 --------- http://www.cssreset.com
10》链接的样式顺序 a:link --a:visited--a:hover --a:active