Summarize this content to 400 words in Persian Lang\n \u0647\u0631 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647\u200c\u0627\u06cc \u0622\u0646\u062c\u0627 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a \u2013 \u0645\u0628\u0627\u0631\u0632\u0647 \u0628\u0627 CSS \u06a9\u0647 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0633\u0627\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u06cc\u062f \u0627\u0645\u0627 \u0628\u0647 \u0633\u0631\u0639\u062a \u0633\u062e\u062a\u200c\u06af\u06cc\u0631 \u0634\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u062a\u0644\u0647\u200c\u0647\u0627\u06cc \u0631\u0627\u06cc\u062c CSS \u0648 \u0631\u0627\u0647\u200c\u062d\u0644\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0628\u06cc\u0627\u06cc\u06cc\u062f CSS \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u0645\u0634\u06a9\u0644 \u0633\u0627\u0632 \u0628\u0647 \u062d\u0631\u0641\u0647 \u0627\u06cc \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0646\u06cc\u0645!<\/p>\n
\ud83d\udca1 \u0646\u06a9\u0627\u062a \u0647\u0641\u062a\u06af\u06cc CSS\u060c \u0642\u0637\u0639\u0647 \u06a9\u062f \u0648 \u0622\u0645\u0648\u0632\u0634 \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631 \u0635\u0646\u062f\u0648\u0642 \u0648\u0631\u0648\u062f\u06cc \u062e\u0648\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f – 100\u066a \u0631\u0627\u06cc\u06af\u0627\u0646!<\/p>\n
1. \u0648\u0627\u062d\u062f\u0647\u0627: \u0631\u0647\u0627\u06cc\u06cc \u0627\u0632 \u067e\u06cc\u06a9\u0633\u0644 \u0647\u0627<\/p>\n
\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/p>\n
.container {\n width: 1200px;\n font-size: 16px;\n margin: 20px;\n}<\/p>\n
\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n
\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n
\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/p>\n
.container {\n width: 90vw;\n max-width: 75rem;\n font-size: 1rem;\n margin: 1.25rem;\n}<\/p>\n
\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0646\u0633\u0628\u06cc \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0637\u0631\u0627\u062d\u06cc \u0634\u0645\u0627 \u067e\u0627\u0633\u062e\u06af\u0648 \u0648 \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633 \u0628\u0627\u0634\u062f. REM \u0647\u0627 \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u062a\u0631\u062c\u06cc\u062d\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0645\u06cc \u0634\u0648\u0646\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0646\u0645\u0627\u06cc \u062f\u06cc\u062f \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u0646\u062f \u06a9\u0647 \u0686\u06cc\u062f\u0645\u0627\u0646 \u0634\u0645\u0627 \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0635\u0641\u062d\u0647 \u0633\u0627\u0632\u06af\u0627\u0631 \u0627\u0633\u062a. \u0647\u0645\u06cc\u0634\u0647 \u062f\u0631 \u0646\u0638\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0632\u0631\u06af\u0646\u0645\u0627\u06cc\u06cc \u06a9\u0646\u0646\u062f \u06cc\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u067e\u0627\u06cc\u0647 \u062e\u0648\u062f \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u0646\u062f.<\/p>\n
2. CSS Reset: \u0634\u0631\u0648\u0639 \u062a\u0627\u0632\u0647<\/p>\n
\/* Starting without any reset, relying on browser defaults *\/<\/p>\n
*, *::before, *::after {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}<\/p>\n
html {\n font-size: 16px;\n -webkit-text-size-adjust: 100%;\n}<\/p>\n
\u062a\u0646\u0638\u06cc\u0645 \u0645\u062c\u062f\u062f CSS \u0631\u0646\u062f\u0631 \u062b\u0627\u0628\u062a \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f. \u0631\u0627 box-sizing: border-box \u0648\u06cc\u0698\u06af\u06cc \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0639\u0631\u0636 \u0631\u0627 \u0628\u0627 \u06af\u0646\u062c\u0627\u0646\u062f\u0646 \u0628\u0627\u0644\u0634\u062a\u06a9 \u0648 \u062d\u0627\u0634\u06cc\u0647 \u062f\u0631 \u0639\u0631\u0636 \u06a9\u0644 \u0639\u0646\u0635\u0631 \u0628\u0635\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n
3. Flexbox \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 Float: \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 \u0645\u062f\u0631\u0646<\/p>\n
.container {\n overflow: hidden;\n}\n.sidebar {\n float: left;\n width: 300px;\n}\n.main {\n margin-left: 320px;\n}<\/p>\n
.container {\n display: flex;\n gap: 1.25rem;\n}\n.sidebar {\n flex-basis: 18.75rem;\n flex-shrink: 0;\n}\n.main {\n flex-grow: 1;\n}<\/p>\n
Flexbox \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631 \u0631\u0627 \u0628\u0627 \u06a9\u062f \u06a9\u0645\u062a\u0631 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0641\u0627\u0635\u0644\u0647\u060c \u062a\u0631\u0627\u0632\u060c \u0648 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0631\u0627 \u0628\u0627 \u0638\u0631\u0627\u0641\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u0646\u0633\u0628\u062a \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 \u0634\u0646\u0627\u0648\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0628\u0647\u062a\u0631 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/p>\n
4. \u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0646\u06af: \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u06af\u0627\u0631\u06cc<\/p>\n
.button {\n background-color: #007bff;\n}\n.link {\n color: #007bff;\n}<\/p>\n
:root {\n –primary-color: #007bff;\n –primary-hover: #0056b3;\n}<\/p>\n
.button {\n background-color: var(–primary-color);\n}\n.button:hover {\n background-color: var(–primary-hover);\n}\n.link {\n color: var(–primary-color);\n}<\/p>\n
\u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc CSS (\u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc) \u062d\u0641\u0638 \u0631\u0646\u06af\u200c\u0647\u0627\u06cc \u062b\u0627\u0628\u062a \u0631\u0627 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631 \u062a\u0645 \u0631\u0627 \u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u0622\u0646\u0647\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06a9\u062f \u0634\u0645\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u062a\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u062e\u0637\u0631 \u0646\u0627\u0647\u0645\u0627\u0647\u0646\u06af\u06cc \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u0646\u062f.<\/p>\n
5. \u067e\u0631\u0633\u0634 \u0647\u0627\u06cc \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc: \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0648\u0644 \u0645\u0648\u0628\u0627\u06cc\u0644<\/p>\n
\/* Desktop-first approach *\/\n.container {\n width: 1200px;\n}\n@media (max-width: 768px) {\n .container {\n width: 100%;\n }\n}<\/p>\n
\/* Mobile-first approach *\/\n.container {\n width: 100%;\n}\n@media (min-width: 48em) {\n .container {\n width: 90%;\n max-width: 75rem;\n }\n}<\/p>\n
\u0637\u0631\u0627\u062d\u06cc \u0627\u0648\u0644 \u0645\u0648\u0628\u0627\u06cc\u0644 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0633\u0628\u06a9\u200c\u0647\u0627\u06cc \u067e\u0627\u06cc\u0647 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u062a\u0631 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0633\u067e\u0633 \u0628\u0647 \u062a\u062f\u0631\u06cc\u062c \u062a\u062c\u0631\u0628\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634\u06af\u0631\u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u200c\u062a\u0631 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0645\u0646\u062c\u0631 \u0628\u0647 \u06a9\u062f \u062a\u0645\u06cc\u0632\u062a\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u062a\u0631 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n
6. \u0648\u06cc\u0698\u06af\u06cc: \u0633\u0627\u062f\u0647 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0622\u0646<\/p>\n
#header div.navigation ul li a.active {\n color: blue;\n}<\/p>\n
.nav-link–active {\n color: var(–primary-color);\n}<\/p>\n
\u0648\u06cc\u0698\u06af\u06cc \u06a9\u0645\u062a\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0633\u0628\u06a9 \u0647\u0627 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0634\u0648\u0646\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0647 \u0634\u0648\u0646\u062f. \u0627\u0632 \u0642\u0631\u0627\u0631\u062f\u0627\u062f \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc BEM \u06cc\u0627 \u0631\u0648\u0634 \u0647\u0627\u06cc \u0645\u0634\u0627\u0628\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc \u0645\u0639\u0646\u06cc \u062f\u0627\u0631 \u0648 \u062e\u0627\u0635 \u0628\u062f\u0648\u0646 \u062a\u0648\u062f\u0631\u062a\u0648 \u0639\u0645\u06cc\u0642 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n
7. \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc: \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0633\u06cc\u0627\u0644<\/p>\n
h1 {\n font-size: 32px;\n}<\/p>\n
h1 {\n font-size: clamp(1.75rem, 5vw, 2.5rem);\n line-height: 1.2;\n}<\/p>\n
\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 clamp() \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u06cc\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627\u06cc \u062d\u062f\u0627\u0642\u0644 \u0648 \u062d\u062f\u0627\u06a9\u062b\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0686\u0646\u062f \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc \u0631\u0627 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0627\u0632 \u0628\u06cc\u0646 \u0645\u06cc \u0628\u0631\u062f.<\/p>\n
8. \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0634\u0628\u06a9\u0647: \u0633\u06cc\u0633\u062a\u0645 \u0647\u0627\u06cc \u06a9\u0627\u0631\u062a \u0645\u0646\u0627\u0633\u0628<\/p>\n
.card {\n width: calc(33.33% – 20px);\n float: left;\n margin: 10px;\n}<\/p>\n
.card-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));\n gap: 1.25rem;\n}<\/p>\n
\u0634\u0628\u06a9\u0647 CSS \u0628\u0627 auto-fit \u0648 minmax() \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0627 \u0641\u0636\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0647 \u06a9\u062f \u06a9\u0645\u062a\u0631\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f \u0648 \u0645\u0648\u0627\u0631\u062f \u0644\u0628\u0647 \u0631\u0627 \u0628\u0647\u062a\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n
9. \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646: \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f<\/p>\n
.element {\n transition: all 0.3s ease;\n}<\/p>\n
.element {\n transition: transform 0.3s ease, opacity 0.3s ease;\n will-change: transform;\n}<\/p>\n
\u0628\u0647 \u062c\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u060c \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062f\u0642\u06cc\u0642 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062a\u062d\u0631\u06a9 \u0633\u0627\u0632\u06cc \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f all\u060c \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f transform \u0648 opacity \u062f\u0631 \u0635\u0648\u0631\u062a \u0627\u0645\u06a9\u0627\u0646 \u0632\u06cc\u0631\u0627 \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u06cc\u0646\u0647 \u0634\u062f\u0647 \u0627\u0646\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f will-change \u06a9\u0645\u062a\u0631 \u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 \u0645\u062a\u062d\u0631\u06a9 \u0627\u063a\u0644\u0628.<\/p>\n
10. \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/p>\n
.button-primary {\n background: blue;\n padding: 10px 20px;\n}\n.button-secondary {\n background: gray;\n padding: 10px 20px;\n}<\/p>\n
.button {\n –button-bg: var(–primary-color);\n –button-padding: 0.625rem 1.25rem;<\/p>\n
background: var(–button-bg);\n padding: var(–button-padding);\n}<\/p>\n
.button–secondary {\n –button-bg: var(–secondary-color);\n}<\/p>\n
\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc CSS \u0628\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639\u060c \u062a\u06a9\u0631\u0627\u0631 \u06a9\u062f \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u06cc\u062c\u0627\u062f \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062b\u0627\u0628\u062a \u062f\u0631 \u0633\u06cc\u0633\u062a\u0645 \u0637\u0631\u0627\u062d\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n
\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/p>\n
CSS \u0645\u062f\u0631\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06a9\u062f \u0634\u0645\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631\u062a\u0631 \u06a9\u0646\u062f. \u0628\u0627 \u067e\u06cc\u0631\u0648\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627\u060c \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0642\u0648\u06cc \u062a\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f \u06a9\u0647 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0648 \u0627\u0635\u0644\u0627\u062d \u0622\u0646\u0647\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0627\u0633\u062a. \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u0647\u062f\u0641 \u0641\u0642\u0637 \u0627\u06cc\u0646 \u0646\u06cc\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u06cc \u0631\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f\u060c \u0628\u0644\u06a9\u0647 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0645 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648 \u0647\u0645 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0647 \u062e\u0648\u0628\u06cc \u06a9\u0627\u0631 \u06a9\u0646\u062f.<\/p>\n
\u0647\u0631 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647\u200c\u0627\u06cc \u0622\u0646\u062c\u0627 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a \u2013 \u0645\u0628\u0627\u0631\u0632\u0647 \u0628\u0627 CSS \u06a9\u0647 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0633\u0627\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u06cc\u062f \u0627\u0645\u0627 \u0628\u0647 \u0633\u0631\u0639\u062a \u0633\u062e\u062a\u200c\u06af\u06cc\u0631 \u0634\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u062a\u0644\u0647\u200c\u0647\u0627\u06cc \u0631\u0627\u06cc\u062c CSS \u0648 \u0631\u0627\u0647\u200c\u062d\u0644\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0628\u06cc\u0627\u06cc\u06cc\u062f CSS \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u0645\u0634\u06a9\u0644 \u0633\u0627\u0632 \u0628\u0647 \u062d\u0631\u0641\u0647 \u0627\u06cc \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0646\u06cc\u0645!<\/p>\n
\ud83d\udca1 \u0646\u06a9\u0627\u062a \u0647\u0641\u062a\u06af\u06cc CSS\u060c \u0642\u0637\u0639\u0647 \u06a9\u062f \u0648 \u0622\u0645\u0648\u0632\u0634 \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631 \u0635\u0646\u062f\u0648\u0642 \u0648\u0631\u0648\u062f\u06cc \u062e\u0648\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f – 100\u066a \u0631\u0627\u06cc\u06af\u0627\u0646!\n<\/p>\n
\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n1. \u0648\u0627\u062d\u062f\u0647\u0627: \u0631\u0647\u0627\u06cc\u06cc \u0627\u0632 \u067e\u06cc\u06a9\u0633\u0644 \u0647\u0627<\/a><\/li>2. CSS Reset: \u0634\u0631\u0648\u0639 \u062a\u0627\u0632\u0647<\/a><\/li>3. Flexbox \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 Float: \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 \u0645\u062f\u0631\u0646<\/a><\/li>4. \u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0646\u06af: \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u06af\u0627\u0631\u06cc<\/a><\/li>5. \u067e\u0631\u0633\u0634 \u0647\u0627\u06cc \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc: \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0648\u0644 \u0645\u0648\u0628\u0627\u06cc\u0644<\/a><\/li>6. \u0648\u06cc\u0698\u06af\u06cc: \u0633\u0627\u062f\u0647 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0622\u0646<\/a><\/li>7. \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc: \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0633\u06cc\u0627\u0644<\/a><\/li>8. \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0634\u0628\u06a9\u0647: \u0633\u06cc\u0633\u062a\u0645 \u0647\u0627\u06cc \u06a9\u0627\u0631\u062a \u0645\u0646\u0627\u0633\u0628<\/a><\/li>9. \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646: \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f<\/a><\/li>10. \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/a><\/li>\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/a><\/li><\/ul><\/nav><\/div>\n<\/span>\n 1. \u0648\u0627\u062d\u062f\u0647\u0627: \u0631\u0647\u0627\u06cc\u06cc \u0627\u0632 \u067e\u06cc\u06a9\u0633\u0644 \u0647\u0627\n<\/span><\/h2>\n\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n\n.container<\/span> {<\/span>\n width<\/span>:<\/span> 1200px<\/span>;<\/span>\n font-size<\/span>:<\/span> 16px<\/span>;<\/span>\n margin<\/span>:<\/span> 20px<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\n\n\n \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">90vw<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">75rem<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0646\u0633\u0628\u06cc \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0637\u0631\u0627\u062d\u06cc \u0634\u0645\u0627 \u067e\u0627\u0633\u062e\u06af\u0648 \u0648 \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633 \u0628\u0627\u0634\u062f. REM \u0647\u0627 \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u062a\u0631\u062c\u06cc\u062d\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0645\u06cc \u0634\u0648\u0646\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0646\u0645\u0627\u06cc \u062f\u06cc\u062f \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u0646\u062f \u06a9\u0647 \u0686\u06cc\u062f\u0645\u0627\u0646 \u0634\u0645\u0627 \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0635\u0641\u062d\u0647 \u0633\u0627\u0632\u06af\u0627\u0631 \u0627\u0633\u062a. \u0647\u0645\u06cc\u0634\u0647 \u062f\u0631 \u0646\u0638\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0632\u0631\u06af\u0646\u0645\u0627\u06cc\u06cc \u06a9\u0646\u0646\u062f \u06cc\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u067e\u0627\u06cc\u0647 \u062e\u0648\u062f \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_CSS_Reset_%D8%B4%D8%B1%D9%88%D8%B9_%D8%AA%D8%A7%D8%B2%D9%87\"><\/span>\n<p> 2. CSS Reset: \u0634\u0631\u0648\u0639 \u062a\u0627\u0632\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* Starting without any reset, relying on browser defaults *\/<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"o\">*,<\/span> <span class=\"o\">*<\/span><span class=\"nd\">::before<\/span><span class=\"o\">,<\/span> <span class=\"o\">*<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">box-sizing<\/span><span class=\"p\">:<\/span> <span class=\"n\">border-box<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">html<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">16px<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">-webkit-text-size-adjust<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0646\u0638\u06cc\u0645 \u0645\u062c\u062f\u062f CSS \u0631\u0646\u062f\u0631 \u062b\u0627\u0628\u062a \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f. \u0631\u0627 <code>box-sizing: border-box<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0639\u0631\u0636 \u0631\u0627 \u0628\u0627 \u06af\u0646\u062c\u0627\u0646\u062f\u0646 \u0628\u0627\u0644\u0634\u062a\u06a9 \u0648 \u062d\u0627\u0634\u06cc\u0647 \u062f\u0631 \u0639\u0631\u0636 \u06a9\u0644 \u0639\u0646\u0635\u0631 \u0628\u0635\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"3_Flexbox_%D8%AF%D8%B1_%D9%85%D9%82%D8%A7%D8%A8%D9%84_Float_%D8%B1%D8%A7%D9%87_%D8%AD%D9%84_%D9%87%D8%A7%DB%8C_%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86_%D9%85%D8%AF%D8%B1%D9%86\"><\/span>\n<p> 3. Flexbox \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 Float: \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 \u0645\u062f\u0631\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">overflow<\/span><span class=\"p\">:<\/span> <span class=\"nb\">hidden<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.sidebar<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">float<\/span><span class=\"p\">:<\/span> <span class=\"nb\">left<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">300px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.main<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">margin-left<\/span><span class=\"p\">:<\/span> <span class=\"m\">320px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.sidebar<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">flex-basis<\/span><span class=\"p\">:<\/span> <span class=\"m\">18.75rem<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">flex-shrink<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.main<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">flex-grow<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Flexbox \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631 \u0631\u0627 \u0628\u0627 \u06a9\u062f \u06a9\u0645\u062a\u0631 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0641\u0627\u0635\u0644\u0647\u060c \u062a\u0631\u0627\u0632\u060c \u0648 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0631\u0627 \u0628\u0627 \u0638\u0631\u0627\u0641\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u0646\u0633\u0628\u062a \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 \u0634\u0646\u0627\u0648\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0628\u0647\u062a\u0631 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D8%B1%D9%86%DA%AF_%D9%85%D8%AA%D8%BA%DB%8C%D8%B1%D9%87%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B3%D8%A7%D8%B2%DA%AF%D8%A7%D8%B1%DB%8C\"><\/span>\n<p> 4. \u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0646\u06af: \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u06af\u0627\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.button<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.link<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nd\">:root<\/span> <span class=\"p\">{<\/span>\n <span class=\"py\">--primary-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">--primary-hover<\/span><span class=\"p\">:<\/span> <span class=\"m\">#0056b3<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.button<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.button<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-hover<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.link<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc CSS (\u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc) \u062d\u0641\u0638 \u0631\u0646\u06af\u200c\u0647\u0627\u06cc \u062b\u0627\u0628\u062a \u0631\u0627 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631 \u062a\u0645 \u0631\u0627 \u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u0622\u0646\u0647\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06a9\u062f \u0634\u0645\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u062a\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u062e\u0637\u0631 \u0646\u0627\u0647\u0645\u0627\u0647\u0646\u06af\u06cc \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5_%D9%BE%D8%B1%D8%B3%D8%B4_%D9%87%D8%A7%DB%8C_%D8%B1%D8%B3%D8%A7%D9%86%D9%87_%D8%A7%DB%8C_%D8%B1%D9%88%DB%8C%DA%A9%D8%B1%D8%AF_%D8%A7%D9%88%D9%84_%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84\"><\/span>\n<p> 5. \u067e\u0631\u0633\u0634 \u0647\u0627\u06cc \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc: \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0648\u0644 \u0645\u0648\u0628\u0627\u06cc\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* Desktop-first approach *\/<\/span>\n<span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">1200px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"k\">@media<\/span> <span class=\"p\">(<\/span><span class=\"n\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">768px<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n <span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* Mobile-first approach *\/<\/span>\n<span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"k\">@media<\/span> <span class=\"p\">(<\/span><span class=\"n\">min-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">48em<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n <span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">90%<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">75rem<\/span><span class=\"p\">;<\/span>\n <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0637\u0631\u0627\u062d\u06cc \u0627\u0648\u0644 \u0645\u0648\u0628\u0627\u06cc\u0644 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0633\u0628\u06a9\u200c\u0647\u0627\u06cc \u067e\u0627\u06cc\u0647 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u062a\u0631 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0633\u067e\u0633 \u0628\u0647 \u062a\u062f\u0631\u06cc\u062c \u062a\u062c\u0631\u0628\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634\u06af\u0631\u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u200c\u062a\u0631 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0645\u0646\u062c\u0631 \u0628\u0647 \u06a9\u062f \u062a\u0645\u06cc\u0632\u062a\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u062a\u0631 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"6_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D8%B3%D8%A7%D8%AF%D9%87_%D9%86%DA%AF%D9%87_%D8%AF%D8%A7%D8%B4%D8%AA%D9%86_%D8%A2%D9%86\"><\/span>\n<p> 6. \u0648\u06cc\u0698\u06af\u06cc: \u0633\u0627\u062f\u0647 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0622\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nf\">#header<\/span> <span class=\"nt\">div<\/span><span class=\"nc\">.navigation<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"nt\">a<\/span><span class=\"nc\">.active<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"no\">blue<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.nav-link--active<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u06a9\u0645\u062a\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0633\u0628\u06a9 \u0647\u0627 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0634\u0648\u0646\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0647 \u0634\u0648\u0646\u062f. \u0627\u0632 \u0642\u0631\u0627\u0631\u062f\u0627\u062f \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc BEM \u06cc\u0627 \u0631\u0648\u0634 \u0647\u0627\u06cc \u0645\u0634\u0627\u0628\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc \u0645\u0639\u0646\u06cc \u062f\u0627\u0631 \u0648 \u062e\u0627\u0635 \u0628\u062f\u0648\u0646 \u062a\u0648\u062f\u0631\u062a\u0648 \u0639\u0645\u06cc\u0642 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"7_%D8%AA%D8%A7%DB%8C%D9%BE%D9%88%DA%AF%D8%B1%D8%A7%D9%81%DB%8C_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87_%D9%81%D9%88%D9%86%D8%AA_%D8%B3%DB%8C%D8%A7%D9%84\"><\/span>\n<p> 7. \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc: \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0633\u06cc\u0627\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">32px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1.75rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">5vw<\/span><span class=\"p\">,<\/span> <span class=\"m\">2.5rem<\/span><span class=\"p\">);<\/span>\n <span class=\"nl\">line-height<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.2<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>clamp()<\/code> \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u06cc\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627\u06cc \u062d\u062f\u0627\u0642\u0644 \u0648 \u062d\u062f\u0627\u06a9\u062b\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0686\u0646\u062f \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc \u0631\u0627 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0627\u0632 \u0628\u06cc\u0646 \u0645\u06cc \u0628\u0631\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"8_%D8%B7%D8%B1%D8%AD_%D8%A8%D9%86%D8%AF%DB%8C_%D8%B4%D8%A8%DA%A9%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85_%D9%87%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%D8%AA_%D9%85%D9%86%D8%A7%D8%B3%D8%A8\"><\/span>\n<p> 8. \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0634\u0628\u06a9\u0647: \u0633\u06cc\u0633\u062a\u0645 \u0647\u0627\u06cc \u06a9\u0627\u0631\u062a \u0645\u0646\u0627\u0633\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.card<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"n\">calc<\/span><span class=\"p\">(<\/span><span class=\"m\">33.33%<\/span> <span class=\"n\">-<\/span> <span class=\"m\">20px<\/span><span class=\"p\">);<\/span>\n <span class=\"nl\">float<\/span><span class=\"p\">:<\/span> <span class=\"nb\">left<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.card-grid<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">grid<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">grid-template-columns<\/span><span class=\"p\">:<\/span> <span class=\"nb\">repeat<\/span><span class=\"p\">(<\/span><span class=\"n\">auto-fit<\/span><span class=\"p\">,<\/span> <span class=\"n\">minmax<\/span><span class=\"p\">(<\/span><span class=\"n\">min<\/span><span class=\"p\">(<\/span><span class=\"m\">100%<\/span><span class=\"p\">,<\/span> <span class=\"m\">20rem<\/span><span class=\"p\">),<\/span> <span class=\"m\">1<\/span><span class=\"n\">fr<\/span><span class=\"p\">));<\/span>\n <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0634\u0628\u06a9\u0647 CSS \u0628\u0627 <code>auto-fit<\/code> \u0648 <code>minmax()<\/code> \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0627 \u0641\u0636\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0647 \u06a9\u062f \u06a9\u0645\u062a\u0631\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f \u0648 \u0645\u0648\u0627\u0631\u062f \u0644\u0628\u0647 \u0631\u0627 \u0628\u0647\u062a\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"9_%D8%A7%D9%86%DB%8C%D9%85%DB%8C%D8%B4%D9%86_%D8%A8%D9%87%DB%8C%D9%86%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF\"><\/span>\n<p> 9. \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646: \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.element<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">all<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.element<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">,<\/span> <span class=\"n\">opacity<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">will-change<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0647 \u062c\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u060c \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062f\u0642\u06cc\u0642 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062a\u062d\u0631\u06a9 \u0633\u0627\u0632\u06cc \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f <code>all<\/code>\u060c \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>transform<\/code> \u0648 <code>opacity<\/code> \u062f\u0631 \u0635\u0648\u0631\u062a \u0627\u0645\u06a9\u0627\u0646 \u0632\u06cc\u0631\u0627 \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u06cc\u0646\u0647 \u0634\u062f\u0647 \u0627\u0646\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>will-change<\/code> \u06a9\u0645\u062a\u0631 \u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 \u0645\u062a\u062d\u0631\u06a9 \u0627\u063a\u0644\u0628.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"10_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D9%86%D9%88%D8%A7%D8%B9_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA\"><\/span>\n<p> 10. \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.button-primary<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"no\">blue<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.button-secondary<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"no\">gray<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.button<\/span> <span class=\"p\">{<\/span>\n <span class=\"py\">--button-bg<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n <span class=\"py\">--button-padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.625rem<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n\n <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--button-bg<\/span><span class=\"p\">);<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--button-padding<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.button--secondary<\/span> <span class=\"p\">{<\/span>\n <span class=\"py\">--button-bg<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc CSS \u0628\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639\u060c \u062a\u06a9\u0631\u0627\u0631 \u06a9\u062f \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u06cc\u062c\u0627\u062f \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062b\u0627\u0628\u062a \u062f\u0631 \u0633\u06cc\u0633\u062a\u0645 \u0637\u0631\u0627\u062d\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\"><\/span>\n<p> \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS \u0645\u062f\u0631\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06a9\u062f \u0634\u0645\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631\u062a\u0631 \u06a9\u0646\u062f. \u0628\u0627 \u067e\u06cc\u0631\u0648\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627\u060c \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0642\u0648\u06cc \u062a\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f \u06a9\u0647 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0648 \u0627\u0635\u0644\u0627\u062d \u0622\u0646\u0647\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0627\u0633\u062a. \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u0647\u062f\u0641 \u0641\u0642\u0637 \u0627\u06cc\u0646 \u0646\u06cc\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u06cc \u0631\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f\u060c \u0628\u0644\u06a9\u0647 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0645 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648 \u0647\u0645 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0647 \u062e\u0648\u0628\u06cc \u06a9\u0627\u0631 \u06a9\u0646\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u0647\u0631 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647\u200c\u0627\u06cc \u0622\u0646\u062c\u0627 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a \u2013 \u0645\u0628\u0627\u0631\u0632\u0647 \u0628\u0627 CSS \u06a9\u0647 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0633\u0627\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u06cc\u062f \u0627\u0645\u0627 \u0628\u0647 \u0633\u0631\u0639\u062a \u0633\u062e\u062a\u200c\u06af\u06cc\u0631 \u0634\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u062a\u0644\u0647\u200c\u0647\u0627\u06cc \u0631\u0627\u06cc\u062c CSS \u0648 \u0631\u0627\u0647\u200c\u062d\u0644\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0628\u06cc\u0627\u06cc\u06cc\u062f CSS \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u0645\u0634\u06a9\u0644 \u0633\u0627\u0632 \u0628\u0647 \u062d\u0631\u0641\u0647 …<\/p>\n","protected":false},"author":2,"featured_media":85899,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-85898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/85898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=85898"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/85898\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/85899"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=85898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=85898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=85898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
1. \u0648\u0627\u062d\u062f\u0647\u0627: \u0631\u0647\u0627\u06cc\u06cc \u0627\u0632 \u067e\u06cc\u06a9\u0633\u0644 \u0647\u0627\n<\/span><\/h2>\n\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n\n.container<\/span> {<\/span>\n width<\/span>:<\/span> 1200px<\/span>;<\/span>\n font-size<\/span>:<\/span> 16px<\/span>;<\/span>\n margin<\/span>:<\/span> 20px<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\n\n\n \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">90vw<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">75rem<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0646\u0633\u0628\u06cc \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0637\u0631\u0627\u062d\u06cc \u0634\u0645\u0627 \u067e\u0627\u0633\u062e\u06af\u0648 \u0648 \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633 \u0628\u0627\u0634\u062f. REM \u0647\u0627 \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u062a\u0631\u062c\u06cc\u062d\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0645\u06cc \u0634\u0648\u0646\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0646\u0645\u0627\u06cc \u062f\u06cc\u062f \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u0646\u062f \u06a9\u0647 \u0686\u06cc\u062f\u0645\u0627\u0646 \u0634\u0645\u0627 \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0635\u0641\u062d\u0647 \u0633\u0627\u0632\u06af\u0627\u0631 \u0627\u0633\u062a. \u0647\u0645\u06cc\u0634\u0647 \u062f\u0631 \u0646\u0638\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0632\u0631\u06af\u0646\u0645\u0627\u06cc\u06cc \u06a9\u0646\u0646\u062f \u06cc\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u067e\u0627\u06cc\u0647 \u062e\u0648\u062f \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_CSS_Reset_%D8%B4%D8%B1%D9%88%D8%B9_%D8%AA%D8%A7%D8%B2%D9%87\"><\/span>\n<p> 2. CSS Reset: \u0634\u0631\u0648\u0639 \u062a\u0627\u0632\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* Starting without any reset, relying on browser defaults *\/<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"o\">*,<\/span> <span class=\"o\">*<\/span><span class=\"nd\">::before<\/span><span class=\"o\">,<\/span> <span class=\"o\">*<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">box-sizing<\/span><span class=\"p\">:<\/span> <span class=\"n\">border-box<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">html<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">16px<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">-webkit-text-size-adjust<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0646\u0638\u06cc\u0645 \u0645\u062c\u062f\u062f CSS \u0631\u0646\u062f\u0631 \u062b\u0627\u0628\u062a \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f. \u0631\u0627 <code>box-sizing: border-box<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0639\u0631\u0636 \u0631\u0627 \u0628\u0627 \u06af\u0646\u062c\u0627\u0646\u062f\u0646 \u0628\u0627\u0644\u0634\u062a\u06a9 \u0648 \u062d\u0627\u0634\u06cc\u0647 \u062f\u0631 \u0639\u0631\u0636 \u06a9\u0644 \u0639\u0646\u0635\u0631 \u0628\u0635\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"3_Flexbox_%D8%AF%D8%B1_%D9%85%D9%82%D8%A7%D8%A8%D9%84_Float_%D8%B1%D8%A7%D9%87_%D8%AD%D9%84_%D9%87%D8%A7%DB%8C_%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86_%D9%85%D8%AF%D8%B1%D9%86\"><\/span>\n<p> 3. Flexbox \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 Float: \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 \u0645\u062f\u0631\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">overflow<\/span><span class=\"p\">:<\/span> <span class=\"nb\">hidden<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.sidebar<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">float<\/span><span class=\"p\">:<\/span> <span class=\"nb\">left<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">300px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.main<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">margin-left<\/span><span class=\"p\">:<\/span> <span class=\"m\">320px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.sidebar<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">flex-basis<\/span><span class=\"p\">:<\/span> <span class=\"m\">18.75rem<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">flex-shrink<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.main<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">flex-grow<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Flexbox \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631 \u0631\u0627 \u0628\u0627 \u06a9\u062f \u06a9\u0645\u062a\u0631 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0641\u0627\u0635\u0644\u0647\u060c \u062a\u0631\u0627\u0632\u060c \u0648 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0631\u0627 \u0628\u0627 \u0638\u0631\u0627\u0641\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u0646\u0633\u0628\u062a \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 \u0634\u0646\u0627\u0648\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0628\u0647\u062a\u0631 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D8%B1%D9%86%DA%AF_%D9%85%D8%AA%D8%BA%DB%8C%D8%B1%D9%87%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B3%D8%A7%D8%B2%DA%AF%D8%A7%D8%B1%DB%8C\"><\/span>\n<p> 4. \u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0646\u06af: \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u06af\u0627\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.button<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.link<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nd\">:root<\/span> <span class=\"p\">{<\/span>\n <span class=\"py\">--primary-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">--primary-hover<\/span><span class=\"p\">:<\/span> <span class=\"m\">#0056b3<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.button<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.button<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-hover<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.link<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc CSS (\u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc) \u062d\u0641\u0638 \u0631\u0646\u06af\u200c\u0647\u0627\u06cc \u062b\u0627\u0628\u062a \u0631\u0627 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631 \u062a\u0645 \u0631\u0627 \u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u0622\u0646\u0647\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06a9\u062f \u0634\u0645\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u062a\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u062e\u0637\u0631 \u0646\u0627\u0647\u0645\u0627\u0647\u0646\u06af\u06cc \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5_%D9%BE%D8%B1%D8%B3%D8%B4_%D9%87%D8%A7%DB%8C_%D8%B1%D8%B3%D8%A7%D9%86%D9%87_%D8%A7%DB%8C_%D8%B1%D9%88%DB%8C%DA%A9%D8%B1%D8%AF_%D8%A7%D9%88%D9%84_%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84\"><\/span>\n<p> 5. \u067e\u0631\u0633\u0634 \u0647\u0627\u06cc \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc: \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0648\u0644 \u0645\u0648\u0628\u0627\u06cc\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* Desktop-first approach *\/<\/span>\n<span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">1200px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"k\">@media<\/span> <span class=\"p\">(<\/span><span class=\"n\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">768px<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n <span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* Mobile-first approach *\/<\/span>\n<span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"k\">@media<\/span> <span class=\"p\">(<\/span><span class=\"n\">min-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">48em<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n <span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">90%<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">75rem<\/span><span class=\"p\">;<\/span>\n <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0637\u0631\u0627\u062d\u06cc \u0627\u0648\u0644 \u0645\u0648\u0628\u0627\u06cc\u0644 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0633\u0628\u06a9\u200c\u0647\u0627\u06cc \u067e\u0627\u06cc\u0647 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u062a\u0631 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0633\u067e\u0633 \u0628\u0647 \u062a\u062f\u0631\u06cc\u062c \u062a\u062c\u0631\u0628\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634\u06af\u0631\u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u200c\u062a\u0631 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0645\u0646\u062c\u0631 \u0628\u0647 \u06a9\u062f \u062a\u0645\u06cc\u0632\u062a\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u062a\u0631 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"6_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D8%B3%D8%A7%D8%AF%D9%87_%D9%86%DA%AF%D9%87_%D8%AF%D8%A7%D8%B4%D8%AA%D9%86_%D8%A2%D9%86\"><\/span>\n<p> 6. \u0648\u06cc\u0698\u06af\u06cc: \u0633\u0627\u062f\u0647 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0622\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nf\">#header<\/span> <span class=\"nt\">div<\/span><span class=\"nc\">.navigation<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"nt\">a<\/span><span class=\"nc\">.active<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"no\">blue<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.nav-link--active<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u06a9\u0645\u062a\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0633\u0628\u06a9 \u0647\u0627 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0634\u0648\u0646\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0647 \u0634\u0648\u0646\u062f. \u0627\u0632 \u0642\u0631\u0627\u0631\u062f\u0627\u062f \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc BEM \u06cc\u0627 \u0631\u0648\u0634 \u0647\u0627\u06cc \u0645\u0634\u0627\u0628\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc \u0645\u0639\u0646\u06cc \u062f\u0627\u0631 \u0648 \u062e\u0627\u0635 \u0628\u062f\u0648\u0646 \u062a\u0648\u062f\u0631\u062a\u0648 \u0639\u0645\u06cc\u0642 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"7_%D8%AA%D8%A7%DB%8C%D9%BE%D9%88%DA%AF%D8%B1%D8%A7%D9%81%DB%8C_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87_%D9%81%D9%88%D9%86%D8%AA_%D8%B3%DB%8C%D8%A7%D9%84\"><\/span>\n<p> 7. \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc: \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0633\u06cc\u0627\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">32px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1.75rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">5vw<\/span><span class=\"p\">,<\/span> <span class=\"m\">2.5rem<\/span><span class=\"p\">);<\/span>\n <span class=\"nl\">line-height<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.2<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>clamp()<\/code> \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u06cc\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627\u06cc \u062d\u062f\u0627\u0642\u0644 \u0648 \u062d\u062f\u0627\u06a9\u062b\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0686\u0646\u062f \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc \u0631\u0627 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0627\u0632 \u0628\u06cc\u0646 \u0645\u06cc \u0628\u0631\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"8_%D8%B7%D8%B1%D8%AD_%D8%A8%D9%86%D8%AF%DB%8C_%D8%B4%D8%A8%DA%A9%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85_%D9%87%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%D8%AA_%D9%85%D9%86%D8%A7%D8%B3%D8%A8\"><\/span>\n<p> 8. \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0634\u0628\u06a9\u0647: \u0633\u06cc\u0633\u062a\u0645 \u0647\u0627\u06cc \u06a9\u0627\u0631\u062a \u0645\u0646\u0627\u0633\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.card<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"n\">calc<\/span><span class=\"p\">(<\/span><span class=\"m\">33.33%<\/span> <span class=\"n\">-<\/span> <span class=\"m\">20px<\/span><span class=\"p\">);<\/span>\n <span class=\"nl\">float<\/span><span class=\"p\">:<\/span> <span class=\"nb\">left<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.card-grid<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">grid<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">grid-template-columns<\/span><span class=\"p\">:<\/span> <span class=\"nb\">repeat<\/span><span class=\"p\">(<\/span><span class=\"n\">auto-fit<\/span><span class=\"p\">,<\/span> <span class=\"n\">minmax<\/span><span class=\"p\">(<\/span><span class=\"n\">min<\/span><span class=\"p\">(<\/span><span class=\"m\">100%<\/span><span class=\"p\">,<\/span> <span class=\"m\">20rem<\/span><span class=\"p\">),<\/span> <span class=\"m\">1<\/span><span class=\"n\">fr<\/span><span class=\"p\">));<\/span>\n <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0634\u0628\u06a9\u0647 CSS \u0628\u0627 <code>auto-fit<\/code> \u0648 <code>minmax()<\/code> \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0627 \u0641\u0636\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0647 \u06a9\u062f \u06a9\u0645\u062a\u0631\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f \u0648 \u0645\u0648\u0627\u0631\u062f \u0644\u0628\u0647 \u0631\u0627 \u0628\u0647\u062a\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"9_%D8%A7%D9%86%DB%8C%D9%85%DB%8C%D8%B4%D9%86_%D8%A8%D9%87%DB%8C%D9%86%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF\"><\/span>\n<p> 9. \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646: \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.element<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">all<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.element<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">,<\/span> <span class=\"n\">opacity<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">will-change<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0647 \u062c\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u060c \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062f\u0642\u06cc\u0642 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062a\u062d\u0631\u06a9 \u0633\u0627\u0632\u06cc \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f <code>all<\/code>\u060c \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>transform<\/code> \u0648 <code>opacity<\/code> \u062f\u0631 \u0635\u0648\u0631\u062a \u0627\u0645\u06a9\u0627\u0646 \u0632\u06cc\u0631\u0627 \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u06cc\u0646\u0647 \u0634\u062f\u0647 \u0627\u0646\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>will-change<\/code> \u06a9\u0645\u062a\u0631 \u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 \u0645\u062a\u062d\u0631\u06a9 \u0627\u063a\u0644\u0628.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"10_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D9%86%D9%88%D8%A7%D8%B9_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA\"><\/span>\n<p> 10. \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.button-primary<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"no\">blue<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.button-secondary<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"no\">gray<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.button<\/span> <span class=\"p\">{<\/span>\n <span class=\"py\">--button-bg<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n <span class=\"py\">--button-padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.625rem<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n\n <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--button-bg<\/span><span class=\"p\">);<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--button-padding<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.button--secondary<\/span> <span class=\"p\">{<\/span>\n <span class=\"py\">--button-bg<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc CSS \u0628\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639\u060c \u062a\u06a9\u0631\u0627\u0631 \u06a9\u062f \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u06cc\u062c\u0627\u062f \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062b\u0627\u0628\u062a \u062f\u0631 \u0633\u06cc\u0633\u062a\u0645 \u0637\u0631\u0627\u062d\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\"><\/span>\n<p> \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS \u0645\u062f\u0631\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06a9\u062f \u0634\u0645\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631\u062a\u0631 \u06a9\u0646\u062f. \u0628\u0627 \u067e\u06cc\u0631\u0648\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627\u060c \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0642\u0648\u06cc \u062a\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f \u06a9\u0647 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0648 \u0627\u0635\u0644\u0627\u062d \u0622\u0646\u0647\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0627\u0633\u062a. \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u0647\u062f\u0641 \u0641\u0642\u0637 \u0627\u06cc\u0646 \u0646\u06cc\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u06cc \u0631\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f\u060c \u0628\u0644\u06a9\u0647 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0645 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648 \u0647\u0645 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0647 \u062e\u0648\u0628\u06cc \u06a9\u0627\u0631 \u06a9\u0646\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u0647\u0631 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647\u200c\u0627\u06cc \u0622\u0646\u062c\u0627 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a \u2013 \u0645\u0628\u0627\u0631\u0632\u0647 \u0628\u0627 CSS \u06a9\u0647 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0633\u0627\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u06cc\u062f \u0627\u0645\u0627 \u0628\u0647 \u0633\u0631\u0639\u062a \u0633\u062e\u062a\u200c\u06af\u06cc\u0631 \u0634\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u062a\u0644\u0647\u200c\u0647\u0627\u06cc \u0631\u0627\u06cc\u062c CSS \u0648 \u0631\u0627\u0647\u200c\u062d\u0644\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0628\u06cc\u0627\u06cc\u06cc\u062f CSS \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u0645\u0634\u06a9\u0644 \u0633\u0627\u0632 \u0628\u0647 \u062d\u0631\u0641\u0647 …<\/p>\n","protected":false},"author":2,"featured_media":85899,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-85898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/85898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=85898"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/85898\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/85899"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=85898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=85898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=85898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n\n.container<\/span> {<\/span>\n width<\/span>:<\/span> 1200px<\/span>;<\/span>\n font-size<\/span>:<\/span> 16px<\/span>;<\/span>\n margin<\/span>:<\/span> 20px<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\n\n\n \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">90vw<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">75rem<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0646\u0633\u0628\u06cc \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0637\u0631\u0627\u062d\u06cc \u0634\u0645\u0627 \u067e\u0627\u0633\u062e\u06af\u0648 \u0648 \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633 \u0628\u0627\u0634\u062f. REM \u0647\u0627 \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u062a\u0631\u062c\u06cc\u062d\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0645\u06cc \u0634\u0648\u0646\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0646\u0645\u0627\u06cc \u062f\u06cc\u062f \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u0646\u062f \u06a9\u0647 \u0686\u06cc\u062f\u0645\u0627\u0646 \u0634\u0645\u0627 \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0635\u0641\u062d\u0647 \u0633\u0627\u0632\u06af\u0627\u0631 \u0627\u0633\u062a. \u0647\u0645\u06cc\u0634\u0647 \u062f\u0631 \u0646\u0638\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0632\u0631\u06af\u0646\u0645\u0627\u06cc\u06cc \u06a9\u0646\u0646\u062f \u06cc\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u067e\u0627\u06cc\u0647 \u062e\u0648\u062f \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_CSS_Reset_%D8%B4%D8%B1%D9%88%D8%B9_%D8%AA%D8%A7%D8%B2%D9%87\"><\/span>\n<p> 2. CSS Reset: \u0634\u0631\u0648\u0639 \u062a\u0627\u0632\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* Starting without any reset, relying on browser defaults *\/<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"o\">*,<\/span> <span class=\"o\">*<\/span><span class=\"nd\">::before<\/span><span class=\"o\">,<\/span> <span class=\"o\">*<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">box-sizing<\/span><span class=\"p\">:<\/span> <span class=\"n\">border-box<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">html<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">16px<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">-webkit-text-size-adjust<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0646\u0638\u06cc\u0645 \u0645\u062c\u062f\u062f CSS \u0631\u0646\u062f\u0631 \u062b\u0627\u0628\u062a \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f. \u0631\u0627 <code>box-sizing: border-box<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0639\u0631\u0636 \u0631\u0627 \u0628\u0627 \u06af\u0646\u062c\u0627\u0646\u062f\u0646 \u0628\u0627\u0644\u0634\u062a\u06a9 \u0648 \u062d\u0627\u0634\u06cc\u0647 \u062f\u0631 \u0639\u0631\u0636 \u06a9\u0644 \u0639\u0646\u0635\u0631 \u0628\u0635\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"3_Flexbox_%D8%AF%D8%B1_%D9%85%D9%82%D8%A7%D8%A8%D9%84_Float_%D8%B1%D8%A7%D9%87_%D8%AD%D9%84_%D9%87%D8%A7%DB%8C_%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86_%D9%85%D8%AF%D8%B1%D9%86\"><\/span>\n<p> 3. Flexbox \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 Float: \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 \u0645\u062f\u0631\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">overflow<\/span><span class=\"p\">:<\/span> <span class=\"nb\">hidden<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.sidebar<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">float<\/span><span class=\"p\">:<\/span> <span class=\"nb\">left<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">300px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.main<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">margin-left<\/span><span class=\"p\">:<\/span> <span class=\"m\">320px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.sidebar<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">flex-basis<\/span><span class=\"p\">:<\/span> <span class=\"m\">18.75rem<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">flex-shrink<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.main<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">flex-grow<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Flexbox \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631 \u0631\u0627 \u0628\u0627 \u06a9\u062f \u06a9\u0645\u062a\u0631 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0641\u0627\u0635\u0644\u0647\u060c \u062a\u0631\u0627\u0632\u060c \u0648 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0631\u0627 \u0628\u0627 \u0638\u0631\u0627\u0641\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u0646\u0633\u0628\u062a \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 \u0634\u0646\u0627\u0648\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0628\u0647\u062a\u0631 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D8%B1%D9%86%DA%AF_%D9%85%D8%AA%D8%BA%DB%8C%D8%B1%D9%87%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B3%D8%A7%D8%B2%DA%AF%D8%A7%D8%B1%DB%8C\"><\/span>\n<p> 4. \u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0646\u06af: \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u06af\u0627\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.button<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.link<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nd\">:root<\/span> <span class=\"p\">{<\/span>\n <span class=\"py\">--primary-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">--primary-hover<\/span><span class=\"p\">:<\/span> <span class=\"m\">#0056b3<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.button<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.button<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-hover<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.link<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc CSS (\u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc) \u062d\u0641\u0638 \u0631\u0646\u06af\u200c\u0647\u0627\u06cc \u062b\u0627\u0628\u062a \u0631\u0627 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631 \u062a\u0645 \u0631\u0627 \u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u0622\u0646\u0647\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06a9\u062f \u0634\u0645\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u062a\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u062e\u0637\u0631 \u0646\u0627\u0647\u0645\u0627\u0647\u0646\u06af\u06cc \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5_%D9%BE%D8%B1%D8%B3%D8%B4_%D9%87%D8%A7%DB%8C_%D8%B1%D8%B3%D8%A7%D9%86%D9%87_%D8%A7%DB%8C_%D8%B1%D9%88%DB%8C%DA%A9%D8%B1%D8%AF_%D8%A7%D9%88%D9%84_%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84\"><\/span>\n<p> 5. \u067e\u0631\u0633\u0634 \u0647\u0627\u06cc \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc: \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0648\u0644 \u0645\u0648\u0628\u0627\u06cc\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* Desktop-first approach *\/<\/span>\n<span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">1200px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"k\">@media<\/span> <span class=\"p\">(<\/span><span class=\"n\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">768px<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n <span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* Mobile-first approach *\/<\/span>\n<span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"k\">@media<\/span> <span class=\"p\">(<\/span><span class=\"n\">min-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">48em<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n <span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">90%<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">75rem<\/span><span class=\"p\">;<\/span>\n <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0637\u0631\u0627\u062d\u06cc \u0627\u0648\u0644 \u0645\u0648\u0628\u0627\u06cc\u0644 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0633\u0628\u06a9\u200c\u0647\u0627\u06cc \u067e\u0627\u06cc\u0647 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u062a\u0631 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0633\u067e\u0633 \u0628\u0647 \u062a\u062f\u0631\u06cc\u062c \u062a\u062c\u0631\u0628\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634\u06af\u0631\u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u200c\u062a\u0631 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0645\u0646\u062c\u0631 \u0628\u0647 \u06a9\u062f \u062a\u0645\u06cc\u0632\u062a\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u062a\u0631 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"6_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D8%B3%D8%A7%D8%AF%D9%87_%D9%86%DA%AF%D9%87_%D8%AF%D8%A7%D8%B4%D8%AA%D9%86_%D8%A2%D9%86\"><\/span>\n<p> 6. \u0648\u06cc\u0698\u06af\u06cc: \u0633\u0627\u062f\u0647 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0622\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nf\">#header<\/span> <span class=\"nt\">div<\/span><span class=\"nc\">.navigation<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"nt\">a<\/span><span class=\"nc\">.active<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"no\">blue<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.nav-link--active<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u06a9\u0645\u062a\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0633\u0628\u06a9 \u0647\u0627 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0634\u0648\u0646\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0647 \u0634\u0648\u0646\u062f. \u0627\u0632 \u0642\u0631\u0627\u0631\u062f\u0627\u062f \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc BEM \u06cc\u0627 \u0631\u0648\u0634 \u0647\u0627\u06cc \u0645\u0634\u0627\u0628\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc \u0645\u0639\u0646\u06cc \u062f\u0627\u0631 \u0648 \u062e\u0627\u0635 \u0628\u062f\u0648\u0646 \u062a\u0648\u062f\u0631\u062a\u0648 \u0639\u0645\u06cc\u0642 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"7_%D8%AA%D8%A7%DB%8C%D9%BE%D9%88%DA%AF%D8%B1%D8%A7%D9%81%DB%8C_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87_%D9%81%D9%88%D9%86%D8%AA_%D8%B3%DB%8C%D8%A7%D9%84\"><\/span>\n<p> 7. \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc: \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0633\u06cc\u0627\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">32px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1.75rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">5vw<\/span><span class=\"p\">,<\/span> <span class=\"m\">2.5rem<\/span><span class=\"p\">);<\/span>\n <span class=\"nl\">line-height<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.2<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>clamp()<\/code> \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u06cc\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627\u06cc \u062d\u062f\u0627\u0642\u0644 \u0648 \u062d\u062f\u0627\u06a9\u062b\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0686\u0646\u062f \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc \u0631\u0627 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0627\u0632 \u0628\u06cc\u0646 \u0645\u06cc \u0628\u0631\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"8_%D8%B7%D8%B1%D8%AD_%D8%A8%D9%86%D8%AF%DB%8C_%D8%B4%D8%A8%DA%A9%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85_%D9%87%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%D8%AA_%D9%85%D9%86%D8%A7%D8%B3%D8%A8\"><\/span>\n<p> 8. \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0634\u0628\u06a9\u0647: \u0633\u06cc\u0633\u062a\u0645 \u0647\u0627\u06cc \u06a9\u0627\u0631\u062a \u0645\u0646\u0627\u0633\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.card<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"n\">calc<\/span><span class=\"p\">(<\/span><span class=\"m\">33.33%<\/span> <span class=\"n\">-<\/span> <span class=\"m\">20px<\/span><span class=\"p\">);<\/span>\n <span class=\"nl\">float<\/span><span class=\"p\">:<\/span> <span class=\"nb\">left<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.card-grid<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">grid<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">grid-template-columns<\/span><span class=\"p\">:<\/span> <span class=\"nb\">repeat<\/span><span class=\"p\">(<\/span><span class=\"n\">auto-fit<\/span><span class=\"p\">,<\/span> <span class=\"n\">minmax<\/span><span class=\"p\">(<\/span><span class=\"n\">min<\/span><span class=\"p\">(<\/span><span class=\"m\">100%<\/span><span class=\"p\">,<\/span> <span class=\"m\">20rem<\/span><span class=\"p\">),<\/span> <span class=\"m\">1<\/span><span class=\"n\">fr<\/span><span class=\"p\">));<\/span>\n <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0634\u0628\u06a9\u0647 CSS \u0628\u0627 <code>auto-fit<\/code> \u0648 <code>minmax()<\/code> \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0627 \u0641\u0636\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0647 \u06a9\u062f \u06a9\u0645\u062a\u0631\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f \u0648 \u0645\u0648\u0627\u0631\u062f \u0644\u0628\u0647 \u0631\u0627 \u0628\u0647\u062a\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"9_%D8%A7%D9%86%DB%8C%D9%85%DB%8C%D8%B4%D9%86_%D8%A8%D9%87%DB%8C%D9%86%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF\"><\/span>\n<p> 9. \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646: \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.element<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">all<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.element<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">,<\/span> <span class=\"n\">opacity<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">will-change<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0647 \u062c\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u060c \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062f\u0642\u06cc\u0642 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062a\u062d\u0631\u06a9 \u0633\u0627\u0632\u06cc \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f <code>all<\/code>\u060c \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>transform<\/code> \u0648 <code>opacity<\/code> \u062f\u0631 \u0635\u0648\u0631\u062a \u0627\u0645\u06a9\u0627\u0646 \u0632\u06cc\u0631\u0627 \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u06cc\u0646\u0647 \u0634\u062f\u0647 \u0627\u0646\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>will-change<\/code> \u06a9\u0645\u062a\u0631 \u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 \u0645\u062a\u062d\u0631\u06a9 \u0627\u063a\u0644\u0628.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"10_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D9%86%D9%88%D8%A7%D8%B9_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA\"><\/span>\n<p> 10. \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.button-primary<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"no\">blue<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.button-secondary<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"no\">gray<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.button<\/span> <span class=\"p\">{<\/span>\n <span class=\"py\">--button-bg<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n <span class=\"py\">--button-padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.625rem<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n\n <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--button-bg<\/span><span class=\"p\">);<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--button-padding<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.button--secondary<\/span> <span class=\"p\">{<\/span>\n <span class=\"py\">--button-bg<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc CSS \u0628\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639\u060c \u062a\u06a9\u0631\u0627\u0631 \u06a9\u062f \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u06cc\u062c\u0627\u062f \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062b\u0627\u0628\u062a \u062f\u0631 \u0633\u06cc\u0633\u062a\u0645 \u0637\u0631\u0627\u062d\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\"><\/span>\n<p> \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS \u0645\u062f\u0631\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06a9\u062f \u0634\u0645\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631\u062a\u0631 \u06a9\u0646\u062f. \u0628\u0627 \u067e\u06cc\u0631\u0648\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627\u060c \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0642\u0648\u06cc \u062a\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f \u06a9\u0647 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0648 \u0627\u0635\u0644\u0627\u062d \u0622\u0646\u0647\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0627\u0633\u062a. \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u0647\u062f\u0641 \u0641\u0642\u0637 \u0627\u06cc\u0646 \u0646\u06cc\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u06cc \u0631\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f\u060c \u0628\u0644\u06a9\u0647 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0645 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648 \u0647\u0645 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0647 \u062e\u0648\u0628\u06cc \u06a9\u0627\u0631 \u06a9\u0646\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u0647\u0631 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647\u200c\u0627\u06cc \u0622\u0646\u062c\u0627 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a \u2013 \u0645\u0628\u0627\u0631\u0632\u0647 \u0628\u0627 CSS \u06a9\u0647 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0633\u0627\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u06cc\u062f \u0627\u0645\u0627 \u0628\u0647 \u0633\u0631\u0639\u062a \u0633\u062e\u062a\u200c\u06af\u06cc\u0631 \u0634\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u062a\u0644\u0647\u200c\u0647\u0627\u06cc \u0631\u0627\u06cc\u062c CSS \u0648 \u0631\u0627\u0647\u200c\u062d\u0644\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0628\u06cc\u0627\u06cc\u06cc\u062f CSS \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u0645\u0634\u06a9\u0644 \u0633\u0627\u0632 \u0628\u0647 \u062d\u0631\u0641\u0647 …<\/p>\n","protected":false},"author":2,"featured_media":85899,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-85898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/85898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=85898"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/85898\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/85899"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=85898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=85898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=85898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
.container<\/span> {<\/span>\n width<\/span>:<\/span> 1200px<\/span>;<\/span>\n font-size<\/span>:<\/span> 16px<\/span>;<\/span>\n margin<\/span>:<\/span> 20px<\/span>;<\/span>\n}<\/span>\n<\/code><\/pre>\n\n\n \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">90vw<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">75rem<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">1rem<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0646\u0633\u0628\u06cc \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0637\u0631\u0627\u062d\u06cc \u0634\u0645\u0627 \u067e\u0627\u0633\u062e\u06af\u0648 \u0648 \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633 \u0628\u0627\u0634\u062f. REM \u0647\u0627 \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u062a\u0631\u062c\u06cc\u062d\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0645\u06cc \u0634\u0648\u0646\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0646\u0645\u0627\u06cc \u062f\u06cc\u062f \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u0646\u062f \u06a9\u0647 \u0686\u06cc\u062f\u0645\u0627\u0646 \u0634\u0645\u0627 \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0635\u0641\u062d\u0647 \u0633\u0627\u0632\u06af\u0627\u0631 \u0627\u0633\u062a. \u0647\u0645\u06cc\u0634\u0647 \u062f\u0631 \u0646\u0638\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0632\u0631\u06af\u0646\u0645\u0627\u06cc\u06cc \u06a9\u0646\u0646\u062f \u06cc\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u067e\u0627\u06cc\u0647 \u062e\u0648\u062f \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_CSS_Reset_%D8%B4%D8%B1%D9%88%D8%B9_%D8%AA%D8%A7%D8%B2%D9%87\"><\/span>\n<p> 2. CSS Reset: \u0634\u0631\u0648\u0639 \u062a\u0627\u0632\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* Starting without any reset, relying on browser defaults *\/<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"o\">*,<\/span> <span class=\"o\">*<\/span><span class=\"nd\">::before<\/span><span class=\"o\">,<\/span> <span class=\"o\">*<\/span><span class=\"nd\">::after<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">box-sizing<\/span><span class=\"p\">:<\/span> <span class=\"n\">border-box<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nt\">html<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">16px<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">-webkit-text-size-adjust<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0646\u0638\u06cc\u0645 \u0645\u062c\u062f\u062f CSS \u0631\u0646\u062f\u0631 \u062b\u0627\u0628\u062a \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f. \u0631\u0627 <code>box-sizing: border-box<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0639\u0631\u0636 \u0631\u0627 \u0628\u0627 \u06af\u0646\u062c\u0627\u0646\u062f\u0646 \u0628\u0627\u0644\u0634\u062a\u06a9 \u0648 \u062d\u0627\u0634\u06cc\u0647 \u062f\u0631 \u0639\u0631\u0636 \u06a9\u0644 \u0639\u0646\u0635\u0631 \u0628\u0635\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"3_Flexbox_%D8%AF%D8%B1_%D9%85%D9%82%D8%A7%D8%A8%D9%84_Float_%D8%B1%D8%A7%D9%87_%D8%AD%D9%84_%D9%87%D8%A7%DB%8C_%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86_%D9%85%D8%AF%D8%B1%D9%86\"><\/span>\n<p> 3. Flexbox \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 Float: \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646 \u0645\u062f\u0631\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">overflow<\/span><span class=\"p\">:<\/span> <span class=\"nb\">hidden<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.sidebar<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">float<\/span><span class=\"p\">:<\/span> <span class=\"nb\">left<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">300px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.main<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">margin-left<\/span><span class=\"p\">:<\/span> <span class=\"m\">320px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.sidebar<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">flex-basis<\/span><span class=\"p\">:<\/span> <span class=\"m\">18.75rem<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">flex-shrink<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.main<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">flex-grow<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Flexbox \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631 \u0631\u0627 \u0628\u0627 \u06a9\u062f \u06a9\u0645\u062a\u0631 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0641\u0627\u0635\u0644\u0647\u060c \u062a\u0631\u0627\u0632\u060c \u0648 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0631\u0627 \u0628\u0627 \u0638\u0631\u0627\u0641\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u0646\u0633\u0628\u062a \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 \u0634\u0646\u0627\u0648\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0628\u0647\u062a\u0631 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%D8%B1%D9%86%DA%AF_%D9%85%D8%AA%D8%BA%DB%8C%D8%B1%D9%87%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B3%D8%A7%D8%B2%DA%AF%D8%A7%D8%B1%DB%8C\"><\/span>\n<p> 4. \u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0646\u06af: \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u06af\u0627\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.button<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.link<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nd\">:root<\/span> <span class=\"p\">{<\/span>\n <span class=\"py\">--primary-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">--primary-hover<\/span><span class=\"p\">:<\/span> <span class=\"m\">#0056b3<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.button<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.button<\/span><span class=\"nd\">:hover<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-hover<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.link<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc CSS (\u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc) \u062d\u0641\u0638 \u0631\u0646\u06af\u200c\u0647\u0627\u06cc \u062b\u0627\u0628\u062a \u0631\u0627 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631 \u062a\u0645 \u0631\u0627 \u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u0622\u0646\u0647\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06a9\u062f \u0634\u0645\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u062a\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f \u0648 \u062e\u0637\u0631 \u0646\u0627\u0647\u0645\u0627\u0647\u0646\u06af\u06cc \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5_%D9%BE%D8%B1%D8%B3%D8%B4_%D9%87%D8%A7%DB%8C_%D8%B1%D8%B3%D8%A7%D9%86%D9%87_%D8%A7%DB%8C_%D8%B1%D9%88%DB%8C%DA%A9%D8%B1%D8%AF_%D8%A7%D9%88%D9%84_%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84\"><\/span>\n<p> 5. \u067e\u0631\u0633\u0634 \u0647\u0627\u06cc \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc: \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0648\u0644 \u0645\u0648\u0628\u0627\u06cc\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* Desktop-first approach *\/<\/span>\n<span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">1200px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"k\">@media<\/span> <span class=\"p\">(<\/span><span class=\"n\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">768px<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n <span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* Mobile-first approach *\/<\/span>\n<span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">100%<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"k\">@media<\/span> <span class=\"p\">(<\/span><span class=\"n\">min-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">48em<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n <span class=\"nc\">.container<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">90%<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">75rem<\/span><span class=\"p\">;<\/span>\n <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0637\u0631\u0627\u062d\u06cc \u0627\u0648\u0644 \u0645\u0648\u0628\u0627\u06cc\u0644 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0633\u0628\u06a9\u200c\u0647\u0627\u06cc \u067e\u0627\u06cc\u0647 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9\u200c\u062a\u0631 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u0633\u067e\u0633 \u0628\u0647 \u062a\u062f\u0631\u06cc\u062c \u062a\u062c\u0631\u0628\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634\u06af\u0631\u0647\u0627\u06cc \u0628\u0632\u0631\u06af\u200c\u062a\u0631 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0645\u0646\u062c\u0631 \u0628\u0647 \u06a9\u062f \u062a\u0645\u06cc\u0632\u062a\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u062a\u0631 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"6_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D8%B3%D8%A7%D8%AF%D9%87_%D9%86%DA%AF%D9%87_%D8%AF%D8%A7%D8%B4%D8%AA%D9%86_%D8%A2%D9%86\"><\/span>\n<p> 6. \u0648\u06cc\u0698\u06af\u06cc: \u0633\u0627\u062f\u0647 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0622\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nf\">#header<\/span> <span class=\"nt\">div<\/span><span class=\"nc\">.navigation<\/span> <span class=\"nt\">ul<\/span> <span class=\"nt\">li<\/span> <span class=\"nt\">a<\/span><span class=\"nc\">.active<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"no\">blue<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.nav-link--active<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u06a9\u0645\u062a\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0633\u0628\u06a9 \u0647\u0627 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0634\u0648\u0646\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u0646\u0627\u062f\u06cc\u062f\u0647 \u06af\u0631\u0641\u062a\u0647 \u0634\u0648\u0646\u062f. \u0627\u0632 \u0642\u0631\u0627\u0631\u062f\u0627\u062f \u0646\u0627\u0645\u06af\u0630\u0627\u0631\u06cc BEM \u06cc\u0627 \u0631\u0648\u0634 \u0647\u0627\u06cc \u0645\u0634\u0627\u0628\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc \u0645\u0639\u0646\u06cc \u062f\u0627\u0631 \u0648 \u062e\u0627\u0635 \u0628\u062f\u0648\u0646 \u062a\u0648\u062f\u0631\u062a\u0648 \u0639\u0645\u06cc\u0642 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"7_%D8%AA%D8%A7%DB%8C%D9%BE%D9%88%DA%AF%D8%B1%D8%A7%D9%81%DB%8C_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87_%D9%81%D9%88%D9%86%D8%AA_%D8%B3%DB%8C%D8%A7%D9%84\"><\/span>\n<p> 7. \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc: \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0633\u06cc\u0627\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"m\">32px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nt\">h1<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">font-size<\/span><span class=\"p\">:<\/span> <span class=\"n\">clamp<\/span><span class=\"p\">(<\/span><span class=\"m\">1.75rem<\/span><span class=\"p\">,<\/span> <span class=\"m\">5vw<\/span><span class=\"p\">,<\/span> <span class=\"m\">2.5rem<\/span><span class=\"p\">);<\/span>\n <span class=\"nl\">line-height<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.2<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>clamp()<\/code> \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u06cc\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627\u06cc \u062d\u062f\u0627\u0642\u0644 \u0648 \u062d\u062f\u0627\u06a9\u062b\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0686\u0646\u062f \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc \u0631\u0627 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0627\u0632 \u0628\u06cc\u0646 \u0645\u06cc \u0628\u0631\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"8_%D8%B7%D8%B1%D8%AD_%D8%A8%D9%86%D8%AF%DB%8C_%D8%B4%D8%A8%DA%A9%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85_%D9%87%D8%A7%DB%8C_%DA%A9%D8%A7%D8%B1%D8%AA_%D9%85%D9%86%D8%A7%D8%B3%D8%A8\"><\/span>\n<p> 8. \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0634\u0628\u06a9\u0647: \u0633\u06cc\u0633\u062a\u0645 \u0647\u0627\u06cc \u06a9\u0627\u0631\u062a \u0645\u0646\u0627\u0633\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.card<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"n\">calc<\/span><span class=\"p\">(<\/span><span class=\"m\">33.33%<\/span> <span class=\"n\">-<\/span> <span class=\"m\">20px<\/span><span class=\"p\">);<\/span>\n <span class=\"nl\">float<\/span><span class=\"p\">:<\/span> <span class=\"nb\">left<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.card-grid<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">grid<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">grid-template-columns<\/span><span class=\"p\">:<\/span> <span class=\"nb\">repeat<\/span><span class=\"p\">(<\/span><span class=\"n\">auto-fit<\/span><span class=\"p\">,<\/span> <span class=\"n\">minmax<\/span><span class=\"p\">(<\/span><span class=\"n\">min<\/span><span class=\"p\">(<\/span><span class=\"m\">100%<\/span><span class=\"p\">,<\/span> <span class=\"m\">20rem<\/span><span class=\"p\">),<\/span> <span class=\"m\">1<\/span><span class=\"n\">fr<\/span><span class=\"p\">));<\/span>\n <span class=\"py\">gap<\/span><span class=\"p\">:<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0634\u0628\u06a9\u0647 CSS \u0628\u0627 <code>auto-fit<\/code> \u0648 <code>minmax()<\/code> \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0627 \u0641\u0636\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0647 \u06a9\u062f \u06a9\u0645\u062a\u0631\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f \u0648 \u0645\u0648\u0627\u0631\u062f \u0644\u0628\u0647 \u0631\u0627 \u0628\u0647\u062a\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"9_%D8%A7%D9%86%DB%8C%D9%85%DB%8C%D8%B4%D9%86_%D8%A8%D9%87%DB%8C%D9%86%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF\"><\/span>\n<p> 9. \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646: \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.element<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">all<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.element<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">transition<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">,<\/span> <span class=\"n\">opacity<\/span> <span class=\"m\">0.3s<\/span> <span class=\"n\">ease<\/span><span class=\"p\">;<\/span>\n <span class=\"py\">will-change<\/span><span class=\"p\">:<\/span> <span class=\"n\">transform<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0647 \u062c\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u060c \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062f\u0642\u06cc\u0642 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062a\u062d\u0631\u06a9 \u0633\u0627\u0632\u06cc \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f <code>all<\/code>\u060c \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>transform<\/code> \u0648 <code>opacity<\/code> \u062f\u0631 \u0635\u0648\u0631\u062a \u0627\u0645\u06a9\u0627\u0646 \u0632\u06cc\u0631\u0627 \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u06cc\u0646\u0647 \u0634\u062f\u0647 \u0627\u0646\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>will-change<\/code> \u06a9\u0645\u062a\u0631 \u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 \u0645\u062a\u062d\u0631\u06a9 \u0627\u063a\u0644\u0628.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"10_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D9%86%D9%88%D8%A7%D8%B9_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA\"><\/span>\n<p> 10. \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>\u0631\u0627\u0647 \u0627\u0634\u062a\u0628\u0627\u0647:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.button-primary<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"no\">blue<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nc\">.button-secondary<\/span> <span class=\"p\">{<\/span>\n <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"no\">gray<\/span><span class=\"p\">;<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0631\u0627\u0647 \u0628\u0647\u062a\u0631:<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"nc\">.button<\/span> <span class=\"p\">{<\/span>\n <span class=\"py\">--button-bg<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--primary-color<\/span><span class=\"p\">);<\/span>\n <span class=\"py\">--button-padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0.625rem<\/span> <span class=\"m\">1.25rem<\/span><span class=\"p\">;<\/span>\n\n <span class=\"nl\">background<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--button-bg<\/span><span class=\"p\">);<\/span>\n <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--button-padding<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.button--secondary<\/span> <span class=\"p\">{<\/span>\n <span class=\"py\">--button-bg<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--secondary-color<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc CSS \u0628\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639\u060c \u062a\u06a9\u0631\u0627\u0631 \u06a9\u062f \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u06cc\u062c\u0627\u062f \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062b\u0627\u0628\u062a \u062f\u0631 \u0633\u06cc\u0633\u062a\u0645 \u0637\u0631\u0627\u062d\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\"><\/span>\n<p> \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS \u0645\u062f\u0631\u0646 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06a9\u062f \u0634\u0645\u0627 \u0631\u0627 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc\u060c \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u0645\u0642\u06cc\u0627\u0633 \u067e\u0630\u06cc\u0631\u062a\u0631 \u06a9\u0646\u062f. \u0628\u0627 \u067e\u06cc\u0631\u0648\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627\u060c \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0642\u0648\u06cc \u062a\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f \u06a9\u0647 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0648 \u0627\u0635\u0644\u0627\u062d \u0622\u0646\u0647\u0627 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0627\u0633\u062a. \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u0647\u062f\u0641 \u0641\u0642\u0637 \u0627\u06cc\u0646 \u0646\u06cc\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u06cc \u0631\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f\u060c \u0628\u0644\u06a9\u0647 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0645 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648 \u0647\u0645 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0647 \u062e\u0648\u0628\u06cc \u06a9\u0627\u0631 \u06a9\u0646\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u0647\u0631 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647\u200c\u0627\u06cc \u0622\u0646\u062c\u0627 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a \u2013 \u0645\u0628\u0627\u0631\u0632\u0647 \u0628\u0627 CSS \u06a9\u0647 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0633\u0627\u062f\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u06cc\u062f \u0627\u0645\u0627 \u0628\u0647 \u0633\u0631\u0639\u062a \u0633\u062e\u062a\u200c\u06af\u06cc\u0631 \u0634\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u062a\u0644\u0647\u200c\u0647\u0627\u06cc \u0631\u0627\u06cc\u062c CSS \u0648 \u0631\u0627\u0647\u200c\u062d\u0644\u200c\u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0628\u06cc\u0627\u06cc\u06cc\u062f CSS \u062e\u0648\u062f \u0631\u0627 \u0627\u0632 \u0645\u0634\u06a9\u0644 \u0633\u0627\u0632 \u0628\u0647 \u062d\u0631\u0641\u0647 …<\/p>\n","protected":false},"author":2,"featured_media":85899,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-85898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/85898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=85898"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/85898\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/85899"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=85898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=85898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=85898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}