css构建以及命名规范

《css构建以及命名规范》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、CSS命令规范以及注意事项1注意事项CSS样式优先级判断引入http://www.w3.org/TR/CSS21/cascade.html#specificity为规则²多个选择器可能会选择同一个元素，有3个规则，从上到下重要性降低：/*Fromtheuser'sstylesheet*/用户的样式表p{text-indent:1em!important}p{font-style:italic!important}p{font-size:18pt}/*Fromtheauthor'sstylesheet*/作者的样式表p{text-indent:1.5em!importa

2、nt}p{font:normal12ptsans-serif!important}这里设置了important这个规则，权限最高，所以CSS样式的层叠原则，就近原则就不起作用了。所以字体的大小还是12ptp{font-size:24pt}浏览器样式²CSS样式的特殊性权重——谁有分量，谁说了算。CSS规范为不同类型的选择器定义了特殊性权重，特殊性权重越高，样式会被优先应用。权重设定如下：html选择器，权重为1类选择器，权重为10id选择器，权重为100这里还有一种情况：在html标签中直接使用style属性，这里的style属性的权重为1000即如下情况：#x34y

3、{color:red}优先选择style=""设定的样式。其他类型的，看看例子就明白了。例子：h1{color:blue}权重为1p em{color:yellow}权重为2.warning{color:red}权重为10p.noteem.dark{color:grag}权重为22#main{color:black}权重为100.1这里还有一种情况：权重一样时如何处理？权重一样时就另说了。看看下面的就明白了。²CSS样式的层叠原则，谁离我近，谁说了算。当权重一样时，会采用“层叠原则”后定义的会被应用。如：p{c

4、olor:yellow} p{color:red}作用到这里  

我的什么颜色呢？

5、定义各种尺寸的宽度，高度基本是不用定义的我目前参考blueprint框架和960gs框架，它采用的命名方式是：首先保证页面的宽度一定是950px,分成12、16、24列，这个时候就要定义12、16、24种可能情况的宽度.container_12.grid_1{width:60px}.container_12.grid_2{width:140px}.container_12.grid_4{width:300px}.container_12.grid_5{width:380px}.container_12.grid_7{width:540px}.container_12.

6、grid_8{width:620px}.container_12.grid_10{width:780px}采用grid_1或者W_1会更合适，这里的w是代表宽的意思²层的padding和层之间的margin我们还需要定义些常用到的margin和padding，于是有：.ml-10{margin-left:10px}.mr-10{margin-right:10px}.mt-10{margin-top:10px}.mb-10{margin-bottom:10px}.pl-10{padding-left:10px}.pr-10{padding-right:10px}.pt-

7、10{padding-top:10px}.pb-10{padding-bottom:10px}.mg-10{margin:10px;}.pd-10{padding:10px;}²各种样式的tab和button.tab-1{...}.button-1{...}或者是btn-1²不同的背景色.bc-1{background-color:#;}²各种样式的border.b1s-1{border:1pxsolid#000;}.b1d-1{border:1pxdashed#000;}²左浮动，有浮动，居左，居右，居中.f-l{float:left;}.f-r{