CSS规范_html/css_WEB-ITnose

CSS规范

文档声明: doctype 前不允许非空字符

编码

小写

所有的HTML标签必须小写；

所有的HTML属性必须小写；

所有的样式名及规则必须小写。

缩进:使用tab（4个空格宽度）来进行缩进

注释

省略嵌入式资源的协议头
*省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: , https: )
*应用场景：web页面的协议，跟资源的协议相同

省略属性值

<input type="text" readonly />

嵌套

标签闭合

多媒体替代

<img src="/static/imghwm/default1.png"  data-src="xxx"  class="lazy" 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 6. 后代选择器（li a）
7. 通配符选择器（*）
8. 属性选择器（a[rel=”external”]）
9. 伪类选择器（a:hover, li:nth-child）

tips

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