css构建以及命名规范.doc

CSS命令规范以及注意事项1 注意事项CSS样式优先级判断引入/TR/CSS21/cascade.html#specificity为规则 多个选择器可能会选择同一个元素，有3个规则，从上到下重要性降低：/* From the users style sheet */用户的样式表p text-indent: 1em ! important p font-style: italic ! important p font-size: 18pt /* From the authors style sheet */作者的样式表p text-indent: 1.5em !important p font: normal 12pt sans-serif !important 这里设置了important这个规则，权限最高，所以CSS样式的层叠原则，就近原则就不起作用了。所以字体的大小还是12ptp font-size: 24pt 浏览器样式 CSS样式的特殊性权重谁有分量，谁说了算。CSS规范为不同类型的选择器定义了特殊性权重，特殊性权重越高，样式会被优先应用。权重设定如下：html选择器，权重为1类选择器，权重为10id选择器，权重为100这里还有一种情况：在html标签中直接使用style属性，这里的style属性的权重为1000即如下情况：#x34y color:red优先选择style=设定的样式。其他类型的，看看例子就明白了。例子：h1color:blue权重为1pemcolor:yellow权重为2.warningcolor:red权重为10p.note em.darkcolor:grag权重为22#maincolor:black权重为100$.1 这里还有一种情况：权重一样时如何处理？权重一样时就另说了。看看下面的就明白了。 CSS样式的层叠原则，谁离我近，谁说了算。当权重一样时，会采用“层叠原则” 后定义的会被应用。如：pcolor:yellowpcolor:red作用到这里 我的什么颜色呢？结果会是red的。 CSS样式的特殊标记谁有特权，谁说了算。如果有人看不顺眼，非得要自己说了算，那可以搞点特权，如下即可p color:blue !important;加上!important;可将自己权重设为最高。如果有相同的特权就会执行就近原则 The import ruleimport mystyle.css;import url(mystyle.css);import url(fineprint.css) print;用于打印CSS的命名规范 需要给层定义各种尺寸的宽度，高度基本是不用定义的我目前参考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 .grid_8 width:620px.container_12 .grid_10 width:780px采用grid_1或者W_1会更合适，这里的w是代表宽的意思 层的padding和层之间的margin我们还需要定义些常用到的margin和padding，于是有：.ml-10margin-left:10px.mr-10margin-right:10px.mt-10margin-top:10px.mb-10margin-bottom:10px.pl-10padding-left:10px.pr-10padding-right:10px.pt-10padding-top:10px.pb-10padding-bottom:10px.mg-10margin:10px;.pd-10padding:10px; 各种样式的tab和button .tab-1.button-1.或者是btn-1 不同的背景色 .bc-1background-color:#; 各种样式的border .b1s-1border:1px solid #000;.b1d-1border:1px dashed #000; 左浮动，有浮动， 居左，居右，居中 .f-lfloat:left;.f-rfloat:right;.f-nfloat:none; 还有清浮动的.c-bclear:both;.c-lclear:left;.c-rclear:right; 居左 ，居中 ，居右，垂直居 顶，居中，居底对齐 .ta-ltext-align:left;.ta-ctext-align:center;.ta-rtext-align:right;.va-tvertical-align:top;.va-mvertical-align:middle;.va-bvertical-align:bottom;CSS文件命名模块：module.css基本共用：base.css布局、版面：layout.css/typography.css表格table.css主题：themes.css专栏：columns.css文字：font.css表单：forms.css补丁：mend.css打印：print.cssCSS页面结构容器:container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center+导航CSS导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebarCSS 菜单及其他菜单：menu子菜单：submenu标题:title摘要:summary+功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的:current小技巧：tips图标:icon注释：note小技巧：tips栏目标题：title指南：guild服务：service注册：regsiter状态态：status投票：vote合