{"id":261973,"date":"2015-07-21T15:37:02","date_gmt":"2015-07-21T11:37:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=261973"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=261973","title":{"rendered":"12 \u043c\u0430\u043b\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0444\u0430\u043a\u0442\u043e\u0432 \u043e CSS (\u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435)"},"content":{"rendered":"<p>       \u0411\u043e\u043b\u044c\u0448\u0435 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434 \u044f \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043b <a href=\"http:\/\/www.sitepoint.com\/12-little-known-css-facts\/\">12 \u043c\u0430\u043b\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0444\u0430\u043a\u0442\u043e\u0432 \u043e CSS<\/a> (<a href=\"http:\/\/habrahabr.ru\/post\/220237\/\">\u043f\u0435\u0440\u0435\u0432\u043e\u0434<\/a> \u043d\u0430 \u0445\u0430\u0431\u0440\u0435), \u0438 \u043f\u043e \u0441\u0435\u0439 \u0434\u0435\u043d\u044c \u044d\u0442\u043e \u0431\u044b\u043b\u0430 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0441\u0442\u0430\u0442\u0435\u0439 \u043d\u0430 SitePoint. \u0421 \u0442\u0435\u0445 \u043f\u043e\u0440 \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u043b \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0441\u0442\u0435\u0439 \u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u043f\u043e CSS \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0439 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438. \u041c\u044b \u0436\u0435 \u0432\u0441\u0435 \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0444\u0438\u043b\u044c\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043f\u043e\u0441\u043e\u0431\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0445\u043e\u0434\u0443 \u043d\u043e\u0432\u043e\u043c\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u043a\u0432\u0435\u043b\u0430, \u0432\u0435\u0440\u043d\u043e?<\/p>\n<p>  <a href=\"#\"><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/f50\/157\/c62\/f50157c62f3444ae8e82acdea5745673.png\" \/><\/div>\n<p><\/a><br \/>  <sup>\u0410\u0432\u0442\u043e\u0440 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 SitePoint\/<a href=\"http:\/\/scncf-lab.com\/\">Natalia Balska<\/a>.<\/sup><\/p>\n<p>  \u0418\u0442\u0430\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0443 \u0443\u0436\u0435 \u044d\u0442\u043e\u0433\u043e \u0433\u043e\u0434\u0430 \u0434\u044e\u0436\u0438\u043d\u044b \u043c\u0430\u043b\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0444\u0430\u043a\u0442\u043e\u0432 \u043e CSS. \u042f \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u043c\u043d\u043e\u0433\u0438\u043c \u0438\u0437 \u0432\u0430\u0441 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445, \u043d\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u0430\u0442\u044c \u043c\u043d\u0435 \u0437\u043d\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u0444\u0430\u043a\u0442\u043e\u0432 \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u0434\u043b\u044f \u0432\u0430\u0441 \u043d\u043e\u0432\u044b\u043c\u0438.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/b><\/p>\n<div class=\"spoiler_text\">0. \u0414\u0430, \u044f \u0432\u0438\u0434\u0435\u043b \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u0443 \u0447\u0430\u0441\u043e\u0432 \u043d\u0430\u0437\u0430\u0434 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u044d\u0442\u043e\u0439-\u0436\u0435 \u0441\u0442\u0430\u0442\u044c\u0438. \u041d\u043e \u043c\u043d\u0435 \u0441\u043e\u0432\u0435\u0441\u0442\u044c \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u0434\u043d\u0435\u0432\u043d\u044b\u0439 \u0442\u0440\u0443\u0434 \u0438\u0437-\u0437\u0430 \u043e\u043f\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0430 \u043f\u0430\u0440\u0443 \u0447\u0430\u0441\u043e\u0432 \ud83d\ude42 \u0432 \u043e\u0431\u0449\u0435\u043c, \u043d\u0430 \u0432\u0430\u0448 \u0441\u0443\u0434.<\/p>\n<p>  1. \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0438\u0437\u043e\u0431\u0438\u043b\u0443\u0435\u0442 \u0440\u0430\u0431\u043e\u0447\u0438\u043c\u0438 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f\u043c\u0438 \u0441 CodePen. \u0425\u0430\u0431\u0440, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u0441 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0430 \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0438\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u043c\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438, \u0434\u0443\u043c\u0430\u044e, \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u00ab\u043b\u044b\u0441\u043e\u0439\u00bb \u043f\u0440\u043e\u0441\u0442\u044b\u043d\u0435\u0439, \u043d\u043e, \u044f \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u0432 \u043d\u043e\u0432\u043e\u043c \u043e\u043a\u043d\u0435.<\/p>\n<p>  2. \u0425\u043e\u0442\u044f \u044f \u0438\u043c\u0435\u044e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u0432\u0435\u0440\u0441\u0442\u043a\u0435, \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0438 \u043d\u0435 \u0442\u0430\u043a\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043f\u043e\u043d\u0430\u0447\u0430\u043b\u0443. \u0417\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f \u043f\u043e \u043e\u0448\u0438\u0431\u043a\u0430\u043c, \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0430\u043c, \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0438 \u0442.\u043f. \u043f\u0440\u043e\u0441\u044c\u0431\u0430 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0442\u044c \u043b\u0438\u0447\u043d\u044b\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u0432 \u0445\u0430\u0431\u0440\u0430\u043f\u043e\u0447\u0442\u0443.  <\/div>\n<\/div>\n<p><a name=\"habracut\"><\/a><\/p>\n<h2>1. \u0412 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <code>border-radius<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u00ab\u0441\u043b\u044d\u0448\u00bb \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/h2>\n<p>  \u041e\u0431 \u044d\u0442\u043e\u043c \u044f \u0443\u0436\u0435 <a href=\"http:\/\/www.sitepoint.com\/setting-css3-border-radius-with-slash-syntax\/\">\u043f\u0438\u0441\u0430\u043b<\/a> \u043d\u0430 SitePoint \u0431\u043e\u043b\u044c\u0448\u0435 \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434, \u043d\u043e \u044f \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u043c\u043d\u043e\u0433\u0438\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0435 \u0438 \u0434\u0430\u0436\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043d\u0435 \u0437\u043d\u0430\u044e\u0442 \u043e \u0442\u0430\u043a\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  \u0412\u0435\u0440\u044c\u0442\u0435 \u0438\u043b\u0438 \u043d\u0435\u0442, \u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439:<\/p>\n<pre><code class=\"css\">.box {   border-radius: 35px 25px 30px 20px \/ 35px 25px 15px 30px; } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0432\u0438\u0434\u0435\u043b\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430, \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u0438\u0437 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438:<\/p>\n<blockquote><p>\u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0434\u043e \u0438 \u043f\u043e\u0441\u043b\u0435 \u0441\u043b\u044d\u0448\u0430, \u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0434 \u0441\u043b\u044d\u0448\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0434\u0438\u0443\u0441, \u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435 \u0441\u043b\u0435\u0448\u0430 \u2014 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439. \u0415\u0441\u043b\u0438 \u0441\u043b\u044d\u0448 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u2014 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u043e\u0438\u0445 \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u0432 (\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e) \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438.<\/p><\/blockquote>\n<p>  \u0412 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0445\u0435\u043c\u0430:<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/c81\/5db\/719\/c815db7190ae46db8b55930e6526644e.png\" \/><\/div>\n<p>  \u0412 \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0438 \u043a \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 \u0441\u043a\u0430\u0437\u0430\u043d\u043e: \u00ab\u0414\u0432\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>border-top-left-radius: 55pt 25pt<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u043a\u0440\u0438\u0432\u0438\u0437\u043d\u0443 \u0443\u0433\u043b\u0430\u00bb.<\/p>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043b\u044d\u0448\u0430 \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>border-radius<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u0438\u043c\u043c\u0435\u0442\u0440\u0438\u0447\u043d\u043e \u0438\u0437\u043e\u0433\u043d\u0443\u0442\u044b\u0435 \u0443\u0433\u043b\u044b (<i>\u043f\u0440\u0438\u043c. \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430: \u0441\u043a\u0440\u0443\u0433\u043b\u044b<\/i>). \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e\u043c, \u043f\u0440\u043e\u0447\u0442\u0438\u0442\u0435 \u043c\u043e\u044e \u0441\u0442\u0430\u0442\u044c\u044e (\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b\u0448\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043b\u0430\u0441\u044c), \u0438\u043b\u0438 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0443\u0434\u043e\u0431\u043d\u0443\u044e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Tools\/Border-radius_generator\">\u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044e \u043e\u0442 MDN<\/a>.<\/p>\n<p>  \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e <code>border-radius<\/code> \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0418\u0437 \u0442\u0435\u0445, \u0447\u0442\u043e \u044f \u043d\u0430\u0448\u0435\u043b, \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u043e\u0442 MDN \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u00ab\u0441\u043b\u044d\u0448\u00bb \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441.<\/p>\n<h2>2. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>font-weight<\/code> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/h2>\n<p>  \u041e\u0431\u044b\u0447\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>font-weight<\/code>, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043d\u0435\u043c \u043b\u0438\u0431\u043e <code>normal<\/code>, \u043b\u0438\u0431\u043e <code>bold<\/code>. \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u043b\u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u0446\u0435\u043b\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441 \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0432 \u0441\u043e\u0442\u043d\u044e: <code>100<\/code>, <code>200<\/code>, \u0438 \u0442.\u0434. \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e <code>900<\/code>.<\/p>\n<p>  \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0447\u0430\u0441\u0442\u043e \u0437\u0430\u0431\u044b\u0432\u0430\u044e\u0442: <code>bolder<\/code> \u0438 <code>lighter<\/code>.<\/p>\n<p>  \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u044d\u0442\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 \u0434\u0435\u043b\u0430\u044e\u0442 \u0448\u0440\u0438\u0444\u0442 \u0436\u0438\u0440\u043d\u0435\u0435 \u0438\u043b\u0438 \u0442\u043e\u043d\u044c\u0448\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0421\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0438\u043c\u0435\u0435\u0442\u0435 \u0434\u0435\u043b\u043e \u0441\u043e \u0448\u0440\u0438\u0444\u0442\u043e\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0435\u043f\u0435\u043d\u0435\u0439 \u00ab\u0436\u0438\u0440\u043d\u043e\u0441\u0442\u0438\u00bb, \u0433\u0434\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f \u0442\u043e\u043b\u0449\u0435, \u0447\u0435\u043c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 <code>bold<\/code>, \u0438 \u0442\u043e\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442.<\/p>\n<p>  \u0412 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0435, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043d\u0430 \u0446\u0435\u043b\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u0445, <code>700<\/code> \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 <code>bold<\/code> \u0438 <code>400<\/code> \u0437\u043d\u0430\u0447\u0438\u0442 <code>normal<\/code>. \u0418\u0442\u0430\u043a, \u0435\u0441\u043b\u0438 \u0432\u0430\u0448 \u0448\u0440\u0438\u0444\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u0449\u0438\u043d\u0443 <code>300<\/code>, \u043d\u043e \u043d\u0435 \u043c\u0435\u043d\u044c\u0448\u0435, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>lighter<\/code> \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u0449\u0438\u043d\u0443 <code>300<\/code>, \u0435\u0441\u043b\u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u0430\u044f \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 <code>400<\/code>. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0448\u0440\u0438\u0444\u0442 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u043d\u043a\u043e\u0433\u043e \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f (\u0442.\u0435. \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>400<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u044b\u043c \u0442\u043e\u043d\u043a\u0438\u043c), \u0442\u043e \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0442\u0430\u043a \u0438 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f <code>400<\/code>, \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>lighter<\/code> \u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043d\u0430 \u0442\u0435\u043a\u0441\u0442.<\/p>\n<p>  \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 <a href=\"http:\/\/codepen.io\/SitePoint\/pen\/domZLx\">\u043f\u0440\u0438\u043c\u0435\u0440<\/a>.<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0448\u0440\u0438\u0444\u0442 <a href=\"https:\/\/www.google.com\/fonts\/specimen\/Exo+2\">Exo 2<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 18 \u0440\u0430\u0437\u043d\u044b\u0445 \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u0439. \u0412 \u043c\u043e\u0435\u043c \u0434\u0435\u043c\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u0443\u0440\u0441\u0438\u0432\u043d\u044b\u0435 \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f, \u043d\u043e \u0448\u0440\u0438\u0444\u0442 \u0438\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0442 <code>100<\/code> \u0434\u043e <code>900<\/code>.<\/p>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f 12 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u00abbox\u00bb \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 <code>font-weight<\/code>, \u0432\u043a\u043b\u044e\u0447\u0430\u044f <code>bolder<\/code> \u0438 <code>lighter<\/code>, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u00ab\u0436\u0438\u0440\u043d\u043e\u0441\u0442\u044c\u00bb \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f. \u041d\u0438\u0436\u0435 \u043f\u043e\u0434 \u0441\u043f\u043e\u0439\u043b\u0435\u0440\u043e\u043c \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d CSS \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0432 \u043a\u043e\u0434\u0435, \u0438 \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u00abbox\u00bb \u0432\u043b\u043e\u0436\u0435\u043d \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439:<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">CSS \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"css\">.box {   font-weight: 100; }   .box-2 {   font-weight: bolder; \/* \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043d\u0430 400 *\/ }   .box-3 {   font-weight: bolder; \/* \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043d\u0430 700 *\/ }   .box-4 {   font-weight: 400; }   .box-5 {   font-weight: bolder; \/* \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043d\u0430 700 *\/ }   .box-6 {   font-weight: bolder; \/* \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043d\u0430 900 *\/ }   .box-7 {   font-weight: 700; }   .box-8 {   font-weight: bolder; \/* \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043d\u0430 900 *\/ }   .box-9 {   font-weight: bolder; \/* \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043d\u0430 900 *\/ }   .box-10 {   font-weight: lighter; \/* \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043d\u0430 700 *\/ }   .box-11 {   font-weight: lighter; \/* \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043d\u0430 400 *\/ }   .box-12 {   font-weight: lighter; \/* \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043d\u0430 100 *\/ } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043e\u0432\u0430 \u00abbolder\u00bb \u0438 \u00ablighter\u00bb \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442 <code>font-weight<\/code> \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>100<\/code>, <code>400<\/code>, <code>700<\/code> \u0438 <code>900<\/code>. \u0421 \u0434\u0435\u0432\u044f\u0442\u044c\u044e \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u044d\u0442\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0443\u0442 \u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c <code>200<\/code>, <code>300<\/code>, <code>500<\/code>, <code>600<\/code> \u0438 <code>800<\/code>.<\/p>\n<p>  \u0422\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0440\u0438\u0444\u0442 \u0432 \u0441\u0435\u0440\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u00ab\u0436\u0438\u0440\u043d\u0435\u0435\u00bb \u0438\u043b\u0438 \u00ab\u0442\u043e\u043d\u044c\u0448\u0435\u00bb. \u041d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0436\u0438\u0440\u043d\u0435\u0435 \u0438\u043b\u0438 \u0442\u043e\u043d\u044c\u0448\u0435, \u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f \u0436\u0438\u0440\u043d\u0435\u0435 \u0438\u043b\u0438 \u0442\u043e\u043b\u0449\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0441\u0430\u043c\u043e\u0435 \u0442\u043e\u043d\u043a\u043e\u0435 \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>300<\/code> (\u043a\u0430\u043a \u0443 \u0448\u0440\u0438\u0444\u0442\u0430 <a href=\"https:\/\/www.google.com\/fonts\/specimen\/Open+Sans\">Open Sans<\/a>), \u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>400<\/code>, \u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 \u00ablighter\u00bb \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442 <code>font-weight<\/code> \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>300<\/code>.<\/p>\n<p>  \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u043c, \u043d\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u044d\u0442\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430.<\/p>\n<h2>3. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>outline-offset<\/code><\/h2>\n<p>  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>outline<\/code> \u0445\u043e\u0440\u043e\u0448\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0441\u0432\u043e\u0435\u043c\u0443 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0443 \u043f\u0440\u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0435 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 (<a href=\"http:\/\/www.impressivewebs.com\/css-things-that-dont-occupy-space\/\">\u043a\u043e\u043d\u0442\u0443\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0438\u0435 \u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/a>). \u0412 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u043e\u0434\u043d\u0430\u043a\u043e, \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>outline-offset<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437 \u0435\u0433\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u2014 \u043e\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f \u043a\u043e\u043d\u0442\u0443\u0440\u0430 \u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  <a href=\"http:\/\/codepen.io\/SitePoint\/pen\/VLXyZw\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b <code>outline-offset<\/code><\/a>.<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u0434\u0432\u0438\u0433\u0430\u0439\u0442\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0432\u043f\u0440\u0430\u0432\u043e\/\u0432\u043b\u0435\u0432\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043e\u0442\u0441\u0442\u0443\u043f \u043a\u043e\u043d\u0442\u0443\u0440\u0430 \u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0442\u0441\u0442\u0443\u043f \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0442 <code>0px<\/code> \u0434\u043e <code>30px<\/code>, \u043d\u043e \u0432 CSS \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u043e\u0442\u0441\u0442\u0443\u043f. \u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0445\u043e\u0442\u044c <code>outline<\/code> \u0438 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e (\u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0449\u0435\u0435 \u0446\u0432\u0435\u0442, \u0441\u0442\u0438\u043b\u044c \u0438 \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b), \u043e\u043d\u043e \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f <code>outline-offset<\/code>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 <code>outline-offset<\/code> \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>  \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043c\u0438\u043d\u0443\u0441 <code>outline-offset<\/code> \u2014 \u043e\u043d \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438, \u043a\u0440\u043e\u043c\u0435 Internet Explorer (\u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0434\u0430\u0436\u0435 IE 11).<\/p>\n<h2>4. \u0412 CSS \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>table-layout<\/code><\/h2>\n<p>  \u0412\u044b, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0441\u043a\u0430\u0436\u0435\u0442\u0435: \u00ab\u0425\u0430, \u0441\u0442\u0430\u0440\u043e \u043a\u0430\u043a \u043c\u0438\u0440. \u042f \u0437\u043d\u0430\u044e \u043e <code>display:table<\/code>. \u041f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\u00bb. \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u043e, \u043e \u0447\u0435\u043c \u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c. \u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u044f \u0441\u043a\u0430\u0437\u0430\u043b \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>table-layout<\/code>, \u0430 \u043d\u0435 <code>display<\/code>.<\/p>\n<p>  \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>table-layout<\/code> \u043d\u0435 \u0441\u0430\u043c\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f CSS \u0444\u0438\u0447\u0430, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e, \u0430 \u043f\u043e\u0442\u043e\u043c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440. \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0433\u043b\u0430\u0441\u0438\u0442:<\/p>\n<blockquote><p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c (\u0431\u044b\u0441\u0442\u0440\u043e\u043c) \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0440\u0430\u0437\u0431\u0438\u0432\u043a\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445; \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0448\u0438\u0440\u0438\u043d\u044b \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0438 \u0431\u043e\u0440\u0434\u044e\u0440\u043e\u0432 \u0438\u043b\u0438 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438.<\/p><\/blockquote>\n<p>  \u042d\u0442\u043e, \u043f\u043e\u0445\u043e\u0436\u0435, \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0432 W3C \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0447\u0442\u043e-\u0442\u043e \u0442\u0440\u0443\u0434\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c\u2026 \u0425\u0430\u0445, \u043f\u0440\u043e\u0441\u0442 \u0448\u0443\u0442\u043a\u0430\u043d\u0443\u043b (<i>\u043f\u0440\u0438\u043c. \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430: \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0435 \u00abLOL JK\u00bb<\/i>).<\/p>\n<p>  \u0410 \u0435\u0441\u043b\u0438 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u043e, \u043a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 <a href=\"http:\/\/codepen.io\/SitePoint\/pen\/vORpYN\">\u0436\u0438\u0432\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/a>. \u0412 \u044d\u0442\u043e\u043c \u0434\u0435\u043c\u043e \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0432 CSS \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e <code>table-layout: fixed<\/code>. \u041a\u043b\u0438\u043a\u0430\u0439\u0442\u0435 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0442\u044c\/\u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e.<\/p>\n<p>  \u041d\u0430 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f <code>table-layout: fixed<\/code> \u043d\u0430\u0434 <code>table-layout: auto<\/code>. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043b\u0443\u0447\u0448\u0438\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0438 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c, \u043d\u043e \u043d\u0435 \u043f\u043b\u043e\u0445\u043e \u0431\u044b \u043e \u043d\u0435\u043c \u0437\u043d\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0445 \u0441 \u043a\u043b\u0435\u0442\u043a\u0430\u043c\u0438 \u043d\u0435\u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b.<\/p>\n<p>  \u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u0433\u043e\u0434\u0443 \u041a\u0440\u0438\u0441 \u041a\u043e\u0435\u0440 (Chris Coyier) \u043d\u0430\u043f\u0438\u0441\u0430\u043b <a href=\"https:\/\/css-tricks.com\/fixing-tables-long-strings\/\">\u043e\u0442\u043b\u0438\u0447\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043e <code>table-layout<\/code><\/a>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 \u2014 \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c.<\/p>\n<h2>5. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>vertical-align<\/code> \u0432 \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443, \u043d\u0435\u0436\u0435\u043b\u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445<\/h2>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0441\u0430\u0439\u0442\u043e\u0432 \u0432 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 2000-\u0445 \u0438 \u0440\u0430\u043d\u044c\u0448\u0435 \u0438\u043b\u0438 \u0447\u0430\u0441\u0442\u043e \u0432\u0435\u0440\u0441\u0442\u0430\u0435\u0442\u0435 HTML \u043f\u0438\u0441\u044c\u043c\u0430 \u0434\u043b\u044f email \u0440\u0430\u0441\u0441\u044b\u043b\u043e\u043a, \u0432\u044b, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0435, \u0447\u0442\u043e CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>vertical-align<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u043c \u0441\u0442\u0430\u0440\u043e\u0433\u043e <a href=\"http:\/\/www.w3.org\/TR\/html401\/struct\/tables.html#adef-valign\">HTML4 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>valign<\/code><\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 <a href=\"http:\/\/www.w3.org\/TR\/html5\/obsolete.html#non-conforming-features\">HTML5 \u0443\u0436\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/a>.<\/p>\n<p>  \u041d\u043e CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>vertical-align<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435 \u0442\u0430\u043a-\u0436\u0435, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438. \u042d\u0442\u043e, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0432\u0430\u0442\u043e, \u043d\u043e \u0432\u0441\u0435 \u0436\u0435 \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u0435\u0441\u043b\u0438 \u0431\u044b \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0445.<\/p>\n<p>  \u0422\u0430\u043a \u0432 \u0447\u0435\u043c \u0436\u0435 \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0438 \u043a \u044f\u0447\u0435\u0439\u043a\u0430\u043c \u0442\u0430\u0431\u043b\u0438\u0446?<\/p>\n<p>  \u0415\u0441\u043b\u0438 <code>vertical-align<\/code> \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0435 \u043a \u044f\u0447\u0435\u0439\u043a\u0430\u043c \u0442\u0430\u0431\u043b\u0438\u0446, \u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u044d\u0442\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c:<\/p>\n<ul>\n<li>\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 <code>inline<\/code> \u0438 <code>inline-block<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438;<\/li>\n<li>\u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0435, \u043d\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 <code>inline<\/code> \u0438 <code>inline-block<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432;<\/li>\n<li>\u043d\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0448\u0440\u0438\u0444\u0442\u0430, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>line-height<\/code>, \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 <code>inline<\/code> \u0438 <code>inline-block<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/li>\n<\/ul>\n<p>  \u0412 <a href=\"http:\/\/codepen.io\/SitePoint\/pen\/zGWpxy\">\u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435<\/a> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>vertical-align<\/code> \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 <code>input<\/code>. \u041d\u0430\u0436\u0438\u043c\u0430\u044f \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0430\u0445. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043a\u0430\u043a \u043a\u0430\u0436\u0434\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>input<\/code>.<\/p>\n<p>  \u0412 \u0446\u0435\u043b\u043e\u043c, \u044d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0430\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u043f\u0440\u043e\u0447\u0442\u0438\u0442\u0435 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e\u0434\u043d\u044e\u044e <a href=\"http:\/\/christopheraue.net\/2014\/03\/05\/vertical-align\/\">\u0441\u0442\u0430\u0442\u044c\u044e \u041a\u0440\u0438\u0441\u0442\u043e\u0444\u0435\u0440\u0430 \u041e\u0443\u0435<\/a> (Christopher Aue).<\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u043e \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0442\u0430\u0431\u043b\u0438\u0446, <code>vertical-align<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a \u043e\u0434\u043d\u043e\u0439 \u0438 \u0431\u043e\u043b\u0435\u0435 \u044f\u0447\u0435\u0439\u043a\u0430\u043c, \u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u044f\u0447\u0435\u0435\u043a \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u041f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 <a href=\"http:\/\/codepen.io\/SitePoint\/pen\/KpoZdo\">CodePen<\/a>.<\/p>\n<p>  \u041a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0442\u043e\u043b\u044c\u043a\u043e 4 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>vertical-align<\/code> \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u044b \u043a \u044f\u0447\u0435\u0439\u043a\u0430\u043c \u0442\u0430\u0431\u043b\u0438\u0446. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>baseline<\/code> \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u044f\u0447\u0435\u0439\u043a\u0443, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u043d\u043e \u0438 \u043d\u0430 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b.<\/p>\n<h2>6. \u041f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>::first-letter<\/code> \u0443\u043c\u043d\u0435\u0435, \u0447\u0435\u043c \u0432\u044b \u0434\u0443\u043c\u0430\u043b\u0438<\/h2>\n<p>  \u041f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>::first-letter<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u0443\u044e \u0431\u0443\u043a\u0432\u0443 \u043b\u044e\u0431\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%91%D1%83%D0%BA%D0%B2%D0%B8%D1%86%D0%B0\">\u0431\u0443\u043a\u0432\u0438\u0446\u044b<\/a> (<i>\u043f\u0440\u0438\u043c. \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430: \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b \u0441\u0435\u0431\u0435 \u0441\u043e\u0441\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 wiki<\/i>), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d \u0432 \u043f\u0435\u0447\u0430\u0442\u0438 \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u043c\u043d\u043e\u0433\u0438\u0445 \u043b\u0435\u0442.<\/p>\n<p>  \u0425\u043e\u0440\u043e\u0448\u0430\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e, \u043f\u043e\u0445\u043e\u0436\u0435, \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438\u043c\u0435\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u00ab\u043f\u0435\u0440\u0432\u043e\u0439 \u0431\u0443\u043a\u0432\u0435\u00bb \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0412\u043f\u0435\u0440\u0432\u044b\u0435 \u044f \u043f\u0440\u043e\u0447\u0435\u043b \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 <a href=\"https:\/\/twitter.com\/andrewsmatt\/status\/497704502167076864\">\u0442\u0432\u0438\u0442\u0435 \u041c\u044d\u0442\u0430 \u042d\u043d\u0434\u0440\u044e\u0441\u0430<\/a> (Matt Andrews), \u0445\u043e\u0442\u044f, \u0442\u0430\u043a\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0435\u043c\u0443 \u044f\u0432\u043d\u043e \u043d\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0435\u0433\u043e <a href=\"http:\/\/codepen.io\/SitePoint\/pen\/KpoZjE\">\u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 CodePen<\/a>.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/0a8\/0a2\/8e8\/0a80a28e848d49dca50d0ebdd9539c26.png\" \/><\/div>\n<p>  \u041c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0435\u0442\u0432\u0435\u0440\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u044d\u0442\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e, \u0438 \u044d\u0442\u043e \u043a\u0440\u0443\u0442\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u044f \u0441\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435. \u0411\u044b\u043b\u043e \u0431\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u0431\u044b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0441\u043a\u043e\u0431\u043a\u0430 \u0441\u0447\u0438\u0442\u0430\u043b\u0430\u0441\u044c \u043f\u0435\u0440\u0432\u043e\u0439 \u0431\u0443\u043a\u0432\u043e\u0439. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u00abfirst character\u00bb (\u043f\u0435\u0440\u0432\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0433 \u0431\u044b \u0441\u0442\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u043e\u043c.<\/p>\n<h2>7. \u0412 HTML \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044f \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h2>\n<p>  \u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u043b\u0441\u044f <a href=\"http:\/\/beneverard.co.uk\/blog\/using-slashes-within-the-html-class-attribute\/\">\u0432 2013 \u0433\u043e\u0434\u0443 \u0411\u044d\u043d\u043e\u043c \u042d\u0432\u0430\u0440\u0434\u043e\u043c<\/a> (Ben Everard), \u0438, \u044f \u0434\u0443\u043c\u0430\u044e, \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u044d\u0442\u0443 \u0442\u0435\u043c\u0443.<\/p>\n<p>  \u0412 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0411\u044d\u043d\u0430 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c \u043e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0441\u043b\u044d\u0448\u0430 (&quot;\/&quot;) \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432 HTML \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043d\u0430 \u0433\u0440\u0443\u043f\u043f\u044b, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u0434 \u043b\u0435\u0433\u0447\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f. \u0410\u0432\u0442\u043e\u0440 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0445\u043e\u0442\u044f \u0441\u043b\u0435\u0448 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u043c \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u043c, \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0435 \u0441\u043f\u043e\u0442\u043a\u043d\u0443\u0442\u0441\u044f \u043d\u0430 \u043d\u0435\u043c, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0435\u0433\u043e \u043f\u0440\u043e\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044e\u0442.<\/p>\n<p>  \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0443 \u0432\u0430\u0441 \u0442\u0430\u043a\u043e\u0439 HTML:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;col col-4 col-8 c-list bx bx--rounded bx--transparent&quot;&gt; <\/code><\/pre>\n<p>  \u0421\u043e \u0441\u043b\u0435\u0448\u0430\u043c\u0438 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;col col-4 col-8 \/ c-list \/ bx bx--rounded bx--transparent&quot;&gt; <\/code><\/pre>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u0435\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b (\u0438 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0435, \u0438 \u043d\u0435\u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0435):<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;col col-4 col-8 ** c-list ** bx bx--rounded bx--transparent&quot;&gt;   &lt;div class=&quot;col col-4 col-8 || c-list || bx bx--rounded bx--transparent&quot;&gt;   &lt;div class=&quot;col col-4 col-8 && c-list && bx bx--rounded bx--transparent&quot;&gt; <\/code><\/pre>\n<p>  \u0412\u0441\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 <a href=\"http:\/\/codepen.io\/SitePoint\/pen\/NqYyNe\">\u044d\u0442\u043e\u043c \u0434\u0435\u043c\u043e<\/a>.<\/p>\n<p>  \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u044d\u0442\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043d\u0430\u0437\u044b\u0432\u0430\u044e \u0438\u0445 \u00ab\u043d\u0435\u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u043c\u0438\u00bb. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0440\u0430\u0431\u043e\u0447\u0438\u043c \u0438 \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442 \u0441\u0442\u0438\u043b\u0438 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443:<\/p>\n<pre><code class=\"css\">.\/ {   color: blue; } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0432 \u0438\u043c\u0435\u043d\u0430\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044f \u0438\u0445 \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u0441\u044c <a href=\"https:\/\/mothereff.in\/css-escapes\">\u044d\u0442\u0438\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c<\/a>. \u041f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 CSS \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">.\\\/ {   color: blue; } <\/code><\/pre>\n<p>  \u0423\u0433\u043b\u0443\u0431\u043b\u044f\u044f\u0441\u044c \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u044e\u043d\u0438\u043a\u043e\u0434\u0430 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0431\u0435\u0437\u0443\u043c\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;\u2665 \u2605&quot;&gt;&lt;\/div&gt; <\/code><\/pre>\n<p>  \u0421 \u0442\u0430\u043a\u0438\u043c CSS:<\/p>\n<pre><code class=\"css\">.\u2665 {   color: hotpink; }   .\u2605 {   color: yellow; } <\/code><\/pre>\n<p>  \u0415\u0441\u0442\u044c \u0442\u0430\u043a \u0436\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430, \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u0445 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0432\u0441\u0442\u0430\u0432\u043a\u0438. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u0435\u043d \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443:<\/p>\n<pre><code class=\"css\">.\\2665 {   color: hotpink; }   .\\2605 {   color: yellow; } <\/code><\/pre>\n<p>  <\/p>\n<h2>8. \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043e\u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0434\u0440\u043e\u0431\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/h2>\n<p>  \u0412\u0435\u0440\u043e\u044f\u0442\u043d\u043e \u0432\u044b \u0432 \u043a\u0443\u0440\u0441\u0435, \u0447\u0442\u043e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 keyframe-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>animation-iteration-count<\/code>, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043e\u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"css\">.example {   animation-iteration-count: 3; } <\/code><\/pre>\n<p>  \u0426\u0435\u043b\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c 3 \u0440\u0430\u0437\u0430. \u041d\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u043d\u0435 \u0432 \u043a\u0443\u0440\u0441\u0435, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0438 \u0434\u0440\u043e\u0431\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"css\">.example {   animation-iteration-count: .5; } <\/code><\/pre>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u043e\u043d\u0430 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0430 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0435 \u043f\u0435\u0440\u0432\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438). \u0414\u0430\u0432\u0430\u0439\u0442\u0435 <a href=\"http:\/\/codepen.io\/SitePoint\/pen\/VLXQmM\">\u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440<\/a>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0434\u0432\u0430 \u0448\u0430\u0440\u0438\u043a\u0430. \u0423 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0448\u0430\u0440\u0438\u043a\u0430 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043e\u0432 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u043d\u0430 \u00ab1\u00bb, \u0443 \u043d\u0438\u0436\u043d\u0435\u0433\u043e \u043d\u0430 \u00ab0.5\u00bb.<\/p>\n<p>  \u0427\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043e\u0432 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\/\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0435\u0441\u043b\u0438 \u0432\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442\u0435 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e 100 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u044d\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043d\u0430 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0430 50 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445. \u041f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u0430\u0439\u043c\u0438\u043d\u0433-\u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>linear<\/code>, \u0447\u0442\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044f\u0447\u0438\u043a\u0430 \u043d\u0430 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0435 \u043f\u0443\u0442\u0438.<\/p>\n<p>  \u0412\u043e\u0442 \u0435\u0449\u0435 \u0434\u0432\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043d\u043e \u0442\u0443\u0442 \u0443\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0430\u0439\u043c\u0438\u043d\u0433-\u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>ease<\/code>: <a href=\"http:\/\/codepen.io\/SitePoint\/pen\/PqRxov\">\u043f\u0440\u0438\u043c\u0435\u0440<\/a>. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u0442\u043e\u0440\u043e\u0439 \u043c\u044f\u0447\u0438\u043a \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0448\u0435\u043b \u0434\u043e \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041f\u043e\u0432\u0442\u043e\u0440\u044e, \u0442\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0438\u0437-\u0437\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0442\u0430\u0439\u043c\u0438\u043d\u0433-\u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0435 \u0442\u0430\u0439\u043c\u0438\u043d\u0433-\u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432\u044b \u043f\u043e\u0439\u043c\u0435\u0442\u0435, \u043f\u043e\u0447\u0435\u043c\u0443 \u043f\u0440\u0438 <code>ease-in-out<\/code> \u043c\u044f\u0447\u0438\u043a \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0432 \u0442\u043e\u0439-\u0436\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0438, \u0447\u0442\u043e \u0438 \u043f\u0440\u0438 <code>linear<\/code>. \u041f\u043e\u0438\u0433\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0434\u0440\u043e\u0431\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 \u0442\u0430\u0439\u043c\u0438\u043d\u0433-\u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<h2>9. <code>Animation<\/code> \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438\u0437-\u0437\u0430 \u0438\u043c\u0435\u043d\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/h2>\n<p>  \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u0438 \u044d\u0442\u043e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u043e\u043f\u044b\u0442\u0435, \u0445\u043e\u0442\u044f \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043d\u0430 \u044d\u0442\u043e\u0442 \u0441\u0447\u0435\u0442 \u0435\u0441\u0442\u044c \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/p>\n<pre><code class=\"css\">@keyframes reverse {   from {     left: 0;   }     to {     left: 300px;   } }   .example {   animation: reverse 2s 1s; } <\/code><\/pre>\n<p>  \u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0438\u043c\u044f <code>reverse<\/code>. \u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043a\u043e\u0434 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0440\u0430\u0431\u043e\u0447\u0438\u043c, \u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u043d\u0430 \u0436\u0438\u0432\u043e\u043c <a href=\"http:\/\/codepen.io\/SitePoint\/pen\/OVvayK\">\u043f\u0440\u0438\u043c\u0435\u0440\u0435<\/a>.<\/p>\n<p>  \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u00abreverse\u00bb \u2014 \u044d\u0442\u043e \u0437\u0430\u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e \u0434\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>animation-direction<\/code>. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0441 \u043b\u044e\u0431\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439, \u0438\u043c\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0437\u0430\u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c\u0438 \u0432 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u043c (\u043a\u0440\u0430\u0442\u043a\u043e\u043c) \u0441\u043f\u043e\u0441\u043e\u0431\u0435 \u0437\u0430\u043f\u0438\u0441\u0438. \u041f\u0440\u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u0435 \u0437\u0430\u043f\u0438\u0441\u0438, \u0441 \u0440\u0430\u0437\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c <code>animation-name<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n<p>  \u0418\u043c\u0435\u043d\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043b\u043e\u043c\u0430\u0442\u044c \u043a\u0440\u0430\u0442\u043a\u0443\u044e \u0444\u043e\u0440\u043c\u0443 \u0437\u0430\u043f\u0438\u0441\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u0432 \u0441\u0435\u0431\u044f <a href=\"http:\/\/drafts.csswg.org\/css-transitions-1\/#single-transition-timing-function\">\u0438\u043c\u0435\u043d\u0430 \u0442\u0430\u0439\u043c\u0438\u043d\u0433-\u0444\u0443\u043d\u043a\u0446\u0438\u0439<\/a>, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>infinite<\/code>, <code>alternate<\/code>, <code>running<\/code>, <code>paused<\/code> \u0438 \u0442.\u0434.<\/p>\n<h2>10. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h2>\n<p>  \u041d\u0435 \u0437\u043d\u0430\u044e \u043a\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u044d\u0442\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c, \u043d\u043e \u044f \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u0443\u0437\u043d\u0430\u043b \u043e \u043d\u0435\u0439 \u0438\u0437 <a href=\"http:\/\/bittersmann.de\/samples\/08-15\">\u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/a> \u043e\u0442 \u0413\u0443\u043d\u043d\u0430\u0440\u0430 \u0411\u0438\u0442\u0435\u0440\u0441\u043c\u0430\u043d\u043d\u0430 (<a href=\"https:\/\/twitter.com\/g16n\">Gunnar Bittersmann<\/a>). \u0421\u043a\u0430\u0436\u0435\u043c, \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0443\u043c\u0435\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0437 20 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 7 \u043f\u043e 14 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e. \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0434\u043d\u0438\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u043c:<\/p>\n<pre><code class=\"css\">ol li:nth-child(n+7):nth-child(-n+14) {   background: lightpink; } <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 <a href=\"http:\/\/codepen.io\/SitePoint\/pen\/wamQGv\">\u0434\u0435\u043c\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430<\/a>.<\/p>\n<p>  <i><b>\u0414\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435:<\/b> \u041a\u0430\u043a \u043e\u0442\u043c\u0435\u0442\u0438\u043b\u0438 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445, \u0432 Safari \u0435\u0441\u0442\u044c \u0431\u0430\u0433, \u0438\u0437-\u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u044d\u0442\u0430 \u0442\u0435\u0445\u043d\u0438\u043a\u0430 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0435 \u041c\u044d\u0442\u043e\u043c \u041f\u043e\u043c\u0430\u0441\u043a\u0438 (Matt Pomaski), \u043f\u043e\u0445\u043e\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442: \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0438\u0442\u0435 \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 <code>ol li:nth-child(-n+14):nth-child(n+7)<\/code>. \u0412 \u043d\u043e\u0447\u043d\u044b\u0445 \u0441\u0431\u043e\u0440\u043a\u0430\u0445 WebKit \u0442\u0430\u043a\u043e\u0433\u043e \u0431\u0430\u0433\u0430 \u043d\u0435\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0438 \u0432 Safari \u043f\u043e\u0434\u043e\u0431\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e.<\/i><\/p>\n<p>  \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u0432\u044f\u0437\u043a\u0443 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0441 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438. \u0425\u043e\u0442\u044f \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u043c\u0438, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u043c\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0447\u0438\u0441\u043b\u0430\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0432 \u044d\u0442\u0438\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p>  \u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442: \u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0432\u044f\u0437\u043a\u0438 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u00ab\u0432\u044b\u0431\u0440\u0430\u0442\u044c 7-\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u043e\u0441\u043b\u0435 \u043d\u0435\u0433\u043e\u00bb. \u0412\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0441\u044f \u00ab\u0432\u044b\u0431\u0440\u0430\u0442\u044c 14-\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u043e \u043d\u0435\u0433\u043e\u00bb. \u041d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u2014 \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e. \u0422\u0430\u043a \u0432\u0442\u043e\u0440\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0432\u044f\u0437\u043a\u0438 \u043d\u0435 \u0434\u0430\u0435\u0442 \u043f\u0435\u0440\u0432\u043e\u0439 \u0432\u044b\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b 14-\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0430 \u043f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043d\u0435 \u0434\u0430\u0435\u0442 \u0432\u0442\u043e\u0440\u043e\u0439 \u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u0432 \u0432\u044b\u0431\u043e\u0440\u043a\u0435 \u043d\u0438\u0436\u0435 7-\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0442\u0438\u043f\u043e\u0432 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0438 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"http:\/\/www.impressivewebs.com\/css3-pseudo-class-expressions\/\">\u043c\u043e\u0439 \u0441\u0442\u0430\u0440\u044b\u0439 \u043f\u043e\u0441\u0442 \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443<\/a>.<\/p>\n<h2>11. \u041f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u044b \u043a \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0434\u0438\u043d\u043e\u0447\u043d\u044b\u043c \u0442\u0435\u0433\u0430\u043c<\/h2>\n<p>  \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432\u044b, \u043a\u0430\u043a \u0438 \u044f, \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c \u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0444\u043e\u0440\u043c. \u042d\u0442\u043e\u0433\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u042f \u0434\u0443\u043c\u0430\u044e, \u043c\u043d\u043e\u0433\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0445 \u043e\u0434\u0438\u043d\u043e\u0447\u043d\u044b\u0445 \u0442\u0435\u0433\u043e\u0432 (\u043d\u0435 \u0438\u043c\u0435\u044e\u0449\u0438\u0445 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u0442\u0435\u0433\u0430). \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a.<\/p>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a <a href=\"http:\/\/www.w3.org\/TR\/html5\/syntax.html#void-elements\">\u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0434\u0438\u043d\u043e\u0447\u043d\u044b\u043c \u0442\u0435\u0433\u0430\u043c<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u042d\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>hr<\/code>, \u043a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 <a href=\"http:\/\/codepen.io\/SitePoint\/pen\/ZGxmpK\">\u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/a>.<\/p>\n<p>  \u0417\u0430\u043a\u0440\u0430\u0448\u0435\u043d\u043d\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u2014 \u044d\u0442\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0447\u0435\u0440\u043a (\u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>hr<\/code>), \u0438 \u043a \u043d\u0435\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u044b \u043e\u0431\u0430 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>::before<\/code> \u0438 <code>::after<\/code>. \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043d\u043e \u043c\u043d\u0435 \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u043e\u0442-\u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441 <code>br<\/code>, \u0445\u043e\u0442\u044f \u043e\u043d \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c \u043e\u0434\u043d\u043e\u0442\u0435\u0433\u043e\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c.<\/p>\n<p>  \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c <code>meta<\/code> \u0438 <code>link<\/code>, \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0435\u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432\u044b\u043c\u0438 <code>display: block<\/code>, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432 <a href=\"http:\/\/codepen.io\/SitePoint\/pen\/KporNg\">\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435<\/a>.<\/p>\n<h2>12. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u043e\u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b<\/h2>\n<p>  \u0412 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0434\u043d\u0443 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043d\u0435\u044f\u0441\u043d\u043e\u0441\u0442\u044c. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0443 \u0432\u0430\u0441 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 HTML:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;box&quot;&gt;&lt;\/div&gt; &lt;input type=&quot;email&quot;&gt; <\/code><\/pre>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0438\u0437 \u044d\u0442\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u043a\u0430\u043a \u0442\u0443\u0442:<\/p>\n<pre><code class=\"css\">div[class=&quot;box&quot;] {   color: blue; }   input[type=&quot;email&quot;] {   border: solid 1px red; } <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e. \u0410 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a?<\/p>\n<pre><code class=\"css\">div[class=&quot;BOX&quot;] {   color: blue; }  input[type=&quot;EMAIL&quot;] {   border: solid 1px red; } <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 <code>.box<\/code> \u0441\u0442\u0438\u043b\u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u044b, \u0442\u0430\u043a \u043a\u0430\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>class<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u043e\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c. \u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043a \u043f\u043e\u043b\u044e email \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u0441\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>type<\/code> \u043d\u0435 \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b \u043a \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0443. \u0422\u0443\u0442 \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f, \u043d\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u043b\u0438 \u043e\u0431 \u044d\u0442\u043e\u043c.<\/p>\n<h2>\u041d\u0430\u0440\u043e\u0434, \u043f\u043e\u0440\u0430 \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u044f\u0442\u044c\u0441\u044f<\/h2>\n<p>  \u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u043d\u0430\u0432\u0435\u0441, \u0438 \u043d\u0430\u0434\u0435\u044e\u0441\u044c-\u043d\u0435-\u0441\u043b\u0438\u0448\u043a\u043e\u043c-\u0434\u0440\u044f\u043d\u043d\u043e\u0439 \u0441\u0438\u043a\u0432\u0435\u043b \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  \u0427\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u0443\u044e \u043d\u0435\u0434\u0435\u043b\u044e \u044f \u043d\u0430\u0442\u044b\u043a\u0430\u044e\u0441\u044c \u043d\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 CSS \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0441\u0442\u0438 \u0438 \u0438\u0437\u0443\u0447\u0430\u044e \u0438\u0445, \u0438, \u044f \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0447\u0442\u043e-\u0442\u043e \u0438\u0437 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0437\u043d\u0430\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0438\u0437 \u0432\u0430\u0441. \u041a\u0430\u043a\u0438\u0435 \u0443 \u0432\u0430\u0441 \u043b\u044e\u0431\u0438\u043c\u044b\u0435 \u043c\u0430\u043b\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 CSS \u0442\u0440\u044e\u043a\u0438 \u0438\u043b\u0438 \u0442\u0435\u0445\u043d\u0438\u043a\u0430? \u0417\u043d\u0430\u0435\u0442\u0435 \u043b\u0438 \u0432\u044b \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0435 \u043c\u0430\u043b\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u043c\u0438, \u043d\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438? \u041f\u043e\u0434\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0438\u043c\u0438 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.   \t<\/p>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/262783\/\"> http:\/\/habrahabr.ru\/post\/262783\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>       \u0411\u043e\u043b\u044c\u0448\u0435 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434 \u044f \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043b <a href=\"http:\/\/www.sitepoint.com\/12-little-known-css-facts\/\">12 \u043c\u0430\u043b\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0444\u0430\u043a\u0442\u043e\u0432 \u043e CSS<\/a> (<a href=\"http:\/\/habrahabr.ru\/post\/220237\/\">\u043f\u0435\u0440\u0435\u0432\u043e\u0434<\/a> \u043d\u0430 \u0445\u0430\u0431\u0440\u0435), \u0438 \u043f\u043e \u0441\u0435\u0439 \u0434\u0435\u043d\u044c \u044d\u0442\u043e \u0431\u044b\u043b\u0430 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0441\u0442\u0430\u0442\u0435\u0439 \u043d\u0430 SitePoint. \u0421 \u0442\u0435\u0445 \u043f\u043e\u0440 \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u043b \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0441\u0442\u0435\u0439 \u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u043f\u043e CSS \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0439 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438. \u041c\u044b \u0436\u0435 \u0432\u0441\u0435 \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0444\u0438\u043b\u044c\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043f\u043e\u0441\u043e\u0431\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0445\u043e\u0434\u0443 \u043d\u043e\u0432\u043e\u043c\u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0438\u043a\u0432\u0435\u043b\u0430, \u0432\u0435\u0440\u043d\u043e?<\/p>\n<p>  <a href=\"#\"><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/f50\/157\/c62\/f50157c62f3444ae8e82acdea5745673.png\" \/><\/div>\n<p><\/a><br \/>  <sup>\u0410\u0432\u0442\u043e\u0440 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 SitePoint\/<a href=\"http:\/\/scncf-lab.com\/\">Natalia Balska<\/a>.<\/sup><\/p>\n<p>  \u0418\u0442\u0430\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0443 \u0443\u0436\u0435 \u044d\u0442\u043e\u0433\u043e \u0433\u043e\u0434\u0430 \u0434\u044e\u0436\u0438\u043d\u044b \u043c\u0430\u043b\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0444\u0430\u043a\u0442\u043e\u0432 \u043e CSS. \u042f \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u043c\u043d\u043e\u0433\u0438\u043c \u0438\u0437 \u0432\u0430\u0441 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445, \u043d\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u0430\u0442\u044c \u043c\u043d\u0435 \u0437\u043d\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u0444\u0430\u043a\u0442\u043e\u0432 \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u0434\u043b\u044f \u0432\u0430\u0441 \u043d\u043e\u0432\u044b\u043c\u0438.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/b><\/p>\n<div class=\"spoiler_text\">0. \u0414\u0430, \u044f \u0432\u0438\u0434\u0435\u043b \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u0443 \u0447\u0430\u0441\u043e\u0432 \u043d\u0430\u0437\u0430\u0434 \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u044d\u0442\u043e\u0439-\u0436\u0435 \u0441\u0442\u0430\u0442\u044c\u0438. \u041d\u043e \u043c\u043d\u0435 \u0441\u043e\u0432\u0435\u0441\u0442\u044c \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u0434\u043d\u0435\u0432\u043d\u044b\u0439 \u0442\u0440\u0443\u0434 \u0438\u0437-\u0437\u0430 \u043e\u043f\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0430 \u043f\u0430\u0440\u0443 \u0447\u0430\u0441\u043e\u0432 \ud83d\ude42 \u0432 \u043e\u0431\u0449\u0435\u043c, \u043d\u0430 \u0432\u0430\u0448 \u0441\u0443\u0434.<\/p>\n<p>  1. \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0438\u0437\u043e\u0431\u0438\u043b\u0443\u0435\u0442 \u0440\u0430\u0431\u043e\u0447\u0438\u043c\u0438 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f\u043c\u0438 \u0441 CodePen. \u0425\u0430\u0431\u0440, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u0441 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0430 \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0438\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u043c\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438, \u0434\u0443\u043c\u0430\u044e, \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u00ab\u043b\u044b\u0441\u043e\u0439\u00bb \u043f\u0440\u043e\u0441\u0442\u044b\u043d\u0435\u0439, \u043d\u043e, \u044f \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u0432 \u043d\u043e\u0432\u043e\u043c \u043e\u043a\u043d\u0435.<\/p>\n<p>  2. \u0425\u043e\u0442\u044f \u044f \u0438\u043c\u0435\u044e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u0432\u0435\u0440\u0441\u0442\u043a\u0435, \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0438 \u043d\u0435 \u0442\u0430\u043a\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043f\u043e\u043d\u0430\u0447\u0430\u043b\u0443. \u0417\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f \u043f\u043e \u043e\u0448\u0438\u0431\u043a\u0430\u043c, \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0430\u043c, \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0438 \u0442.\u043f. \u043f\u0440\u043e\u0441\u044c\u0431\u0430 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0442\u044c \u043b\u0438\u0447\u043d\u044b\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u0432 \u0445\u0430\u0431\u0440\u0430\u043f\u043e\u0447\u0442\u0443.  <\/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-261973","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/261973","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=261973"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/261973\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=261973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=261973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=261973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}