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-- */