转载http://www.w3cplus.com/blog/59.html
今天无意在网上看到一个介绍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》,《HTML5Reset Stylesheet》,《Normalize.css》,其中Normalize CSS有两个版本:necolas和jonathantneal。有感兴趣的朋友可以下载他们的源码,仔细学习。