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

 

Normalize.css,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。