{"id":383323,"date":"2024-06-29T04:50:44","date_gmt":"2024-06-29T04:50:44","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=383323"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=383323","title":{"rendered":"<span>\u0418\u0441\u0442\u043e\u0440\u0438\u044f \u043e CSS-\u0441\u0431\u0440\u043e\u0441\u0430\u0445 \u0438 \u0432\u0441\u0435, \u0447\u0442\u043e \u043e \u043d\u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c. \u0415\u0449\u0435 \u0440\u0430\u0437 \u043e\u0431 \u044d\u0442\u043e\u043c<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u043e\u043b\u043d\u043e\u0435 ( \u0438\u043b\u0438 \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0435, \u043d\u0430\u0434\u0435\u044e\u0441\u044c) \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c CSS Reset<strong>\u00a0\u00a0<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a9b\/e47\/67d\/a9be4767d1a36b9a7dc3d4a6f51cdd85.png\" alt=\"\u0424\u043e\u0442\u043e Sasha \u2022 Stories \u043d\u0430 Unsplash\" title=\"\u0424\u043e\u0442\u043e Sasha \u2022 Stories \u043d\u0430 Unsplash\" width=\"2048\" height=\"1536\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a9b\/e47\/67d\/a9be4767d1a36b9a7dc3d4a6f51cdd85.png\"\/><figcaption>\u0424\u043e\u0442\u043e Sasha \u2022 Stories \u043d\u0430 Unsplash<\/figcaption><\/figure>\n<p>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0432\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435: \u043c\u0435\u043d\u044f \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u0438 CSS-\u0441\u0431\u0440\u043e\u0441\u044b \u043f\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435. \u042f \u0438\u043d\u0436\u0435\u043d\u0435\u0440-\u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u043d\u0442 \u043f\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u043c\u0443 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u0432\u0440\u0435\u043c\u044f \u043e\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e \u043d\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b.<\/p>\n<p>\u0412 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442, \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0441 \u043d\u0443\u043b\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u043f\u043e\u0434\u0440\u044f\u0434 \u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0432\u0448\u0438\u0441\u044c \u0441 \u043e\u0434\u043d\u0438\u043c\u0438 \u0438 \u0442\u0435\u043c\u0438 \u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u044f \u0432\u044b\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 &#171;<strong>\u0441\u0442\u0438\u043b\u044c \u0440\u0430\u0431\u043e\u0442\u044b<\/strong>&#171;, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u044c\u0441\u044f, \u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043c\u043e\u0435\u0433\u043e CSS-\u043a\u043e\u0434\u0430 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c &#171;<strong>\u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043b &#8212; \u0438 \u0433\u043e\u0442\u043e\u0432\u043e<\/strong>&#187; \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b\u0430 \u043c\u0435\u043d\u044f \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c. \u0422\u043e\u0433\u0434\u0430 \u044f \u0440\u0435\u0448\u0438\u043b\u0430 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443 <strong>\u0441\u0431\u0440\u043e\u0441\u043e\u0432<\/strong> \u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u0430 \u0432 \u043d\u0438\u0445 <strong>\u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u044e\u0430\u043d\u0441\u043e\u0432, \u0447\u0435\u043c \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0432\u043d\u0430\u0447\u0430\u043b\u0435<\/strong>.<\/p>\n<blockquote>\n<p><em>\u0427\u0435\u043c \u0442\u0449\u0430\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u0432\u044b \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0435\u0441\u044c (dev-ops, \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d\u044b, \u0431\u0430\u043d\u0434\u043b\u0438\u043d\u0433 \u0437\u0430\u043a\u0430\u0437\u043e\u0432) \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u0435 \u0432 \u0434\u043e\u043b\u0433\u043e\u0441\u0440\u043e\u0447\u043d\u043e\u0439 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0434\u043b\u044f reset.css \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0432\u0430\u043c \u0447\u0430\u0441\u044b \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0432\u0430\u0448\u0435\u0433\u043e CSS.<\/em><\/p>\n<\/blockquote>\n<p>\u042d\u0442\u043e \u043c\u043e\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043d\u0438\u0445 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0441\u0435\u043e\u0431\u044a\u0435\u043c\u043b\u044e\u0449\u0435\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0437\u043e\u0440.<\/p>\n<h4>\u041a\u043e\u0440\u0435\u043d\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442 \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043c\u0430\u043a\u0435\u0442 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0435\u0433\u043e \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443. <strong><em>\u042f \u0441\u043e\u0437\u0434\u0430\u043b\u0430 \u0444\u0435\u0439\u043a\u043e\u0432\u044b\u0439 \u043c\u0430\u043a\u0435\u0442 \u0432 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445.<\/em><\/strong><\/p>\n<p>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/eb0\/621\/ac4\/eb0621ac4d32d154f3bb57b5b91f1454.png\" alt=\"\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u0440\u0435\u0441\u0441-\u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0446\u0435\u043b\u0435\u0439  \" title=\"\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u0440\u0435\u0441\u0441-\u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0446\u0435\u043b\u0435\u0439  \" width=\"809\" height=\"2048\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/eb0\/621\/ac4\/eb0621ac4d32d154f3bb57b5b91f1454.png\"\/><figcaption>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u0440\u0435\u0441\u0441-\u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0446\u0435\u043b\u0435\u0439  <\/figcaption><\/figure>\n<p>\u0410 \u0432\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0431\u0435\u0437 \u0441\u0442\u0438\u043b\u0435\u0439, \u043f\u0440\u043e\u0441\u0442\u043e \u201c\u0433\u043e\u043b\u044b\u0439\u201d HTML.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f69\/e46\/b36\/f69e46b36134df8de4b0e6a6d3df611a.png\" width=\"1000\" height=\"625\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f69\/e46\/b36\/f69e46b36134df8de4b0e6a6d3df611a.png\"\/><figcaption><\/figcaption><\/figure>\n<blockquote>\n<p><em>\u041f\u043e \u043c\u0435\u0440\u0435 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u0438 CSS \u0432 \u0432\u0430\u0448 HTML. \u0421\u043e\u0437\u0434\u0430\u0432 \u0432\u0435\u0441\u044c \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b, \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0435\u0433\u043e \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0440\u0430\u0441\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0439.<\/em><\/p>\n<\/blockquote>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f7b\/4b7\/560\/f7b4b75604cdd3d8d59e7297317dd92e.png\" alt=\"\" title=\"\" width=\"1366\" height=\"278\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f7b\/4b7\/560\/f7b4b75604cdd3d8d59e7297317dd92e.png\"\/><figcaption><\/figcaption><\/figure>\n<blockquote>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0432\u0430\u043c \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b (\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0441\u0442\u0438\u043b\u0438 \u0444\u043e\u0440\u043c).<\/p>\n<\/blockquote>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cee\/26c\/3bd\/cee26c3bd94b9259cc4e56cb01b05a0a.png\" alt=\"\u041d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u0432 \u0442\u043e\u043c, \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442 \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0438\u043c \u0436\u0435 HTML \u0438 CSS \u043c\u0430\u043a\u0435\u0442\u043e\u043c, \u0431\u043e\u043b\u0435\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u2026\" title=\"\u041d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u0432 \u0442\u043e\u043c, \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442 \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0438\u043c \u0436\u0435 HTML \u0438 CSS \u043c\u0430\u043a\u0435\u0442\u043e\u043c, \u0431\u043e\u043b\u0435\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u2026\" width=\"1512\" height=\"820\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cee\/26c\/3bd\/cee26c3bd94b9259cc4e56cb01b05a0a.png\"\/><figcaption>\u041d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u0432 \u0442\u043e\u043c, \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442 \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0438\u043c \u0436\u0435 HTML \u0438 CSS \u043c\u0430\u043a\u0435\u0442\u043e\u043c, \u0431\u043e\u043b\u0435\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u2026<\/figcaption><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/626\/c35\/6d3\/626c356d3a000330bb62da0c06f91936.png\" alt=\"... \u0438 \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u043d\u0438 \u0432\u0438\u0434\u043d\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0445\" title=\"... \u0438 \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u043d\u0438 \u0432\u0438\u0434\u043d\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0445\" width=\"1000\" height=\"678\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/626\/c35\/6d3\/626c356d3a000330bb62da0c06f91936.png\"\/><figcaption>&#8230; \u0438 \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u043d\u0438 \u0432\u0438\u0434\u043d\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0445<\/figcaption><\/figure>\n<p>\u042d\u0442\u0438 \u043c\u0435\u043b\u043a\u0438\u0435 \u043d\u0435\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u0434\u0438\u0437\u0430\u0439\u043d \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. <strong>\u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e \u044d\u0442\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043b\u044e\u0434\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u0431\u0440\u043e\u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a: \u0447\u0442\u043e\u0431\u044b \u0441\u0430\u0439\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/strong><\/p>\n<blockquote>\n<p><em>\u041d\u0438\u043a\u043e\u0433\u0434\u0430 \u0435\u0449\u0435 \u043c\u044b \u043d\u0435 \u0438\u043c\u0435\u043b\u0438 \u0442\u0430\u043a \u043c\u0430\u043b\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u0430\u0433\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043b\u044e\u0434\u0438 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0442 \u043d\u0430\u0448\u0438 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u044b, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0443 \u043d\u0430\u0441 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0435\u0449\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u044b.<\/em><\/p>\n<\/blockquote>\n<p><em>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 25\/09\/2020:<\/em><\/p>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u043c \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435\u043c \u043e\u0431 \u044d\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442 &#171;<a href=\"https:\/\/jgthms.com\/web-design-in-4-minutes\/\"><u>\u0412\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d \u0437\u0430 4 \u043c\u0438\u043d\u0443\u0442\u044b<\/u><\/a>&#171;, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441, \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0443\u0442\u044b\u0439 \u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c \u0437\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0434\u0432\u0430 \u0434\u0435\u0441\u044f\u0442\u0438\u043b\u0435\u0442\u0438\u044f (\u044f \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u044e \u043e \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430\u0445).<\/p>\n<p><em>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 25\/09\/2020:<\/em><\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0431\u0443\u0434\u0435\u0442 <a href=\"https:\/\/codepen.io\/MartijnCuppens\/pen\/MXojmw\"><u>Codepen<\/u><\/a>, \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u201c<strong>\u0444\u0443\u0442\u043f\u0440\u0438\u043d\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/strong>\u201d:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6151abcb122cc8f6386967bd\" data-style=\"\" id=\"6151abcb122cc8f6386967bd\" width=\"\"><\/div>\n<h4>\u0427\u0442\u043e \u0441 \u044d\u0442\u0438\u043c \u0434\u0435\u043b\u0430\u0442\u044c?<\/h4>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1c0\/6ca\/490\/1c06ca490d504fddcfda657942d15115.png\" alt=\"\u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043d\u0430\u0431\u0438\u0440\u0430\u0435\u0442\u0435 \u0432 \u0413\u0443\u0433\u043b\u0435 \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u044d\u0442\u043e\u0433\u043e, \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442\u0435 \u043d\u0430 \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u0438 \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442\u0435. \u0412\u044b \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e \u043c\u043d\u043e\u0433\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c, \u0438 \u0432\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443!\" title=\"\u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043d\u0430\u0431\u0438\u0440\u0430\u0435\u0442\u0435 \u0432 \u0413\u0443\u0433\u043b\u0435 \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u044d\u0442\u043e\u0433\u043e, \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442\u0435 \u043d\u0430 \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u0438 \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442\u0435. \u0412\u044b \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e \u043c\u043d\u043e\u0433\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c, \u0438 \u0432\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443!\" width=\"1000\" height=\"523\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1c0\/6ca\/490\/1c06ca490d504fddcfda657942d15115.png\"\/><figcaption>\u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043d\u0430\u0431\u0438\u0440\u0430\u0435\u0442\u0435 \u0432 \u0413\u0443\u0433\u043b\u0435 \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u044d\u0442\u043e\u0433\u043e, \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442\u0435 \u043d\u0430 \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u0438 \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442\u0435. \u0412\u044b \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e \u043c\u043d\u043e\u0433\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c, \u0438 \u0432\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443!<\/figcaption><\/figure>\n<p><strong>\u042d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0442\u0435\u043c\u0430 \u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430\u044f \u0434\u043b\u044f \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432 (\u043e\u0434\u043d\u0430 \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 \u0432\u0435\u0449\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0438\u0437\u0443\u0447\u0430\u0435\u0442\u0435, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c CSS), \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0435\u0435 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0443\u043f\u0443\u0441\u043a\u0430\u044e\u0442 \u0438\u0437 \u0432\u0438\u0434\u0443.<\/strong><\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u044f \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0441\u0431\u0440\u043e\u0441\u0430 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043d\u0435\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u044f \u0443\u0436\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u043e\u0442\u043b\u0430\u0434\u043a\u0443 CSS.<\/p>\n<h3>\u0417\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u0435\u043d \u0441\u0431\u0440\u043e\u0441 CSS?<\/h3>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0432\u0432\u043e\u0434\u0438\u0442\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e HTML-\u0442\u0435\u0433\u043e\u0432 \u0432 \u0444\u0430\u0439\u043b .<em>html<\/em>. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u044d\u0442\u043e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a01\/4fb\/8e6\/a014fb8e6188033cf1d75b61b5dc0bc4.png\" alt=\"\u041d\u0435\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u043d\u0435\u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 HTML-\u0444\u0430\u0439\u043b, url: https:\/\/jsbin.com\/tesaxiqeti\/edit?html,output\" title=\"\u041d\u0435\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u043d\u0435\u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 HTML-\u0444\u0430\u0439\u043b, url: https:\/\/jsbin.com\/tesaxiqeti\/edit?html,output\" width=\"1000\" height=\"222\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a01\/4fb\/8e6\/a014fb8e6188033cf1d75b61b5dc0bc4.png\"\/><figcaption>\u041d\u0435\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u043d\u0435\u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 HTML-\u0444\u0430\u0439\u043b, url: https:\/\/jsbin.com\/tesaxiqeti\/edit?html,output<\/figcaption><\/figure>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432 \u0444\u0430\u0439\u043b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0432\u044b, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u0435\u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u043f\u043e\u043c\u0435\u0449\u0435\u043d \u0432 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0415\u0449\u0435 \u043e\u0434\u043d\u0438\u043c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c <a href=\"http:\/\/info.cern.ch\/hypertext\/WWW\/TheProject.html\"><u>\u0441\u0430\u043c\u044b\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442<\/u><\/a>. \u041b\u044e\u0431\u043e\u043f\u044b\u0442\u043d\u043e, \u0447\u0442\u043e <strong>\u043d\u0430 \u043d\u0435\u043c \u043d\u0435\u0442 \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e CSS. \u0411\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e. \u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043d\u0435\u0442.<\/strong><\/p>\n<blockquote>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0447\u0442\u043e-\u0442\u043e, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439? \u041c\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u043a \u044d\u0442\u043e\u043c\u0443, \u043d\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0435 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>\u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u043f\u0440\u0438 \u043f\u043e\u043b\u043d\u043e\u043c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 CSS \u0432\u044b, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u044d\u043a\u0440\u0430\u043d.<\/p>\n<\/blockquote>\n<p>\u0415\u0441\u043b\u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 <a href=\"https:\/\/www.w3.org\/TR\/CSS2\/cascade.html\"><u>\u043f\u043e\u043d\u044f\u0442\u043d\u043e<\/u><\/a>, \u0442\u043e <strong>\u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0435\u0441\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 &#171;\u0430\u0433\u0435\u043d\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f&#187;<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a \u043a\u0430\u0436\u0434\u043e\u0439 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041f\u043e\u0447\u0435\u043c\u0443? \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0442\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <a href=\"https:\/\/medium.com\/@luisvieira_gmr\/understanding-the-critical-rendering-path-rendering-pages-in-1-second-735c6e45b47a\"><strong><u>\u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0443\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430<\/u><\/strong><\/a> \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u0434\u0435\u043b\u0430\u043b \u043f\u0430\u0440\u0441\u0438\u043d\u0433 DOM, \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0430\u0432\u0438\u043b CSS \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b HTML \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<blockquote>\n<p><em>DOM \u0438 CSSOM \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u0435\u0434\u0438\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043c\u0430\u043a\u0435\u0442\u0430.<\/em><\/p>\n<\/blockquote>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/382\/385\/493\/382385493699d830a50b7f8ddad51110.png\" width=\"700\" height=\"335\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/382\/385\/493\/382385493699d830a50b7f8ddad51110.png\"\/><figcaption><\/figcaption><\/figure>\n<p><strong>\u0422\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0435\u0440\u0435\u0432\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/strong><\/p>\n<ol>\n<li>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0443 \u0434\u0435\u0440\u0435\u0432\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0437\u043b\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0440\u0438\u0441\u0443\u0439\u0442\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0443\u0437\u043b\u044b \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<\/li>\n<\/ol>\n<p><strong>\u041f\u0440\u0438 \u043f\u043e\u043b\u043d\u043e\u043c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 CSS \u0432\u044b, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u044d\u043a\u0440\u0430\u043d<\/strong>. \u041a\u0430\u043a \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u0432 <a href=\"https:\/\/www.w3.org\/TR\/CSS21\/cascade.html#cascade\"><strong><u>\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/u><\/strong><\/a>:<\/p>\n<p><em>&#171;<\/em><strong><em>\u0410\u0433\u0435\u043d\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/em><\/strong><em>: <\/em><a href=\"https:\/\/www.w3.org\/TR\/CSS2\/conform.html#conformance\"><em><u>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0430\u0433\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/u><\/em><\/a><em> \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e (\u0438\u043b\u0438 \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f \u0442\u0430\u043a, \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u043e\u043d\u0438 \u0435\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442). \u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0430\u0433\u0435\u043d\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u044f\u0437\u044b\u043a\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u044e\u0442 \u043e\u0431\u0449\u0438\u043c \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 EM \u0432 HTML \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430). \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 HTML \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0430 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <\/em><a href=\"https:\/\/www.w3.org\/TR\/CSS2\/sample.html\"><em><u>\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f HTML<\/u><\/em><\/a><em>.<\/em><\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0430\u0433\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u0435\u043b\u0430\u044e\u0442 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. [&#8230;]<\/em><\/p>\n<p><em>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 \u0430\u0432\u0442\u043e\u0440\u0441\u043a\u0438\u0445 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438\u043c\u0435\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u0439 \u0432\u0435\u0441, \u0447\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0445 \u0441\u0442\u0438\u043b\u0435\u0439. \u041e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b &#171;!important&#187; \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u044b\u0439. \u0412\u0441\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0438 \u0430\u0432\u0442\u043e\u0440\u0441\u043a\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\u043c\u0435\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u0439 \u0432\u0435\u0441, \u0447\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 UA&#8217;s (\u0430\u0433\u0435\u043d\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f) \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e&#187;.<\/em><\/p>\n<blockquote>\n<p><em>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438\u043c\u0435\u044e\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 (\u043d\u0435\u0447\u0442\u043e <\/em><a href=\"https:\/\/www.w3.org\/TR\/CSS2\/sample.html\"><em><u>\u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435<\/u><\/em><\/a><em>), \u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0443\u0441\u0442\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430\u0448 HTML-\u043a\u043e\u0434 \u0431\u0435\u0437 \u043a\u043e\u0434\u0430 CSS.<\/em><\/p>\n<\/blockquote>\n<pre><code class=\"css\">html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre   { display: block; unicode-bidi: embed } li              { display: list-item } head            { display: none } table           { display: table } tr              { display: table-row } thead           { display: table-header-group } tbody           { display: table-row-group } tfoot           { display: table-footer-group } col             { display: table-column } colgroup        { display: table-column-group } td, th          { display: table-cell } caption         { display: table-caption } th              { font-weight: bolder; text-align: center } caption         { text-align: center } body            { margin: 8px } h1              { font-size: 2em; margin: .67em 0 } h2              { font-size: 1.5em; margin: .75em 0 } h3              { font-size: 1.17em; margin: .83em 0 } h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu            { margin: 1.12em 0 } h5              { font-size: .83em; margin: 1.5em 0 } h6              { font-size: .75em; margin: 1.67em 0 } h1, h2, h3, h4, h5, h6, b, strong          { font-weight: bolder } blockquote      { margin-left: 40px; margin-right: 40px } i, cite, em, var, address    { font-style: italic } pre, tt, code, kbd, samp       { font-family: monospace } pre             { white-space: pre } button, textarea, input, select   { display: inline-block } big             { font-size: 1.17em } small, sub, sup { font-size: .83em } sub             { vertical-align: sub } sup             { vertical-align: super } table           { border-spacing: 2px; } thead, tbody, tfoot           { vertical-align: middle } td, th, tr      { vertical-align: inherit } s, strike, del  { text-decoration: line-through } hr              { border: 1px inset } ol, ul, dir, menu, dd        { margin-left: 40px } ol              { list-style-type: decimal } ol ul, ul ol, ul ul, ol ol    { margin-top: 0; margin-bottom: 0 } u, ins          { text-decoration: underline } br:before       { content: \"\\A\"; white-space: pre-line } center          { text-align: center } :link, :visited { text-decoration: underline } :focus          { outline: thin dotted invert }  \/* Begin bidirectionality settings (do not change) *\/ BDO[DIR=\"ltr\"]  { direction: ltr; unicode-bidi: bidi-override } BDO[DIR=\"rtl\"]  { direction: rtl; unicode-bidi: bidi-override }  *[DIR=\"ltr\"]    { direction: ltr; unicode-bidi: embed } *[DIR=\"rtl\"]    { direction: rtl; unicode-bidi: embed }  @media print {   h1            { page-break-before: always }   h1, h2, h3,   h4, h5, h6    { page-break-after: avoid }   ul, ol, dl    { page-break-before: avoid } }<\/code><\/pre>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043b\u0435\u0433\u043a\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 <a href=\"https:\/\/stackoverflow.com\/questions\/6867254\/browsers-default-css-for-html-elements\"><u>\u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432<\/u><\/a> \u0438\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0437\u0434\u0435\u0441\u044c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u043e\u043d\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0435.<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/chromium.googlesource.com\/chromium\/blink\/+\/master\/Source\/core\/css\/html.css\"><u>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 Chromium UA<\/u><\/a> &#8212; Google Chrome \u0438 Opera<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/dxr.mozilla.org\/mozilla-central\/source\/layout\/style\/res\/html.css\"><u>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 Mozilla UA<\/u><\/a> &#8212; Firefox<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/trac.webkit.org\/browser\/trunk\/Source\/WebCore\/css\/html.css\"><u>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 WebKit UA<\/u><\/a> &#8212; Safari<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b22\/5ca\/944\/b225ca9449bc05c21836f6acb0e0662f.png\" alt=\"https:\/\/bitsofco.de\/a-look-at-css-resets-in-2018\/\" title=\"https:\/\/bitsofco.de\/a-look-at-css-resets-in-2018\/\" width=\"657\" height=\"172\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b22\/5ca\/944\/b225ca9449bc05c21836f6acb0e0662f.png\"\/><figcaption>https:\/\/bitsofco.de\/a-look-at-css-resets-in-2018\/<\/figcaption><\/figure>\n<h4>\u0418\u0442\u0430\u043a, \u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c CSS \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e?<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0437\u0443\u0447\u0438\u043b\u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 , \u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430. \u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u0438, \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c <a href=\"https:\/\/stackoverflow.com\/questions\/6867254\/browsers-default-css-for-html-elements\/6867287#6867287\"><u>\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432<\/u><\/a> \u043d\u0430\u0448\u0438\u043c\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<blockquote>\n<p><em>\u0422\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430.<\/em><\/p>\n<\/blockquote>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 <a href=\"https:\/\/cssreset.com\/what-is-a-css-reset\/\"><u>cssreset.com<\/u><\/a>:<\/p>\n<p><em>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0434\u0430\u0442\u044c\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c, \u0437\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e &#8212; \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e. \u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e\u0439 \u0431\u0430\u0437\u044b, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0431\u0440\u043e\u0441\u0430, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u0432\u0430\u0448\u0435\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0437\u043d\u0430\u044f, \u0447\u0442\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0432 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 HTML \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u0430\u0441 \u043d\u0435 \u043a\u043e\u0441\u043d\u0443\u0442\u0441\u044f!<\/em><\/p>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0432\u044b, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442\u0435 \u043a\u043e\u043d\u0442\u0440\u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442:<\/p>\n<p><em>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044e\u0442, \u0447\u0442\u043e \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 &#8212; \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u0435\u0433\u043e \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c. \u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043e \u0441\u0431\u0440\u043e\u0441\u043e\u043c CSS \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u0442\u043e \u0441\u0443\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u0430 \u0441\u0442\u0430\u043d\u0435\u0442 \u044f\u0441\u043d\u0430:<\/em><\/p>\n<pre><code class=\"css\">\/* CSS Reset *\/ #element { margin:0; padding:0; font-size:100%; line-height:1; } \/* #element rules: *\/ #element { margin:5px 0 10px; font-size:13px; line-height:1.5; }<\/code><\/pre>\n<p><em>\u0412\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u043e\u043d\u0438 \u043f\u0440\u0430\u0432\u044b &#8212; \u044d\u0442\u043e \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442 \u0443\u0441\u0438\u043b\u0438\u044f \u0438 \u0432\u0440\u0435\u043c\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043e\u0434\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f. \u041c\u043d\u043e\u0433\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u0441\u0447\u0438\u0442\u0430\u044e\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u0442 \u043f\u0440\u0438\u043d\u0446\u0438\u043f &#171;DRY&#187; (Don&#8217;t Repeat Yourself. \u041d\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0439\u0441\u044f).<\/em><\/p>\n<p><strong><em>\u041e\u0434\u043d\u0430\u043a\u043e \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u043f\u0435\u0440\u0435\u0432\u0435\u0448\u0438\u0432\u0430\u044e\u0442 \u0432\u0441\u0435 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438, \u0438 \u043d\u0435 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0431\u043e\u043b\u0435\u0435 \u043b\u043e\u0433\u0438\u0447\u043d\u043e\u043c\u0443 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044e: \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u0432\u043e\u0439 CSS Reset, \u0441\u0432\u043e\u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 (\u0435\u0441\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e), \u0430 \u0437\u0430\u0442\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u0435 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043f\u0440\u0438\u044f\u0442\u043d\u043e \u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435.<\/em><\/strong><\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 DOM-\u0434\u0435\u0440\u0435\u0432\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443, \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0438\u0434\u0435\u0435\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e.<\/p>\n<blockquote>\n<p><em>\u0413\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0435\u0435 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0431\u0440\u043e\u0441 CSS, \u0447\u0435\u043c \u0435\u0433\u043e \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c.<\/em><\/p>\n<p><em>\u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <\/em><a href=\"https:\/\/getbootstrap.com\/\"><em><u>Bootstrap<\/u><\/em><\/a><em>, <\/em><a href=\"https:\/\/foundation.zurb.com\/\"><em><u>Foundation<\/u><\/em><\/a><em>, <\/em><a href=\"https:\/\/materializecss.com\/\"><em><u>Materialize<\/u><\/em><\/a><em>, \u0442\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435: \u043e\u043d\u0438 \u0443\u0436\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0431\u0440\u043e\u0441\u044b.<\/em><\/p>\n<p><em>\u041f\u043e \u0441\u0443\u0442\u0438, \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u0448 \u0441\u0430\u0439\u0442 \u0431\u044b\u043b \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u043c.<\/em><\/p>\n<\/blockquote>\n<p><strong>\u041a\u0430\u043a \u043d\u0430\u0439\u0442\u0438 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0441\u0431\u0440\u043e\u0441\u0430?<\/strong><\/p>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043d\u0435 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e \u0442\u043e\u043c, \u041a\u0410\u041a\u0418\u0415 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441\u0431\u0440\u043e\u0441\u0430 \u043e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0432 \u0441\u0432\u043e\u0435\u043c \u043a\u043e\u0434\u0435. \u041e\u043d\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u044e\u0442 \u043f\u0435\u0440\u0432\u0443\u044e \u043f\u043e\u043f\u0430\u0432\u0448\u0443\u044e\u0441\u044f \u0438 \u0438\u0434\u0443\u0442 \u0434\u0430\u043b\u044c\u0448\u0435. \u041d\u043e \u043a\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u043e \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0441\u0431\u0440\u043e\u0441\u0430 CSS \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043f\u0435\u0440\u0435\u0434 \u0432\u0430\u043c\u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432, \u0434\u0430\u0436\u0435 \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u0432\u044b \u0434\u0443\u043c\u0430\u0435\u0442\u0435.<\/p>\n<p>\u041e\u0434\u0438\u043d \u0438\u0437 \u043f\u0438\u043e\u043d\u0435\u0440\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 \u0441\u0431\u0440\u043e\u0441\u0430 CSS, <a href=\"http:\/\/meyerweb.com\/eric\/tools\/css\/reset\/\"><u>\u042d\u0440\u0438\u043a \u041c\u0435\u0439\u0435\u0440<\/u><\/a>, \u0435\u0449\u0435 \u0432 2004 \u0433\u043e\u0434\u0443 \u0441\u043e\u0437\u0434\u0430\u043b \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 Reset, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u0430\u0445 \u0441\u0430\u0439\u0442\u043e\u0432. \u0411\u0435\u0437 \u0441\u043e\u043c\u043d\u0435\u043d\u0438\u044f, \u044d\u0442\u043e \u0441\u0430\u043c\u0430\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441\u0431\u0440\u043e\u0441\u0430 \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043b\u044e\u0434\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0435\u0435 \u0432 \u043d\u0435\u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 <a href=\"https:\/\/cssreset.com\/which-css-reset-should-i-use\/\"><u>\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044e \u041c\u0435\u0439\u0435\u0440\u0430 \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e\u0433\u043e<\/u><\/a>:<\/p>\n<blockquote>\n<p><em>&#171;\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u043d\u043e\u0433\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043b\u044e\u0431\u043e\u0439 \u0441\u0442\u0430\u0440\u044b\u0439 CSS Reset \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u0410 \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e&#187;.<\/em><\/p>\n<\/blockquote>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1d4\/0b2\/6e5\/1d40b26e5cfd7450e9a70c8d78024f4f.png\" alt=\"\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a: https:\/\/css-tricks.com\/poll-results-what-css-reset-do-you-use\/\" title=\"\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a: https:\/\/css-tricks.com\/poll-results-what-css-reset-do-you-use\/\" width=\"1000\" height=\"491\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1d4\/0b2\/6e5\/1d40b26e5cfd7450e9a70c8d78024f4f.png\"\/><figcaption>\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a: https:\/\/css-tricks.com\/poll-results-what-css-reset-do-you-use\/<\/figcaption><\/figure>\n<p>\u042d\u0440\u0438\u043a \u041c\u0435\u0439\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b \u0442\u0435\u0445\u043d\u0438\u043a\u0443 \u0441\u0431\u0440\u043e\u0441\u0430 CSS (\u0441\u043c. <a href=\"https:\/\/cssreset.com\/\/scripts\/eric-meyer-reset-css\/\"><u>&#171;\u0421\u0431\u0440\u043e\u0441 CSS&#187; \u042d\u0440\u0438\u043a\u0430 \u041c\u0435\u0439\u0435\u0440\u0430<\/u><\/a>), <a href=\"https:\/\/meyerweb.com\/eric\/tools\/css\/reset\/\"><u>\u043f\u0440\u044f\u043c\u043e \u0437\u0430\u044f\u0432\u0438\u043b, \u0447\u0442\u043e<\/u><\/a>:<\/p>\n<blockquote>\n<p><em>&#171;\u0421\u0442\u0438\u043b\u0438 \u0441\u0431\u0440\u043e\u0441\u0430, \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0437\u0434\u0435\u0441\u044c, \u043d\u0430\u043c\u0435\u0440\u0435\u043d\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043e\u0431\u0449\u0438\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0438\u043b\u0438 \u0444\u043e\u043d\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <\/em><code>body<\/code><em>. \u042f \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u0415\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u0442\u044c, \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0438 \u0438\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0432\u0430\u0448\u0438\u043c\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0412\u043d\u0435\u0441\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0441\u0441\u044b\u043b\u043a\u0438 \u0438 \u0442.\u0434.&#187;.<\/em><\/p>\n<p><em>\u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u044d\u0442\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430, \u0430 \u043d\u0435 \u0441\u0430\u043c\u043e\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0439 &#171;\u0447\u0435\u0440\u043d\u044b\u0439 \u044f\u0449\u0438\u043a&#187; \u0441 \u043d\u0435\u043f\u0440\u0438\u043a\u043e\u0441\u043d\u043e\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e.<\/em>\u00a0<\/p>\n<\/blockquote>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0441\u0431\u0440\u043e\u0441, <strong>\u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 &#171;\u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e&#187;<\/strong>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0435, \u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0430\u0440\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0431\u0440\u043e\u0441\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u0440\u0442\u0438\u0442\u044c CSS \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<h4>\u041c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0441\u0431\u0440\u043e\u0441\u0430 CSS<\/h4>\n<p>\u0415\u0449\u0435 \u0432 2007 \u0433\u043e\u0434\u0443 \u0414\u0436\u0435\u0444\u0444 \u0421\u0442\u0430\u0440\u0440 \u0441\u043e\u0431\u0440\u0430\u043b <a href=\"https:\/\/perishablepress.com\/a-killer-collection-of-global-css-reset-styles\/\"><u>\u0432\u043e\u0435\u0434\u0438\u043d\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0441\u0431\u0440\u043e\u0441\u0430 CSS<\/u><\/a>. \u0421 \u0442\u0435\u0445 \u043f\u043e\u0440 \u043a\u043e\u0435-\u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0438 \u0443\u043b\u0443\u0447\u0448\u0438\u043b\u043e\u0441\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f <strong>\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044e \u0432\u0430\u043c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441\u0431\u0440\u043e\u0441\u0430 \u043e\u0442 \u0441\u0430\u043c\u043e\u0439 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u0434\u043e \u0441\u0430\u043c\u043e\u0439 \u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c, \u0432\u044b\u0431\u0438\u0440\u0430\u0439\u0442\u0435 \u0441\u0432\u043e\u044e \u043b\u044e\u0431\u0438\u043c\u0443\u044e<\/strong>. \u0421\u043a\u043e\u0440\u043e \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0438\u0441\u0442\u0438\u043d\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c<\/p>\n<blockquote>\n<p><em>\u0412\u0441\u0435 CSS-\u0441\u0431\u0440\u043e\u0441\u044b \u0441\u0430\u043c\u043e\u0443\u0432\u0435\u0440\u0435\u043d\u043d\u044b.<\/em><\/p>\n<\/blockquote>\n<p>\u041a\u0430\u043a \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u044d\u0442\u043e\u0442 \u0444\u0430\u043a\u0442 \u0443\u0436\u0435 \u0431\u044b\u043b \u043e\u0442\u043c\u0435\u0447\u0435\u043d \u041a\u0440\u0438\u0441\u043e\u043c \u041a\u043e\u0439\u0435\u0440\u043e\u043c \u0432 \u0435\u0433\u043e <a href=\"https:\/\/css-tricks.com\/reboot-resets-reasoning\/\"><u>\u0441\u0442\u0430\u0442\u044c\u0435<\/u><\/a> CSS-Tricks. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e\u043c, \u044f \u0441\u043e\u0437\u0434\u0430\u043b\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044e (\u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u043d\u0438\u0436\u0435), \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043d\u0430 \u0438\u0434\u0435\u0435 <a href=\"https:\/\/twitter.com\/dbox?lang=en\"><u>\u0414\u044d\u043d\u0438\u0435\u043b\u0430 \u0411\u043e\u043a\u0441\u0430<\/u><\/a>:<\/p>\n<p><a href=\"https:\/\/codepen.io\/riittagirl\/embed\/JjjvpzV?height=265&amp;theme-id=light&amp;default-tab=result\"><u>CodePen Embed &#8212; Reset.css Test<\/u><\/a><\/p>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1: \u0421\u0431\u0440\u043e\u0441 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 &#8216;*&#8217;<\/strong><\/p>\n<p><em>URL: <\/em><a href=\"https:\/\/cssreset.com\/scripts\/universal-selector-css-reset\/\"><em><u>https:\/\/cssreset.com\/scripts\/universal-selector-css-reset\/<\/u><\/em><\/a><\/p>\n<p>\u042d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u044b\u0439 <a href=\"https:\/\/cssreset.com\/scripts\/universal-selector-css-reset\/\"><u>\u0441\u043f\u043e\u0441\u043e\u0431 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0441\u0431\u0440\u043e\u0441<\/u><\/a>.<\/p>\n<pre><code class=\"xml\">* {   margin: 0;   padding: 0; }<\/code><\/pre>\n<p>\u0438\u043b\u0438 \u0435\u0449\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 &#171;\u043f\u0440\u0438\u0447\u0443\u0434\u043b\u0438\u0432\u0430\u044f&#187; \u0432\u0435\u0440\u0441\u0438\u044f \u044d\u0442\u043e\u0433\u043e:<\/p>\n<pre><code class=\"xml\">* {   margin: 0;   padding: 0;   border: 0;    outline: 0; }<\/code><\/pre>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043d\u0438\u043a\u0430\u043a\u0438\u0435 \u0441\u0431\u0440\u043e\u0441\u044b \u0432\u043e\u043e\u0431\u0449\u0435, \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u0448\u0430\u0435\u0442 \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u043f\u043e\u043b\u044f \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b. <strong>\u042d\u0442\u043e \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442 \u0432\u0430\u043c \u043c\u043d\u043e\u0433\u043e \u0443\u0441\u0438\u043b\u0438\u0439 \u043f\u043e \u043f\u043e\u0434\u0441\u0442\u0440\u043e\u0439\u043a\u0435 CSS \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c.<\/strong><\/p>\n<p><strong>NB: \u0421\u0431\u0440\u043e\u0441 \u043a\u043e\u043d\u0442\u0443\u0440\u043e\u0432 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043d\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442, \u0441\u0442\u0438\u043b\u0438 \u0444\u043e\u043a\u0443\u0441\u0430 \u043d\u0435 \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f (\u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u0445 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438).<\/strong><\/p>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2: Tantek Celik`s undohtml.css<\/strong><\/p>\n<p><em>URL: <\/em><a href=\"https:\/\/cssreset.com\/scripts\/undohtml-css-tantek-celik\/\"><em><u>https:\/\/cssreset.com\/scripts\/undohtml-css-tantek-celik\/<\/u><\/em><\/a><\/p>\n<p>\u041e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0431\u0440\u043e\u0441 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441\u043e \u0441\u0431\u0440\u043e\u0441\u043e\u043c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 &#8216;*&#8217;.<\/p>\n<p>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u0439\u0442\u0438, \u0434\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d 2004 \u0433\u043e\u0434\u043e\u043c, \u043d\u043e \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f HTML \u0441 \u0442\u0435\u0445 \u043f\u043e\u0440 \u043c\u0430\u043b\u043e \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c. \u042d\u0442\u043e\u0442 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0430\u043c\u044b\u0439 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0441\u0431\u0440\u043e\u0441 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u043e\u0432 (<code>:link,:visited<\/code>). \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u044f \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0434\u043b\u044f \u0442\u0435\u0433\u043e\u0432 &lt;div>.<\/p>\n<pre><code class=\"css\">\/* undohtml.css *\/ \/* (CC) 2004 Tantek Celik. Some Rights Reserved.                  *\/ \/* http:\/\/creativecommons.org\/licenses\/by\/2.0                     *\/ \/* This style sheet is licensed under a Creative Commons License. *\/ \/* Purpose: undo some of the default styling of common (X)HTML browsers *\/ \/* link underlines tend to make hypertext less readable,     because underlines obscure the shapes of the lower halves of words *\/ :link,:visited { text-decoration: none; } \/* no list-markers by default, since lists are used more often for semantics *\/ ul,ol { list-style: none; } \/* avoid browser default inconsistent heading font-sizes *\/ \/* and pre\/code too *\/ h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } \/* remove the inconsistent (among browsers) default ul,ol padding or margin  *\/ \/* the default spacing on headings does not match nor align with     normal interline spacing at all, so let's get rid of it. *\/ \/* zero out the spacing around pre, form, body, html, p, blockquote as well *\/ \/* form elements are oddly inconsistent, and not quite CSS emulatable. *\/ \/*  nonetheless strip their margin and padding as well *\/ ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin:0; padding:0 } \/* whoever thought blue linked image borders were a good idea? *\/ a img,:link img,:visited img { border:none } \/* de-italicize address *\/ address { font-style:normal } \/* more varnish stripping as necessary... *\/<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0442\u043e\u0442 \u0436\u0435 \u0441\u0431\u0440\u043e\u0441 \u0431\u0435\u0437 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432:<\/p>\n<pre><code class=\"css\">:link,:visited {    text-decoration: none;  } ul, ol {    list-style: none;  } h1,h2,h3,h4,h5,h6,pre,code {    font-size: 1em;  } ul,ol,li, h1,h2,h3,h4,h5,h6, pre,body,html,p,blockquote, form,fieldset,input {    margin:0;    padding:0;  } a img, :link img, :visited img {   border:none;  } address {    font-style: normal; }<\/code><\/pre>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 3: MiniReset.css<\/strong><\/p>\n<p><em>URL: <\/em><a href=\"https:\/\/jgthms.com\/minireset.css\/\"><em><u>https:\/\/jgthms.com\/minireset.css\/<\/u><\/em><\/a><\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. <em>\u041e\u0434\u043d\u0430 \u0438\u0437 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u0435\u0449\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0437\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 &#8212; border-box.<\/em> \u041f\u043e\u0445\u043e\u0436\u0435, \u0447\u0442\u043e \u044d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 Github:<\/p>\n<div class=\"embed_link\">\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/opengraph.githubassets.com\/8109416b4a65c8d59093454284eed1cac27ecf7a23d3932c3ed0c07c2d873a1f\/jgthms\/minireset.css&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>minireset.css\/minireset.css at master \u00b7 jgthms\/minireset.css<\/span><\/div>\n<p><a href=\"https:\/\/github.com\/jgthms\/minireset.css\/blob\/master\/minireset.css\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed__caption-link\">github.com<\/a><\/div>\n<\/div>\n<pre><code class=\"css\">\/*! minireset.css v0.0.3 | MIT License | github.com\/jgthms\/minireset.css *\/ html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6 {   margin: 0;     padding: 0; } h1,h2,h3,h4,h5,h6 {   font-size: 100%;     font-weight: normal; }  ul {   list-style: none; }  button,input,select,textarea {   margin: 0; }  html {   box-sizing: border-box; }  *, *:before, *:after {    box-sizing: inherit; } img,embed,iframe,object,audio,video {   height: auto;     max-width: 100%; }  iframe {   border: 0; }  table {   border-collapse: collapse;   border-spacing: 0; } td,th {   padding: 0;     text-align: left; }<\/code><\/pre>\n<p>\u042f \u0431\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0432 \u0432\u0430\u0448\u0435\u043c \u043a\u043e\u0434\u0435 \u0434\u043b\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u0441\u0431\u0440\u043e\u0441\u0430 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 4: \u0421\u0431\u0440\u043e\u0441 CSS \u042d\u0440\u0438\u043a\u0430 \u041c\u0435\u0439\u0435\u0440\u0430<\/strong><\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0434\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0434\u043e \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, <strong>reset.css<\/strong> \u0432 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 &#8212; \u0441\u0431\u0440\u043e\u0441\u0430 \u042d\u0440\u0438\u043a\u0430 \u041c\u0435\u0439\u0435\u0440\u0430. \u041a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u043b\u0438 \u0440\u0430\u043d\u0435\u0435, \u0434\u0430\u0436\u0435 \u0441\u0430\u043c \u042d\u0440\u0438\u043a \u043d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442 \u043e\u0431\u044b\u0433\u0440\u044b\u0432\u0430\u0442\u044c \u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0431\u0440\u043e\u0441 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0432\u0430\u0448\u0438\u043c\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n<p><strong>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0435\u0433\u0438 \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u043c \u0441\u0431\u0440\u043e\u0441\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u043b\u0438<\/strong>, \u043e\u0434\u043d\u0430\u043a\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u043f\u0440\u0438\u0447\u0438\u043d \u0435\u0433\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043b\u044e\u0434\u0438 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u043a \u043d\u0435\u043c\u0443, \u0438 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u043e\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0441\u0432\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0435\u043f\u043b\u043e\u0445\u043e. \u042f \u0431\u044b \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b \u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434\u0430\u043b\u044c\u0448\u0435 \u043e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0430\u0440\u044b\u0435 \u0442\u0435\u0433\u0438, \u0437\u0430\u0447\u0435\u043c \u043e\u043d\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0443\u0436\u043d\u044b?<\/p>\n<pre><code class=\"css\">\/* http:\/\/meyerweb.com\/eric\/tools\/css\/reset\/     v2.0 | 20110126    License: none (public domain) *\/  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {   margin: 0;   padding: 0;   border: 0;   font-size: 100%;   font: inherit;   vertical-align: baseline; } \/* HTML5 display-role reset for older browsers *\/ article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {   display: block; } body {   line-height: 1; } ol, ul {   list-style: none; } blockquote, q {   quotes: none; } blockquote:before, blockquote:after, q:before, q:after {   content: '';   content: none; } table {   border-collapse: collapse;   border-spacing: 0; }<\/code><\/pre>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 5: HTML5 Doctor CSS Reset<\/strong><\/p>\n<p><em>URL: <\/em><a href=\"http:\/\/html5doctor.com\/html-5-reset-stylesheet\/\"><em><u>http:\/\/html5doctor.com\/html-5-reset-stylesheet\/<\/u><\/em><\/a><\/p>\n<blockquote>\n<p><em>\u041e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 Reset CSS \u042d\u0440\u0438\u043a\u0430 \u041c\u0435\u0439\u0435\u0440\u0430, \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 HTML5 Reset \u043e\u0442 <\/em><a href=\"http:\/\/html5doctor.com\/html-5-reset-stylesheet\/\"><em><u>HTML5Doctor.com<\/u><\/em><\/a><em> \u043f\u0440\u0438\u0437\u0432\u0430\u043d\u0430 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u0443 \u0434\u043b\u044f \u043b\u044e\u0431\u044b\u0445 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0445 \u043d\u043e\u0432\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b HTML 5, \u0443\u043b\u0443\u0447\u0448\u0430\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u0434\u0430\u043b\u044f\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 HTML 4.<\/em><\/p>\n<\/blockquote>\n<p>\u041a\u0430\u043a \u043e\u043f\u0438\u0441\u0430\u043d\u043e <a href=\"https:\/\/cssreset.com\/scripts\/html5-doctor-css-reset-stylesheet\/\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a>, \u043e\u043d \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 \u043f\u0435\u0447\u0430\u043b\u044c\u043d\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u043c Reset CSS. <strong>\u0414\u0430\u043d\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043f\u043e\u0432\u0435\u0440\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Reset<\/strong> \u0438 \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a<\/p>\n<p> 1. \u0423\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u0432 \u0442\u0435\u0433\u0430\u0445 (\u0441\u0442\u0430\u0440\u044b\u0435 \u0442\u0435\u0433\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u044b \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u043e\u0432\u044b\u0435):<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/539\/591\/e81\/539591e814682e1682838679c6fe1615.png\" alt=\"\u0441\u0431\u0440\u043e\u0441 (reset) \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 html doctor - \u0440\u044f\u0434\u043e\u043c, \u0431\u043e\u043a \u043e \u0431\u043e\u043a\" title=\"\u0441\u0431\u0440\u043e\u0441 (reset) \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 html doctor - \u0440\u044f\u0434\u043e\u043c, \u0431\u043e\u043a \u043e \u0431\u043e\u043a\" width=\"1000\" height=\"542\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/539\/591\/e81\/539591e814682e1682838679c6fe1615.png\"\/><figcaption>\u0441\u0431\u0440\u043e\u0441 (reset) \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 html doctor &#8212; \u0440\u044f\u0434\u043e\u043c, \u0431\u043e\u043a \u043e \u0431\u043e\u043a<\/figcaption><\/figure>\n<p> 2. \u041d\u043e\u0432\u044b\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f: \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043a \u0442\u0435\u0433\u0430\u043c &lt;a> \u0438 &lt;input><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/07e\/1bd\/997\/07e1bd9972edaaf479038f099e66b648.png\" alt=\"HTMLdoctor \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u0441\u0431\u0440\u043e\u0441\u043e\u043c\" title=\"HTMLdoctor \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u0441\u0431\u0440\u043e\u0441\u043e\u043c\" width=\"1000\" height=\"532\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/07e\/1bd\/997\/07e1bd9972edaaf479038f099e66b648.png\"\/><figcaption>HTMLdoctor \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u0441\u0431\u0440\u043e\u0441\u043e\u043c<\/figcaption><\/figure>\n<p><strong>NB: \u041e\u0441\u0442\u0435\u0440\u0435\u0433\u0430\u0439\u0442\u0435\u0441\u044c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u043d \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0430\u043c\u043e\u0443\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0432 \u0441\u0432\u043e\u0435\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438!<\/strong><\/p>\n<pre><code class=\"css\">\/*  html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http:\/\/richclarkdesign.com  Twitter: @rich_clark *\/  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {     margin: 0;     padding: 0;     border: 0;     outline: 0;     font-size: 100%;     vertical-align: baseline;     background: transparent; }  body {     line-height:1; }  article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {      display: block; }  nav ul {     list-style: none; }  blockquote, q {     quotes: none; }  blockquote:before, blockquote:after, q:before, q:after {     content:'';     content:none; }  a {     margin:0;     padding:0;     font-size:100%;     vertical-align: baseline;     background: transparent; }  \/* change colours to suit your needs *\/ ins {     background-color:#ff9;     color:#000;     text-decoration:none; }  \/* change colours to suit your needs *\/ mark {     background-color:#ff9;     color:#000;      font-style:italic;     font-weight:bold; }  del {     text-decoration: line-through; }  abbr[title], dfn[title] {     border-bottom:1px dotted;     cursor:help; }  table {     border-collapse:collapse;     border-spacing:0; }  \/* change border colour to suit your needs *\/ hr {     display:block;     height:1px;     border:0;        border-top:1px solid #cccccc;     margin:1em 0;     padding:0; }  input, select {     vertical-align:middle; }<\/code><\/pre>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 6: Yahoo Reset CSS<\/strong><\/p>\n<p><em>URL: <\/em><a href=\"https:\/\/cssreset.com\/scripts\/yahoo-css-reset-yui-3\/\"><em><u>https:\/\/cssreset.com\/scripts\/yahoo-css-reset-yui-3\/<\/u><\/em><\/a><\/p>\n<p><strong>YUI 3 CSS Reset \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043a\u0430\u043a \u0441\u0431\u0440\u043e\u0441 \u0434\u043b\u044f <\/strong><a href=\"https:\/\/developer.yahoo.com\/yui\/3\/\"><strong><u>Yahoo! YUI 3<\/u><\/strong><\/a> &#8212; \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 JavaScript \/ CSS \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u044f, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u0430\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0442\u0438\u0432\u043d\u043e Yahoo! Developer Network, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u043e\u043c\u0430\u0448\u043d\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b Yahoo! <strong>\u042d\u0442\u043e\u0442 \u0441\u0431\u0440\u043e\u0441 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043e\u0431\u0449\u0438\u043c \u0438, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043d\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u0448\u0438\u0440\u043e\u043a\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441\u0431\u0440\u043e\u0441\u0430 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/strong><\/p>\n<pre><code class=\"css\">\/** * YUI 3.5.0 - reset.css (http:\/\/developer.yahoo.com\/yui\/3\/cssreset\/) * https:\/\/cssreset.com\/ * Copyright 2012 Yahoo! Inc. All rights reserved. * http:\/\/yuilibrary.com\/license\/ *\/ \/* TODO will need to remove settings on HTML since we can't namespace it. TODO with the prefix, should I group by selector or property for weight savings? *\/ html{  color:#000;   background:#FFF; } \/* TODO remove settings on BODY since we can't namespace it. *\/ \/* TODO test putting a class on HEAD. - Fails on FF. *\/ body, div, dl, dt, dd, ul, ol, li,  h1, h2, h3, h4, h5, h6,  pre, code,  form, fieldset, legend, input, textarea,  p, blockquote,  th, td {   margin:0;   padding:0; } table {   border-collapse:collapse;   border-spacing:0; } fieldset, img {   border:0; } \/* TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit\u2026 *\/ address, caption, cite, code, dfn, em, strong, th, var {   font-style:normal;   font-weight:normal; } ol, ul {   list-style:none; } caption, th {   text-align:left; } h1, h2, h3, h4, h5, h6 {   font-size:100%;   font-weight:normal; } q:before, q:after {   content:''; } abbr, acronym {   border:0;   font-variant:normal; } \/* to preserve line-height and selector appearance *\/ sup {   vertical-align:text-top; } sub {   vertical-align:text-bottom; } input, textarea, select {   font-family: inherit;   font-size: inherit;   font-weight: inherit; } \/*to enable resizing for IE*\/ input, textarea, select {   *font-size:100%; } \/*because legend doesn't inherit in IE *\/ legend {   color:#000; } \/* YUI CSS Detection Stamp *\/ #yui3-css-stamp.cssreset { display: none; }<\/code><\/pre>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 7: Tripoli CSS Reset<\/strong><\/p>\n<p><em>URL: <\/em><a href=\"https:\/\/cssreset.com\/scripts\/tripoli-css-reset-david-hellsing\/\"><em><u>https:\/\/cssreset.com\/scripts\/tripoli-css-reset-david-hellsing\/<\/u><\/em><\/a><\/p>\n<p><a href=\"https:\/\/perishablepress.com\/a-killer-collection-of-global-css-reset-styles\/\"><u>\u0421\u0431\u0440\u043e\u0441 Tripoli \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0441\u044f \u0435\u0449\u0435 \u0432 2007 \u0433\u043e\u0434\u0443<\/u><\/a>. \u042d\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 \u0448\u0440\u0438\u0444\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430. \u041e\u043d\u0430 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442, \u0430 \u0441\u043a\u043e\u0440\u0435\u0435 \u0441\u0442\u043e\u0438\u0442 \u043d\u0430 \u0441\u0432\u043e\u0438\u0445 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u0445. \u0425\u043e\u0442\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0435\u0433\u0438 (&lt;blink>, &lt;nobr>) \u0432 \u043d\u0435\u0439 \u0443\u0441\u0442\u0430\u0440\u0435\u043b\u0438, \u0432 \u0446\u0435\u043b\u043e\u043c \u043e\u043d\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u0431\u0440\u043e\u0441\u0430. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439.<strong> \u041e\u0434\u043d\u0430\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 !important &#8212; \u043f\u043b\u043e\u0445\u0430\u044f \u0438\u0434\u0435\u044f. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c, \u043d\u043e \u0432\u0441\u0435 \u0435\u0449\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c.<\/strong><\/p>\n<pre><code class=\"css\">* { margin: 0;  padding: 0;  text-decoration: none;  font-size: 1em;  outline: none; }  code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font: inherit;  font-size: 1em;  white-space: normal; }  dfn, i, cite, var, address, em { font-style: normal; }  th, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: normal; }  a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border: none; }  table { border-collapse: collapse;  border-spacing: 0; }  caption, th, td, center { text-align: left;  vertical-align: top; }  body { line-height: 1;  background: white;  color: black; }  q { quotes: \"\" \"\"; }  ul, ol, dir, menu { list-style: none; }  sub, sup { vertical-align: baseline; }  a { color: inherit; }  hr { display: none; } \/* we don't need a visual hr in layout *\/  font { color: inherit !important;  font: inherit !important;  color: inherit !important; } \/* disables some nasty font attributes in standard browsers *\/  marquee { overflow: inherit !important;  -moz-binding: none; }  blink { text-decoration: none; }  nobr { white-space: normal; }<\/code><\/pre>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 8: Normalize.css<\/strong><\/p>\n<p><em>URL: <\/em><a href=\"http:\/\/nicolasgallagher.com\/about-normalize-css\/\"><em><u>http:\/\/nicolasgallagher.com\/about-normalize-css\/<\/u><\/em><\/a><\/p>\n<p><em>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 \u0441\u0431\u0440\u043e\u0441\u0430\u043c CSS. &#8230;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 <\/em><a href=\"https:\/\/twitter.com\/\"><em><u>Twitter<\/u><\/em><\/a><em>, <\/em><a href=\"https:\/\/tweetdeck.twitter.com\/\"><em><u>TweetDeck<\/u><\/em><\/a><em>, <\/em><a href=\"https:\/\/github.com\/\"><em><u>GitHub<\/u><\/em><\/a><em>, <\/em><a href=\"https:\/\/soundcloud.com\/\"><em><u>Soundcloud<\/u><\/em><\/a><em>, <\/em><a href=\"http:\/\/www.theguardian.com\/uk?view=mobile\"><em><u>Guardian<\/u><\/em><\/a><em>, <\/em><a href=\"https:\/\/medium.com\/\"><em><u>Medium<\/u><\/em><\/a><em>, <\/em><a href=\"https:\/\/www.gov.uk\/\"><em><u>GOV.UK<\/u><\/em><\/a><em>, <\/em><a href=\"http:\/\/getbootstrap.com\/\"><em><u>Bootstrap<\/u><\/em><\/a><em>, <\/em><a href=\"http:\/\/html5boilerplate.com\/\"><em><u>HTML5 Boilerplate<\/u><\/em><\/a><em> \u0438 \u043c\u043d\u043e\u0433\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445.<\/em><\/p>\n<blockquote>\n<p><em>\u041c\u043d\u043e\u0433\u0438\u0435 \u043f\u044b\u0442\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0443 Reset CSS \u042d\u0440\u0438\u043a\u0430 \u041c\u0435\u0439\u0435\u0440\u0430 \u0438 Normalize.css, \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 Normalize.css &#8212; \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u0442\u0438\u043f \u0441\u0431\u0440\u043e\u0441\u0430.<\/em><\/p>\n<\/blockquote>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bc2\/eb9\/796\/bc2eb97962270fd50914bde782b56c80.png\" width=\"2702\" height=\"1212\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bc2\/eb9\/796\/bc2eb97962270fd50914bde782b56c80.png\"\/><figcaption><\/figcaption><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3b3\/ec9\/5bb\/3b3ec95bbbc564871d370a9ab62f7dfa.png\" alt=\"\u041f\u0435\u0440\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: MiniReset, \u0432\u0442\u043e\u0440\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 Normalize\" title=\"\u041f\u0435\u0440\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: MiniReset, \u0432\u0442\u043e\u0440\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 Normalize\" width=\"2680\" height=\"1252\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3b3\/ec9\/5bb\/3b3ec95bbbc564871d370a9ab62f7dfa.png\"\/><figcaption>\u041f\u0435\u0440\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: MiniReset, \u0432\u0442\u043e\u0440\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 Normalize<\/figcaption><\/figure>\n<p>\u041f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441\u043e \u0441\u0431\u0440\u043e\u0441\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f &#171;\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e&#187; \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e (\u0432\u0441\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0440\u0430\u0433\u0438 &#8212; 16 px, \u0432\u0441\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b (margins) &#8212; 0), Normalize.css \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 &#8212; \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\u043c \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0432\u0441\u0435\u0445 \u0442\u0435\u0433\u043e\u0432 \u0438\u043c.<\/p>\n<p>\u041e\u043d \u0441\u043a\u043e\u0440\u0435\u0435 <a href=\"http:\/\/nicolasgallagher.com\/about-normalize-css\/\"><u>\u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0442\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0438 \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445<\/u><\/a>. \u041e\u0442\u0441\u044e\u0434\u0430 \u0438 \u0432\u0441\u0435 \u044d\u0442\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0446\u0438\u0444\u0440\u044b. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043e\u0434\u043d\u0430 \u0438\u0437 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u043e\u0440\u043e\u043d \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u044b \u043f\u043e \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0431\u043e\u0442\u044f\u0442\u0441\u044f \u043e \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0432\u0441\u0435\u043c\u0438 \u043d\u0435\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u0434\u0430\u0436\u0435 \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041f\u0440\u0438\u044f\u0442\u043d\u044b\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u044d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <a href=\"https:\/\/github.com\/necolas\/normalize.css\"><u>\u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f<\/u><\/a>.<\/p>\n<pre><code class=\"css\">\/*! normalize.css v8.0.1 | MIT License | github.com\/necolas\/normalize.css *\/  \/* Document    ========================================================================== *\/  \/**  * 1. Correct the line height in all browsers.  * 2. Prevent adjustments of font size after orientation changes in iOS.  *\/  html {   line-height: 1.15; \/* 1 *\/   -webkit-text-size-adjust: 100%; \/* 2 *\/ }  \/* Sections    ========================================================================== *\/  \/**  * Remove the margin in all browsers.  *\/  body {   margin: 0; }  \/**  * Render the `main` element consistently in IE.  *\/  main {   display: block; }  \/**  * Correct the font size and margin on `h1` elements within `section` and  * `article` contexts in Chrome, Firefox, and Safari.  *\/  h1 {   font-size: 2em;   margin: 0.67em 0; }  \/* Grouping content    ========================================================================== *\/  \/**  * 1. Add the correct box sizing in Firefox.  * 2. Show the overflow in Edge and IE.  *\/  hr {   box-sizing: content-box; \/* 1 *\/   height: 0; \/* 1 *\/   overflow: visible; \/* 2 *\/ }  \/**  * 1. Correct the inheritance and scaling of font size in all browsers.  * 2. Correct the odd `em` font sizing in all browsers.  *\/  pre {   font-family: monospace, monospace; \/* 1 *\/   font-size: 1em; \/* 2 *\/ }  \/* Text-level semantics    ========================================================================== *\/  \/**  * Remove the gray background on active links in IE 10.  *\/  a {   background-color: transparent; }  \/**  * 1. Remove the bottom border in Chrome 57-  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.  *\/  abbr[title] {   border-bottom: none; \/* 1 *\/   text-decoration: underline; \/* 2 *\/   text-decoration: underline dotted; \/* 2 *\/ }  \/**  * Add the correct font weight in Chrome, Edge, and Safari.  *\/  b, strong {   font-weight: bolder; }  \/**  * 1. Correct the inheritance and scaling of font size in all browsers.  * 2. Correct the odd `em` font sizing in all browsers.  *\/  code, kbd, samp {   font-family: monospace, monospace; \/* 1 *\/   font-size: 1em; \/* 2 *\/ }  \/**  * Add the correct font size in all browsers.  *\/  small {   font-size: 80%; }  \/**  * Prevent `sub` and `sup` elements from affecting the line height in  * all browsers.  *\/  sub, sup {   font-size: 75%;   line-height: 0;   position: relative;   vertical-align: baseline; }  sub {   bottom: -0.25em; }  sup {   top: -0.5em; }  \/* Embedded content    ========================================================================== *\/  \/**  * Remove the border on images inside links in IE 10.  *\/  img {   border-style: none; }  \/* Forms    ========================================================================== *\/  \/**  * 1. Change the font styles in all browsers.  * 2. Remove the margin in Firefox and Safari.  *\/  button, input, optgroup, select, textarea {   font-family: inherit; \/* 1 *\/   font-size: 100%; \/* 1 *\/   line-height: 1.15; \/* 1 *\/   margin: 0; \/* 2 *\/ }  \/**  * Show the overflow in IE.  * 1. Show the overflow in Edge.  *\/  button, input { \/* 1 *\/   overflow: visible; }  \/**  * Remove the inheritance of text transform in Edge, Firefox, and IE.  * 1. Remove the inheritance of text transform in Firefox.  *\/  button, select { \/* 1 *\/   text-transform: none; }  \/**  * Correct the inability to style clickable types in iOS and Safari.  *\/  button, [type=\"button\"], [type=\"reset\"], [type=\"submit\"] {   -webkit-appearance: button; }  \/**  * Remove the inner border and padding in Firefox.  *\/  button::-moz-focus-inner, [type=\"button\"]::-moz-focus-inner, [type=\"reset\"]::-moz-focus-inner, [type=\"submit\"]::-moz-focus-inner {   border-style: none;   padding: 0; }  \/**  * Restore the focus styles unset by the previous rule.  *\/  button:-moz-focusring, [type=\"button\"]:-moz-focusring, [type=\"reset\"]:-moz-focusring, [type=\"submit\"]:-moz-focusring {   outline: 1px dotted ButtonText; }  \/**  * Correct the padding in Firefox.  *\/  fieldset {   padding: 0.35em 0.75em 0.625em; }  \/**  * 1. Correct the text wrapping in Edge and IE.  * 2. Correct the color inheritance from `fieldset` elements in IE.  * 3. Remove the padding so developers are not caught out when they zero out  *    `fieldset` elements in all browsers.  *\/  legend {   box-sizing: border-box; \/* 1 *\/   color: inherit; \/* 2 *\/   display: table; \/* 1 *\/   max-width: 100%; \/* 1 *\/   padding: 0; \/* 3 *\/   white-space: normal; \/* 1 *\/ }  \/**  * Add the correct vertical alignment in Chrome, Firefox, and Opera.  *\/  progress {   vertical-align: baseline; }  \/**  * Remove the default vertical scrollbar in IE 10+.  *\/  textarea {   overflow: auto; }  \/**  * 1. Add the correct box sizing in IE 10.  * 2. Remove the padding in IE 10.  *\/  [type=\"checkbox\"], [type=\"radio\"] {   box-sizing: border-box; \/* 1 *\/   padding: 0; \/* 2 *\/ }  \/**  * Correct the cursor style of increment and decrement buttons in Chrome.  *\/  [type=\"number\"]::-webkit-inner-spin-button, [type=\"number\"]::-webkit-outer-spin-button {   height: auto; }  \/**  * 1. Correct the odd appearance in Chrome and Safari.  * 2. Correct the outline style in Safari.  *\/  [type=\"search\"] {   -webkit-appearance: textfield; \/* 1 *\/   outline-offset: -2px; \/* 2 *\/ }  \/**  * Remove the inner padding in Chrome and Safari on macOS.  *\/  [type=\"search\"]::-webkit-search-decoration {   -webkit-appearance: none; }  \/**  * 1. Correct the inability to style clickable types in iOS and Safari.  * 2. Change font properties to `inherit` in Safari.  *\/  ::-webkit-file-upload-button {   -webkit-appearance: button; \/* 1 *\/   font: inherit; \/* 2 *\/ }  \/* Interactive    ========================================================================== *\/  \/*  * Add the correct display in Edge, IE 10+, and Firefox.  *\/  details {   display: block; }  \/*  * Add the correct display in all browsers.  *\/  summary {   display: list-item; }  \/* Misc    ========================================================================== *\/  \/**  * Add the correct display in IE 10+.  *\/  template {   display: none; }  \/**  * Add the correct display in IE 10.  *\/  [hidden] {   display: none; }<\/code><\/pre>\n<blockquote>\n<p><em>\u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0430 \u0446\u0435\u043b\u044c &#8212; \u043d\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442!<\/em><\/p>\n<\/blockquote>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 9: Sanitize.css<\/strong><\/p>\n<p><em>URL: <\/em><a href=\"https:\/\/csstools.github.io\/sanitize.css\/\"><em><u>https:\/\/csstools.github.io\/sanitize.css\/<\/u><\/em><\/a><\/p>\n<blockquote>\n<p><code>sanitize.css<\/code><em> &#8212; \u044d\u0442\u043e \u043f\u0440\u043e\u0435\u043a\u0442 <\/em><a href=\"https:\/\/github.com\/jonathantneal\"><em><u>\u0414\u0436\u043e\u043d\u0430\u0442\u0430\u043d\u0430 \u041d\u0438\u043b\u0430<\/u><\/em><\/a><em>, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 <\/em><code>normalize.css<\/code><em>;<\/em><\/p>\n<p><code>normalize.css<\/code><em> &#8212; \u043f\u0440\u043e\u0435\u043a\u0442 <\/em><a href=\"https:\/\/github.com\/jonathantneal\"><em><u>\u0414\u0436\u043e\u043d\u0430\u0442\u0430\u043d\u0430 \u041d\u0438\u043b\u0430<\/u><\/em><\/a><em>, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0432 \u0441\u043e\u0430\u0432\u0442\u043e\u0440\u0441\u0442\u0432\u0435 \u0441 <\/em><a href=\"https:\/\/github.com\/necolas\"><em><u>\u041d\u0438\u043a\u043e\u043b\u0430\u0441\u043e\u043c \u0413\u0430\u043b\u043b\u0430\u0445\u0435\u0440\u043e\u043c<\/u><\/em><\/a><em>.<\/em><\/p>\n<\/blockquote>\n<p>\u0414\u0436\u043e\u043d\u0430\u0442\u0430\u043d, \u0440\u0430\u0437\u043e\u0447\u0430\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0442\u0435\u043c, \u0447\u0442\u043e \u043d\u0435 \u043d\u0430\u0448\u0435\u043b \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u0435\u043c\u0443 \u0431\u044b\u043b\u043e \u043d\u0443\u0436\u043d\u043e, \u0441\u043e\u0437\u0434\u0430\u043b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 <strong>Normalize.css<\/strong> \u0441 <a href=\"https:\/\/github.com\/csstools\/sanitize.css\/blob\/master\/sanitize.css\"><u>\u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f\u043c\u0438<\/u><\/a>. <a href=\"https:\/\/www.diffchecker.com\/46LGdaQh\"><u>\u0412\u043e\u0442 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435<\/u><\/a> \u0441 Normalize \u0441\u043b\u0435\u0432\u0430 \u0438 Sanitize \u0441\u043f\u0440\u0430\u0432\u0430.<\/p>\n<p>\u042d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0438 \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/p>\n<pre><code class=\"css\">\/*! sanitize.css v8.0.0 | CC0 License | github.com\/csstools\/sanitize.css *\/  \/* Document  * ========================================================================== *\/  \/**  * 1. Remove repeating backgrounds in all browsers (opinionated).  * 2. Add border box sizing in all browsers (opinionated).  *\/  *, ::before, ::after {   background-repeat: no-repeat; \/* 1 *\/   box-sizing: border-box; \/* 2 *\/ }  \/**  * 1. Add text decoration inheritance in all browsers (opinionated).  * 2. Add vertical alignment inheritance in all browsers (opinionated).  *\/  ::before, ::after {   text-decoration: inherit; \/* 1 *\/   vertical-align: inherit; \/* 2 *\/ }  \/**  * 1. Use the default cursor in all browsers (opinionated).  * 2. Use the default user interface font in all browsers (opinionated).  * 3. Correct the line height in all browsers.  * 4. Use a 4-space tab width in all browsers (opinionated).  * 5. Prevent adjustments of font size after orientation changes in  *    IE on Windows Phone and in iOS.  * 6. Breaks words to prevent overflow in all browsers (opinionated).  *\/  html {   cursor: default; \/* 1 *\/   font-family:     system-ui,     \/* macOS 10.11-10.12 *\/ -apple-system,     \/* Windows 6+ *\/ Segoe UI,     \/* Android 4+ *\/ Roboto,     \/* Ubuntu 10.10+ *\/ Ubuntu,     \/* Gnome 3+ *\/ Cantarell,     \/* KDE Plasma 5+ *\/ Noto Sans,     \/* fallback *\/ sans-serif,     \/* macOS emoji *\/ \"Apple Color Emoji\",     \/* Windows emoji *\/ \"Segoe UI Emoji\",     \/* Windows emoji *\/ \"Segoe UI Symbol\",     \/* Linux emoji *\/ \"Noto Color Emoji\"; \/* 2 *\/    line-height: 1.15; \/* 3 *\/   -moz-tab-size: 4; \/* 4 *\/   tab-size: 4; \/* 4 *\/   -ms-text-size-adjust: 100%; \/* 5 *\/   -webkit-text-size-adjust: 100%; \/* 5 *\/   word-break: break-word; \/* 6 *\/ }  \/* Sections  * ========================================================================== *\/  \/**  * Remove the margin in all browsers (opinionated).  *\/  body {   margin: 0; }  \/**  * Correct the font size and margin on `h1` elements within `section` and  * `article` contexts in Chrome, Firefox, and Safari.  *\/  h1 {   font-size: 2em;   margin: 0.67em 0; }  \/* Grouping content  * ========================================================================== *\/  \/**  * 1. Add the correct sizing in Firefox.  * 2. Show the overflow in Edge and IE.  *\/  hr {   height: 0; \/* 1 *\/   overflow: visible; \/* 2 *\/ }  \/**  * Add the correct display in IE.  *\/  main {   display: block; }  \/**  * Remove the list style on navigation lists in all browsers (opinionated).  *\/  nav ol, nav ul {   list-style: none; }  \/**  * 1. Use the default monospace user interface font  *    in all browsers (opinionated).  * 2. Correct the odd `em` font sizing in all browsers.  *\/  pre {   font-family:     \/* macOS 10.10+ *\/ Menlo,     \/* Windows 6+ *\/ Consolas,     \/* Android 4+ *\/ Roboto Mono,     \/* Ubuntu 10.10+ *\/ Ubuntu Monospace,     \/* KDE Plasma 5+ *\/ Noto Mono,     \/* KDE Plasma 4+ *\/ Oxygen Mono,     \/* Linux\/OpenOffice fallback *\/ Liberation Mono,     \/* fallback *\/ monospace; \/* 1 *\/    font-size: 1em; \/* 2 *\/ }  \/* Text-level semantics  * ========================================================================== *\/  \/**  * Remove the gray background on active links in IE 10.  *\/  a {   background-color: transparent; }  \/**  * Add the correct text decoration in Edge, IE, Opera, and Safari.  *\/  abbr[title] {   text-decoration: underline;   text-decoration: underline dotted; }  \/**  * Add the correct font weight in Chrome, Edge, and Safari.  *\/  b, strong {   font-weight: bolder; }  \/**  * 1. Use the default monospace user interface font  *    in all browsers (opinionated).  * 2. Correct the odd `em` font sizing in all browsers.  *\/  code, kbd, samp {   font-family:     \/* macOS 10.10+ *\/ Menlo,     \/* Windows 6+ *\/ Consolas,     \/* Android 4+ *\/ Roboto Mono,     \/* Ubuntu 10.10+ *\/ Ubuntu Monospace,     \/* KDE Plasma 5+ *\/ Noto Mono,     \/* KDE Plasma 4+ *\/ Oxygen Mono,     \/* Linux\/OpenOffice fallback *\/ Liberation Mono,     \/* fallback *\/ monospace; \/* 1 *\/    font-size: 1em; \/* 2 *\/ }  \/**  * Add the correct font size in all browsers.  *\/  small {   font-size: 80%; }  \/*  * Remove the text shadow on text selections in Firefox 61- (opinionated).  * 1. Restore the coloring undone by defining the text shadow  *    in all browsers (opinionated).  *\/  ::-moz-selection {   background-color: #b3d4fc; \/* 1 *\/   color: #000; \/* 1 *\/   text-shadow: none; }  ::selection {   background-color: #b3d4fc; \/* 1 *\/   color: #000; \/* 1 *\/   text-shadow: none; }  \/* Embedded content  * ========================================================================== *\/  \/*  * Change the alignment on media elements in all browers (opinionated).  *\/  audio, canvas, iframe, img, svg, video {   vertical-align: middle; }  \/**  * Add the correct display in IE 9-.  *\/  audio, video {   display: inline-block; }  \/**  * Add the correct display in iOS 4-7.  *\/  audio:not([controls]) {   display: none;   height: 0; }  \/**  * Remove the border on images inside links in IE 10-.  *\/  img {   border-style: none; }  \/**  * Change the fill color to match the text color in all browsers (opinionated).  *\/  svg:not([fill]) {   fill: currentColor; }  \/**  * Hide the overflow in IE.  *\/  svg:not(:root) {   overflow: hidden; }  \/* Tabular data  * ========================================================================== *\/  \/**  * Collapse border spacing in all browsers (opinionated).  *\/  table {   border-collapse: collapse; }  \/* Forms  * ========================================================================== *\/  \/**  * Inherit styling in all browsers (opinionated).  *\/  button, input, select, textarea {   font-family: inherit;   font-size: inherit;   line-height: inherit; }  \/**  * Remove the margin in Safari.  *\/  button, input, select {   margin: 0; }  \/**  * 1. Show the overflow in IE.  * 2. Remove the inheritance of text transform in Edge, Firefox, and IE.  *\/  button {   overflow: visible; \/* 1 *\/   text-transform: none; \/* 2 *\/ }  \/**  * Correct the inability to style clickable types in iOS and Safari.  *\/  button, [type=\"button\"], [type=\"reset\"], [type=\"submit\"] {   -webkit-appearance: button; }  \/**  * Correct the padding in Firefox.  *\/  fieldset {   padding: 0.35em 0.75em 0.625em; }  \/**  * Show the overflow in Edge and IE.  *\/  input {   overflow: visible; }  \/**  * 1. Correct the text wrapping in Edge and IE.  * 2. Correct the color inheritance from `fieldset` elements in IE.  *\/  legend {   color: inherit; \/* 2 *\/   display: table; \/* 1 *\/   max-width: 100%; \/* 1 *\/   white-space: normal; \/* 1 *\/ }  \/**  * 1. Add the correct display in Edge and IE.  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.  *\/  progress {   display: inline-block; \/* 1 *\/   vertical-align: baseline; \/* 2 *\/ }  \/**  * Remove the inheritance of text transform in Firefox.  *\/  select {   text-transform: none; }  \/**  * 1. Remove the margin in Firefox and Safari.  * 2. Remove the default vertical scrollbar in IE.  * 3. Change the resize direction on textareas in all browsers (opinionated).  *\/  textarea {   margin: 0; \/* 1 *\/   overflow: auto; \/* 2 *\/   resize: vertical; \/* 3 *\/ }  \/**  * Remove the padding in IE 10-.  *\/  [type=\"checkbox\"], [type=\"radio\"] {   padding: 0; }  \/**  * 1. Correct the odd appearance in Chrome and Safari.  * 2. Correct the outline style in Safari.  *\/  [type=\"search\"] {   -webkit-appearance: textfield; \/* 1 *\/   outline-offset: -2px; \/* 2 *\/ }  \/**  * Correct the cursor style of increment and decrement buttons in Safari.  *\/  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {   height: auto; }  \/**  * Correct the text style of placeholders in Chrome, Edge, and Safari.  *\/  ::-webkit-input-placeholder {   color: inherit;   opacity: 0.54; }  \/**  * Remove the inner padding in Chrome and Safari on macOS.  *\/  ::-webkit-search-decoration {   -webkit-appearance: none; }  \/**  * 1. Correct the inability to style clickable types in iOS and Safari.  * 2. Change font properties to `inherit` in Safari.  *\/  ::-webkit-file-upload-button {   -webkit-appearance: button; \/* 1 *\/   font: inherit; \/* 2 *\/ }  \/**  * Remove the inner border and padding of focus outlines in Firefox.  *\/  ::-moz-focus-inner {   border-style: none;   padding: 0; }  \/**  * Restore the focus outline styles unset by the previous rule in Firefox.  *\/  :-moz-focusring {   outline: 1px dotted ButtonText; }  \/* Interactive  * ========================================================================== *\/  \/*  * Add the correct display in Edge and IE.  *\/  details {   display: block; }  \/*  * Add the correct styles in Edge, IE, and Safari.  *\/  dialog {   background-color: white;   border: solid;   color: black;   display: block;   height: -moz-fit-content;   height: -webkit-fit-content;   height: fit-content;   left: 0;   margin: auto;   padding: 1em;   position: absolute;   right: 0;   width: -moz-fit-content;   width: -webkit-fit-content;   width: fit-content; }  dialog:not([open]) {   display: none; }  \/*  * Add the correct display in all browsers.  *\/  summary {   display: list-item; }  \/* Scripting  * ========================================================================== *\/  \/**  * Add the correct display in IE 9-.  *\/  canvas {   display: inline-block; }  \/**  * Add the correct display in IE.  *\/  template {   display: none; }  \/* User interaction  * ========================================================================== *\/  \/*  * 1. Remove the tapping delay in IE 10.  * 2. Remove the tapping delay on clickable elements       in all browsers (opinionated).  *\/  a, area, button, input, label, select, summary, textarea, [tabindex] {   -ms-touch-action: manipulation; \/* 1 *\/   touch-action: manipulation; \/* 2 *\/ }  \/**  * Add the correct display in IE 10-.  *\/  [hidden] {   display: none; }  \/* Accessibility  * ========================================================================== *\/  \/**  * Change the cursor on busy elements in all browsers (opinionated).  *\/  [aria-busy=\"true\"] {   cursor: progress; }  \/*  * Change the cursor on control elements in all browsers (opinionated).  *\/  [aria-controls] {   cursor: pointer; }  \/*  * Change the cursor on disabled, not-editable, or otherwise  * inoperable elements in all browsers (opinionated).  *\/  [aria-disabled=\"true\"], [disabled] {   cursor: not-allowed; }  \/*  * Change the display on visually hidden accessible elements  * in all browsers (opinionated).  *\/  [aria-hidden=\"false\"][hidden]:not(:focus) {   clip: rect(0, 0, 0, 0);   display: inherit;   position: absolute; }<\/code><\/pre>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 10: Reboot.css<\/strong><\/p>\n<p><em>URL: <\/em><a href=\"https:\/\/raw.githubusercontent.com\/twbs\/bootstrap\/v4-dev\/dist\/css\/bootstrap-reboot.css\"><em><u>https:\/\/raw.githubusercontent.com\/twbs\/bootstrap\/v4-dev\/dist\/css\/bootstrap-reboot.css<\/u><\/em><\/a><\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u043d\u0430 \u043c\u043e\u0449\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441\u0431\u0440\u043e\u0441\u0430, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 <strong>Normalize.css<\/strong>. Bootstrap \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0435\u0435 \u0434\u043b\u044f \u0441\u0431\u0440\u043e\u0441\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438 \u043f\u0440\u0438\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0430. \u0412\u043e\u0442 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 Normalize \u0438 Reboot (\u0441\u043b\u0435\u0432\u0430 \u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e):<\/p>\n<div class=\"embed_link\">\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/www.diffchecker.com\/static\/images\/fb-image.png&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>Diffchecker<\/span><\/div>\n<p><a href=\"https:\/\/www.diffchecker.com\/xe9uR4kZ\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed__caption-link\">www.diffchecker.com<\/a><\/div>\n<\/div>\n<p><code>Reboot.css<\/code>, \u0431\u0435\u0437 \u0441\u043e\u043c\u043d\u0435\u043d\u0438\u044f, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0438 <a href=\"https:\/\/scotch.io\/tutorials\/a-look-at-bootstrap-4s-new-reset-rebootcss\"><u>\u0434\u0430\u043d\u043d\u0430\u044f\u00a0 \u0441\u0442\u0430\u0442\u044c\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u043d\u043e\u0433\u043e \u0446\u0435\u043d\u043d\u044b\u0445 \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u0439 \u043e \u0442\u043e\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0442\u0430\u043a<\/u><\/a>.<\/p>\n<pre><code class=\"css\">\/* Reboot Normalization of HTML elements, manually forked from Normalize.css to remove styles targeting irrelevant browsers while applying new styles. Normalize is licensed MIT. https:\/\/github.com\/necolas\/normalize.css * Bootstrap v4.0.0-beta (https:\/\/getbootstrap.com)  * Copyright 2011-2017 The Bootstrap Authors  * Copyright 2011-2017 Twitter, Inc.  * Licensed under MIT (https:\/\/github.com\/twbs\/bootstrap\/blob\/master\/LICENSE) *\/ \/* Document 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. 2. Change the default font family in all browsers. 3. Correct the line height in all browsers. 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to counteract. 6. Change the default tap highlight to be completely transparent in iOS. *\/ *, *::before, *::after {   box-sizing: border-box; \/* 1 *\/ } html {   font-family: sans-serif; \/* 2 *\/   line-height: 1.15; \/* 3 *\/   -webkit-text-size-adjust: 100%; \/* 4 *\/   -ms-text-size-adjust: 100%; \/* 4 *\/   -ms-overflow-style: scrollbar; \/* 5 *\/   -webkit-tap-highlight-color: transparent; \/* 6 *\/ } \/* IE10+ doesn't honor `&lt;meta name=\"viewport\">` in some cases. *\/ @-ms-viewport {   width: device-width; } \/* stylelint-disable selector-list-comma-newline-after Shim for \"new\" HTML5 structural elements to display correctly (IE10, older browsers) *\/ article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {   display: block; } \/* Body 1. Remove the margin in all browsers. 2. As a best practice, apply a default `background-color`. 3. Set an explicit initial text-align value so that we can later use the `inherit` value on things like `&lt;th>` elements. *\/ body {   margin: 0; \/* 1 *\/   font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";   font-size: 1rem;   font-weight: normal;   line-height: 1.5;   color: #212529;   text-align: left; \/* 3 *\/   background-color: #fff; \/* 2 *\/ } \/* Suppress the focus outline on elements that cannot be accessed via keyboard. This prevents an unwanted focus outline from appearing around elements that might still respond to pointer events. Credit: https:\/\/github.com\/suitcss\/base *\/ [tabindex=\"-1\"]:focus {   outline: none !important; } \/*  Content grouping 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. *\/ hr {   box-sizing: content-box; \/* 1 *\/   height: 0; \/* 1 *\/   overflow: visible; \/* 2 *\/ } \/*  Typography *\/ \/*  Remove top margins from headings By default, `&lt;h1>`-`&lt;h6>` all receive top and bottom margins. We nuke the top margin for easier control within type scales as it avoids margin collapsing. *\/ h1, h2, h3, h4, h5, h6 {   margin-top: 0;   margin-bottom: .5rem; } \/* Reset margins on paragraphs Similarly, the top margin on `&lt;p>`s get reset. However, we also reset the bottom margin to use `rem` units instead of `em`. *\/ p {   margin-top: 0;   margin-bottom: 1rem; } \/* Abbreviations 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 3. Add explicit cursor to indicate changed behavior. 4. Duplicate behavior to the data-* attribute for our tooltip plugin *\/ abbr[title], abbr[data-original-title] { \/* 4 *\/   text-decoration: underline; \/* 2 *\/   -webkit-text-decoration: underline dotted; \/* 2 *\/           text-decoration: underline dotted; \/* 2 *\/   cursor: help; \/* 3 *\/   border-bottom: 0; \/* 1 *\/ } address {   margin-bottom: 1rem;   font-style: normal;   line-height: inherit; } ol, ul, dl {   margin-top: 0;   margin-bottom: 1rem; } ol ol, ul ul, ol ul, ul ol {   margin-bottom: 0; } dt {   font-weight: bold; } dd {   margin-bottom: .5rem;   margin-left: 0; \/* Undo browser default *\/ } blockquote {   margin: 0 0 1rem; } dfn {   font-style: italic; \/* Add the correct font style in Android 4.3- *\/ } b, strong {   font-weight: bolder; \/* Add the correct font weight in Chrome, Edge, and Safari *\/ } small {   font-size: 80%; \/* Add the correct font size in all browsers *\/ } sub, sup {   position: relative;   font-size: 75%;   line-height: 0;   vertical-align: baseline; } sub {   bottom: -.25em; } sup {   top: -.5em; } \/* Links *\/ a {   color: #007bff;   text-decoration: none;   background-color: transparent; \/* Remove the gray background on active links in IE 10. *\/   -webkit-text-decoration-skip: objects; \/* Remove gaps in links underline in iOS 8+ and Safari 8+. *\/ } a:hover {   color: #0056b3;   text-decoration: underline; } \/* And undo these styles for placeholder links\/named anchors (without href) which have not been made explicitly keyboard-focusable (without tabindex). It would be more straightforward to just use a[href] in previous block, but that causes specificity issues in many other styles that are too complex to fix. See https:\/\/github.com\/twbs\/bootstrap\/issues\/19402 *\/ a:not([href]):not([tabindex]) {   color: inherit;   text-decoration: none; } a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {   color: inherit;   text-decoration: none; } a:not([href]):not([tabindex]):focus {   outline: 0; } \/* Code *\/ pre, code, kbd, samp {   font-family: monospace, monospace; \/* Correct the inheritance and scaling of font size in all browsers. *\/   font-size: 1em; \/* Correct the odd `em` font sizing in all browsers. *\/ } pre {   \/* Remove browser default top margin *\/   margin-top: 0;   \/* Reset browser default of `1em` to use `rem`s *\/       margin-bottom: 1rem;    \/* Don't allow content to break outside *\/       overflow: auto;   \/* We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so we force a non-overlapping, non-auto-hiding scrollbar to counteract. *\/         -ms-overflow-style: scrollbar; } \/* Figures *\/ figure {   \/* Apply a consistent margin strategy (matches our type styles). *\/   margin: 0 0 1rem; } \/* Images and content *\/ img {   vertical-align: middle;   border-style: none; \/* Remove the border on images inside links in IE 10-. *\/ } svg:not(:root) {   overflow: hidden; \/* Hide the overflow in IE *\/ } \/* Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 DON'T remove the click delay when `&lt;meta name=\"viewport\" content=\"width=device-width\">` is present. However, they DO support removing the click delay via `touch-action: manipulation`. See: * https:\/\/getbootstrap.com\/docs\/4.0\/content\/reboot\/#click-delay-optimization-for-touch * https:\/\/caniuse.com\/#feat=css-touch-action *  https:\/\/patrickhlauke.github.io\/touch\/tests\/results\/#suppressing-300ms-delay *\/ a, area, button, [role=\"button\"], input:not([type=range]), label, select, summary, textarea {   -ms-touch-action: manipulation;       touch-action: manipulation; } \/* Tables *\/ table {   border-collapse: collapse; \/* Prevent double borders *\/ } caption {   padding-top: 0.75rem;   padding-bottom: 0.75rem;   color: #868e96;   text-align: left;   caption-side: bottom; } th {   \/* Matches default `&lt;td>` alignment by inheriting from the `&lt;body>`, or the closest parent with a set `text-align`. *\/   text-align: inherit; } \/* Forms *\/ label {   \/* Allow labels to use `margin` for spacing. *\/   display: inline-block;   margin-bottom: .5rem; } \/* Remove the default `border-radius` that macOS Chrome adds. Details at https:\/\/github.com\/twbs\/bootstrap\/issues\/24093 *\/ button {   border-radius: 0; } \/* Work around a Firefox\/IE bug where the transparent `button` background results in a loss of the default `button` focus styles. Credit: https:\/\/github.com\/suitcss\/base\/ *\/ button:focus {   outline: 1px dotted;   outline: 5px auto -webkit-focus-ring-color; } input, button, select, optgroup, textarea {   margin: 0; \/* Remove the margin in Firefox and Safari *\/   font-family: inherit;   font-size: inherit;   line-height: inherit; } button, input {   overflow: visible; \/* Show the overflow in Edge *\/ } button, select {   text-transform: none; \/* Remove the inheritance of text transform in Firefox *\/ } \/* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. *\/ button, html [type=\"button\"], [type=\"reset\"], [type=\"submit\"] {   -webkit-appearance: button; } \/* Remove inner border and padding from Firefox, but don't restore the outline like Normalize. *\/ button::-moz-focus-inner, [type=\"button\"]::-moz-focus-inner, [type=\"reset\"]::-moz-focus-inner, [type=\"submit\"]::-moz-focus-inner {   padding: 0;   border-style: none; } input[type=\"radio\"], input[type=\"checkbox\"] {   box-sizing: border-box; \/* 1. Add the correct box sizing in IE 10- *\/   padding: 0; \/* 2. Remove the padding in IE 10- *\/ } input[type=\"date\"], input[type=\"time\"], input[type=\"datetime-local\"], input[type=\"month\"] {   \/*    Remove the default appearance of temporal inputs to avoid a Mobile Safari bug where setting a custom line-height prevents text from being vertically centered within the input.      See https:\/\/bugs.webkit.org\/show_bug.cgi?id=139848   and https:\/\/github.com\/twbs\/bootstrap\/issues\/11266   *\/   -webkit-appearance: listbox; } textarea {   overflow: auto; \/* Remove the default vertical scrollbar in IE. *\/   \/* Textareas should really only resize vertically so they don't break their (horizontal) containers. *\/   resize: vertical; } fieldset {   \/*    Browsers set a default `min-width: min-content;` on fieldsets, unlike e.g. `&lt;div>`s, which have `min-width: 0;` by default. So we reset that to ensure fieldsets behave more like a standard block element.      See https:\/\/github.com\/twbs\/bootstrap\/issues\/12359   and https:\/\/html.spec.whatwg.org\/multipage\/#the-fieldset-and-legend-elements     *\/   min-width: 0;   \/* Reset the default outline behavior of fieldsets so they don't affect page layout. *\/   padding: 0;   margin: 0;   border: 0; } \/* 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. *\/ legend {   display: block;   width: 100%;   max-width: 100%; \/* 1 *\/   padding: 0;   margin-bottom: .5rem;   font-size: 1.5rem;   line-height: inherit;   color: inherit; \/* 2 *\/   white-space: normal; \/* 1 *\/ } progress {   vertical-align: baseline; \/* Add the correct vertical alignment in Chrome, Firefox, and Opera. *\/ } \/*  Correct the cursor style of increment and decrement buttons in Chrome. *\/ [type=\"number\"]::-webkit-inner-spin-button, [type=\"number\"]::-webkit-outer-spin-button {   height: auto; } [type=\"search\"] {   \/*    This overrides the extra rounded corners on search inputs in iOS so that our `.form-control` class can properly style them. Note that this cannot simply be added to `.form-control` as it's not specific enough.       For details, see https:\/\/github.com\/twbs\/bootstrap\/issues\/11586.   *\/       outline-offset: -2px;   -webkit-appearance: none; } \/* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. *\/ [type=\"search\"]::-webkit-search-cancel-button, [type=\"search\"]::-webkit-search-decoration {   -webkit-appearance: none; } \/* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. *\/ ::-webkit-file-upload-button {   font: inherit;   -webkit-appearance: button; } \/* Correct element displays *\/ output {   display: inline-block; } summary {   display: list-item; \/* Add the correct display in all browsers *\/ } template {   display: none; \/* Add the correct display in IE *\/ } \/*  Always hide an element with the `hidden` HTML attribute (from PureCSS). Needed for proper display in IE 10-. *\/ [hidden] {   display: none !important; }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435, \u044f \u043d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438:<\/p>\n<div class=\"embed_link\">\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/scotch-res.cloudinary.com\/image\/upload\/w_auto,q_auto:good,f_auto\/media\/2\/z2oRyXrTQdawsDQoT9Cm_reboot-by-bootstrap-scotch.png.jpg&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>A Look at Bootstrap 4&amp;#039;s New Reset: Reboot.css<\/span><\/div>\n<p><a href=\"https:\/\/scotch.io\/tutorials\/a-look-at-bootstrap-4s-new-reset-rebootcss\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed__caption-link\">scotch.io<\/a><\/div>\n<\/div>\n<div class=\"embed_link\">\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;undefined&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>Bootstrap\u2019s Reboot \u2014 Next Evolutionary Step for CSS Reset<\/span><\/div>\n<p><a href=\"https:\/\/medium.com\/css-mine\/bootstraps-reboot-next-evolutionary-step-for-css-reset-a30f718521b9\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed__caption-link\">medium.com<\/a><\/div>\n<\/div>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 11: Destyle Reset<\/strong><\/p>\n<p><em>URL: <\/em><a href=\"https:\/\/nicolas-cusan.github.io\/destyle.css\/?utm_campaign=destyle.css-a-clean-slate-for-writing-c\"><em><u>https:\/\/nicolas-cusan.github.io\/destyle.css\/?utm_campaign=destyle.css-a-clean-slate-for-writing-c<\/u><\/em><\/a><\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0440\u0435\u0447\u044c \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043e \u0441\u0431\u0440\u043e\u0441\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u043a\u043e\u0434\u0435, \u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b Sanitize.css \u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u043b \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0435\u0433\u043e html5doctor . \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u044f \u0443\u0431\u0435\u0436\u0434\u0430\u043b\u0441\u044f, \u0447\u0442\u043e \u043c\u043e\u0438 \u0441\u0442\u0438\u043b\u0438 \u0431\u044b\u043b\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e &#171;\u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b&#187; \u0438 &#171;\u0441\u0431\u0440\u043e\u0448\u0435\u043d\u044b&#187; \u0432 \u043c\u043e\u0435\u043c css, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 Destyle. \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0437\u0430\u044f\u0432\u043b\u0435\u043d\u0438\u044f\u043c, \u044d\u0442\u043e<\/p>\n<blockquote>\n<p><em>\u0421\u0430\u043c\u043e\u0443\u0432\u0435\u0440\u0435\u043d\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u0441\u0431\u0440\u043e\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0447\u0438\u0441\u0442\u044b\u0439 \u043b\u0438\u0441\u0442 \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0430\u0448\u0435\u0433\u043e html.<\/em><\/p>\n<\/blockquote>\n<p>\u0423 \u043d\u0435\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0435\u043f\u043b\u043e\u0445\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 <a href=\"https:\/\/github.com\/nicolas-cusan\/destyle.css\/blob\/master\/Readme.md\"><u>\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0437\u0434\u0435\u0441\u044c<\/u><\/a>.<\/p>\n<pre><code class=\"css\">\/*! destyle.css v1.0.11 | MIT License | https:\/\/github.com\/nicolas-cusan\/destyle.css *\/  \/* Reset box-model    ========================================================================== *\/  * {   box-sizing: border-box; }  ::before, ::after {   box-sizing: inherit; }  \/* Document    ========================================================================== *\/  \/**  * 1. Correct the line height in all browsers.  * 2. Prevent adjustments of font size after orientation changes in iOS.  * 3. Remove gray overlay on links for iOS.  *\/  html {   line-height: 1.15; \/* 1 *\/   -webkit-text-size-adjust: 100%; \/* 2 *\/   -webkit-tap-highlight-color: transparent; \/* 3*\/ }  \/* Sections    ========================================================================== *\/  \/**  * Remove the margin in all browsers.  *\/  body {   margin: 0; }  \/**  * Render the `main` element consistently in IE.  *\/  main {   display: block; }  \/* Vertical rhythm    ========================================================================== *\/  p, table, blockquote, address, pre, iframe, form, figure, dl {   margin: 0; }  \/* Headings    ========================================================================== *\/  h1, h2, h3, h4, h5, h6 {   font-size: inherit;   line-height: inherit;   font-weight: inherit;   margin: 0; }  \/* Lists (enumeration)    ========================================================================== *\/  ul, ol {   margin: 0;   padding: 0;   list-style: none; }  \/* Lists (definition)    ========================================================================== *\/  dt {   font-weight: bold; }  dd {   margin-left: 0; }  \/* Grouping content    ========================================================================== *\/  \/**  * 1. Add the correct box sizing in Firefox.  * 2. Show the overflow in Edge and IE.  *\/  hr {   box-sizing: content-box; \/* 1 *\/   height: 0; \/* 1 *\/   overflow: visible; \/* 2 *\/   border: 0;   border-top: 1px solid;   margin: 0;   clear: both;   color: inherit; }  \/**  * 1. Correct the inheritance and scaling of font size in all browsers.  * 2. Correct the odd `em` font sizing in all browsers.  *\/  pre {   font-family: monospace, monospace; \/* 1 *\/   font-size: inherit; \/* 2 *\/ }  address {   font-style: inherit; }  \/* Text-level semantics    ========================================================================== *\/  \/**  * Remove the gray background on active links in IE 10.  *\/  a {   background-color: transparent;   text-decoration: none;   color: inherit; }  \/**  * 1. Remove the bottom border in Chrome 57-  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.  *\/  abbr[title] {   border-bottom: none; \/* 1 *\/   text-decoration: underline; \/* 2 *\/   text-decoration: underline dotted; \/* 2 *\/ }  \/**  * Add the correct font weight in Chrome, Edge, and Safari.  *\/  b, strong {   font-weight: bolder; }  \/**  * 1. Correct the inheritance and scaling of font size in all browsers.  * 2. Correct the odd `em` font sizing in all browsers.  *\/  code, kbd, samp {   font-family: monospace, monospace; \/* 1 *\/   font-size: inherit; \/* 2 *\/ }  \/**  * Add the correct font size in all browsers.  *\/  small {   font-size: 80%; }  \/**  * Prevent `sub` and `sup` elements from affecting the line height in  * all browsers.  *\/  sub, sup {   font-size: 75%;   line-height: 0;   position: relative;   vertical-align: baseline; }  sub {   bottom: -0.25em; }  sup {   top: -0.5em; }  \/* Embedded content    ========================================================================== *\/  \/**  * Remove the border on images inside links in IE 10.  *\/  img {   border-style: none;   vertical-align: bottom; }  embed, object, iframe {   border: 0;   vertical-align: bottom; }  \/* Forms    ========================================================================== *\/  \/**  * Reset form fields to make them styleable  * 1. Reset radio and checkbox to preserve their look in iOS.  *\/  button, input, optgroup, select, textarea {   -webkit-appearance: none;   appearance: none;   vertical-align: middle;   color: inherit;   font: inherit;   border: 0;   background: transparent;   padding: 0;   margin: 0;   outline: 0;   border-radius: 0;   text-align: inherit; }  [type='checkbox'] {   \/* 1 *\/   -webkit-appearance: checkbox;   appearance: checkbox; }  [type='radio'] {   \/* 1 *\/   -webkit-appearance: radio;   appearance: radio; }  \/**  * Show the overflow in IE.  * 1. Show the overflow in Edge.  *\/  button, input {   \/* 1 *\/   overflow: visible; }  \/**  * Remove the inheritance of text transform in Edge, Firefox, and IE.  * 1. Remove the inheritance of text transform in Firefox.  *\/  button, select {   \/* 1 *\/   text-transform: none; }  \/**  * Correct the inability to style clickable types in iOS and Safari.  *\/  button, [type='button'], [type='reset'], [type='submit'] {   cursor: pointer;   -webkit-appearance: none;   appearance: none; }  button[disabled], [type='button'][disabled], [type='reset'][disabled], [type='submit'][disabled] {   cursor: default; }  \/**  * Remove the inner border and padding in Firefox.  *\/  button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner {   border-style: none;   padding: 0; }  \/**  * Restore the focus styles unset by the previous rule.  *\/  button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring {   outline: 1px dotted ButtonText; }  \/**  * Reset to invisible  *\/  fieldset {   margin: 0;   padding: 0;   border: 0;   min-width: 0; }  \/**  * 1. Correct the text wrapping in Edge and IE.  * 2. Correct the color inheritance from `fieldset` elements in IE.  * 3. Remove the padding so developers are not caught out when they zero out  *    `fieldset` elements in all browsers.  *\/  legend {   color: inherit; \/* 2 *\/   display: table; \/* 1 *\/   max-width: 100%; \/* 1 *\/   padding: 0; \/* 3 *\/   white-space: normal; \/* 1 *\/ }  \/**  * Add the correct vertical alignment in Chrome, Firefox, and Opera.  *\/  progress {   vertical-align: baseline; }  \/**  * Remove the default vertical scrollbar in IE 10+.  *\/  textarea {   overflow: auto; }  \/**  * 1. Remove the padding in IE 10.  *\/  [type='checkbox'], [type='radio'] {   padding: 0; \/* 1 *\/ }  \/**  * Correct the cursor style of increment and decrement buttons in Chrome.  *\/  [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button {   height: auto; }  \/**  * 1. Correct the outline style in Safari.  *\/  [type='search'] {   outline-offset: -2px; \/* 1 *\/ }  \/**  * Remove the inner padding in Chrome and Safari on macOS.  *\/  [type='search']::-webkit-search-decoration {   -webkit-appearance: none; }  \/**  * 1. Correct the inability to style clickable types in iOS and Safari.  * 2. Change font properties to `inherit` in Safari.  *\/  ::-webkit-file-upload-button {   -webkit-appearance: button; \/* 1 *\/   font: inherit; \/* 2 *\/ }  \/**  * Clickable labels  *\/  label[for] {   cursor: pointer; }  \/* Interactive    ========================================================================== *\/  \/*  * Add the correct display in Edge, IE 10+, and Firefox.  *\/  details {   display: block; }  \/*  * Add the correct display in all browsers.  *\/  summary {   display: list-item; }  \/* Table    ========================================================================== *\/  table {   border-collapse: collapse;   border-spacing: 0; }  caption {   text-align: left; }  td, th {   vertical-align: top; }  th {   text-align: left;   font-weight: bold; }  \/* Misc    ========================================================================== *\/  \/**  * Add the correct display in IE 10+.  *\/  template {   display: none; }  \/**  * Add the correct display in IE 10.  *\/  [hidden] {   display: none; }<\/code><\/pre>\n<p><strong>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 12: CSS remedy<\/strong><\/p>\n<p><em>URL: <\/em><a href=\"https:\/\/github.com\/mozdevs\/cssremedy\"><em><u>https:\/\/github.com\/mozdevs\/cssremedy<\/u><\/em><\/a><\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0435\u0449\u0435 \u043d\u0435 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043d, \u043d\u043e \u044f \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u0448\u0430\u0435\u0442 \u043b\u044e\u0434\u044f\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e! CSS Remedy \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434:<\/p>\n<blockquote>\n<p><em>CSS Remedy \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f CSS \u0442\u0430\u043a\u0438\u043c\u0438, \u043a\u0430\u043a\u0438\u043c\u0438 \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0431\u044b, \u0435\u0441\u043b\u0438 \u0431\u044b CSSWG \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0430 CSS \u0441\u0435\u0433\u043e\u0434\u043d\u044f, \u0441 \u043d\u0443\u043b\u044f, \u0438 \u043d\u0435 \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u043b\u0430\u0441\u044c \u043e\u0431 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438.<\/em><\/p>\n<\/blockquote>\n<p>\u042f \u0431\u044b, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u043f\u043e\u0441\u043e\u0432\u0435\u0442\u043e\u0432\u0430\u043b \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0435 \u0432 \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u0431\u0440\u043e\u0441 CSS \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<pre><code class=\"css\">\/* Global Remedies ******************\/  \/* Use border-box by default, globally *\/ *, ::before, ::after { box-sizing: border-box; }  \/* * Consistent line spacing... * CSS Inline Layout Module Level 3: https:\/\/drafts.csswg.org\/css-inline-3\/#line-sizing-property *\/ html { line-sizing: normal; }  \/* Remove the tiny space around the edge of the page *\/ body { margin: 0; }   \/* Headings ***********\/  \/* Switch to rem units for headings *\/ \/* @@@ Initial values are based on existing browser defaults *\/ h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.17rem; } h4 { font-size: 1.00rem; } h5 { font-size: 0.83rem; } h6 { font-size: 0.67rem; }  \/* Keep h1 margins consistent, even when nested *\/ h1 { margin: 0.67em 0; }   \/* Typography *************\/  \/* Overflow by default is bad *\/ pre { white-space: pre-wrap; }  \/* * 1. Solid, thin horizontal rules * 2. Remove Firefox `color: gray` * 3. Remove default `1px` height, and common `overflow: hidden` *\/ hr {   border-style: solid;   border-width: 1px 0 0;   color: inherit;   height: 0;   overflow: visible; }   \/* Embedded Elements ********************\/  \/* * 1. Block display is usually what we want * 2. Remove strange space-below when inline * 3. Responsive by default *\/ img, svg, video, canvas, audio, iframe, embed, object {   display: block;   vertical-align: middle;   max-width: 100%; }  \/* * Maintain intrinsic aspect ratios when `max-width` is applied * (iframe, embed, and object have no intrinsic ratio, set height explicitly) *\/ img, svg, video, canvas {   height: auto; }  \/* * There is no good reason elements default to 300px, * and audio files are unlikely to come with a width attribute *\/ audio { width: 100%; }   \/* Old Browsers ***************\/  \/* Remove the border on images inside links in IE 10 and earlier *\/ img { border-style: none; }  \/* Hide the overflow in IE 10 and earlier *\/ svg { overflow: hidden; }  \/* Default block display on HTML5 elements *\/ article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {   display: block; }  \/* * 1. Add the correct box sizing in IE 10 * 2. Remove the padding in IE 10 *\/ [type='checkbox'], [type='radio'] {   box-sizing: border-box;   padding: 0; }<\/code><\/pre>\n<h4>\u0421\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0431\u0440\u043e\u0441\u044b<\/h4>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0431\u0440\u043e\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0430 \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0446\u0435\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <strong>\u0441\u0431\u0440\u043e\u0441 \u0444\u043e\u0440\u043c\u044b: <\/strong><a href=\"https:\/\/formalize.me\/\"><strong><u>https:\/\/formalize.me\/<\/u><\/strong><\/a> \u041e\u043d \u0440\u0435\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043f\u043e\u043b\u0435\u0439 \u0444\u043e\u0440\u043c\u044b, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0438 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u044d\u043a\u0437\u043e\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0441\u0431\u0440\u043e\u0441\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <a href=\"https:\/\/cssreset.com\/scripts\/vanilla-css-un-reset\/\"><u>Vanilla CSS Un-reset<\/u><\/a>. \u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u044d\u0442\u043e \u043d\u0435 \u0441\u0431\u0440\u043e\u0441, \u0430 \u0441\u043a\u043e\u0440\u0435\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043e\u0431\u0449\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 CSS \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0441\u0442\u0435\u0440\u0442\u044b \u0441\u0431\u0440\u043e\u0441\u043e\u043c. <strong>\u041e\u043d \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u0442\u0430\u043d\u0434\u0435\u043c\u0435 \u0441 <\/strong><code>reset.css<\/code>.<\/p>\n<blockquote>\n<p>&#171;Vanilla \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u0432 \u0432\u0430\u0448\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 CSS, \u0430 \u0437\u0430\u0442\u0435\u043c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u043c\u0435\u0440\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u041e\u043d\u0430 \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u0430 \u043a\u0430\u043a \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0441\u043d\u0430\u0447\u0430\u043b\u0430&#187;.<\/p>\n<\/blockquote>\n<p>\u042d\u0442\u043e \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u043c\u043d\u0435 \u043e <code>Normalize.css<\/code>, \u043e\u0434\u043d\u0430\u043a\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c. \u0425\u043e\u0442\u044f \u044f \u043d\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043b, \u0447\u0442\u043e\u0431\u044b \u043b\u044e\u0434\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0435\u0433\u043e, \u0442\u0430\u043a \u0447\u0442\u043e \u043e\u0442\u043d\u0435\u0441\u0438\u0442\u0435\u0441\u044c \u043a \u044d\u0442\u043e\u043c\u0443 \u0441 \u0434\u043e\u043b\u0435\u0439 \u0441\u043a\u0435\u043f\u0442\u0438\u0446\u0438\u0437\u043c\u0430.<\/p>\n<h4> \u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0431\u0440\u043e\u0441\u0430<\/h4>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0441\u0431\u0440\u043e\u0441 CSS. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u044e\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e, \u0438 \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0432\u0430\u043c \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043d\u0438\u043c\u0438:<\/p>\n<ul>\n<li>\n<p>\u041e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 &#8212; <a href=\"https:\/\/bitsofco.de\/my-css-reset-base\/\"><u>\u0441\u0442\u0430\u0442\u044c\u044f<\/u><\/a> @IreAderinokun, \u0433\u0434\u0435 \u043e\u043d\u0430 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0441\u0432\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0431\u0440\u043e\u0441\u0430.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/ehtmlu.com\/blog\/a-simple-css-reset\/\"><u>\u0414\u0440\u0443\u0433\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f<\/u><\/a> \u043e\u0442 <a href=\"https:\/\/medium.com\/u\/196a91c4ed21?source=post_page-----781849d9b7f2--------------------------------\"><u>\u0425\u0435\u043b\u044c\u043c\u0443\u0442\u0430 \u0412\u0430\u043d\u0434\u043b\u044f<\/u><\/a>, \u0433\u0434\u0435 \u043e\u043d \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u0441\u0432\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0441\u0431\u0440\u043e\u0441\u0430 \u0432 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0441\u0442\u0438\u043b\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0449\u0435 \u043e\u0434\u043d\u0430 <a href=\"https:\/\/habr.com\/ru\/post\/420539\/\"><u>\u0441\u0442\u0430\u0442\u044c\u044f<\/u><\/a>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u043d\u0430\u0448\u043b\u0430, \u0431\u044b\u043b\u0430 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 habr.com \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435, \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u0430\u043c \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u043d\u0438\u0435 \u044f\u0437\u044b\u043a\u0430 &#8212; \u043a\u043e\u0434 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u0435\u043d.<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0431\u0440\u043e\u0441\u0430: \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435, \u043a\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u044b \u0432 \u043f\u043b\u0430\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 (\u043a\u043e\u043d\u0442\u0443\u0440, :focus), \u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0435 \u0438\u0445, \u0430 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0435. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/zellwk.com\/blog\/design-focus-style\/?utm_campaign=designing-a-focus-stylewhen-we-get-to\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a> \u0438 <a href=\"https:\/\/www.bitdegree.org\/learn\/css-outline\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a>. \u0418 \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u0441\u0435 \u0441\u0431\u0440\u043e\u0441\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0430\u043c\u043e\u0443\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c\u0438.<\/p>\n<\/blockquote>\n<p><strong>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u0432\u0441\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u0447\u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441 \u044d\u0442\u0438\u043c \u0434\u0435\u043b\u0430\u0442\u044c?<\/strong><\/p>\n<blockquote>\n<p>\u041e\u0434\u043d\u0443 \u0432\u0435\u0449\u044c \u043d\u0430\u0434\u043e \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0438 \u0443\u0447\u0435\u0441\u0442\u044c: Reset \u0438 Normalize.css &#8212; \u044d\u0442\u043e \u043d\u0435 drop-in, \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0432\u0430\u0448 css-\u043a\u043e\u0434 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f CSS \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u043d\u0435 \u043f\u043e\u0441\u0442\u0444\u0430\u043a\u0442\u0443\u043c.<\/p>\n<\/blockquote>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u0438\u0445 \u043f\u043e\u0441\u043b\u0435, \u0432\u044b \u0440\u0438\u0441\u043a\u0443\u0435\u0442\u0435 \u043d\u0430\u0440\u0443\u0448\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u043c\u0430\u043a\u0435\u0442\u0430. \u041b\u0438\u0447\u043d\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e Sanitize.css \u0432 \u0442\u0430\u043d\u0434\u0435\u043c\u0435 \u0441 html5doctos (\u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435). \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0443\u044e \u0432\u0441\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u044e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, Destyle \u0442\u0430\u043a\u0436\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c.<\/p>\n<h4>\u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u043d\u0435 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c? \u0412\u043e\u0442 \u0432 \u0447\u0435\u043c \u0432\u043e\u043f\u0440\u043e\u0441.<\/h4>\n<p>\u042f \u0432\u0438\u0434\u0435\u043b\u0430 \u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0442\u0435\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u043b\u043e\u0441\u044c, \u0437\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u0435\u043d \u0441\u0431\u0440\u043e\u0441 CSS, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u0442\u0435\u0439 \u043f\u0440\u043e\u0442\u0438\u0432 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. <a href=\"https:\/\/snook.ca\/archives\/html_and_css\/no_css_reset\"><u>\u0412\u043e\u0442 \u043e\u0434\u043d\u0430 \u0438\u0437 \u043d\u0438\u0445<\/u><\/a>. <a href=\"https:\/\/meiert.com\/en\/blog\/reasons-against-resets\/\"><u>\u0410 \u0432\u043e\u0442 \u0435\u0449\u0435 \u043e\u0434\u043d\u0430<\/u><\/a>.<\/p>\n<p>\u0412\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0441\u0432\u043e\u0438\u043c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u043c \u0438 \u0441\u0430\u043c\u0438 \u0440\u0435\u0448\u0430\u0442\u044c, \u043a\u0430\u043a \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 CSS. \u042d\u0442\u043e \u043c\u043e\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c, \u043a \u0447\u0435\u043c\u0443 \u0432\u0441\u0435 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u044f\u0432\u043b\u044f\u044e\u0441\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043a\u043e\u043c CSS.<\/p>\n<p><strong>. \u00a0 \u00a0 . \u00a0 \u00a0 .<\/strong><\/p>\n<p><strong>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u044f \u0445\u043e\u0442\u0435\u043b\u0430 \u0431\u044b \u043f\u0440\u0438\u0437\u0432\u0430\u0442\u044c \u0432\u0430\u0441 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043d\u0430\u0448\u043b\u0438 \u043e \u0441\u0431\u0440\u043e\u0441\u0430\u0445 CSS, &#8212; \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044f \u0447\u0442\u043e-\u0442\u043e \u0443\u043f\u0443\u0441\u0442\u0438\u043b\u0430. \u042f \u0431\u0443\u0434\u0443 \u043e\u0447\u0435\u043d\u044c \u0440\u0430\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0430\u0448\u0438 \u043e\u0442\u0437\u044b\u0432\u044b!<\/strong><\/p>\n<hr\/>\n<p><em>\u041c\u044b \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u0432 \u043f\u0440\u0435\u0434\u0434\u0432\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0440\u0442\u0430 \u043a\u0443\u0440\u0441\u0430 <\/em><a href=\"https:\/\/otus.pw\/m6o9\/\"><em>HTML\/ CSS<\/em><\/a><em>. C\u0442\u0430\u0442\u044c\u044f \u0431\u044b\u043b\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043f\u0440\u0435\u043f\u043e\u0434\u0430\u0432\u0430\u0442\u0435\u043b\u0435\u043c OTUS  &#8212; \u041c\u0430\u0440\u0433\u0430\u0440\u0438\u0442\u043e\u0439 \u041e\u0431\u0440\u0430\u0437\u0446\u043e\u0432\u043e\u0439  \u0438 \u0440\u0430\u043d\u0435\u0435 \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043b\u0430\u0441\u044c <\/em><a href=\"https:\/\/medium.com\/weekly-webtips\/a-tale-of-css-resets-and-everything-you-need-to-know-about-them-781849d9b7f2\"><em>\u0442\u0443\u0442<\/em><\/a><em>.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/580442\/\"> https:\/\/habr.com\/ru\/articles\/580442\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u043e\u043b\u043d\u043e\u0435 ( \u0438\u043b\u0438 \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0435, \u043d\u0430\u0434\u0435\u044e\u0441\u044c) \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c CSS Reset<strong>\u00a0\u00a0<\/strong><\/p>\n<figure class=\"full-width\"><figcaption>\u0424\u043e\u0442\u043e Sasha \u2022 Stories \u043d\u0430 Unsplash<\/figcaption><\/figure>\n<p>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0432\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435: \u043c\u0435\u043d\u044f \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u0438 CSS-\u0441\u0431\u0440\u043e\u0441\u044b \u043f\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435. \u042f \u0438\u043d\u0436\u0435\u043d\u0435\u0440-\u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u043d\u0442 \u043f\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u043c\u0443 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u0432\u0440\u0435\u043c\u044f \u043e\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e \u043d\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b.<\/p>\n<p>\u0412 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442, \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0441 \u043d\u0443\u043b\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u043f\u043e\u0434\u0440\u044f\u0434 \u0438 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0432\u0448\u0438\u0441\u044c \u0441 \u043e\u0434\u043d\u0438\u043c\u0438 \u0438 \u0442\u0435\u043c\u0438 \u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u044f \u0432\u044b\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 &#171;<strong>\u0441\u0442\u0438\u043b\u044c \u0440\u0430\u0431\u043e\u0442\u044b<\/strong>&#171;, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u044c\u0441\u044f, \u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043c\u043e\u0435\u0433\u043e CSS-\u043a\u043e\u0434\u0430 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c &#171;<strong>\u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043b &#8212; \u0438 \u0433\u043e\u0442\u043e\u0432\u043e<\/strong>&#187; \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b\u0430 \u043c\u0435\u043d\u044f \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c. \u0422\u043e\u0433\u0434\u0430 \u044f \u0440\u0435\u0448\u0438\u043b\u0430 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443 <strong>\u0441\u0431\u0440\u043e\u0441\u043e\u0432<\/strong> \u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u0430 \u0432 \u043d\u0438\u0445 <strong>\u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u044e\u0430\u043d\u0441\u043e\u0432, \u0447\u0435\u043c \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0432\u043d\u0430\u0447\u0430\u043b\u0435<\/strong>.<\/p>\n<blockquote>\n<p><em>\u0427\u0435\u043c \u0442\u0449\u0430\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u0432\u044b \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0435\u0441\u044c (dev-ops, \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d\u044b, \u0431\u0430\u043d\u0434\u043b\u0438\u043d\u0433 \u0437\u0430\u043a\u0430\u0437\u043e\u0432) \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u0437\u0430\u0440\u0430\u043d\u0435\u0435, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u0435 \u0432 \u0434\u043e\u043b\u0433\u043e\u0441\u0440\u043e\u0447\u043d\u043e\u0439 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0434\u043b\u044f reset.css \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0432\u0430\u043c \u0447\u0430\u0441\u044b \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0432\u0430\u0448\u0435\u0433\u043e CSS.<\/em><\/p>\n<\/blockquote>\n<p>\u042d\u0442\u043e \u043c\u043e\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u044e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043d\u0438\u0445 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0441\u0435\u043e\u0431\u044a\u0435\u043c\u043b\u044e\u0449\u0435\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0437\u043e\u0440.<\/p>\n<h4>\u041a\u043e\u0440\u0435\u043d\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h4>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442 \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043c\u0430\u043a\u0435\u0442 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0435\u0433\u043e \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443. <strong><em>\u042f \u0441\u043e\u0437\u0434\u0430\u043b\u0430 \u0444\u0435\u0439\u043a\u043e\u0432\u044b\u0439 \u043c\u0430\u043a\u0435\u0442 \u0432 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445.<\/em><\/strong><\/p>\n<p>.<\/p>\n<figure class=\"full-width\"><figcaption>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u0440\u0435\u0441\u0441-\u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0446\u0435\u043b\u0435\u0439  <\/figcaption><\/figure>\n<p>\u0410 \u0432\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0431\u0435\u0437 \u0441\u0442\u0438\u043b\u0435\u0439, \u043f\u0440\u043e\u0441\u0442\u043e \u201c\u0433\u043e\u043b\u044b\u0439\u201d HTML.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<blockquote>\n<p><em>\u041f\u043e \u043c\u0435\u0440\u0435 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u0438 CSS \u0432 \u0432\u0430\u0448 HTML. \u0421\u043e\u0437\u0434\u0430\u0432 \u0432\u0435\u0441\u044c \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b, \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0435\u0433\u043e \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0440\u0430\u0441\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0439.<\/em><\/p>\n<\/blockquote>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<blockquote>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0432\u0430\u043c \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b (\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0441\u0442\u0438\u043b\u0438 \u0444\u043e\u0440\u043c).<\/p>\n<\/blockquote>\n<figure class=\"full-width\"><figcaption>\u041d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u0432 \u0442\u043e\u043c, \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442 \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0438\u043c \u0436\u0435 HTML \u0438 CSS \u043c\u0430\u043a\u0435\u0442\u043e\u043c, \u0431\u043e\u043b\u0435\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u2026<\/figcaption><\/figure>\n<figure class=\"full-width\"><figcaption>&#8230; \u0438 \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u043d\u0438 \u0432\u0438\u0434\u043d\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0445<\/figcaption><\/figure>\n<p>\u042d\u0442\u0438 \u043c\u0435\u043b\u043a\u0438\u0435 \u043d\u0435\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u0434\u0438\u0437\u0430\u0439\u043d \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. <strong>\u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e \u044d\u0442\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043b\u044e\u0434\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u0431\u0440\u043e\u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a: \u0447\u0442\u043e\u0431\u044b \u0441\u0430\u0439\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/strong><\/p>\n<blockquote>\n<p><em>\u041d\u0438\u043a\u043e\u0433\u0434\u0430 \u0435\u0449\u0435 \u043c\u044b \u043d\u0435 \u0438\u043c\u0435\u043b\u0438 \u0442\u0430\u043a \u043c\u0430\u043b\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u0430\u0433\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043b\u044e\u0434\u0438 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0442 \u043d\u0430\u0448\u0438 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u044b, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0443 \u043d\u0430\u0441 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0435\u0449\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u044b.<\/em><\/p>\n<\/blockquote>\n<p><em>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 25\/09\/2020:<\/em><\/p>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u043c \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435\u043c \u043e\u0431 \u044d\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442 &#171;<a href=\"https:\/\/jgthms.com\/web-design-in-4-minutes\/\"><u>\u0412\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d \u0437\u0430 4 \u043c\u0438\u043d\u0443\u0442\u044b<\/u><\/a>&#171;, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441, \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0443\u0442\u044b\u0439 \u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c \u0437\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0434\u0432\u0430 \u0434\u0435\u0441\u044f\u0442\u0438\u043b\u0435\u0442\u0438\u044f (\u044f \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u044e \u043e \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430\u0445).<\/p>\n<p><em>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 25\/09\/2020:<\/em><\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0431\u0443\u0434\u0435\u0442 <a href=\"https:\/\/codepen.io\/MartijnCuppens\/pen\/MXojmw\"><u>Codepen<\/u><\/a>, \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u201c<strong>\u0444\u0443\u0442\u043f\u0440\u0438\u043d\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/strong>\u201d:<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6151abcb122cc8f6386967bd\" data-style=\"\" id=\"6151abcb122cc8f6386967bd\" width=\"\"><\/div>\n<h4>\u0427\u0442\u043e \u0441 \u044d\u0442\u0438\u043c \u0434\u0435\u043b\u0430\u0442\u044c?<\/h4>\n<figure class=\"full-width\"><figcaption>\u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043d\u0430\u0431\u0438\u0440\u0430\u0435\u0442\u0435 \u0432 \u0413\u0443\u0433\u043b\u0435 \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u044d\u0442\u043e\u0433\u043e, \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442\u0435 \u043d\u0430 \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u0438 \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442\u0435. \u0412\u044b \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e \u043c\u043d\u043e\u0433\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c, \u0438 \u0432\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443!<\/figcaption><\/figure>\n<p><strong>\u042d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0442\u0435\u043c\u0430 \u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430\u044f \u0434\u043b\u044f \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432 (\u043e\u0434\u043d\u0430 \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 \u0432\u0435\u0449\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0438\u0437\u0443\u0447\u0430\u0435\u0442\u0435, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0435 \u043f\u0438\u0441\u0430\u0442\u044c CSS), \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0435\u0435 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0443\u043f\u0443\u0441\u043a\u0430\u044e\u0442 \u0438\u0437 \u0432\u0438\u0434\u0443.<\/strong><\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u044f \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0441\u0431\u0440\u043e\u0441\u0430 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043d\u0435\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u044f \u0443\u0436\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u043e\u0442\u043b\u0430\u0434\u043a\u0443 CSS.<\/p>\n<h3>\u0417\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u0435\u043d \u0441\u0431\u0440\u043e\u0441 CSS?<\/h3>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0432\u0432\u043e\u0434\u0438\u0442\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e HTML-\u0442\u0435\u0433\u043e\u0432 \u0432 \u0444\u0430\u0439\u043b .<em>html<\/em>. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u044d\u0442\u043e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n<figure class=\"full-width\"><figcaption>\u041d\u0435\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u043d\u0435\u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 HTML-\u0444\u0430\u0439\u043b, url: https:\/\/jsbin.com\/tesaxiqeti\/edit?html,output<\/figcaption><\/figure>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432 \u0444\u0430\u0439\u043b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0432\u044b, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u0435\u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u043f\u043e\u043c\u0435\u0449\u0435\u043d \u0432 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0415\u0449\u0435 \u043e\u0434\u043d\u0438\u043c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c <a href=\"http:\/\/info.cern.ch\/hypertext\/WWW\/TheProject.html\"><u>\u0441\u0430\u043c\u044b\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442<\/u><\/a>. \u041b\u044e\u0431\u043e\u043f\u044b\u0442\u043d\u043e, \u0447\u0442\u043e <strong>\u043d\u0430 \u043d\u0435\u043c \u043d\u0435\u0442 \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e CSS. \u0411\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e. \u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043d\u0435\u0442.<\/strong><\/p>\n<blockquote>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0447\u0442\u043e-\u0442\u043e, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439? \u041c\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u043a \u044d\u0442\u043e\u043c\u0443, \u043d\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0435 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>\u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u043f\u0440\u0438 \u043f\u043e\u043b\u043d\u043e\u043c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 CSS \u0432\u044b, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u044d\u043a\u0440\u0430\u043d.<\/p>\n<\/blockquote>\n<p>\u0415\u0441\u043b\u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 <a href=\"https:\/\/www.w3.org\/TR\/CSS2\/cascade.html\"><u>\u043f\u043e\u043d\u044f\u0442\u043d\u043e<\/u><\/a>, \u0442\u043e <strong>\u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0435\u0441\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 &#171;\u0430\u0433\u0435\u043d\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f&#187;<\/strong>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a \u043a\u0430\u0436\u0434\u043e\u0439 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041f\u043e\u0447\u0435\u043c\u0443? \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0442\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <a href=\"https:\/\/medium.com\/@luisvieira_gmr\/understanding-the-critical-rendering-path-rendering-pages-in-1-second-735c6e45b47a\"><strong><u>\u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0443\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430<\/u><\/strong><\/a> \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u0434\u0435\u043b\u0430\u043b \u043f\u0430\u0440\u0441\u0438\u043d\u0433 DOM, \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0430\u0432\u0438\u043b CSS \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b HTML \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<blockquote>\n<p><em>DOM \u0438 CSSOM \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u0435\u0434\u0438\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043c\u0430\u043a\u0435\u0442\u0430.<\/em><\/p>\n<\/blockquote>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><strong>\u0422\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0435\u0440\u0435\u0432\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/strong><\/p>\n<ol>\n<li>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0443 \u0434\u0435\u0440\u0435\u0432\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0437\u043b\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0440\u0438\u0441\u0443\u0439\u0442\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0443\u0437\u043b\u044b \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<\/li>\n<\/ol>\n<p><strong>\u041f\u0440\u0438 \u043f\u043e\u043b\u043d\u043e\u043c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 CSS \u0432\u044b, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u044d\u043a\u0440\u0430\u043d<\/strong>. \u041a\u0430\u043a \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u0432 <a href=\"https:\/\/www.w3.org\/TR\/CSS21\/cascade.html#cascade\"><strong><u>\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/u><\/strong><\/a>:<\/p>\n<p><em>&#171;<\/em><strong><em>\u0410\u0433\u0435\u043d\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/em><\/strong><em>: <\/em><a href=\"https:\/\/www.w3.org\/TR\/CSS2\/conform.html#conformance\"><em><u>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0430\u0433\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/u><\/em><\/a><em> \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e (\u0438\u043b\u0438 \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f \u0442\u0430\u043a, \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u043e\u043d\u0438 \u0435\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442). \u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0430\u0433\u0435\u043d\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u044f\u0437\u044b\u043a\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u044e\u0442 \u043e\u0431\u0449\u0438\u043c \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 EM \u0432 HTML \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430). \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 HTML \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0430 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <\/em><a href=\"https:\/\/www.w3.org\/TR\/CSS2\/sample.html\"><em><u>\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f HTML<\/u><\/em><\/a><em>.<\/em><\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043d\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0430\u0433\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u0435\u043b\u0430\u044e\u0442 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. [&#8230;]<\/em><\/p>\n<p><em>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 \u0430\u0432\u0442\u043e\u0440\u0441\u043a\u0438\u0445 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438\u043c\u0435\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u0439 \u0432\u0435\u0441, \u0447\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0445 \u0441\u0442\u0438\u043b\u0435\u0439. \u041e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b &#171;!important&#187; \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u044b\u0439. \u0412\u0441\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0438 \u0430\u0432\u0442\u043e\u0440\u0441\u043a\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\u043c\u0435\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u0439 \u0432\u0435\u0441, \u0447\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 UA&#8217;s (\u0430\u0433\u0435\u043d\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f) \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e&#187;.<\/em><\/p>\n<blockquote>\n<p><em>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438\u043c\u0435\u044e\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 (\u043d\u0435\u0447\u0442\u043e <\/em><a href=\"https:\/\/www.w3.org\/TR\/CSS2\/sample.html\"><em><u>\u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435<\/u><\/em><\/a><em>), \u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0443\u0441\u0442\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430\u0448 HTML-\u043a\u043e\u0434 \u0431\u0435\u0437 \u043a\u043e\u0434\u0430 CSS.<\/em><\/p>\n<\/blockquote>\n<pre><code class=\"css\">html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre   { display: block; unicode-bidi: embed } li              { display: list-item } head            { display: none } table           { display: table } tr              { display: table-row } thead           { display: table-header-group } tbody           { display: table-row-group } tfoot           { display: table-footer-group } col             { display: table-column } colgroup        { display: table-column-group } td, th          { display: table-cell } caption         { display: table-caption } th              { font-weight: bolder; text-align: center } caption         { text-align: center } body            { margin: 8px } h1              { font-size: 2em; margin: .67em 0 } h2              { font-size: 1.5em; margin: .75em 0 } h3              { font-size: 1.17em; margin: .83em 0 } h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu            { margin: 1.12em 0 } h5              { font-size: .83em; margin: 1.5em 0 } h6              { font-size: .75em; margin: 1.67em 0 } h1, h2, h3, h4, h5, h6, b, strong          { font-weight: bolder } blockquote      { margin-left: 40px; margin-right: 40px } i, cite, em, var, address    { font-style: italic } pre, tt, code, kbd, samp       { font-family: monospace } pre             { white-space: pre } button, textarea, input, select   { display: inline-block } big             { font-size: 1.17em } small, sub, sup { font-size: .83em } sub             { vertical-align: sub } sup             { vertical-align: super } table           { border-spacing: 2px; } thead, tbody, tfoot           { vertical-align: middle } td, th, tr      { vertical-align: inherit } s, strike, del  { text-decoration: line-through } hr              { border: 1px inset } ol, ul, dir, menu, dd        { margin-left: 40px } ol              { list-style-type: decimal } ol ul, ul ol, ul ul, ol ol    { margin-top: 0; margin-bottom: 0 } u, ins          { text-decoration: underline } br:before       { content: \"\\A\"; white-space: pre-line } center          { text-align: center } :link, :visited { text-decoration: underline } :focus          { outline: thin dotted invert }  \/* Begin bidirectionality settings (do not change) *\/ BDO[DIR=\"ltr\"]  { direction: ltr; unicode-bidi: bidi-override } BDO[DIR=\"rtl\"]  { direction: rtl; unicode-bidi: bidi-override }  *[DIR=\"ltr\"]    { direction: ltr; unicode-bidi: embed } *[DIR=\"rtl\"]    { direction: rtl; unicode-bidi: embed }  @media print {   h1            { page-break-before: always }   h1, h2, h3,   h4, h5, h6    { page-break-after: avoid }   ul, ol, dl    { page-break-before: avoid } }<\/code><\/pre>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043b\u0435\u0433\u043a\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 <a href=\"https:\/\/stackoverflow.com\/questions\/6867254\/browsers-default-css-for-html-elements\"><u>\u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432<\/u><\/a> \u0438\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0437\u0434\u0435\u0441\u044c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u043e\u043d\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0435.<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/chromium.googlesource.com\/chromium\/blink\/+\/master\/Source\/core\/css\/html.css\"><u>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 Chromium UA<\/u><\/a> &#8212; Google Chrome \u0438 Opera<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/dxr.mozilla.org\/mozilla-central\/source\/layout\/style\/res\/html.css\"><u>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 Mozilla UA<\/u><\/a> &#8212; Firefox<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/trac.webkit.org\/browser\/trunk\/Source\/WebCore\/css\/html.css\"><u>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 WebKit UA<\/u><\/a> &#8212; Safari<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><figcaption>https:\/\/bitsofco.de\/a-look-at-css-resets-in-2018\/<\/figcaption><\/figure>\n<h4>\u0418\u0442\u0430\u043a, \u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c CSS \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e?<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0437\u0443\u0447\u0438\u043b\u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 , \u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430. \u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u0438, \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c <a href=\"https:\/\/stackoverflow.com\/questions\/6867254\/browsers-default-css-for-html-elements\/6867287#6867287\"><u>\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432<\/u><\/a> \u043d\u0430\u0448\u0438\u043c\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<blockquote>\n<p><em>\u0422\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430.<\/em><\/p>\n<\/blockquote>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 <a href=\"https:\/\/cssreset.com\/what-is-a-css-reset\/\"><u>cssreset.com<\/u><\/a>:<\/p>\n<p><em>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0434\u0430\u0442\u044c\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c, \u0437\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e &#8212; \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e. \u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e\u0439 \u0431\u0430\u0437\u044b, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u0441<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-383323","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/383323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=383323"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/383323\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=383323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=383323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=383323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}