{"id":14717,"date":"2021-09-11T08:28:07","date_gmt":"2021-09-11T08:28:07","guid":{"rendered":"https:\/\/freehost.page\/?p=14717"},"modified":"2021-09-11T08:28:07","modified_gmt":"2021-09-11T08:28:07","slug":"reset-css-thiet-ke-web","status":"publish","type":"post","link":"https:\/\/kiencang.net\/reset-css-thiet-ke-web\/","title":{"rendered":"Reset CSS trong thi\u1ebft k\u1ebf web l\u00e0 g\u00ec v\u1eady?"},"content":{"rendered":"\n<p><strong>V\u00e0i l\u1eddi c\u1ee7a ng\u01b0\u1eddi d\u1ecbch<\/strong>: t\u00f4i b\u1eaft \u0111\u1ea7u ch\u00fa \u00fd \u0111\u1ebfn file reset.css khi tham kh\u1ea3o m\u1ed9t s\u1ed1 nh\u00f3m h\u1ed9i v\u1ec1 front-end tr\u00ean FB. R\u1ed3i th\u00ec khi th\u1ea5y s\u1ef1 kh\u00e1c bi\u1ec7t c\u1ee7a c\u00e1c tr\u00ecnh duy\u1ec7t v\u1ec1 c\u00e1ch render n\u1ed9i dung qua ph\u1ea7n <a href=\"https:\/\/kiencang.net\/kien-tra-website-tren-nhieu-browser\/\" target=\"_blank\" rel=\"noreferrer noopener\">ki\u1ec3m tra \u0111a tr\u00ecnh duy\u1ec7t (cross browser testing \/ nhi\u1ec1u n\u01a1i d\u1ecbch l\u00e0 ki\u1ec3m tra ch\u00e9o tr\u00ecnh duy\u1ec7t)<\/a>, t\u00f4i ngh\u0129 l\u00e0 m\u00ecnh s\u1ebd ph\u1ea3i t\u00ecm hi\u1ec3u s\u00e2u h\u01a1n v\u1ec1 ch\u1ee7 \u0111\u1ec1 n\u00e0y. M\u1ee5c \u0111\u00edch ch\u00ednh c\u1ee7a file reset.css l\u00e0 t\u1ea1o ra \u0111\u01b0\u1ee3c \u0111\u1ecbnh ki\u1ec3u th\u1ed1ng nh\u1ea5t tr\u00ean c\u00e0ng nhi\u1ec1u tr\u00ecnh duy\u1ec7t kh\u00e1c nhau c\u00e0ng t\u1ed1t, t\u00ednh c\u1ea3 phi\u00ean b\u1ea3n, l\u1eabn OS m\u00e0 n\u00f3 \u0111ang v\u1eadn h\u00e0nh qua \u0111\u00f3. Ch\u1ec9 c\u00f3 th\u1ebf ch\u00fang ta m\u1edbi n\u1eafm ch\u1eafc \u0111\u01b0\u1ee3c ng\u01b0\u1eddi d\u00f9ng tr\u1ea3i nghi\u1ec7m nh\u01b0 th\u1ebf n\u00e0o tr\u00ean c\u00e1c n\u1ec1n t\u1ea3ng kh\u00e1c nhau \u1ea5y. \u00dd ni\u1ec7m v\u1ec1 reset.css thay \u0111\u1ed5i qua n\u0103m th\u00e1ng, c\u00f3 nh\u1eefng ng\u01b0\u1eddi s\u1eed d\u1ee5ng 3 d\u00f2ng m\u00e3 r\u1ea5t \u0111\u01a1n gi\u1ea3n d\u00f9ng selector * cho t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed \u0111\u1ec3 thi\u1ebft l\u1eadp l\u1ea1i, c\u00f3 nh\u1eefng ng\u01b0\u1eddi kh\u00e1c l\u1ea1i thi\u1ebft k\u1ebf t\u1ef7 m\u1ec9 h\u01a1n, ch\u1ec9 ch\u1ecdn nh\u1eefng ph\u1ea7n t\u1eed c\u00f3 s\u1ef1 kh\u00e1c bi\u1ec7t th\u1eadt s\u1ef1, v\u00e0 ch\u1ec9 ch\u00fa tr\u1ecdng v\u00e0o c\u00e1c thu\u1ed9c t\u00ednh kh\u00e1c bi\u1ec7t c\u1ee7a ph\u1ea7n t\u1eed \u0111\u00f3 m\u00e0 th\u00f4i, k\u1ebft h\u1ee3p v\u1edbi c\u00e1c thay \u0111\u1ed5i, ph\u00e1t tri\u1ec3n c\u1ee7a HTML v\u00e0 CSS trong giai \u0111o\u1ea1n g\u1ea7n \u0111\u00e2y. Nh\u1eefng ng\u01b0\u1eddi kh\u00e1c th\u1eadm ch\u00ed \u0111i xa h\u01a1n, kh\u00f4ng ch\u1ec9 reset, h\u1ecd c\u00f2n b\u1ed5 sung th\u00eam c\u00e1c style \u01b0a th\u00edch c\u1ee7a ri\u00eang m\u00ecnh, ho\u1eb7c c\u00e1c style m\u00e0 h\u1ecd cho l\u00e0 t\u1ed1t h\u01a1n style m\u1eb7c \u0111\u1ecbnh. <\/p>\n\n\n\n<p>OK, gi\u1edd \u0111\u00e3 \u0111\u1ebfn l\u00fac ch\u00fang ta v\u00e0o b\u00e0i r\u1ed3i!<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>M\u1ea5y ng\u00e0y h\u00f4m tr\u01b0\u1edbc, t\u00f4i c\u00f3 th\u1ea5y m\u1ed9t b\u00e0i vi\u1ebft c\u1ee7a Nicholas Cerminara n\u00f3i r\u1eb1ng Bootstrap 4 \u0111\u00e3 c\u00f3 file reset CSS m\u1edbi m\u00e0 h\u1ecd g\u1ecdi l\u00e0 <a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/content\/reboot\/\" target=\"_blank\" rel=\"noreferrer noopener\">Reboot<\/a>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Reboot l\u00e0 m\u1ed9t t\u1eadp h\u1ee3p c\u00e1c ch\u1ec9 th\u1ecb, thay \u0111\u1ed5i c\u00e1c CSS c\u1ee5 th\u1ec3 c\u1ee7a ph\u1ea7n t\u1eed v\u00e0 \u0111\u01b0\u1ee3c \u0111\u01b0a v\u00e0o m\u1ed9t file duy nh\u1ea5t, \u0111i\u1ec1u n\u00e0y gi\u00fap cho Bootstrap cung c\u1ea5p \u0111\u01b0\u1ee3c c\u00e1c m\u00e3 nh\u1ea5t qu\u00e1n, \u0111\u01a1n gi\u1ea3n \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng d\u1ef1a tr\u00ean \u0111\u00f3.<\/p><\/blockquote>\n\n\n\n<p>N\u1ebfu b\u1ea1n l\u00e0 m\u1ed9t ng\u01b0\u1eddi m\u1edbi trong l\u0129nh v\u1ef1c ph\u00e1t tri\u1ec3n CSS, th\u00ec to\u00e0n b\u1ed9 \u00fd t\u01b0\u1edfng c\u1ee7a CSS reset \u0111\u00f3 l\u00e0 x\u1eed l\u00fd c\u00e1c m\u00e2u thu\u1eabn trong chuy\u1ec7n thi\u1ebft l\u1eadp style gi\u1eefa c\u00e1c tr\u00ecnh duy\u1ec7t. L\u1ea5y v\u00ed d\u1ee5, n\u1ebfu t\u00f4i \u0111\u01b0a m\u1ed9t button v\u00e0o trang v\u00e0 kh\u00f4ng thi\u1ebft l\u1eadp style n\u00e0o c\u1ee5 th\u1ec3 li\u00ean quan \u0111\u1ebfn padding th\u00ec theo m\u1eb7c \u0111\u1ecbnh tr\u00ecnh duy\u1ec7t Chrome s\u1ebd \u00e1p d\u1ee5ng c\u00e2u l\u1ec7nh <code>padding: 2px 6px 3px;<\/code> &#8211; trong khi \u0111\u00f3 tr\u00ecnh duy\u1ec7t FireFox s\u1ebd \u00e1p d\u1ee5ng c\u00e2u l\u1ec7nh <code>padding: 0 8px;<\/code> <\/p>\n\n\n\n<p><strong>PS t\u1eeb ng\u01b0\u1eddi d\u1ecbch<\/strong>: H\u1ec7 qu\u1ea3 l\u00e0 ch\u00fang ta s\u1ebd c\u00f3 2 giao di\u1ec7n kh\u00e1c nhau! V\u00e0 kh\u00f3 l\u01b0\u1eddng tr\u01b0\u1edbc \u0111\u01b0\u1ee3c c\u00e1c r\u1eafc r\u1ed1i c\u00f3 th\u1ec3 x\u1ea3y ra khi ng\u01b0\u1eddi d\u00f9ng tr\u1ea3i nghi\u1ec7m.<\/p>\n\n\n\n<p>CSS reset s\u1ebd \u00e1p d\u1ee5ng padding <em>m\u1edbi<\/em> l\u00ean ph\u1ea7n t\u1eed n\u00e0y, v\u00ec th\u1ebf t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t s\u1ebd c\u00f3 k\u1ebft qu\u1ea3 render nh\u1ea5t qu\u00e1n, v\u00e0 bu\u1ed9c ch\u00fang ta ph\u1ea3i t\u1ef1 ch\u1ee7 \u0111\u1ed9ng \u0111i\u1ec1u ch\u1ec9nh (trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y l\u00e0 padding c\u1ee7a button), ch\u1ee9 kh\u00f4ng b\u1ecb sao nh\u00e3ng theo m\u1eb7c \u0111\u1ecbnh, d\u1eabn \u0111\u1ebfn h\u1ec7 qu\u1ea3 t\u1eebng tr\u00ecnh duy\u1ec7t s\u1ebd hi\u1ec3n th\u1ecb kh\u00e1c nhau. Ch\u00fang ta s\u1ebd xem x\u00e9t m\u1ed9t v\u00e0i v\u00ed d\u1ee5 nh\u01b0 th\u1ebf.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6577d644402a9\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d644402a9\"  type=\"checkbox\" id=\"item-6577d644402a9\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kiencang.net\/reset-css-thiet-ke-web\/#Nhin_lai_mot_chut_lich_su_nao%E2%80%A6\" title=\"Nh\u00ecn l\u1ea1i m\u1ed9t ch\u00fat l\u1ecbch s\u1eed n\u00e0o&#8230;\">Nh\u00ecn l\u1ea1i m\u1ed9t ch\u00fat l\u1ecbch s\u1eed n\u00e0o&#8230;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/reset-css-thiet-ke-web\/#Tiep_den_la_Normalizecss\" title=\"Ti\u1ebfp \u0111\u1ebfn l\u00e0 Normalize.css\">Ti\u1ebfp \u0111\u1ebfn l\u00e0 Normalize.css<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/reset-css-thiet-ke-web\/#Vi_vay_%E2%80%A6_chung_ta_co_the_chon_lua_kieu_reset_dung_khong\" title=\"V\u00ec v\u1eady, &#8230; ch\u00fang ta c\u00f3 th\u1ec3 ch\u1ecdn l\u1ef1a ki\u1ec3u reset \u0111\u00fang kh\u00f4ng?\">V\u00ec v\u1eady, &#8230; ch\u00fang ta c\u00f3 th\u1ec3 ch\u1ecdn l\u1ef1a ki\u1ec3u reset \u0111\u00fang kh\u00f4ng?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/reset-css-thiet-ke-web\/#Tu_%E2%80%9Creset%E2%80%9D\" title=\"T\u1eeb &#8220;reset&#8221;\">T\u1eeb &#8220;reset&#8221;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kiencang.net\/reset-css-thiet-ke-web\/#Reboot\" title=\"Reboot\">Reboot<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/kiencang.net\/reset-css-thiet-ke-web\/#Tinh_chinh_reset_dua_tren_ho_tro_cua_trinh_duyet\" title=\"Tinh ch\u1ec9nh reset d\u1ef1a tr\u00ean h\u1ed7 tr\u1ee3 c\u1ee7a tr\u00ecnh duy\u1ec7t\">Tinh ch\u1ec9nh reset d\u1ef1a tr\u00ean h\u1ed7 tr\u1ee3 c\u1ee7a tr\u00ecnh duy\u1ec7t<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Nhin_lai_mot_chut_lich_su_nao%E2%80%A6\"><\/span>Nh\u00ecn l\u1ea1i m\u1ed9t ch\u00fat l\u1ecbch s\u1eed n\u00e0o&#8230;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>V\u00e0o n\u0103m 2007, Jeff Starr \u0111\u00e3 t\u1ed5ng h\u1ee3p <a href=\"https:\/\/perishablepress.com\/a-killer-collection-of-global-css-reset-styles\/\" target=\"_blank\" rel=\"noreferrer noopener\">m\u1ed9t lo\u1ea1t c\u00e1c thi\u1ebft l\u1eadp CSS kh\u00e1c nhau<\/a>. Phi\u00ean b\u1ea3n c\u0169 nh\u1ea5t l\u00e0 c\u1ee7a Tantek \u00c7elik, n\u00f3 \u0111\u00e2y: <a href=\"http:\/\/tantek.com\/log\/2004\/undohtml.css\" target=\"_blank\" rel=\"noreferrer noopener\">undohtml.css<\/a> (link d\u1eabn tr\u1ef1c ti\u1ebfp \u0111\u1ebfn file). Ch\u00fang ta c\u00f3 th\u1ec3 th\u1ea5y r\u1eb1ng m\u1ee5c \u0111\u00edch \u0111\u1eb1ng sau n\u00f3 l\u00e0 <em>lo\u1ea1i b\u1ecf \u0111i<\/em> c\u00e1c thu\u1ed9c t\u00ednh m\u1eb7c \u0111\u1ecbnh:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* undohtml.css *\/\n\/* (CC) 2004 Tantek Celik. Some Rights Reserved.             *\/\n\/*   http:\/\/creativecommons.org\/licenses\/by\/2.0                   *\/\n\/* This style sheet is licensed under a Creative Commons License. *\/\n\n\/* Purpose: undo some of the default styling of common (X)HTML browsers *\/<\/code><\/pre>\n\n\n\n<p>\u1ede th\u1eddi \u0111i\u1ec3m hi\u1ec7n t\u1ea1i, m\u1ed9t trong c\u00e1c <a href=\"https:\/\/meyerweb.com\/eric\/tools\/css\/reset\/reset.css\" target=\"_blank\" rel=\"noreferrer noopener\">thi\u1ebft l\u1eadp reset ph\u1ed5 bi\u1ebfn nh\u1ea5t l\u00e0 c\u1ee7a Meyer<\/a>. N\u00f3 c\u00f3 nh\u1eefng th\u1ee9 kh\u00e1c so v\u1edbi nh\u1eefng c\u00e1i m\u00e0 Tantek \u0111\u00e3 l\u00e0m (n\u00f3 th\u1eadm ch\u00ed c\u1eadp nh\u1eadt m\u1ed9t s\u1ed1 ph\u1ea7n t\u1eed HTML5), nh\u01b0ng \u00fd t\u01b0\u1edfng c\u0103n c\u1ed1t th\u00ec v\u1eabn th\u1ebf th\u00f4i: lo\u1ea1i b\u1ecf c\u00e1c thi\u1ebft l\u1eadp style m\u1eb7c \u0111\u1ecbnh. B\u1ea1n c\u00f3 th\u1ec3 s\u1ebd \u0111\u1ec3 \u00fd \u0111\u1ebfn kh\u1ed1i m\u00e3 n\u1ed5i ti\u1ebfng n\u00e0y, t\u00ecm th\u1ea5y n\u00f3 th\u00f4ng qua DevTools \u1edf kh\u1eafp m\u1ecdi n\u01a1i:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed, \nfigure, figcaption, footer, header, hgroup, \nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}<\/code><\/pre>\n\n\n\n<p>Khi b\u1ea1n b\u1eaft \u0111\u1ea7u v\u1edbi \u0111o\u1ea1n m\u00e3 CSS reset nh\u01b0 v\u1eady (t\u1ee9c l\u00e0 t\u1ea1i v\u1ecb tr\u00ed tr\u00ean c\u00f9ng c\u1ee7a file CSS), r\u1ed3i sau \u0111\u00f3 b\u1ea1n vi\u1ebft c\u00e1c \u0111o\u1ea1n CSS c\u1ee7a ri\u00eang m\u00ecnh, th\u1ebf th\u00ec b\u1ea1n s\u1ebd c\u00f3 \u0111\u01b0\u1ee3c c\u00e1c ch\u1ec9 th\u1ecb CSS v\u1eefng ch\u1eafc, \u1ed5n \u0111\u1ecbnh qua nhi\u1ec1u tr\u00ecnh duy\u1ec7t kh\u00e1c nhau.<\/p>\n\n\n\n<p>C\u00e1c n\u0103m sau \u0111\u00f3, khi HTML5 tr\u1edf th\u00e0nh hi\u1ec7n th\u1ef1c v\u00e0 ph\u1ed5 bi\u1ebfn h\u01a1n, \u0111o\u1ea1n <a href=\"http:\/\/html5doctor.com\/html-5-reset-stylesheet\/\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00e3 reset d\u00e0nh cho HTML5 c\u1ee7a Richard Clark<\/a> \u0111\u01b0\u1ee3c bi\u1ebft \u0111\u1ebfn r\u1ea5t nhi\u1ec1u. N\u00f3 v\u1eabn l\u00e0 phi\u00ean b\u1ea3n \u0111i\u1ec1u ch\u1ec9nh c\u1ee7a Meyer, v\u00e0 v\u1eabn gi\u1eef nguy\u00ean \u00fd t\u01b0\u1edfng.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>article,aside,details,figcaption,figure,\nfooter,header,hgroup,menu,nav,section { \n    display:block;\n}<\/code><\/pre>\n\n\n\n<p>Trong su\u1ed1t qu\u00e1 tr\u00ecnh tr\u00ecnh thay \u0111\u1ed5i n\u00e0y, c\u00f3 kh\u00e1 nhi\u1ec1u l\u1eadp tr\u00ecnh vi\u00ean, nh\u00e0 thi\u1ebft k\u1ebf \u0111\u00e3 t\u1ed1i thi\u1ec3u h\u00f3a c\u00f4ng vi\u1ec7c tr\u00ean b\u1eb1ng c\u00e1ch \u0111\u01a1n gi\u1ea3n ch\u1ec9 l\u00e0 lo\u1ea1i b\u1ecf margin v\u00e0 padding ra kh\u1ecfi m\u1ecdi ph\u1ea7n t\u1eed, v\u00e0 d\u00f9ng \u0111o\u1ea1n m\u00e3 \u0111\u01a1n gi\u1ea3n th\u1ebf n\u00e0y th\u00f4i: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>* {\n  padding: 0;\n  margin: 0;\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tiep_den_la_Normalizecss\"><\/span>Ti\u1ebfp \u0111\u1ebfn l\u00e0 Normalize.css<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><a href=\"https:\/\/necolas.github.io\/normalize.css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Normalize.css<\/a> l\u00e0 \u0111\u1ea1i di\u1ec7n \u0111\u1ea7u ti\u00ean th\u1ef1c hi\u1ec7n b\u01b0\u1edbc chuy\u1ec3n trong \u00fd ngh\u0129a c\u1ee7a vi\u1ec7c file CSS reset n\u00ean l\u00e0m \u0111i\u1ec1u g\u00ec. \u0110i\u1ec1u n\u00e0y d\u01b0\u1eddng nh\u01b0 \u0111\u00e3 t\u1ea1o ra s\u1ef1 kh\u00e1c bi\u1ec7t r\u1ea5t l\u1edbn \u0111\u1ed1i v\u1edbi t\u00f4i:<\/p>\n\n\n\n<ul><li>N\u00f3 l\u00e0 m\u1ed9t \u0111\u00e1nh gi\u00e1 m\u1edbi v\u1ec1 <em>m\u1ecdi th\u1ee9<\/em> c\u00f3 th\u1ec3 c\u00f3 s\u1ef1 kh\u00e1c bi\u1ec7t v\u1ec1 style trong c\u00e1c tr\u00ecnh duy\u1ec7t v\u00e0 n\u00f3 x\u00e1c \u0111\u1ecbnh <em>t\u1ea5t c\u1ea3<\/em> c\u00e1c tr\u01b0\u1eddng h\u1ee3p \u0111\u00f3. Trong \u0111\u00f3 c\u00e1c CSS c\u0169 h\u01a1n \u0111\u01b0\u1ee3c \u0111\u1eb7t l\u1ea1i v\u1edbi m\u1ed9t v\u00e0i d\u00f2ng m\u00e3, kh\u00f4ng n\u00e9n v\u00e0 \u0111\u01b0\u1ee3c \u0111\u1ecbnh danh <a href=\"https:\/\/github.com\/necolas\/normalize.css\/blob\/master\/normalize.css\" target=\"_blank\" rel=\"noreferrer noopener\">l\u00e0 447<\/a>;<\/li><li>N\u00f3 kh\u00f4ng th\u1ef1c hi\u1ec7n vi\u1ec7c lo\u1ea1i b\u1ecf c\u00e1c styling t\u1eeb c\u00e1c ph\u1ea7n t\u1eed \u0111\u00e3 c\u00f3 t\u00ednh \u1ed5n \u0111\u1ecbnh cao tr\u00ean nhi\u1ec1u tr\u00ecnh duy\u1ec7t (trong ph\u1ea7n l\u1edbn tr\u01b0\u1eddng h\u1ee3p). V\u00ed d\u1ee5, kh\u00f4ng c\u00f3 b\u1ea5t c\u1ee9 thay \u0111\u1ed5i n\u00e0o \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n trong Normalize cho c\u00e1c ph\u1ea7n t\u1eed t\u1eeb h2 &#8211; h6, ch\u1ec9 c\u00f3 m\u00e3 s\u1eeda ch\u1eefa cho th\u1ebb h1. \u0110i\u1ec1u \u0111\u00f3 c\u00f3 ngh\u0129a l\u00e0 b\u1ea1n kh\u00f4ng lo\u1ea1i b\u1ecf ph\u00e2n c\u1ea5p ti\u00eau \u0111\u1ec1, ki\u1ec3u m\u1eb7c \u0111\u1ecbnh \u0111\u00f3 s\u1ebd v\u1eabn c\u00f2n;<\/li><li>File reset n\u00e0y ph\u00f9 h\u1ee3p v\u1edbi \u00fd t\u01b0\u1edfng thay \u0111\u1ed5i ph\u1ea7n t\u1eed h\u01a1n l\u00e0 ch\u1ec9 bao g\u1ed3m n\u00f3. L\u1ea5y v\u00ed d\u1ee5, c\u00f3 m\u1ed9t ph\u1ea7n ch\u1ec9 d\u00e0nh cho th\u1ebb <code>&lt;pre&gt;<\/code> v\u00e0 m\u1ed9t d\u00f2ng trong s\u1ed1 \u0111\u00f3 \u0111\u1eb7t ph\u00f4ng ch\u1eef cho n\u00f3. B\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i \u0111i\u1ec1u \u0111\u00f3 b\u1eb1ng font ch\u1eef b\u1ea1n mu\u1ed1n, v\u00e0 n\u00f3 s\u1ebd c\u00f3 hi\u1ec7u qu\u1ea3 t\u01b0\u01a1ng t\u1ef1 nh\u01b0 vi\u1ec7c \u0111\u1eb7t l\u1ea1i;<\/li><\/ul>\n\n\n\n<p>\u0110o\u1ea1n m\u00e3 c\u0169ng d\u1ec5 \u0111\u1ecdc, v\u00ec n\u00f3 gi\u1ea3i th\u00edch m\u1ee5c \u0111\u00edch c\u1ee7a t\u1eebng d\u00f2ng m\u00e0 kh\u00f4ng qu\u00e1 \u0111i s\u00e2u v\u00e0o chi ti\u1ebft:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n * 1. Remove the bottom border in Chrome 57- and Firefox 39-.\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n *\/\n\nabbr&#91;title] {\n  border-bottom: none; \/* 1 *\/\n  text-decoration: underline; \/* 2 *\/\n  text-decoration: underline dotted; \/* 2 *\/\n}<\/code><\/pre>\n\n\n\n<p>\u1ede th\u1eddi \u0111i\u1ec3m hi\u1ec7n t\u1ea1i <a href=\"https:\/\/github.com\/necolas\/normalize.css\" target=\"_blank\" rel=\"noreferrer noopener\">Normalize<\/a> \u0111ang \u1edf phi\u00ean b\u1ea3n 7.0.0 v\u00e0 nh\u1eadn \u0111\u01b0\u1ee3c 30 ng\u00e0n sao tr\u00ean GitHub. N\u00f3 qu\u1ea3 th\u1ef1c r\u1ea5t ph\u1ed5 bi\u1ebfn. <\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Vi_vay_%E2%80%A6_chung_ta_co_the_chon_lua_kieu_reset_dung_khong\"><\/span>V\u00ec v\u1eady, &#8230; ch\u00fang ta c\u00f3 th\u1ec3 ch\u1ecdn l\u1ef1a ki\u1ec3u reset \u0111\u00fang kh\u00f4ng?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ch\u00fang ta \u0111\u00e3 th\u1ea5y r\u1ea5t nhi\u1ec1u c\u00e1ch kh\u00e1c nhau \u0111\u1ec3 reset CSS, v\u00e0 ch\u00fang ta c\u0169ng th\u1ea5y nh\u1eefng thay \u0111\u1ed5i n\u1ec1n t\u1ea3ng trong c\u00e1ch ti\u1ebfp c\u1eadn, v\u00ec th\u1ebf t\u00f4i ngh\u0129 s\u1ebd c\u00f4ng b\u1eb1ng khi n\u00f3i r\u1eb1ng reset CSS c\u00f3 th\u1ec3 c\u00f3 c\u00e1c t\u00f9y ch\u1ecdn ri\u00eang.<\/p>\n\n\n\n<p>H\u00e3y xem x\u00e9t m\u1ed9t s\u1ed1 \u0111\u1ecbnh h\u01b0\u1edbng nh\u00e9\u2026<\/p>\n\n\n\n<ul><li>Vi\u1ec7c reset c\u00f3 x\u1eed l\u00fd m\u1ecdi ph\u1ea7n t\u1eed c\u00f3 th\u1ec3 kh\u00f4ng? Ho\u1eb7c l\u00e0 m\u1ed9t t\u1eadp con c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed? L\u00e0m th\u1ebf n\u00e0o quy\u1ebft \u0111\u1ecbnh \u0111\u01b0\u1ee3c ph\u1ea7n t\u1eed n\u00e0o n\u00ean \u0111\u1ed9ng t\u1edbi, c\u00f2n c\u00e1i n\u00e0o th\u00ec kh\u00f4ng?<\/li><li>Nh\u1eefng thu\u1ed9c t\u00ednh n\u00e0o c\u1ea7n thay \u0111\u1ed5i? Ch\u1ec9 \u00e1p d\u1ee5ng v\u1edbi ph\u1ea7n t\u1eed c\u00f3 s\u1ef1 kh\u00e1c bi\u1ec7t khi <a href=\"https:\/\/kiencang.net\/kien-tra-website-tren-nhieu-browser\/\" target=\"_blank\" rel=\"noreferrer noopener\">test \u0111a tr\u00ecnh duy\u1ec7t (cross browser testing)<\/a>? Hay c\u00f3 c\u00e1c ti\u00eau ch\u00ed kh\u00e1c n\u1eefa, ch\u1eb3ng h\u1ea1n nh\u01b0 s\u1ef1 t\u01b0\u01a1ng \u0111\u1ed3ng v\u1edbi c\u00e1c y\u1ebfu t\u1ed1 kh\u00e1c m\u00e0 ch\u00fang ta c\u1ea7n thay \u0111\u1ed5i? C\u00f3 \u1ed4N kh\u00f4ng khi \u00e1p d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh m\u1edbi cho c\u00e1c ph\u1ea7n t\u1eed kh\u00f4ng g\u1eb7p v\u1ea5n \u0111\u1ec1 \u0111a tr\u00ecnh duy\u1ec7t nh\u00e2n danh t\u00ednh nh\u1ea5t qu\u00e1n v\u00e0 hi\u1ec7u qu\u1ea3 kh\u00f4ng?<\/li><li>B\u1ea1n c\u00f3 c\u1ed1 g\u1eafng duy tr\u00ec tinh th\u1ea7n c\u1ee7a style t\u00e1c nh\u00e2n ng\u01b0\u1eddi d\u00f9ng kh\u00f4ng? C\u00e1c gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh h\u1ee3p l\u00fd l\u00e0 g\u00ec?<\/li><li>B\u1ea1n c\u00f3 \u00e1p d\u1ee5ng b\u1ea5t k\u1ef3 thu\u1ed9c t\u00ednh n\u00e0o cho c\u00e1c ph\u1ea7n t\u1eed m\u00e0 kh\u00f4ng g\u1eb7p v\u1ea5n \u0111\u1ec1 v\u1ec1 \u0111a tr\u00ecnh duy\u1ec7t kh\u00f4ng, ch\u1eb3ng h\u1ea1n nh\u01b0 typographic m\u1eb7c \u0111\u1ecbnh ho\u1eb7c k\u00edch c\u1ee1 box?<\/li><li>B\u1ea1n c\u00f3 bao g\u1ed3m c\u00e1c l\u1edbp \u201ch\u1ed9p c\u00f4ng c\u1ee5\u201d cho c\u00e1c nhu c\u1ea7u chung kh\u00f4ng?&nbsp;Hay \u0111\u1ec3 \u0111\u00f3 cho c\u00e1c d\u1ef1 \u00e1n kh\u00e1c x\u1eed l\u00fd?<\/li><li>B\u1ea1n c\u00f3 \u0111\u01b0a v\u00e0o c\u00e1c l\u1edbp &#8220;toolbox&#8221; cho nhu c\u1ea7u chung kh\u00f4ng? Hay \u0111\u1ec3 \u0111\u00f3 cho c\u00e1c d\u1ef1 \u00e1n kh\u00e1c m\u00e0 l\u00fac n\u00e0o c\u1ea7n t\u1edbi m\u1edbi x\u1eed l\u00fd;<\/li><li>B\u1ea1n c\u00f3 lo l\u1eafng v\u1ec1 k\u00edch th\u01b0\u1edbc c\u1ee7a file reset kh\u00f4ng?<\/li><li>B\u1ea1n c\u00f3 s\u1eed d\u1ee5ng b\u1ed9 ti\u1ec1n x\u1eed l\u00fd (preprocessor) hay b\u1ea5t k\u1ef3 c\u00f4ng c\u1ee5 n\u00e0o kh\u00e1c kh\u00f4ng?<\/li><\/ul>\n\n\n\n<p>Gi\u1edd ch\u00fang ta h\u00e3y nh\u00ecn v\u00e0o <a href=\"http:\/\/cssreset.com\/scripts\/vanilla-css-un-reset\/\" target=\"_blank\" rel=\"noreferrer noopener\">Vanilla CSS Un-Reset<\/a>. C\u00f3 r\u1ea5t nhi\u1ec1u t\u00f9y ch\u1ecdn \u1edf \u0111\u00e2y, n\u00f3 b\u1eaft \u0111\u1ea7u v\u1edbi \u00fd t\u01b0\u1edfng l\u00e0 thi\u1ebft l\u1eadp l\u1ea1i style cho ph\u1ea7n t\u1eed sau khi b\u1ea1n lo\u1ea1i b\u1ecf style c\u1ee7a n\u00f3 th\u00f4ng qua reset. N\u00f3 thi\u1ebft l\u1eadp font ch\u1eef body \u1edf k\u00edch c\u1ee1 pt, thi\u1ebft l\u1eadp ng\u0103n x\u1ebfp font ch\u1eef monospaces r\u1ea5t c\u1ee5 th\u1ec3, bao g\u1ed3m selector ol, m\u1ed9t clearfix, v\u00e0 c\u00e1c l\u1edbp tr\u1ee3 gi\u00fap c\u0103n ch\u1ec9nh. T\u00f4i kh\u00f4ng ph\u00e1n x\u00e9t. M\u1ecdi ng\u01b0\u1eddi t\u1ea1o ra c\u00e1i g\u00ec \u0111\u00f3 \u0111\u1ec3 kh\u1eafc ph\u1ee5c c\u00e1c r\u1eafc r\u1ed1i cho ch\u00ednh m\u00ecnh, v\u00e0 t\u00f4i tin ch\u1eafc r\u1eb1ng \u0111i\u1ec1u n\u00e0y c\u00f3 \u00edch cho s\u00e1ng t\u1ea1o. Ch\u00fang ta c\u00f3 th\u1ec3 th\u1ea5y c\u00e1c t\u00f9y ch\u1ecdn c\u00f3 v\u1ebb \u0111\u1eb9p c\u1ee7a ri\u00eang n\u00f3.<\/p>\n\n\n\n<p>B\u00e2y gi\u1edd h\u00e3y nh\u00ecn v\u00e0o file <a href=\"https:\/\/github.com\/jgthms\/minireset.css\" target=\"_blank\" rel=\"noreferrer noopener\">MiniReset.css<\/a>. R\u1ea5t kh\u00e1c nhau! C\u00e1c \u00fd ki\u1ebfn ho\u00e0n to\u00e0n kh\u00e1c nhau nh\u01b0 v\u1eady \u0111\u1ea5y.<\/p>\n\n\n\n<p>Jonathan Neal \u0111\u00e3 t\u1ea1o m\u1ed9t file reset c\u00f3 t\u00ean&nbsp;<a href=\"https:\/\/jonathantneal.github.io\/sanitize.css\/\" target=\"_blank\" rel=\"noreferrer noopener\">santize.css<\/a>&nbsp;r\u1ea5t r\u00f5 r\u00e0ng v\u1ec1 c\u00e1c t\u00f9y ch\u1ecdn \u200b\u200bc\u1ee7a n\u00f3.&nbsp;T\u00ecm ki\u1ebfm t\u1eeb \u201copinionated\u201d trong m\u00e3 ngu\u1ed3n v\u00e0 b\u1ea1n s\u1ebd th\u1ea5y n\u00f3 \u0111\u1ebfn 19 l\u1ea7n.&nbsp;T\u1ea5t c\u1ea3 c\u00e1c l\u1ef1a ch\u1ecdn m\u00e0 Jonathan \u0111\u01b0a ra d\u1ef1a tr\u00ean nghi\u00ean c\u1ee9u, v\u00e0 \u0111i\u1ec1u n\u00e0y d\u01b0\u1eddng nh\u01b0 l\u00e0 c\u00e1ch th\u1ef1c h\u00e0nh t\u1ed1t nh\u1ea5t trong th\u1ebf gi\u1edbi hi\u1ec7n \u0111\u1ea1i. V\u00e0 kh\u00f4ng nghi ng\u1edd g\u00ec n\u1eefa, ch\u00fang ph\u1ea3n \u1ea3nh nh\u1eefng g\u00ec m\u00e0 anh \u1ea5y c\u1ea7n v\u00e0 mu\u1ed1n reset l\u1ea1i.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><em>\/*\n * Remove the text shadow on text selections (opinionated).\n * 1. Restore the coloring undone by defining the text shadow (opinionated).\n *\/<\/em>\n\n::-moz-selection {\n\tbackground-color: #b3d4fc; <em>\/* 1 *\/<\/em>\n\tcolor: #000000; <em>\/* 1 *\/<\/em>\n\ttext-shadow: none;\n}\n\n::selection {\n\tbackground-color: #b3d4fc; <em>\/* 1 *\/<\/em>\n\tcolor: #000000; <em>\/* 1 *\/<\/em>\n\ttext-shadow: none;\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tu_%E2%80%9Creset%E2%80%9D\"><\/span><a href=\"https:\/\/css-tricks.com\/reboot-resets-reasoning\/#the-word-reset\"><\/a>T\u1eeb &#8220;reset&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00e1 nh\u00e2n t\u00f4i ngh\u0129 r\u1eb1ng s\u1ebd h\u1eefu \u00edch khi ngh\u0129 v\u1ec1 t\u1ea5t c\u1ea3 ch\u00fang d\u01b0\u1edbi c\u00f9ng m\u1ed9t thu\u1eadt ng\u1eef chung v\u00e0 ch\u1ec9 c\u1ea7n nh\u1eadn th\u1ee9c \u0111\u01b0\u1ee3c s\u1ef1 kh\u00e1c bi\u1ec7t v\u1ec1 l\u00fd lu\u1eadn.&nbsp;Tuy nhi\u00ean, Normalize c\u1ed1 \u00fd t\u00e1ch ch\u00ednh n\u00f3 ra:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>M\u1ed9t gi\u1ea3i ph\u00e1p thay th\u1ebf hi\u1ec7n \u0111\u1ea1i, s\u1eb5n s\u00e0ng cho HTML5 \u0111\u1ec3 thay th\u1ebf cho reset CSS<\/p><\/blockquote>\n\n\n\n<p>Sanizing t\u1ef1 g\u1ecdi b\u1ea3n th\u00e2n l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n CSS v\u00e0 kh\u00f4ng s\u1eed d\u1ee5ng t\u1eeb \u201creset\u201d \u1edf b\u1ea5t k\u1ef3 \u0111\u00e2u ngo\u1ea1i tr\u1eeb ph\u1ea7n tr\u00edch d\u1eabn l\u1ea1i t\u1eeb Meyer.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Reboot\"><\/span><a href=\"https:\/\/css-tricks.com\/reboot-resets-reasoning\/#reboot\"><\/a>Reboot<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Reboot r\u1ea5t th\u00fa v\u1ecb, c\u00f3 l\u1ebd l\u00e0 v\u00ec n\u00f3 l\u00e0 tay ch\u01a1i m\u1edbi nh\u1ea5t trong l\u0129nh v\u1ef1c n\u00e0y.&nbsp;L\u1ecbch s\u1eed c\u1ee7a n\u00f3 b\u1eaft \u0111\u1ea7u t\u1eeb n\u0103m 2015, c\u00f3 th\u1ec3 li\u00ean quan \u0111\u1ebfn vi\u1ec7c Bootstrap 4 suy gi\u1ea3m sau Bootstrap 3. Reboot kh\u00f4ng c\u00f3 repo ri\u00eang, n\u00f3 l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a Bootstrap.&nbsp;\u0110\u00e2y l\u00e0&nbsp;<a href=\"https:\/\/github.com\/twbs\/bootstrap\/blob\/v4-dev\/scss\/_reboot.scss\" target=\"_blank\" rel=\"noreferrer noopener\">t\u1ec7p tr\u1ef1c ti\u1ebfp<\/a>&nbsp;v\u00e0&nbsp;<a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/content\/reboot\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u00e0i li\u1ec7u<\/a>&nbsp;.<\/p>\n\n\n\n<p>C\u00e1ch h\u1ecd ngh\u0129 v\u1ec1 n\u00f3 th\u1eadt th\u00fa v\u1ecb:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Reboot \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng d\u1ef1a tr\u00ean Normalize, cung c\u1ea5p nhi\u1ec1u ph\u1ea7n t\u1eed HTML v\u1edbi c\u00e1c phong c\u00e1ch h\u01a1i c\u1ed1 ch\u1ea5p b\u1eb1ng c\u00e1ch ch\u1ec9 s\u1eed d\u1ee5ng c\u00e1c b\u1ed9 ch\u1ecdn ph\u1ea7n t\u1eed.\u00a0T\u1ea1o ki\u1ec3u b\u1ed5 sung ch\u1ec9 \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n v\u1edbi c\u00e1c l\u1edbp.\u00a0V\u00ed d\u1ee5, ch\u00fang t\u00f4i reboot m\u1ed9t s\u1ed1 style c\u1ee7a th\u1ebb\u00a0<code>&lt;table><\/code> v\u1edbi n\u1ec1n \u0111\u01a1n gi\u1ea3n v\u00e0 c\u0103n b\u1ea3n h\u01a1n v\u00e0 sau \u0111\u00f3 cung c\u1ea5p\u00a0<code>.table<\/code>,\u00a0<code>.table-bordered<\/code> v\u00e0 m\u1ed9t s\u1ed1 c\u00e1i kh\u00e1c n\u1eefa<\/p><\/blockquote>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 c\u00f3 m\u1ed9t l\u1edbp th\u1ef1c hi\u1ec7n t\u1ea1o ki\u1ec3u, nh\u01b0ng n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng reset, b\u1ea1n kh\u00f4ng ph\u1ea3i qu\u00e1 t\u1ea3i l\u1edbp \u0111\u00f3 v\u1edbi c\u00e1c ki\u1ec3u \u0111\u1eb7t l\u1ea1i \u0111\u1ec3 x\u1eed l\u00fd c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 t\u00ednh nh\u1ea5t qu\u00e1n tr\u00ean nhi\u1ec1u tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><em>\/\/<\/em>\n<em>\/\/ Tables<\/em>\n<em>\/\/<\/em>\n\ntable {\n  border-collapse: collapse; <em>\/\/ Prevent double borders<\/em>\n}\n\ncaption {\n  padding-top: $table-cell-padding;\n  padding-bottom: $table-cell-padding;\n  color: $text-muted;\n  text-align: left;\n  caption-side: bottom;\n}\n\nth {\n  <em>\/\/ Matches default `&lt;td&gt;` alignment by inheriting from the `&lt;body&gt;`, or the<\/em>\n  <em>\/\/ closest parent with a set `text-align`.<\/em>\n  text-align: inherit;\n}<\/code><\/pre>\n\n\n\n<p>N\u00f3 ch\u1eafc ch\u1eafn l\u00e0 c\u1ed1 ch\u1ea5p, nh\u01b0ng khi k\u1ebft h\u1ee3p v\u1edbi Bootstrap th\u00ec l\u1ea1i r\u1ea5t \u1ed5n.\u00a0Th\u1ef1c t\u1ebf l\u00e0 n\u00f3 \u0111\u01b0\u1ee3c ch\u00f4n s\u00e2u trong Bootstrap l\u00e0 t\u00edn hi\u1ec7u kh\u00e1 t\u1ed1t cho th\u1ea5y reset CSS n\u00e0y \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf cho th\u1ebf gi\u1edbi \u0111\u00f3, ch\u1ee9 kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 th\u1ea3 v\u00e0o trong b\u1ea5t k\u1ef3 d\u1ef1 \u00e1n n\u00e0o.\u00a0<\/p>\n\n\n\n<p>N\u00f3i th\u00eam l\u00e0, t\u00f4i \u0111\u00e3 c\u1ed1 g\u1eafng h\u1ebft s\u1ee9c \u0111\u1ec3\u00a0<a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/YrbNGP.css\" target=\"_blank\" rel=\"noreferrer noopener\">bi\u00ean d\u1ecbch m\u1ed9t phi\u00ean b\u1ea3n CSS \u0111\u01a1n gi\u1ea3n h\u01a1n c\u1ee7a n\u00f3 \u1edf \u0111\u00e2y<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tinh_chinh_reset_dua_tren_ho_tro_cua_trinh_duyet\"><\/span><a href=\"https:\/\/css-tricks.com\/reboot-resets-reasoning\/#tailoring-a-reset-based-on-browser-support\"><\/a>Tinh ch\u1ec9nh reset d\u1ef1a tr\u00ean h\u1ed7 tr\u1ee3 c\u1ee7a tr\u00ecnh duy\u1ec7t<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ch\u1eebng n\u00e0o ch\u00fang ta v\u1eabn n\u00f3i v\u1ec1 qu\u00e1 kh\u1ee9 v\u00e0 t\u01b0\u01a1ng lai c\u1ee7a reset, th\u00ec c\u1ea7n ph\u1ea3i nh\u1eafc l\u1ea1i v\u1ec1&nbsp;<a href=\"https:\/\/css-tricks.com\/browserlist-good-idea\/\" target=\"_blank\" rel=\"noreferrer noopener\">Browserlist<\/a>, \u0111\u00e2y l\u00e0 m\u1ed9t \u0111\u1ecbnh d\u1ea1ng \u0111\u01b0\u1ee3c ti\u00eau chu\u1ea9n h\u00f3a \u0111\u1ec3 khai b\u00e1o nh\u1eefng tr\u00ecnh duy\u1ec7t \/ phi\u00ean b\u1ea3n n\u00e0o m\u00e0 m\u1ed9t d\u1ef1 \u00e1n h\u1ed7 tr\u1ee3.<\/p>\n\n\n\n<p>Reset c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng theo c\u00e1ch m\u00e0 t\u1eebng d\u00f2ng m\u00e3 \u1edf \u0111\u00f3 bi\u1ebft v\u00ec sao n\u00f3 n\u00ean \u1edf \u0111\u00f3.&nbsp;N\u00f3 bi\u1ebft ch\u00ednh x\u00e1c tr\u00ecnh duy\u1ec7t v\u00e0 phi\u00ean b\u1ea3n n\u00e0o c\u1ea7n h\u1ed7 tr\u1ee3.&nbsp;Sau \u0111\u00f3, n\u1ebfu c\u1ea5u h\u00ecnh danh s\u00e1ch tr\u00ecnh duy\u1ec7t cho th\u1ea5y r\u1eb1ng m\u1ed9t tr\u00ecnh duy\u1ec7t c\u1ee5 th\u1ec3 kh\u00f4ng c\u00f2n \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi d\u1ef1 \u00e1n n\u1eefa, CSS \u0111\u00f3 c\u00f3 th\u1ec3 b\u1ecb x\u00f3a \u0111i.<\/p>\n\n\n\n<p>\u0110\u00f3 l\u00e0 nh\u1eefng g\u00ec m\u00e0 d\u1ef1 \u00e1n&nbsp;<a href=\"https:\/\/github.com\/jonathantneal\/postcss-normalize\" target=\"_blank\" rel=\"noreferrer noopener\">PostCSS Normalize<\/a>&nbsp;c\u1ee7a Johnathan Neal \u0111ang l\u00e0m.<\/p>\n\n\n\n<p><em>(L\u01b0\u1ee3c d\u1ecbch t\u1eeb b\u00e0i vi\u1ebft Reboot, Resets, and Reasoning c\u1ee7a Chris Coyier, trang CSS-TRICKS)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>V\u00e0i l\u1eddi c\u1ee7a ng\u01b0\u1eddi d\u1ecbch: t\u00f4i b\u1eaft \u0111\u1ea7u ch\u00fa \u00fd \u0111\u1ebfn file reset.css khi tham kh\u1ea3o m\u1ed9t s\u1ed1 nh\u00f3m h\u1ed9i v\u1ec1 front-end tr\u00ean FB. R\u1ed3i th\u00ec khi th\u1ea5y s\u1ef1 kh\u00e1c bi\u1ec7t c\u1ee7a c\u00e1c tr\u00ecnh duy\u1ec7t v\u1ec1 c\u00e1ch render n\u1ed9i dung qua ph\u1ea7n ki\u1ec3m tra \u0111a tr\u00ecnh duy\u1ec7t (cross browser testing \/ nhi\u1ec1u n\u01a1i d\u1ecbch l\u00e0 &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229,230],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Reset CSS trong thi\u1ebft k\u1ebf web l\u00e0 g\u00ec v\u1eady? &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/reset-css-thiet-ke-web\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Reset CSS trong thi\u1ebft k\u1ebf web l\u00e0 g\u00ec v\u1eady? &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"V\u00e0i l\u1eddi c\u1ee7a ng\u01b0\u1eddi d\u1ecbch: t\u00f4i b\u1eaft \u0111\u1ea7u ch\u00fa \u00fd \u0111\u1ebfn file reset.css khi tham kh\u1ea3o m\u1ed9t s\u1ed1 nh\u00f3m h\u1ed9i v\u1ec1 front-end tr\u00ean FB. R\u1ed3i th\u00ec khi th\u1ea5y s\u1ef1 kh\u00e1c bi\u1ec7t c\u1ee7a c\u00e1c tr\u00ecnh duy\u1ec7t v\u1ec1 c\u00e1ch render n\u1ed9i dung qua ph\u1ea7n ki\u1ec3m tra \u0111a tr\u00ecnh duy\u1ec7t (cross browser testing \/ nhi\u1ec1u n\u01a1i d\u1ecbch l\u00e0 &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/reset-css-thiet-ke-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-11T08:28:07+00:00\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Reset CSS trong thi\u1ebft k\u1ebf web l\u00e0 g\u00ec v\u1eady? &#8226; Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/reset-css-thiet-ke-web\/","og_locale":"vi_VN","og_type":"article","og_title":"Reset CSS trong thi\u1ebft k\u1ebf web l\u00e0 g\u00ec v\u1eady? &#8226; Ki\u1ebfn c\u00e0ng","og_description":"V\u00e0i l\u1eddi c\u1ee7a ng\u01b0\u1eddi d\u1ecbch: t\u00f4i b\u1eaft \u0111\u1ea7u ch\u00fa \u00fd \u0111\u1ebfn file reset.css khi tham kh\u1ea3o m\u1ed9t s\u1ed1 nh\u00f3m h\u1ed9i v\u1ec1 front-end tr\u00ean FB. R\u1ed3i th\u00ec khi th\u1ea5y s\u1ef1 kh\u00e1c bi\u1ec7t c\u1ee7a c\u00e1c tr\u00ecnh duy\u1ec7t v\u1ec1 c\u00e1ch render n\u1ed9i dung qua ph\u1ea7n ki\u1ec3m tra \u0111a tr\u00ecnh duy\u1ec7t (cross browser testing \/ nhi\u1ec1u n\u01a1i d\u1ecbch l\u00e0 &hellip;","og_url":"https:\/\/kiencang.net\/reset-css-thiet-ke-web\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-09-11T08:28:07+00:00","author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"11 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/reset-css-thiet-ke-web\/","url":"https:\/\/kiencang.net\/reset-css-thiet-ke-web\/","name":"Reset CSS trong thi\u1ebft k\u1ebf web l\u00e0 g\u00ec v\u1eady? &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-09-11T08:28:07+00:00","dateModified":"2021-09-11T08:28:07+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/reset-css-thiet-ke-web\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/reset-css-thiet-ke-web\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/reset-css-thiet-ke-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Reset CSS trong thi\u1ebft k\u1ebf web l\u00e0 g\u00ec v\u1eady?"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14717"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=14717"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14717\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}