内置常用CSS代码分析.docVIP

内置常用CSS代码分析 返回 模板创建、解析原理详解 CSS多IE下兼容HACK写法 所有 IE浏览器适用： .ie_all .foo { ... } IE6 专用： .ie6 .foo { ... } IE7 专用： .ie7 .foo { ... } IE8 专用： .ie8 .foo { ... } CSS书写规范 属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间须有空格，例如：.class { width: 400px; height: 300px; } 属性的书写顺序： 针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:; 按照元素模型由外及内，由整体到细节书写，大致分为五组： 位置：position,left,right,float 盒模型属性：display,margin,padding,width,height 边框与背景：border,background 段落与文本：line-height,text-indent,font,color,text-decoration,... 其他属性：overflow,cursor,visibility,... 谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式 选择符、属性、值均用小写（格式的颜色值除外），缩写的选择符名称须说明缩写前的全称，例如 .cl - Clearfix 勿使用冗余低效的 CSS 写法，例如：ul li a span { ... } 慎用 !important 建议使用在 class/id 名称中的词语 表示状态：a-active 表示结构：h-header,c-content,f-footer 表示区域：mn-main,sd-side,nv-navigation,mu-menu 表示样式：l-list,tab,p_pop 常用CSS 左浮动、右浮动 .z { float: left; } .y { float: right; } 因为左右浮动造成的父级浮动溢出，及使用方法 .cl:after { content: .; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; } div class=cl div class=z/div /div 大标题字体 .wx, .ph { font-family: Microsoft YaHei, Hiragino Sans GB, STHeiti, Tahoma, SimHei, sans-serif; font-weight: 100; } 行内分割竖线 .pipe { margin: 0 5px; color: #CCC; } 文字字体大小 .xs0 { font-family: {SMFONT}; font-size: {SMFONTSIZE}; -webkit-text-size-adjust: none; } .xs1 { font-size: 12px !important; } .xs2 { font-size: 14px !important; } .xs3 { font-size: 16px !important; } 灰色文字 .xg1, .xg1 a { color: {LIGHTTEXT} !important; } .xg1 .xi2 { color: {HIGHLIGHTLINK} !important; } .xg2 { color: {MIDTEXT}; } 高亮文字，1为橙色，2为蓝色 .xi1, .onerror { color: {NOTICETEXT}; } .xi2, .xi2 a, .xi3 a { color: {HIGHLIGHTLINK}?; } 文字粗体 .xw0 { font-weight: 400; } .xw1 { font-weight: 700; } 层下边线 .bbda { border-bottom: 1px dashed {COMMONBORDER}; } .bbs { border-bottom: 1px solid {COMMONBORDER} !important; } 去除边框 .bw0 { border: none !important; } .bw0_all, .bw0_all th, .bw0_all td { border: none !important; } 去除背景 .bg0_c { background-color: t