Series 5 file reset css cực kì quan trọng dành cho thiết kế web (Phần II)

Tiếp tục Series 5 file reset cực kì quan trọng dành cho thiết kế web, chúng tôi sẽ đưa cho bạn 3 trong 5 phong cách reset css nổi tiếng nhất hiện nay.

HTML5 Doctor CSS Reset

Dựa trên Reset CSS của Eric Meyer, HTML5Doctor.com tập trung vào việc cung cấp cho những website được thiết kế bằng HTML5, trong khi cải tiến ở một số vùng đông thời loại bỏ hỗ trợ cho HTML4 ở đó.

File Reset CSS HTML5 này bắt đầu bằng việc loại bỏ hỗ trợ cho những phần tử đã bị loại bỏ khỏi đặc tả HTML5 như <acronym>, <center> và <big>. Tiếp theo là nó thêm vào các phần tử HTML5 mới như <menu>, <nav>, <section> và <video>.

Và sau đây là code của file reset.css:

1. /**
2. * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
3. * Ric-hard Clark (http://richclarkdesign.com)
4. * http://cssreset.com
5. */
6. html, body, div, span, object, iframe,
7. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8. abbr, address, cite, code,
9. del, dfn, em, img, ins, kbd, q, samp,
10. small, strong, sub, sup, var,
11. b, i,
12. dl, dt, dd, ol, ul, li,
13. fieldset, form, label, legend,
14. table, caption, tbody, tfoot, thead, tr, th, td,
15. article, aside, canvas, details, figcaption, figure,
16. footer, header, hgroup, menu, nav, section, summary,
17. time, mark, audio, video {
18. margin:0;
19. padding:0;
20. border:0;
21. outline:0;
22. font-size:100%;
23. vertical-align:baseline;
24. background:transparent;
25. }
26. body {
27. line-height:1;
28. }
29. article,aside,details,figcaption,figure,
30. footer,header,hgroup,menu,nav,section {
31. display:block;
32. }
33. nav ul {
34. list-style:none;
35. }
36. blockquote, q {
37. quotes:none;
38. }
39. blockquote:before, blockquote:after,
40. q:before, q:after {
41. content:'';
42. content:none;
43. }
44. a {
45. margin:0;
46. padding:0;
47. font-size:100%;
48. vertical-align:baseline;
49. background:transparent;
50. }
51. /* change colours to suit your needs */
52. ins {
53. background-color:#ff9;
54. color:#000;
55. text-decoration:none;
56. }
57. /* change colours to suit your needs */
58. mark {
59. background-color:#ff9;
60. color:#000;
61. font-style:italic;
62. font-weight:bold;
63. }
64. del {
65. text-decoration: line-through;
66. }
67. abbr[title], dfn[title] {
68. border-bottom:1px dotted;
69. cursor:help;
70. }
71. table {
72. border-collapse:collapse;
73. border-spacing:0;
74. }
75. /* change border colour to suit your needs */
76. hr {
77. display:block;
78. height:1px;
79. border:0;
80. border-top:1px solid #cccccc;
81. margin:1em 0;
82. padding:0;
83. }
84. input, se-lect {
85. vertical-align:middle;
86. }

Universal Se-lector ‘*’ Reset

Khi lần đầu tiếp cận với phương pháp Reset CSS, hầu hết mọi người đều thực hiện cách dễ nhất là thiết lập margin và padding về 0 cho toàn bộ mọi loại phần tử.

Về cơ bản Universal Se-lector ‘*’ Reset trông sẽ thế này

Phương thức nhỏ bé này chủ yếu sử dụng tùy chọn (*) để thiết lập margin và padding cho mọi yếu tố. Nó thương được mở rộng bằng border: 0; outline: 0 để thiết lập các giá trị về không. Tuy nhiên, số lượng phần tử là rất khổng lồ, vậy nên thực tế  phương pháp này ít được sử dụng trừ khi bạn biết chính xác thứ mình mong muốn là gì.

Chúng ta đến với phiên bản đầy đủ của phương pháp này:

1. /* cssreset.com */
2. * {
3. margin: 0;
4. padding: 0;
5. border: 0;
6. outline: 0;
7. font-size: 100%;
8. line-height: 1.5em;
9. text-decoration: none;
10. vertical-align: baseline;
11. }

Normalize CSS Reset

Normalize.css là một tập tin CSS tùy biến làm cho trình duyệt hiển thị các yếu tố trở nên nhất quán và phù hợp với các tiêu chuẩn hiện đại. Chúng tôi đã nghiên cứu sự khác biệt giữa phong cách của các trình duyệt mặc định để biết thế nào là “bình thường”.

Vậy file reset css này thực sự làm gì?

• Nó giữ lại những yếu tố hữu dụng, không như nhiều reset css khác.
• Bình thường hóa phong cách cho hàng loạt yếu tố.
• Sửa lỗi và thống nhất cho hầu hết các trình duyệt.
• Cải thiện hiệu quả sử dụng với những yếu tố phụ.
• Giải thích code bằng việc sử dụng nhận xét chi tiết.

Đến với code ngay và luôn:

1. /*! normalize.css v1.0.0 | MIT License | git.io/normalize */
2.  
3. /* ==========================================================================
4. HTML5 display definitions
5. ========================================================================== */
6.  
7. /*
8. * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
9. */
10.  
11. article,
12. aside,
13. details,
14. figcaption,
15. figure,
16. footer,
17. header,
18. hgroup,
19. nav,
20. section,
21. summary {
22. display: block;
23. }
24.  
25. /*
26. * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
27. */
28.  
29. audio,
30. canvas,
31. video {
32. display: inline-block;
33. *display: inline;
34. *zoom: 1;
35. }
36.  
37. /*
38. * Prevents modern browsers f-rom displaying `audio` without controls.
39. * Remove excess height in iOS 5 devices.
40. */
41.  
42. audio:not([controls]) {
43. display: none;
44. height: 0;
45. }
46.  
47. /*
48. * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
49. * and Safari 4.
50. * Known issue: no IE 6 support.
51. */
52.  
53. [hidden] {
54. display: none;
55. }
56.  
57. /* ==========================================================================
58. Base
59. ========================================================================== */
60.  
61. /*
62. * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
63. * `em` units.
64. * 2. Prevents iOS text size adjust after orientation change, without disabling
65. * user zoom.
66. */
67.  
68. html {
69. font-size: 100%; /* 1 */
70. -webkit-text-size-adjust: 100%; /* 2 */
71. -ms-text-size-adjust: 100%; /* 2 */
72. }
73.  
74. /*
75. * Addresses `font-family` inconsistency between `textarea` and other form
76. * elements.
77. */
78.  
79. html,
80. button,
81. input,
82. se-lect,
83. textarea {
84. font-family: sans-serif;
85. }
86.  
87. /*
88. * Addresses margins handled incorrectly in IE 6/7.
89. */
90.  
91. body {
92. margin: 0;
93. }
94.  
95. /* ==========================================================================
96. Links
97. ========================================================================== */
98.  
99. /*
100. * Addresses `outline` inconsistency between Chrome and other browsers.
101. */
102.  
103. a:focus {
104. outline: thin dotted;
105. }
106.  
107. /*
108. * Improves readability when focused and also mouse hovered in all browsers.
109. */
110.  
111. a:active,
112. a:hover {
113. outline: 0;
114. }
115.  
116. /* ==========================================================================
117. Typography
118. ========================================================================== */
119.  
120. /*
121. * Addresses font sizes and margins set differently in IE 6/7.
122. * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
123. * and Chrome.
124. */
125.  
126. h1 {
127. font-size: 2em;
128. margin: 0.67em 0;
129. }
130.  
131. h2 {
132. font-size: 1.5em;
133. margin: 0.83em 0;
134. }
135.  
136. h3 {
137. font-size: 1.17em;
138. margin: 1em 0;
139. }
140.  
141. h4 {
142. font-size: 1em;
143. margin: 1.33em 0;
144. }
145.  
146. h5 {
147. font-size: 0.83em;
148. margin: 1.67em 0;
149. }
150.  
151. h6 {
152. font-size: 0.75em;
153. margin: 2.33em 0;
154. }
155.  
156. /*
157. * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
158. */
159.  
160. abbr[title] {
161. border-bottom: 1px dotted;
162. }
163.  
164. /*
165. * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
166. */
167.  
168. b,
169. strong {
170. font-weight: bold;
171. }
172.  
173. blockquote {
174. margin: 1em 40px;
175. }
176.  
177. /*
178. * Addresses styling not present in Safari 5 and Chrome.
179. */
180.  
181. dfn {
182. font-style: italic;
183. }
184.  
185. /*
186. * Addresses styling not present in IE 6/7/8/9.
187. */
188.  
189. mark {
190. background: #ff0;
191. color: #000;
192. }
193.  
194. /*
195. * Addresses margins set differently in IE 6/7.
196. */
197.  
198. p,
199. pre {
200. margin: 1em 0;
201. }
202.  
203. /*
204. * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
205. */
206.  
207. code,
208. kbd,
209. pre,
210. samp {
211. font-family: monospace, serif;
212. _font-family: 'courier new', monospace;
213. font-size: 1em;
214. }
215.  
216. /*
217. * Improves readability of pre-formatted text in all browsers.
218. */
219.  
220. pre {
221. white-space: pre;
222. white-space: pre-wrap;
223. word-wrap: break-word;
224. }
225.  
226. /*
227. * Addresses CSS quotes not supported in IE 6/7.
228. */
229.  
230. q {
231. quotes: none;
232. }
233.  
234. /*
235. * Addresses `quotes` property not supported in Safari 4.
236. */
237.  
238. q:before,
239. q:after {
240. content: '';
241. content: none;
242. }
243.  
244. small {
245. font-size: 75%;
246. }
247.  
248. /*
249. * Prevents `sub` and `sup` affecting `line-height` in all browsers.
250. */
251.  
252. sub,
253. sup {
254. font-size: 75%;
255. line-height: 0;
256. position: relative;
257. vertical-align: baseline;
258. }
259.  
260. sup {
261. top: -0.5em;
262. }
263.  
264. sub {
265. bottom: -0.25em;
266. }
267.  
268. /* ==========================================================================
269. Lists
270. ========================================================================== */
271.  
272. /*
273. * Addresses margins set differently in IE 6/7.
274. */
275.  
276. dl,
277. menu,
278. ol,
279. ul {
280. margin: 1em 0;
281. }
282.  
283. dd {
284. margin: 0 0 0 40px;
285. }
286.  
287. /*
288. * Addresses paddings set differently in IE 6/7.
289. */
290.  
291. menu,
292. ol,
293. ul {
294. padding: 0 0 0 40px;
295. }
296.  
297. /*
298. * Corrects list images handled incorrectly in IE 7.
299. */
300.  
301. nav ul,
302. nav ol {
303. list-style: none;
304. list-style-image: none;
305. }
306.  
307. /* ==========================================================================
308. Embedded content
309. ========================================================================== */
310.  
311. /*
312. * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
313. * 2. Improves image quality when scaled in IE 7.
314. */
315.  
316. img {
317. border: 0; /* 1 */
318. -ms-interpolation-mode: bicubic; /* 2 */
319. }
320.  
321. /*
322. * Corrects overflow displayed oddly in IE 9.
323. */
324.  
325. svg:not(:root) {
326. overflow: hidden;
327. }
328.  
329. /* ==========================================================================
330. Figures
331. ========================================================================== */
332.  
333. /*
334. * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
335. */
336.  
337. figure {
338. margin: 0;
339. }
340.  
341. /* ==========================================================================
342. Forms
343. ========================================================================== */
344.  
345. /*
346. * Corrects margin displayed oddly in IE 6/7.
347. */
348.  
349. form {
350. margin: 0;
351. }
352.  
353. /*
354. * Define consistent border, margin, and padding.
355. */
356.  
357. fieldset {
358. border: 1px solid #c0c0c0;
359. margin: 0 2px;
360. padding: 0.35em 0.625em 0.75em;
361. }
362.  
363. /*
364. * 1. Corrects color not being inherited in IE 6/7/8/9.
365. * 2. Corrects text not wrapping in Firefox 3.
366. * 3. Corrects alignment displayed oddly in IE 6/7.
367. */
368.  
369. legend {
370. border: 0; /* 1 */
371. padding: 0;
372. white-space: normal; /* 2 */
373. *margin-left: -7px; /* 3 */
374. }
375.  
376. /*
377. * 1. Corrects font size not being inherited in all browsers.
378. * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
379. * and Chrome.
380. * 3. Improves appearance and consistency in all browsers.
381. */
382.  
383. button,
384. input,
385. se-lect,
386. textarea {
387. font-size: 100%; /* 1 */
388. margin: 0; /* 2 */
389. vertical-align: baseline; /* 3 */
390. *vertical-align: middle; /* 3 */
391. }
392.  
393. /*
394. * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
395. * the UA stylesheet.
396. */
397.  
398. button,
399. input {
400. line-height: normal;
401. }
402.  
403. /*
404. * 1. Avoid the WebKit bug in Android 4.0.* whe-re (2) destroys native `audio`
405. * and `video` controls.
406. * 2. Corrects inability to style clickable `input` types in iOS.
407. * 3. Improves usability and consistency of cursor style between image-type
408. * `input` and others.
409. * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
410. * Known issue: inner spacing remains in IE 6.
411. */
412.  
413. button,
414. html input[type="button"], /* 1 */
415. input[type="reset"],
416. input[type="submit"] {
417. -webkit-appearance: button; /* 2 */
418. cursor: pointer; /* 3 */
419. *overflow: visible; /* 4 */
420. }
421.  
422. /*
423. * Re-set default cursor for disabled elements.
424. */
425.  
426. button[disabled],
427. input[disabled] {
428. cursor: default;
429. }
430.  
431. /*
432. * 1. Addresses box sizing set to content-box in IE 8/9.
433. * 2. Removes excess padding in IE 8/9.
434. * 3. Removes excess padding in IE 7.
435. * Known issue: excess padding remains in IE 6.
436. */
437.  
438. input[type="checkbox"],
439. input[type="radio"] {
440. box-sizing: border-box; /* 1 */
441. padding: 0; /* 2 */
442. *height: 13px; /* 3 */
443. *width: 13px; /* 3 */
444. }
445.  
446. /*
447. * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
448. * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
449. * (include `-moz` to future-proof).
450. */
451.  
452. input[type="search"] {
453. -webkit-appearance: textfield; /* 1 */
454. -moz-box-sizing: content-box;
455. -webkit-box-sizing: content-box; /* 2 */
456. box-sizing: content-box;
457. }
458.  
459. /*
460. * Removes inner padding and search cancel button in Safari 5 and Chrome
461. * on OS X.
462. */
463.  
464. input[type="search"]::-webkit-search-cancel-button,
465. input[type="search"]::-webkit-search-decoration {
466. -webkit-appearance: none;
467. }
468.  
469. /*
470. * Removes inner padding and border in Firefox 3+.
471. */
472.  
473. button::-moz-focus-inner,
474. input::-moz-focus-inner {
475. border: 0;
476. padding: 0;
477. }
478.  
479. /*
480. * 1. Removes default vertical scrollbar in IE 6/7/8/9.
481. * 2. Improves readability and alignment in all browsers.
482. */
483.  
484. textarea {
485. overflow: auto; /* 1 */
486. vertical-align: top; /* 2 */
487. }
488.  
489. /* ==========================================================================
490. Tables
491. ========================================================================== */
492.  
493. /*
494. * Remove most spacing between table cells.
495. */
496.  
497. table {
498. border-collapse: collapse;
499. border-spacing: 0;
500. }

Vậy là seri 5 file reset cực kì quan trọng dành cho thiết kế web 

đã kết thúc ở đây. Mong rằng với những gì chúng tôi đã chia sẻ, bạn sẽ tìm được phong cách reset css phù hợp nhất với website của mình để đạt được hiệu quả cao nhất. Trước khi rời đi, có thể bạn sẽ muốn xem qua Sử dụng captcha trong Zen Framework để biết cách phòng tránh spammer một cách hiệu quả nhất và đem lại những nội dung chất lượng cho website.