谈谈格式化CSS

浏览数：16 / 时间：2015年06月09日

每一个浏览器都有默认的样式，但每一个浏览的默认样式都有一些轻微的差别。为了让我们的网站在各个浏览器上显示得一样，我们需对各浏览器之间有差异的样式、不需要的默认样式进行标准化。于是有了reset.css——重置样式表。

清单一：简易重置样式表

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p, 
blockquote,th,td { margin:0; padding:0; } 
table { border-collapse:collapse; border-spacing:0; } 
fieldset,img { border:0; } 
address,caption,cite,code,dfn,em,strong,th,var 
{ font-style:normal; font-weight:normal; } 
ol,ul { margin:1em 0; margin-left:40px; padding-left:0; } 
ul { list-style-type:disc; } 
ol { list-style-type:decimal; } 
caption,th { text-align:left; } 
h1,h2,h3,h4,h5,h6 { font-size:100%; }

清单二：完整重置样式表

/* BLOCK ELEMENTS */ 
html, div, map, dt, form { display:block; } 
body { display:block; margin:8px; font-family:serif; font-size:medium; } 
p, dl { display:block; margin-top:1em; margin-bottom:1em; } 
dd { display:block; margin-left:40px; } 
address { display:block; font-style:italic; } 
blockquote { display:block; margin:1em 40px; } 
h1 { display:block; font-size:2em; font-weight:bold; margin:0.67em 0; } 
h2 { display:block; font-size:1.5em; font-weight:bold; margin:0.83em 0; } 
h3 { display:block; font-size:1.125em; font-weight:bold; margin:1em 0; } 
h4 { display:block; font-size:1em; font-weight:bold; margin:1.33em 0; } 
h5 { display:block; font-size:0.75em; font-weight:bold; margin:1.67em 0; } 
h6 { display:block; font-size:0.5625em; font-weight:bold; margin:2.33em 0; } 
pre{ display:block; font-family:monospace; white-space:pre; margin:1em 0; } 
hr { display:block; height:2px; border:1px; margin:0.5em auto 0.5em auto; } 
/* TABLE ELEMENTS */ 
table { border-spacing:2px; border-collapse:separate; 
margin-top:0; margin-bottom:0; text-indent:0; } 
caption { text-align:center; } 
td { padding:1px; } 
th { font-weight:bold; padding:1px; } 
tbody, thead, tfoot { vertical-align:middle; } 
/* INLINE ELEMENTS */ 
strong { font-weight:bold; } 
cite, em, var, dfn { font-style:italic; } 
code, kbd, samp { font-family:monospace; } 
ins { text-decoration:underline; } 
del { text-decoration:line-through; } 
sub { vertical-align:-0.25em; font-size:smaller; line-height:normal; } 
sup { vertical-align: 0.5em; font-size:smaller; line-height:normal; } 
abbr[title], { border-bottom:dotted 1px; } 
/* LIST ELEMENTS */ 
ul { list-style-type:disc; margin:1em 0; margin-left:40px; padding-left:0;} 
ol { list-style-type:decimal; margin:1em 0; margin-left:40px; padding-left:0;} 
/* remove top & bottom margins for nested lists */ 
ul ul, ul ol, ul dl, ol ul, ol ol, ol dl, dl ul, dl ol, dl dl 
{ margin-top:0; margin-bottom:0; } 
/* use circle when ul nested 2 deep */ 
ol ul, ul ul { list-style-type:circle; } 
/* use square when ul nested 3 deep */ 
ol ol ul, ol ul ul, ul ol ul, ul ul ul { list-style-type:square; }