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 相对定位
    子标签 绝对定位,可以实现提示框功能

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。