CSS规范

CSS规范

• 文档声明: doctype 前不允许非空字符
• 编码
• 小写
  
  • 所有的HTML标签必须小写；
  • 所有的HTML属性必须小写；
  • 所有的样式名及规则必须小写。
• 缩进:使用tab（4个空格宽度）来进行缩进
• 注释
• 省略嵌入式资源的协议头
  *省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: , https: )
  *应用场景：web页面的协议，跟资源的协议相同
• 省略属性值

<input type="text" readonly />

• 嵌套
• 标签闭合
• 多媒体替代

<img src="xxx" alt="正在加载" />

• 模块化
• CSS文件引用: 一律使用link的方式调用外部样式
• 命名规范
  
  • 组成元素（单词、中划线、或数字组成）
  • 词汇规范 ：
  • 命名前缀规范：g- ui-
• 书写格式
• 0 与单位：0px 不需要加单位
• 属性书写顺序：

.g-box { 　　　
    display: block; 
    position: relative; 　　　
    z-index: 2; 　　　
    top: 10px; 　　　
    left: 100px;　　　
    float: left; 　　　
    width: 500px; 　　　
    height: 200px; 　　　
    margin: 10px; 　　　
    padding: 10px; 　　　
    border: 10px solid; 　　　
    background: #aaa; 　　　
    color: #000; 　　　
    font: 14px/1.5 sans-serif; 
}

• hack规范：由高到低

.test { 　　　
    color: #000;       /* For all */ 　　　
    color: #111\9;     /* For all IE */ 　　　
    color: #222\0;     /* For IE8 and later, Opera without Webkit */ 　　　
    color: #333\9\0;   /* For IE8 and later */ 　　　
    color: #444\0/;    /* For IE8 and later */ 　　　
    *color: #666;      /* For IE7 and earlier */
    _color: #777;      /* For IE6 and earlier */ 
}

CSS选择器

-执行效率从高到低排序：
1. id选择器（#myid）
2. 类选择器（.myclassname）
3. 标签选择器（div,h1,p）
4. 相邻选择器（h1+p）
5. 子选择器（ul < li）
6. 后代选择器（li a）
7. 通配符选择器（*）
8. 属性选择器（a[rel=”external”]）
9. 伪类选择器（a:hover, li:nth-child）

tips

• 关于提示框
  父标签 宽高0 相对定位
  子标签 绝对定位，可以实现提示框功能