非常好用的CSS样式重置表

非常好用的CSS样式重置表

 

        我们在项目前期准备时都会准备好一个reset.css，因为不同浏览器对标签的解析各不相同，重置css样式可以让标签在不同浏览器下产生相同的效果。所以一个好的重置样式表是非常重要的。用过很多网上现成的样式重置表，然后有时写的样式代码没问题却达不到自己要的效果，查了才发现是掉进reset.css的坑里。这里推荐用过多种reset.css感觉是最好用的重置样式表：Sandal，这个样式表的好处是他绝大多数的保留了标签的常用效果，并不是简单粗暴的全部掩杀。具体样式如下，可以直接整个复制在自己的reset.css中：

　　html { 

　　　　-ms-text-size-adjust: 100%;

　　　　-webkit-text-size-adjust: 100%;

　　　　-webkit-tap-highlight-color: transparent;

　　　　height: 100%; 

　　} 

　　body { 

　　　　margin: 0;

　　　　font-size: 14px;

　　　　font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;

　　　　line-height: 1.5;

　　　　color: #333;

　　　　#fff;

　　　　min-height: 100%;

　　} 

　　article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section,summary { 

　　　　display: block; 

　　} 

　　audio, canvas, progress, video { 

　　　　display: inline-block; 

　　} 

　　audio:not([controls]) { 

　　　　display: none;

　　　　height: 0; 

　　} 

　　progress { 

　　　　vertical-align: baseline; 

　　} 

　　[hidden], template { 

　　　　display: none; 

　　} 

　　a {

　　　　background: transparent;

　　　　text-decoration: none;

　　　　color: #08c;

　　} 

　　a:active { 

　　　　outline: 0; 

　　} 

　　abbr[title] { 

　　　　border-bottom: 1px dotted; 

　　} 

　　b, strong { 

　　　　font-weight: bold; 

　　} 

　　dfn { 

　　　　font-style: italic; 

　　} 

　　mark { 

　　　　background: #ff0; color: #000; 

　　} 

　　small { 

　　　　font-size: 80%; 

　　} 

　　sub, sup { 

　　　　font-size: 75%;

　　　　line-height: 0;

　　　　position: relative;

　　　　vertical-align: baseline;

　　} 

　　sup { 

　　　　top: -0.5em; 

　　} 

　　sub { 

　　　　bottom: -0.25em; 

　　} 

　　img { 

　　　　max-width: 100%;

　　　　border: 0;

　　　　vertical-align: middle;

　　} 

　　svg:not(:root) { 

　　　　overflow: hidden; 

　　} 

　　pre { 

　　　　overflow: auto;

　　　　white-space: pre;

　　　　white-space: pre-wrap;

　　　　word-wrap: break-word;

　　} 

　　code, kbd, pre, samp { 

　　　　font-family: monospace, monospace;

　　　　font-size: 1em; 

　　} 

　　button, input, optgroup, select, textarea { 

　　　　color: inherit;

　　　　font: inherit;

　　　　margin: 0;

　　　　vertical-align: middle; 

　　} 

　　button, input, select { 

　　　　overflow: visible; 

　　} 

　　button, select { 

　　　　text-transform: none; 

　　} 

　　button, html input[type="button"], input[type="reset"], input[type="submit"] { 

　　　　-webkit-appearance: button;

　　　　cursor: pointer; 

　　} 

　　[disabled] { 

　　　　cursor: default; 

　　} 

　　button::-moz-focus-inner, input::-moz-focus-inner { 

　　　　border: 0;

　　　　padding: 0; 

　　} 

　　input { 

　　　　line-height: normal; 

　　} 

　　input[type="checkbox"], input[type="radio"] { 

　　　　box-sizing: border-box;

　　　　padding: 0;

　　} 

　　input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { 

　　　　height: auto; 

　　}

　　input[type="search"] { 

　　　　-webkit-appearance: textfield;

　　　　box-sizing: border-box; 

　　}

　　 input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { 

　　　　-webkit-appearance: none; 

　　}

　　fieldset { 

　　　　border: 1px solid #c0c0c0;

　　　　margin: 0 2px;

　　　　padding: 0.35em 0.625em 0.75em; 

　　} 

　　legend { 

　　　　border: 0;

　　　　padding: 0; 

　　} 

　　textarea { 

　　　　overflow: auto;

　　　　resize: vertical;

　　　　vertical-align: top; 

　　} 

　　optgroup { 

　　　　font-weight: bold; 

　　} 

　　input, select, textarea { 

　　　　outline: 0; 

　　} 

　　textarea, input { 

　　　　-webkit-user-modify: read-write-plaintext-only; 

　　} 

　　input::-ms-clear, input::-ms-reveal { 

　　　　display: none; 

　　} 

　　input::-moz-placeholder, textarea::-moz-placeholder { 

　　　　color: #999; 

　　} 

　　input:-ms-input-placeholder, textarea:-ms-input-placeholder { 

　　　　color: #999; 

　　} 

　　input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

　　　　color: #999; 

　　} 

　　.placeholder { 

　　　　color: #999; 

　　} 

　　table { 

　　　　border-collapse: collapse;

　　　　border-spacing: 0; 

　　} 

　　td, th { 

　　　　padding: 0; 

　　} 

　　h1, h2, h3, h4, h5, h6, p, figure, form, blockquote { 

　　　　margin: 0; 

　　} 

　　ul, ol, li, dl, dd { 

　　　　margin: 0; padding: 0; 

　　} 

　　ul, ol {

　　　　list-style: none outside none; 

　　} 

　　h1, h2, h3 { 

　　　　line-height: 2;

　　　　font-weight: normal; 

　　} 

　　h1 { 

　　　　font-size: 18px; 

　　} 

　　h2 { 

　　　　font-size: 16px; 

　　} 

　　h3 { 

　　　　font-size: 14px; 

　　} 

　　i { 

　　　　font-style: normal; 

　　} 

　　* { 

　　　　box-sizing: border-box; 

　　} 

　　.clearfix::before, .clearfix::after { 

　　　　content: "";

　　　　display: table; 

　　} 

　　.clearfix::after { 

　　　　clear: both; 

　　}

 

 

        基本的样式重置就这些，剩下自定义的就自己往里面添加。这份样式表放在这里方便以后自己使用，也希望能帮到有需要的你们。