针对main.css改进型模仿

大多数人推荐使用normalize.css重置默认样式,我们今天给大家演示一个main.css改进型模型。

/* 
 * HTML5 Boilerplate 
 */ 
  
/* ========================================================================== 
    参考默认样式（出于美观角度而预设的）,同normalize.css一起搭配使用 
    main.css与normalize.css都是HTML5 Boilerplate项目小组负责开发维护 
   ========================================================================== */ 
 
/* ========================================================================== 
   基础样式 
   ========================================================================== */ 
 
/* 
 * 修正button,input,select,textarea不繼承color的bug 
 */ 
html, 
button, 
input, 
select, 
textarea { 
    color: #222; 
} 
 
body { 
    font-size: 1em; 
    line-height: 1.4; 
} 
 
/* 
 * 在浏览器所选中的文本是不包含文本的背影的,这一点在所有浏览器中都适用的,所以我觉得此处text-shadow: none;是多余的 
 * 此处的背景色只是预设,具体要根据设计而定 
 * text-shadow (IE6/7/8不支持) 
 * ::selection (IE6/7/8不支持) 
 */ 
 
::-moz-selection { 
    background: #b3d4fc; 
    /*text-shadow: none;*/ 
} 
 
::selection { 
    background: #b3d4fc; 
    /*text-shadow: none;*/ 
} 
 
/* 
 * 统一默认的换行符样式 
 * IE7与其他浏览器差异较大（建议*margin: .23em 0;） 
 */ 
 
hr { 
    display: block; 
    height: 1px; 
    border: 0; 
    border-top: 1px solid #ccc; 
    margin: 1em 0; 
    padding: 0; 
} 
 
/* 
 * 去除圖片與父容器底部的空白: h5bp.com/i/440 
 */ 
 
img { 
    vertical-align: middle; 
} 
 
/* 
 * 移除fieldset border, margin, padding. 
 * 覆盖了Normalize.css了,所以我觉得具体项目中要重置的时候才重置,这里过早重置没必要 
fieldset { 
    border: 0; 
    margin: 0; 
    padding: 0; 
}*/ 
 
/* 
 * 只允許textareas改變高度,防止用户通过拉宽textarea的宽度导致页面其他元素走位 
 */ 
 
textarea { 
    resize: vertical; 
} 
 
/* ========================================================================== 
   Chrome Frame prompt,不知是用来干嘛的,先保留 
   ========================================================================== */ 
 
.chromeframe { 
    margin: 0.2em 0; 
    background: #ccc; 
    color: #000; 
    padding: 0.2em 0; 
} 
 
/* ========================================================================== 
   实际项目的具体样式 
   ========================================================================== */ 

本文来源 我爱IT技术网 http://www.52ij.com/jishu/12007.html 转载请保留链接。