CSS类库搭建的一些建议.docVIP

HTML元素默认样式的重置 不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，不要使用全局Reset：*{ margin:0; padding:0; } 这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ th, td, /* table elements 表格元素 */ img/* img elements 图片元素 */{ border:medium none; margin: 0; padding: 0; } /** 设置默认字体 **/ body,button, input, select, textarea { font: 12px/1.5 宋体,tahoma, Srial, helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } em{font-style:normal;} /** 重置列表元素 **/ ul, ol { list-style: none; } /** 重置超链接元素 **/ a { text-decoration: none; color:#333;} a:hover { text-decoration: underline; color:#F40; } /** 重置图片元素 **/ img{ border:0px;} /** 重置表格元素 **/ table { border-collapse: collapse; border-spacing: 0; } 良好的命名习惯 这个很重要但又没有一个统一的规范。可以多参考一下 YUI CSS 和 meyer CSS 代码缩写li{ font-family:Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 1.4em; padding-top:5px; padding-bottom:10px; padding-left:5px; } 就可以缩写为： li{ font: 1.2em/1.4em Arial, Helvetica, sans-serif; padding:5px 0 10px 5px; } 参考《常用CSS缩写语法总结》或者下载CSS-Shorthand-Cheat-Sheet.pdf 。CSS代码排序div{ background-color:#3399cc; color:#666; font:1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; } 代码压缩YUI Compressor 摘录网上的一些 CSS 类库。以做参考 /*初始化样式*/? ? body{font-family:宋体, Arial,Verdana, sans-serif, Helvetica; font-size:12px; color:#010000;}?? dl,dd,ul{list-style:none;}?? a img{border:0;}?? div,form,img,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6{padding:0;margin:0;border:0;}?? input{ vertical-align:middle;}?? body,html{ height:100%;}?? ? /*字体样式[定义规则，小写f加字体属性]*/??? ? .fU{ text-decoration:underline;}?? .fN{ text-decoration:none;}?? .fB{ font-weight:bold;}?? .f1