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: '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;
}