Html5的Reset和Base样式结合的示例代码

/***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: &#39;Courier New&#39;, 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: &#39;&#39;;  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,buttoninput,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;}