今天无意在网上看到一个介绍Normalize.css文章，觉得很有意思，于是学习了一下，发现他和reset.css一样的功能。大部分情况下，我们在页面中使用CSS Resets解决不同浏览器对HTML元素的默认CSS设置的差异。CSS normalization则与CSS Resets不同，为了页面具有相同的表现，CSS Resets对大多元素的样式进行了复位操作，而normalize.css则在保留原有表现的基础上进行值的重设并修复一些Bug。

我以前在《drupal主题的基础样式—reset、base、layout、print》介绍过有关于Reset CSS，Base CSS等样式的使用，但对于我们个人做项目来说，没有必要把样式分得那么细，这样一来增加了HTTP的请求，从而影响了项目的性能，于是今天重新结合Normalize CSS，Reset CSS, Base CSS, Html5 Reset Css整理了一份新的样式，我这里暂把他叫做HTML5 的Reset CSS 和Base CSS的结合。下面把相应的代码贴出来以供大家一起探讨。

/**
*Remove Spacing
*/

body,dl,dd,ul,ol,figure ,h1,h2,h3,h4,h5,h6,p,pre,blockquote,
form ,fieldset,legend ,input,button,select,textarea {
  margin: 0;
  padding: 0;
}

/*
 * Add block display for HTML5 elements
 * Corrects block display not defined in IE6/7/8/9 & FF3
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

/* =============================================================================
   Typography
   ========================================================================== */

/*
 * Add bottom border
 * Corrects styling not present in IE7/8/9 S5 Chrome
 */

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor:help;
}

/*
 * Define font family as monospace
 * Corrects font family set oddly in IE6 S5 C10
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */

pre,
code,
kbd,
samp {
	font-family: monospace, sans-serif;
	_font-family: 'Courier New', monospace, sans-serif;
	font-size: 1em;
}

/*
 * Add line wrapping
 * Improves readability of pre-formatted text in all browsers
 */
pre {
  white-space: pre;/*CSS2*/
  white-space: pre-wrap;/*CSS2.1*/
  white-space: pre-line;/*CSS3*/
  word-wrap: break-word;/*IE*/
}

/*
 * Remove quotes
 * 1. Addresses CSS quotes not supported in IE6/7
 * 2. Addresses quote attributes not supported in S4
 */

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

/*
 * Define font size
 * Improves appearance in all browsers
 */
small {
  font-size: 75%;
}

/*
 * Define font size and alignment
 * Improves appearance without affecting line-height in all browsers
 * gist.github.com/413930
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/*Clear floats 
 *The Magnificent CLEARFIX:Updated fo prevent margin-collapsing on child elements 
 */
.clearfix:before,
.clearfix:after {
   content:"\0020";
   display: block;
   height: 0;
   visibility: hidden;
}

.clearfix {
  zoom: 1;/*IE<8*/
}

.clearfix:after {
  clear: both;
}
* html .clearfix { 
  zoom: 1; /* IE6 */
} 
*:first-child+html .clearfix { 
  zoom: 1; /* IE7 */
} 

/*
 * Add inline-block display for HTML5 elements
 * Corrects inline-block display not defined in IE6/7/8/9 & FF3
 */

audio[controls],
canvas,
video {
 display: inline-block;
 *display: inline;
 *zoom: 1;
}

html {
 font-size: 100.01%;/*To Prevent bugs in IE and Opera*/
 height: 100%;/*Using height 100% on html and body allows to style containers with a 100% height*/
 overflow-y: scroll;/*The overflow declaration is to make sure there is a gutter for the scollbar in all browsers regardless of content*/
 cursor: default; /* Add normal cursor  Improves visual focus of page during mouse use in all browsers */
 overflow-y: scroll; /* Add vertical scrollbar  Keeps page centered in all browsers regardless of content height */
 -webkit-tap-highlight-color: transparent; /* Add vertical scrollbar  Keeps page centered in all browsers regardless of content height */
 -ms-text-size-adjust: 100%; /* Define maximum text display as 100% to document Corrects text displayed oddly after orientation change in handheld browsers */
 -webkit-text-size-adjust: 100%; /* Define maximum text display as 100% to document Corrects text displayed oddly after orientation change in handheld browsers */
}

body {
 background-color: #fff;/*Not all browsers set white as the default background color*/
 color: #444;/*#444 looks better than black*/
 height: 100%;
}

body,
button
input,
select,
textarea {
 font: 12px/1.5 sans-serif;
}

img,fieldset {
  border: 0 none; /*Remove border   Improves readability when inside <a> element in all browsers*/
}

img {
  vertical-align: top;
  -ms-interpolation-mode: bicubic; /*Add high quality bicubic image resampling Improves visual appearance when scaled in IE7*/
}

/* =============================================================================
   Links
   ========================================================================== */

/*
 * Remove outline
 * Improves appearance when active or hovered in all browsers
 * people.opera.com/patrickl/experiments/keyboard/test
 */

a,
a:active,
a:hover {
  outline: none;
}

/*
 * Define outline as thin dotted
 * Improves appearance displayed oddly in C10
*/

a:focus {
 outline: thin dotted;
}

a,
a:link {
 color: #0000EE;
 text-decoration: none;
}

a:hover {
 text-decoration: underline;
}
a:visited {
  text-decoration: none;
  color: #551A8B;
}

/*Hide only visually,but have it available for screenreaders*/
.hidden {
   border: 0 !important;
   clip: rect(1px 1px 1px 1px);/*IE<8*/
   clip: rect(1px,1px,1px,1px);
   height: 1px !important;
   margin: -1px;
   overflow: hidden;
   padding: 0 !important;
   position: absolute !important;
   width: 1px;
}

/* =============================================================================
   Lists
   ========================================================================== */

dd {
  margin: 0 0 0 40px;
}

nav ul,
nav ol {
  list-style: none;
}

/* =============================================================================
   Forms
   ========================================================================== */
form {
  overflow: visible;
}

fieldset {
  line-height: 1;/*line height helps to set the vertical alignment of radio buttons and check boxes*/
}

/*
 * Add negative left margin
 * Corrects alignment displayed oddly in IE6/7
 */

legend {
  *margin-left: -7px;
}

/*
 * Define consistent vertical alignment display in all browsers
 */

button,
input,
select,
textarea {
  vertical-align: baseline; 
  *vertical-align: middle; 
}

/*
 * 1. Define line-height as normal
 *    Corrects FF3/4 setting it using !important in the UA stylesheet
 * 2. Make visible overflow
 *    Fixes spacing displayed oddly in IE6/7
 */

button,
input {
  line-height: normal; /* 1 */
  *overflow: visible;  /* 2 */
}

/*
 * 1. Display hand cursor for clickable form elements
 *    Improves usability and consistency of cursor style between image-type <input /> and others
 * 2. Define appearance for clickable form elements
 *    Corrects inability to style clickable <input /> types in iOS
 */

button,
input[type="button"], 
input[type="reset"], 
input[type="submit"],
.form-btn,
.btn {
  cursor: pointer; /* 1 */
  -webkit-appearance: button; /* 2 */
}

/*
 * Define box sizing
 * Addresses box sizing set to content-box in IE8/9
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
}

input[type="checkbox"] {
  vertical-align: bottom;/*Vertical alignment of checkboxes*/
  *vertical-align: baseline;/*IE7*/
}

input[type="radio"] {
  vertical-align: text-bottom;/*Vertical alignment of radio buttons*/
}

input {
  _vertical-align: text-bottom;/*Vertical alignment of input fields for IE6*/
}
/*
 * Define box sizing and appearance
 * Addresses box sizing set to border-box in S5 Chrome (include -moz to future-proof)
 * Addresses appearance set to searchfield in S5 Chrome
 */

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

/*
 * Remove inner padding and border
 * Fixes appearance displayed oddly in FF3/4
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
 * 1. Disable default vertical scrollbar
 *    Corrects scrollbar displayed oddly in IE6/7/8/9
 * 2. Add top vertical alignment
 *    Improves readability and aligment in all browsers
 */

textarea {
  overflow: auto; /* 1 */
  vertical-align: top; /* 2 */
}

input[type="email"],
input[type="text"],
input[type="password"],
input[type="select"],
input[type="search"],
input[type="file"],
textarea,
select {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #7F9DB9;
}

input:focus,
textarea:focus,
select:focus {
  outline-width: 0;/*No outline border for Safary*/
}


select {
  background-color: transparent;/*In Webkit/Mac, select fails to inherit color,font-*,etc if there is no other styling like background for example(border will do to)*/
}

label {
  font-weight: normal;
}

label.required:after { 
  content:"*";
  color:red;
  font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
}

button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.form-btn {
  width: auto;
  *width: 1;
  overflow: visible;
}
/* =============================================================================
   Tables
   ========================================================================== */

/* 
 * Remove spacing between table cells
 * Improves vertical and horizontal alignment in all browsers
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 0;
  text-align: left;
  vertical-align: middle;
}

/*
 *Header
 */
h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.17em;
}

h4 {
  font-size: 1em;
}

h5 {
  font-size: 0.83em;
}

h6 {
  font-size: 0.67em;
} 

p {
  margin-bottom: 4px;
}

上面样式中大部分写有标注，大家可以根据标注去理解相应部分样式的作用，此样式也使用了许多html5的标签和CSS3的选择器，可能有部分样式在IE8以下版本会不起作用，如果想效果达到一致，最好在头部加上html5.js和加上你自己的class名，特别是表单部分的初始化样式。此样式仅供参考学习，如果大家有更好的使用方法，不仿一起分享，一起学习，一起探讨一下这方面的知识。

本文主要参考了《drupal主题的基础样式—reset、base、layout、print》，《ＨＴＭＬ５Reset Stylesheet》，《Normalize.css》，其中Normalize CSS有两个版本：necolas和jonathantneal。有感兴趣的朋友可以下载他们的源码，仔细学习。

如需转载烦请注明出处：W3CPLUS