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 相对定位
子标签 绝对定位,可以实现提示框功能
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。