结合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的reset和base样式结合的示例代码的详细内容。