{"id":23,"date":"2026-09-27T00:20:25","date_gmt":"2026-09-26T21:20:25","guid":{"rendered":"https:\/\/kab2-01.acsp.org.ua\/?page_id=23"},"modified":"2026-09-27T01:39:04","modified_gmt":"2026-09-26T22:39:04","slug":"%d1%82%d0%b5%d0%be%d1%80%d1%96%d1%8f","status":"publish","type":"page","link":"https:\/\/kab2-01.acsp.org.ua\/?page_id=23","title":{"rendered":"\u0422\u0435\u043e\u0440\u0456\u044f"},"content":{"rendered":"<p><main class=\"page-main\" id=\"main\"><\/p>\n<div class=\"page-heading\">\n<p class=\"eyebrow\">\u0420\u041e\u0417\u0414\u0406\u041b 01 \u00b7 \u041e\u0421\u041d\u041e\u0412\u0418<\/p>\n<h1>\u0422\u0435\u043e\u0440\u0456\u044f CSS<\/h1>\n<p>\u041f\u043e\u0441\u043b\u0456\u0434\u043e\u0432\u043d\u0438\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u0432\u0456\u0434 \u043f\u0435\u0440\u0448\u043e\u0457 CSS-\u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443. \u041e\u0431\u0435\u0440\u0438 \u0442\u0435\u043c\u0443 \u0439 \u0440\u0443\u0445\u0430\u0439\u0441\u044f \u0443 \u0432\u043b\u0430\u0441\u043d\u043e\u043c\u0443 \u0442\u0435\u043c\u043f\u0456.<\/p>\n<\/div>\n<div class=\"content-grid\">\n<nav class=\"side-nav\" aria-label=\"\u0423\u0440\u043e\u043a\u0438\"><a href=\"#css-basics\">01 \u00b7 \u0429\u043e \u0442\u0430\u043a\u0435 CSS<\/a><a href=\"#syntax\">02 \u00b7 \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/a><a href=\"#selectors\">03 \u00b7 \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0438<\/a><a href=\"#cascade\">04 \u00b7 \u041a\u0430\u0441\u043a\u0430\u0434<\/a><a href=\"#box-model\">05 \u00b7 \u0411\u043b\u043e\u043a\u043e\u0432\u0430 \u043c\u043e\u0434\u0435\u043b\u044c<\/a><a href=\"#color-type\">06 \u00b7 \u041a\u043e\u043b\u0456\u0440 \u0456 \u0442\u0435\u043a\u0441\u0442<\/a><a href=\"#layout\">07 \u00b7 Flexbox \u0456 Grid<\/a><a href=\"#responsive\">08 \u00b7 \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0456\u0441\u0442\u044c<\/a><\/nav>\n<article class=\"article-content\">\n<section id=\"css-basics\">\n<h2>01. \u0429\u043e \u0442\u0430\u043a\u0435 CSS?<\/h2>\n<p>CSS (Cascading Style Sheets) \u2014 \u043c\u043e\u0432\u0430 \u0441\u0442\u0438\u043b\u0456\u0432, \u0449\u043e \u0432\u0438\u0437\u043d\u0430\u0447\u0430\u0454 \u0432\u0438\u0433\u043b\u044f\u0434 HTML-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u0412\u043e\u043d\u0430 \u043a\u0435\u0440\u0443\u0454 \u043a\u043e\u043b\u044c\u043e\u0440\u0430\u043c\u0438, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0456\u043a\u043e\u044e, \u0432\u0456\u0434\u0441\u0442\u0443\u043f\u0430\u043c\u0438, \u0440\u043e\u0437\u0442\u0430\u0448\u0443\u0432\u0430\u043d\u043d\u044f\u043c \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432 \u0456 \u0442\u0438\u043c, \u044f\u043a \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0430 \u043f\u0456\u0434\u043b\u0430\u0448\u0442\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f \u043f\u0456\u0434 \u0435\u043a\u0440\u0430\u043d.<\/p>\n<pre><code>h1 {\n  color: tomato;\n  font-size: 2rem;\n}<\/code><\/pre>\n<p>\u0421\u0442\u0438\u043b\u0456 \u043c\u043e\u0436\u043d\u0430 \u043f\u0456\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u0438 \u043e\u043a\u0440\u0435\u043c\u0438\u043c \u0444\u0430\u0439\u043b\u043e\u043c \u0447\u0435\u0440\u0435\u0437 <code>&lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;<\/code>, \u0434\u043e\u0434\u0430\u0442\u0438 \u0443 \u0431\u043b\u043e\u0446\u0456 <code>&lt;style&gt;<\/code> \u0430\u0431\u043e \u0431\u0435\u0437\u043f\u043e\u0441\u0435\u0440\u0435\u0434\u043d\u044c\u043e \u0434\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 style.<\/p>\n<\/section>\n<section id=\"syntax\">\n<h2>02. \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u0430<\/h2>\n<p>\u041f\u0440\u0430\u0432\u0438\u043b\u043e \u0441\u043a\u043b\u0430\u0434\u0430\u0454\u0442\u044c\u0441\u044f \u0456\u0437 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u0442\u0430 \u0431\u043b\u043e\u043a\u0443 \u043e\u0433\u043e\u043b\u043e\u0448\u0435\u043d\u044c. \u0423 \u043a\u043e\u0436\u043d\u043e\u043c\u0443 \u043e\u0433\u043e\u043b\u043e\u0448\u0435\u043d\u043d\u0456 \u0454 \u043d\u0430\u0437\u0432\u0430 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0456, \u0434\u0432\u043e\u043a\u0440\u0430\u043f\u043a\u0430 \u0456 \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f; \u043e\u0433\u043e\u043b\u043e\u0448\u0435\u043d\u043d\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0443\u044e\u0442\u044c\u0441\u044f \u043a\u0440\u0430\u043f\u043a\u043e\u044e \u0437 \u043a\u043e\u043c\u043e\u044e.<\/p>\n<pre><code>\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 {\n  \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044c: \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f;\n}<\/code><\/pre>\n<div class=\"callout\">\u041f\u043e\u0440\u0430\u0434\u0430: \u0440\u043e\u0437\u0434\u0456\u043b\u044f\u0439 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043f\u043e\u0440\u043e\u0436\u043d\u0456\u043c \u0440\u044f\u0434\u043a\u043e\u043c \u0456 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0439 \u0437\u0440\u043e\u0437\u0443\u043c\u0456\u043b\u0456 \u043d\u0430\u0437\u0432\u0438 \u043a\u043b\u0430\u0441\u0456\u0432.<\/div>\n<\/section>\n<section id=\"selectors\">\n<h2>03. \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0438<\/h2>\n<p>\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0432\u0438\u0437\u043d\u0430\u0447\u0430\u0454, \u0434\u043e \u044f\u043a\u0438\u0445 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432 \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u0432\u0430\u0442\u0438 \u0441\u0442\u0438\u043b\u044c. \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430: <code>p<\/code>. \u041a\u043b\u0430\u0441: <code>.card<\/code>. \u0406\u0434\u0435\u043d\u0442\u0438\u0444\u0456\u043a\u0430\u0442\u043e\u0440: <code>#main<\/code>. \u041a\u043e\u043c\u0431\u0456\u043d\u0430\u0442\u043e\u0440 \u043d\u0430\u0449\u0430\u0434\u043a\u0430, \u043d\u0430\u043f\u0440\u0438\u043a\u043b\u0430\u0434 <code>.menu a<\/code>, \u0437\u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0432\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0456 \u043c\u0435\u043d\u044e.<\/p>\n<pre><code>.notice { color: #c94835; }\nnav a:hover { text-decoration: underline; }\ninput:focus-visible { outline: 3px solid tomato; }<\/code><\/pre>\n<\/section>\n<section id=\"cascade\">\n<h2>04. \u041a\u0430\u0441\u043a\u0430\u0434, \u0441\u043f\u0435\u0446\u0438\u0444\u0456\u0447\u043d\u0456\u0441\u0442\u044c \u0456 \u043d\u0430\u0441\u043b\u0456\u0434\u0443\u0432\u0430\u043d\u043d\u044f<\/h2>\n<p>\u041a\u043e\u043b\u0438 \u043a\u0456\u043b\u044c\u043a\u0430 \u043f\u0440\u0430\u0432\u0438\u043b \u0437\u0430\u0434\u0430\u044e\u0442\u044c \u043e\u0434\u043d\u0443 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u0456\u0441\u0442\u044c, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u0440\u0430\u0445\u043e\u0432\u0443\u0454 \u0432\u0430\u0436\u043b\u0438\u0432\u0456\u0441\u0442\u044c, \u0441\u043f\u0435\u0446\u0438\u0444\u0456\u0447\u043d\u0456\u0441\u0442\u044c \u0456 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043e\u0433\u043e\u043b\u043e\u0448\u0435\u043d\u044c. \u0421\u0442\u0438\u043b\u0456 \u0437 \u0431\u0456\u043b\u044c\u0448 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0438\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u043c \u0437\u0430\u0437\u0432\u0438\u0447\u0430\u0439 \u043f\u0435\u0440\u0435\u043c\u0430\u0433\u0430\u044e\u0442\u044c \u0437\u0430\u0433\u0430\u043b\u044c\u043d\u0456. \u0427\u0430\u0441\u0442\u0438\u043d\u0430 \u0432\u043b\u0430\u0441\u0442\u0438\u0432\u043e\u0441\u0442\u0435\u0439, \u0437\u043e\u043a\u0440\u0435\u043c\u0430 \u043a\u043e\u043b\u0456\u0440 \u0442\u0435\u043a\u0441\u0442\u0443 \u0456 \u0448\u0440\u0438\u0444\u0442, \u0443\u0441\u043f\u0430\u0434\u043a\u043e\u0432\u0443\u0454\u0442\u044c\u0441\u044f \u0432\u0456\u0434 \u0431\u0430\u0442\u044c\u043a\u0456\u0432\u0441\u044c\u043a\u043e\u0433\u043e \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0423\u043d\u0438\u043a\u0430\u0439 \u043d\u0430\u0434\u043c\u0456\u0440\u043d\u043e\u0433\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f <code>!important<\/code>: \u0432\u043e\u043d\u043e \u0443\u0441\u043a\u043b\u0430\u0434\u043d\u044e\u0454 \u043f\u0435\u0440\u0435\u0432\u0438\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0441\u0442\u0438\u043b\u0456\u0432.<\/p>\n<\/section>\n<section id=\"box-model\">\n<h2>05. \u0411\u043b\u043e\u043a\u043e\u0432\u0430 \u043c\u043e\u0434\u0435\u043b\u044c<\/h2>\n<p>\u041a\u043e\u0436\u0435\u043d \u0431\u043b\u043e\u043a \u0441\u043a\u043b\u0430\u0434\u0430\u0454\u0442\u044c\u0441\u044f \u0437 \u0432\u043c\u0456\u0441\u0442\u0443, \u0432\u043d\u0443\u0442\u0440\u0456\u0448\u043d\u044c\u043e\u0433\u043e \u0432\u0456\u0434\u0441\u0442\u0443\u043f\u0443 <code>padding<\/code>, \u0440\u0430\u043c\u043a\u0438 <code>border<\/code> \u0442\u0430 \u0437\u043e\u0432\u043d\u0456\u0448\u043d\u044c\u043e\u0433\u043e \u0432\u0456\u0434\u0441\u0442\u0443\u043f\u0443 <code>margin<\/code>. \u041f\u0440\u0430\u0432\u0438\u043b\u043e <code>box-sizing: border-box<\/code> \u0440\u043e\u0431\u0438\u0442\u044c \u0440\u043e\u0437\u0440\u0430\u0445\u0443\u043d\u043a\u0438 \u0440\u043e\u0437\u043c\u0456\u0440\u0456\u0432 \u043f\u0435\u0440\u0435\u0434\u0431\u0430\u0447\u0443\u0432\u0430\u043d\u0438\u043c\u0438.<\/p>\n<pre><code>* { box-sizing: border-box; }\n.card { padding: 1rem; border: 1px solid #ccc; }<\/code><\/pre>\n<\/section>\n<section id=\"color-type\">\n<h2>06. \u041a\u043e\u043b\u0456\u0440 \u0456 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0456\u043a\u0430<\/h2>\n<p>\u041a\u043e\u043b\u0456\u0440 \u0437\u0430\u0434\u0430\u044e\u0442\u044c \u0456\u043c\u0435\u043d\u0435\u043c, HEX, RGB \u0430\u0431\u043e HSL. \u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u0443 \u043f\u0435\u0440\u0435\u0432\u0456\u0440\u044f\u0439 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0456\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443 \u043d\u0430 \u0444\u043e\u043d\u0456. \u0428\u0440\u0438\u0444\u0442\u0438, \u0440\u043e\u0437\u043c\u0456\u0440, \u0442\u043e\u0432\u0449\u0438\u043d\u0430 \u0456 \u0432\u0438\u0441\u043e\u0442\u0430 \u0440\u044f\u0434\u043a\u0430 \u0444\u043e\u0440\u043c\u0443\u044e\u0442\u044c \u0456\u0454\u0440\u0430\u0440\u0445\u0456\u044e \u0442\u0430 \u0440\u0438\u0442\u043c \u0442\u0435\u043a\u0441\u0442\u0443.<\/p>\n<pre><code>body { color: #202b2b; font: 1rem\/1.6 sans-serif; }\nh1 { font-size: 2.5rem; line-height: 1.1; }<\/code><\/pre>\n<\/section>\n<section id=\"layout\">\n<h2>07. Flexbox \u0456 Grid<\/h2>\n<p>Flexbox \u0437\u0440\u0443\u0447\u043d\u0438\u0439 \u0434\u043b\u044f \u0432\u0438\u0440\u0456\u0432\u043d\u044e\u0432\u0430\u043d\u043d\u044f \u0435\u043b\u0435\u043c\u0435\u043d\u0442\u0456\u0432 \u0432 \u043e\u0434\u043d\u043e\u043c\u0443 \u043d\u0430\u043f\u0440\u044f\u043c\u043a\u0443. CSS Grid \u043a\u0435\u0440\u0443\u0454 \u0434\u0432\u043e\u0432\u0438\u043c\u0456\u0440\u043d\u043e\u044e \u0441\u0456\u0442\u043a\u043e\u044e \u0440\u044f\u0434\u043a\u0456\u0432 \u0456 \u043a\u043e\u043b\u043e\u043d\u043e\u043a. \u041e\u0431\u0438\u0440\u0430\u0439 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u043e \u0434\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438 \u043c\u0430\u043a\u0435\u0442\u0430.<\/p>\n<pre><code>.row { display: flex; gap: 1rem; align-items: center; }\n.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }<\/code><\/pre>\n<\/section>\n<section id=\"responsive\">\n<h2>08. \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0456\u0441\u0442\u044c<\/h2>\n<p>\u0412\u0456\u0434\u043d\u043e\u0441\u043d\u0456 \u043e\u0434\u0438\u043d\u0438\u0446\u0456, \u0433\u043d\u0443\u0447\u043a\u0430 \u0441\u0456\u0442\u043a\u0430 \u0456 \u043c\u0435\u0434\u0456\u0430\u0437\u0430\u043f\u0438\u0442\u0438 \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u044e\u0442\u044c \u0441\u0442\u043e\u0440\u0456\u043d\u0446\u0456 \u043f\u0440\u0430\u0446\u044e\u0432\u0430\u0442\u0438 \u043d\u0430 \u0432\u0443\u0437\u044c\u043a\u0438\u0445 \u0456 \u0448\u0438\u0440\u043e\u043a\u0438\u0445 \u0435\u043a\u0440\u0430\u043d\u0430\u0445.<\/p>\n<pre><code>.layout { display: grid; grid-template-columns: 1fr 1fr; }\n@media (max-width: 700px) {\n  .layout { grid-template-columns: 1fr; }\n}<\/code><\/pre>\n<p><a class=\"button button-dark\" href=\"https:\/\/kab2-01.acsp.org.ua\/?page_id=26\">\u0421\u043f\u0440\u043e\u0431\u0443\u0432\u0430\u0442\u0438 \u0443 \u043f\u0440\u0430\u043a\u0442\u0438\u0446\u0456 <span aria-hidden=\"true\">\u2197<\/span><\/a><\/p>\n<\/section>\n<\/article>\n<\/div>\n<p><\/main><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0420\u041e\u0417\u0414\u0406\u041b 01 \u00b7 \u041e\u0421\u041d\u041e\u0412\u0418 \u0422\u0435\u043e\u0440\u0456\u044f CSS \u041f\u043e\u0441\u043b\u0456\u0434\u043e\u0432\u043d\u0438\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u0432\u0456\u0434 \u043f\u0435\u0440\u0448\u043e\u0457 CSS-\u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0456\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443. \u041e\u0431\u0435\u0440\u0438 \u0442\u0435\u043c\u0443 \u0439 \u0440\u0443\u0445\u0430\u0439\u0441\u044f \u0443 \u0432\u043b\u0430\u0441\u043d\u043e\u043c\u0443 \u0442\u0435\u043c\u043f\u0456. 01 \u00b7 \u0429\u043e \u0442\u0430\u043a\u0435 CSS02 \u00b7 \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u044103 \u00b7 \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043804 \u00b7 \u041a\u0430\u0441\u043a\u0430\u043405 \u00b7 \u0411\u043b\u043e\u043a\u043e\u0432\u0430 \u043c\u043e\u0434\u0435\u043b\u044c06 \u00b7 \u041a\u043e\u043b\u0456\u0440 \u0456 \u0442\u0435\u043a\u0441\u044207 \u00b7 Flexbox \u0456 Grid08 \u00b7 \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0456\u0441\u0442\u044c 01. \u0429\u043e \u0442\u0430\u043a\u0435 CSS? CSS (Cascading Style Sheets) \u2014 \u043c\u043e\u0432\u0430 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-23","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kab2-01.acsp.org.ua\/index.php?rest_route=\/wp\/v2\/pages\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kab2-01.acsp.org.ua\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kab2-01.acsp.org.ua\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kab2-01.acsp.org.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kab2-01.acsp.org.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=23"}],"version-history":[{"count":3,"href":"https:\/\/kab2-01.acsp.org.ua\/index.php?rest_route=\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":50,"href":"https:\/\/kab2-01.acsp.org.ua\/index.php?rest_route=\/wp\/v2\/pages\/23\/revisions\/50"}],"wp:attachment":[{"href":"https:\/\/kab2-01.acsp.org.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}