首页 > 代码库 > Normalize.css

Normalize.css

根据之前的一些项目,总结了一下重置CSS:

  1 @charset "UTF-8";  2   3 html {  4     background: #FFF;  5     font-size: 62.5%;  6     -ms-text-size-adjust: 100%;  7     -webkit-text-size-adjust: 100%;  8 }  9 html, 10 legend, 11 input, 12 select, 13 textarea { 14     color: $defaultColor; 15 } 16 body { 17     color: inherit; 18     background: transparent; 19 } 20 html, 21 body, 22 legend, 23 input, 24 select, 25 textarea { 26     font: normal normal normal 12px/1.5  ‘Microsoft YaHei‘,Arial, Helvetica, sans-serif,‘\5B8B\4F53‘; 27 } 28 body, 29 div, 30 header, 31 footer, 32 nav, 33 aside, 34 article, 35 section, 36 hgroup, 37 figure, 38 figcaption, 39 video, 40 audio, 41 embed, 42 mark, 43 summary, 44 progress, 45 canvas, 46 dl, 47 dt, 48 dd, 49 ul, 50 ol, 51 li, 52 h1, 53 h2, 54 h3, 55 h4, 56 h5, 57 h6, 58 pre, 59 code, 60 form, 61 fieldset, 62 legend, 63 input, 64 textarea, 65 p, 66 blockquote, 67 th, 68 td { 69     margin: 0; 70     padding: 0 71 } 72 table { 73     border-collapse: collapse; 74     border-spacing: 0; 75     _font-size: 12px; 76 } 77 td, 78 th { 79     color: inherit; 80     font-family: inherit; 81     vertical-align: top; 82 } 83 fieldset, 84 img, 85 iframe { 86     border: none; 87 } 88 address, 89 caption, 90 cite, 91 code, 92 dfn, 93 em, 94 strong, 95 th, 96 var { 97     font-style: normal; 98     font-weight: normal; 99 }100 ol,101 ul,102 li {103     list-style: none;104 }105 header,106 footer,107 nav,108 aside,109 article,110 section,111 hgroup,112 figure,113 figcaption {114     display: block;115 }116 caption,117 th {118     text-align: left;119 }120 h1,121 h2,122 h3,123 h4,124 h5,125 h6 {126     font-size: inherit;127     font-weight: normal;128 }129 q:before,130 q:after {131     content: ‘‘;132 }133 pre {134     white-space: pre-wrap;135 }136 small {137     font-size: 0.8em;138 }139 mark {140     background: #ff0;141     color: #000;142 }143 abbr[title] {144     border-bottom: 1px dotted;145 }146 abbr,147 acronym {148     border: 0;149     font-variant: normal;150 }151 sup,152 sub {153     font-size: 0.75em;154 }155 sup {156     vertical-align: text-top;157 }158 sub {159     vertical-align: text-bottom;160 }161 button,162 select {163     text-transform: none;164 }165 input:-webkit-autofill {166     -webkit-box-shadow: 0 0 0px 1000px white inset;167 }168 input,169 textarea,170 select {171     font-family: inherit;172     font-size: inherit;173     font-weight: inherit;174     color: inherit;175     line-height: 1.2;176     &:focus {177         outline: none;178     }179 }180 textarea {181     overflow-x: hidden;182     overflow-y: auto;183     vertical-align: top;184     resize: none;185 }186 input[type=‘checkbox‘],187 input[type=‘radio‘] {188     width: auto;189     vertical-align: middle;190 }191 .button,192 button,193 html input[type="button"],194 input[type="reset"],195 input[type="submit"] {196     -webkit-appearance: button;197     cursor: pointer;198 }199 label{200     cursor: pointer;201 }202 button[disabled],203 html input[disabled] {204     cursor: default;205 }206 input::-ms-clear,207 input::-ms-reveal {208     display: none; /* For IE10+ */209 }210 input[type="checkbox"],211 input[type="radio"] {212     box-sizing: border-box;213     padding: 0;214 }215 input[type="search"] {216     -webkit-appearance: textfield;217     -moz-box-sizing: content-box;218     -webkit-box-sizing: content-box;219     box-sizing: content-box;220 }221 input[type="search"]::-webkit-search-cancel-button,222 input[type="search"]::-webkit-search-decoration {223     -webkit-appearance: none;224 }225 a {226     background: transparent; /* For IE10+ */227 }228 a,229 a:link,230 a:hover,231 a:active,232 a:visited {233     text-decoration: none;234 }235 a:hover {236     text-decoration: underline;237 }238 a:focus {239     outline: none;240 }241 code,242 kbd,243 pre,244 samp {245     font-family: monospace, serif;246     font-size: inherit;247 }248 ::-webkit-input-placeholder {249     color: #AAA;250     opacity: 1;251 }252 ::-moz-placeholder {253     color: #AAA;254     opacity: 1; /* For Firefox */255 }256 :-ms-input-placeholder {257     color: #AAA;258     opacity: 1;259 }260 ::selection,261 ::-moz-selection {262     background: inherit;263     color: white;264 }265 266 /* Firefox for button vertical center */267 button::-moz-focus-inner,268 input[type="reset"]::-moz-focus-inner,269 input[type="button"]::-moz-focus-inner,270 input[type="submit"]::-moz-focus-inner,271 input[type="file"] > input[type="button"]::-moz-focus-inner {272     border: none;273     padding: 0;274 }275 276 /* -- Normalize End-- */