格式化（初始化）样式表汇总

 

做前台的工作也有一段日子。随着对技术掌握的逐步纯熟，渐渐地如何提高书写代码的质量和效率，改善用户体验和网站性能成为了更为重要的东西。这一部分没有成文的教条，倒是跟个人工作经验的积累和对前台工作的理解有很大关系。

个人感觉CSS框架就是这样的东西。其实说白了就是初始化一些样式，再往深了说可能会针对每个项目有统一的布局标签和实现页面的各种标准，这东西是为这简化和优化工作而被牛人们归纳出来的，当然每个工作在前台的人会根据自己所在项目的实际需要去整理出一套适合自己团队的框架和标准。

现在自己只能是停留在理解的层面上，距离应用这种框架还太遥远，最多也就是做做样式表的初始化，而且也需要结合各个网站的实际情况作具体分析。不过初始化样式毕竟还是一个很有吸引力的话题，在前端开发的过程中一个优秀的初始化样式可以大大提高效率，更合理的规划整站样式，尤其是当写过大量冗长而复杂的样式表后，这种感觉就更为强烈。

收集了一些高手做过的reset.css，特此记录，以便学习。

EricMayer的：

此前流行过一段时间用*来做样式初始化的，统一去掉所有标签的某些特定样式，一时之间，这种做法几乎可见于各大网站。*号做法是舶来品，下面这个也不例外，用罗列出具体需要统一样式的标签的做法来取代*号，被认为是更合理的做法。首先是由于*号做法对浏览器加载页面时会造成很大的负担；其次则是由于这样的做法过于笼统，以至于把一些标签有用的默认属性一并去除了，有“简单粗暴”的嫌疑。

EricMayer这种做法咋看之下有不合理之处，其实确是目前来说做好的解决方案。

Code
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

 

crucialwebhost的：

其实每个人的样式表都有自己的优点，最重要的是结合不同项目的实际和需求。比如对于非常简单的网页来说，CSS框架完全是多余的。

Code
/***** Global Settings *****/
 
html, body {
border:0px none;
margin:0;
padding:0
}
 
body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}
 
/***** Headings *****/
 
h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}
 
h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}
 
h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}
 
h3 {
font-size:1em;
font-weight:bold;
}
 
/***** Common Formatting *****/
 
p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}
 
ul, ol {
padding:0 0 1.25em 2.5em;
}
 
blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}
 
small {
font-size:0.85em;
}
 
img {
border:0px none;
}
 
sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}
 
sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}
 
acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}
 
/***** Links *****/
 
a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}
 
/***** Forms *****/
 
form {
margin:0;
padding:0;
display:inline;
}
 
input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}
 
textarea {
width:100%;
line-height:1.25;
}
 
label {
cursor:pointer;
}
 
/***** Tables *****/
 
table {
border:0px none;
padding:0; margin-left:0; margin-right:0; margin-top:0; margin-bottom:1.25em
}
 
table tr td {
padding:2px;
}
 
/***** Wrapper *****/
 
#wrap {
width:960px;
margin:0 auto;
}
 
/***** Global Classes *****/
 
.clear         { clear:both; }
.float-left    { float:left; }
.float-right   { float:right; }
 
.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }
 
.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }
 
.wrap          { width:960px;margin:0 auto; }
 
.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }
 
.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style-image:url('none');list-style-type:none }

 

Christian Montoya 的：

 

Code
/* =INITIAL 
   v2.1, by Faruk Ates - www.kurafire.net
   Addendum by Robert Nyman - www.robertnyman.com 
   Addition by Christian Montoya - www.christianmontoya.net */

/* Neutralize styling: 
   Elements we want to clean out entirely: */
html, body, form, fieldset {
        margin: 0;
        padding: 0;
        font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}

/* Neutralize styling: 
   Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
        margin: 1em 0;
        padding: 0;
}

/* Apply left margin:
   Only to the few elements that need it: */
li, dd, blockquote {
        margin-left: 1em;
}

/* Miscellaneous conveniences: */
form label {
        cursor: pointer;
}
fieldset {
        border: none;
}
input, select, textarea {
        font-size: 100%;
        font-family: inherit;
}

 

我自己常用的，哈哈

 

Code
body,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;font-weight:400;}

h1,h2,h3,h4,h4,h5{margin:0;padding:0;}

a:link, a:visited {color:#0044dd;text-decoration:none;}

a:hover, a:active {color:#f50;text-decoration:underline;}

body{padding:0 10px 0 10px;font-family:Tahoma,SimSun,Arial;font-size:12px;color:#666;text-align:left;background-color:#FFF;}

select{ font-size:12px;}

table{border-collapse:collapse;}/*边框合并，1px边框正常显示*/

fieldset,img{border:0;}

fieldset{margin:0;padding:0;}

fieldset p{margin:0;padding:0 0 0 8px;}

address,caption,em,strong,th,i{font-style:normal;font-weight:400;}

table caption{margin-left:-1px;}

hr{clear:both;margin:5px 0;*margin:0;border-width:0;border-top:1px solid #e4e4e4;border-bottom:1px solid #FFF;height:2px;overflow:hidden;}

ol,ul{list-style:none;}

caption,th{text-align:left;}

q:before,q:after,blockquote:before,blockquote:after{content: "";}