{"id":4533,"date":"2025-09-06T20:10:23","date_gmt":"2025-09-06T17:10:23","guid":{"rendered":"https:\/\/circleaims.com\/ar\/?p=4533"},"modified":"2026-01-17T22:13:20","modified_gmt":"2026-01-17T20:13:20","slug":"css-language","status":"publish","type":"post","link":"https:\/\/circleaims.com\/ar\/css-language\/","title":{"rendered":"\u0644\u063a\u0629 CSS"},"content":{"rendered":"

\u0644\u063a\u0629 CSS\u00a0 \u0644\u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628<\/h2>\n

\u0645\u0642\u062f\u0645\u0629 \u0625\u0644\u0649 CSS<\/h3>\n

\u062a\u064f\u0639\u062f \u0623\u0648\u0631\u0627\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u062a\u062a\u0627\u0644\u064a\u0629 (CSS) \u062a\u0642\u0646\u064a\u0629 \u0623\u0633\u0627\u0633\u064a\u0629 \u0641\u064a \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0648\u064a\u0628\u060c \u062a\u064f\u0645\u0643\u0651\u0646 \u0645\u0646 \u0641\u0635\u0644 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0639\u0646 \u0627\u0644\u0639\u0631\u0636. \u062a\u0644\u0639\u0628 CSS \u062f\u0648\u0631\u064b\u0627 \u0645\u062d\u0648\u0631\u064a\u064b\u0627 \u0641\u064a \u062a\u062d\u062f\u064a\u062f \u0645\u0638\u0647\u0631 \u0648\u0623\u0633\u0644\u0648\u0628 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628\u060c \u0645\u0645\u0627 \u064a\u0633\u0645\u062d \u0644\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u0628\u0625\u0646\u0634\u0627\u0621 \u0645\u0648\u0627\u0642\u0639<\/a> \u062c\u0630\u0627\u0628\u0629 \u0628\u0635\u0631\u064a\u064b\u0627 \u0648\u0633\u0647\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645. \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS\u060c \u064a\u064f\u0645\u0643\u0646 \u0644\u0644\u0645\u0635\u0645\u0645\u064a\u0646 \u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u062a\u062e\u0637\u064a\u0637 \u0648\u0623\u0644\u0648\u0627\u0646 \u0648\u062e\u0637\u0648\u0637 \u0648\u062c\u0645\u0627\u0644\u064a\u0627\u062a \u0635\u0641\u062d\u0629 \u0627\u0644\u0648\u064a\u0628 \u062f\u0648\u0646 \u062a\u063a\u064a\u064a\u0631 \u0628\u0646\u064a\u0629 HTML.<\/p>\n

\u0627\u0644\u063a\u0631\u0636 \u0627\u0644\u0631\u0626\u064a\u0633\u064a \u0645\u0646 CSS \u0647\u0648 \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0639\u0631\u0636 \u0627\u0644\u0645\u0631\u0626\u064a \u0644\u0639\u0646\u0627\u0635\u0631 HTML. \u0628\u064a\u0646\u0645\u0627 \u062a\u064f\u0645\u062b\u0644 HTML \u0627\u0644\u0639\u0645\u0648\u062f \u0627\u0644\u0641\u0642\u0631\u064a \u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0648\u064a\u0628 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0647\u064a\u0643\u0644\u062a\u0647 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0648\u0633\u0648\u0645 \u0648\u0639\u0646\u0627\u0635\u0631 \u0645\u064f\u062a\u0646\u0648\u0639\u0629\u060c \u062a\u064f\u0648\u0641\u0631 CSS \u0648\u0633\u064a\u0644\u0629 \u0644\u062a\u0635\u0645\u064a\u0645 \u0647\u0630\u0627 \u0627\u0644\u0645\u062d\u062a\u0648\u0649. \u0644\u0627 \u064a\u064f\u062d\u0633\u0651\u0646 \u0647\u0630\u0627 \u0627\u0644\u0641\u0635\u0644 \u0645\u0646 \u0642\u0627\u0628\u0644\u064a\u0629 \u0627\u0644\u0635\u064a\u0627\u0646\u0629 \u0641\u062d\u0633\u0628\u060c \u0628\u0644 \u064a\u064f\u0648\u0641\u0631 \u0623\u064a\u0636\u064b\u0627 \u0637\u0631\u064a\u0642\u0629 \u0623\u0643\u062b\u0631 \u0641\u0639\u0627\u0644\u064a\u0629 \u0644\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u0644\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u062c\u0648\u0627\u0646\u0628 \u0627\u0644\u0645\u0631\u0626\u064a\u0629 \u0644\u0645\u0648\u0627\u0642\u0639\u0647\u0645 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629. \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS\u060c \u064a\u064f\u0645\u0643\u0646 \u0631\u0628\u0637 \u0648\u0631\u0642\u0629 \u0623\u0646\u0645\u0627\u0637 \u0648\u0627\u062d\u062f\u0629 \u0628\u0635\u0641\u062d\u0627\u062a \u0648\u064a\u0628 \u0645\u062a\u0639\u062f\u062f\u0629\u060c \u0645\u0645\u0627 \u064a\u0636\u0645\u0646 \u062a\u0635\u0645\u064a\u0645\u064b\u0627 \u0645\u064f\u062a\u0633\u0642\u064b\u0627 \u0639\u0628\u0631 \u0627\u0644\u0645\u0648\u0642\u0639 \u0628\u0623\u0643\u0645\u0644\u0647.<\/p>\n

 <\/p>\n

\"\u0644\u063a\u0629
\u0644\u063a\u0629 CSS\u00a0 \u0644\u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628<\/figcaption><\/figure>\n

\u062a\u0639\u0645\u0644 CSS \u0648\u0641\u0642\u064b\u0627 \u0644\u0645\u0628\u062f\u0623 \u0627\u0644\u062a\u062a\u0627\u0644\u064a\u060c \u062d\u064a\u062b \u062a\u064f\u0637\u0628\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u062e\u0635\u0648\u0635\u064a\u062a\u0647\u0627 \u0648\u062a\u0631\u062a\u064a\u0628\u0647\u0627. \u0647\u0630\u0627 \u064a\u0639\u0646\u064a \u0623\u0646 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u064a\u0645\u0643\u0646 \u0623\u0646 \u062a\u062a\u062f\u0631\u062c \u0645\u0646 \u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0639\u0627\u0645\u0629 \u0625\u0644\u0649 \u0642\u0648\u0627\u0639\u062f \u0623\u0643\u062b\u0631 \u062a\u062d\u062f\u064a\u062f\u064b\u0627\u060c \u0645\u0645\u0627 \u064a\u0633\u0645\u062d \u0628\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0627\u062a \u062a\u0635\u0645\u064a\u0645 \u0645\u0631\u0646\u0629. \u0628\u0627\u0644\u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u0630\u0644\u0643\u060c \u062a\u0633\u062a\u062e\u062f\u0645 CSS \u0645\u062d\u062f\u062f\u0627\u062a \u0644\u0627\u0633\u062a\u0647\u062f\u0627\u0641 \u0639\u0646\u0627\u0635\u0631 HTML \u0645\u062d\u062f\u062f\u0629 \u0648\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0648\u0641\u0642\u064b\u0627 \u0644\u0630\u0644\u0643. \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u064a\u0645\u0643\u0646 \u0644\u0644\u0645\u0637\u0648\u0631 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u062d\u062f\u062f\u0627\u062a \u0627\u0644\u0641\u0626\u0627\u062a\u060c \u0648\u0645\u062d\u062f\u062f\u0627\u062a \u0627\u0644\u0645\u0639\u0631\u0641\u0627\u062a\u060c \u0648\u0645\u062d\u062f\u062f\u0627\u062a \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0644\u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0628\u0634\u0643\u0644 \u0627\u0646\u062a\u0642\u0627\u0626\u064a\u060c \u0645\u0645\u0627 \u064a\u0624\u062f\u064a \u0625\u0644\u0649 \u062a\u062d\u0643\u0645 \u0642\u0648\u064a \u0641\u064a \u0645\u0638\u0647\u0631 \u0635\u0641\u062d\u0629 \u0627\u0644\u0648\u064a\u0628.<\/p>\n

\u0639\u0644\u0627\u0648\u0629 \u0639\u0644\u0649 \u0630\u0644\u0643\u060c \u062a\u064f\u062d\u0633\u0651\u0646 CSS \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0645\u0646 \u062e\u0644\u0627\u0644 \u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u062a\u062c\u0627\u0648\u0628. \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0633\u062a\u0639\u0644\u0627\u0645\u0627\u062a \u0627\u0644\u0648\u0633\u0627\u0626\u0637\u060c \u064a\u0645\u0643\u0646 \u0644\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u0625\u0646\u0634\u0627\u0621 \u062a\u062e\u0637\u064a\u0637\u0627\u062a \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u062a\u0643\u064a\u0641 \u062a\u0639\u0645\u0644 \u0628\u0633\u0644\u0627\u0633\u0629 \u0639\u0628\u0631 \u0645\u062e\u062a\u0644\u0641 \u0627\u0644\u0623\u062c\u0647\u0632\u0629 \u0648\u0623\u062d\u062c\u0627\u0645 \u0627\u0644\u0634\u0627\u0634\u0627\u062a. \u062a\u064f\u0639\u062f \u0647\u0630\u0647 \u0627\u0644\u0645\u0631\u0648\u0646\u0629 \u0623\u0645\u0631\u064b\u0627 \u0628\u0627\u0644\u063a \u0627\u0644\u0623\u0647\u0645\u064a\u0629 \u0641\u064a \u0627\u0644\u0645\u0634\u0647\u062f \u0627\u0644\u0631\u0642\u0645\u064a \u0627\u0644\u064a\u0648\u0645\u060c \u062d\u064a\u062b \u064a\u0635\u0644 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u0648\u0646 \u0625\u0644\u0649 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0646 \u0627\u0644\u0623\u062c\u0647\u0632\u0629\u060c \u0645\u0646 \u0623\u062c\u0647\u0632\u0629 \u0627\u0644\u0643\u0645\u0628\u064a\u0648\u062a\u0631 \u0627\u0644\u0645\u0643\u062a\u0628\u064a\u0629 \u0625\u0644\u0649 \u0627\u0644\u0647\u0648\u0627\u062a\u0641 \u0627\u0644\u0630\u0643\u064a\u0629. \u0628\u0627\u062e\u062a\u0635\u0627\u0631\u060c \u064a\u064f\u0639\u062f \u0625\u062a\u0642\u0627\u0646 CSS \u0623\u0645\u0631\u064b\u0627 \u0636\u0631\u0648\u0631\u064a\u064b\u0627 \u0644\u0623\u064a \u0645\u0637\u0648\u0631 \u0648\u064a\u0628 \u064a\u062a\u0637\u0644\u0639 \u0625\u0644\u0649 \u0625\u0646\u0634\u0627\u0621 \u0635\u0641\u062d\u0627\u062a \u0648\u064a\u0628 \u062c\u0630\u0627\u0628\u0629 \u0645\u0646 \u0627\u0644\u0646\u0627\u062d\u064a\u0629 \u0627\u0644\u062c\u0645\u0627\u0644\u064a\u0629 \u0648\u0641\u0639\u0651\u0627\u0644\u0629.<\/p>\n

\u0645\u0627 \u0647\u064a \u0644\u063a\u0629 CSS<\/a>\u061f<\/h3>\n

\u0644\u063a\u0629 CSS<\/strong> (\u0627\u062e\u062a\u0635\u0627\u0631\u064b\u0627 \u0644\u0640 Cascading Style Sheets<\/em>) \u0647\u064a \u0644\u063a\u0629 \u062a\u0646\u0633\u064a\u0642\u064a\u0629 \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0644\u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0648\u062a\u0646\u0633\u064a\u0642 \u0639\u0646\u0627\u0635\u0631\u0647\u0627. \u0638\u0647\u0631\u062a \u0644\u0623\u0648\u0644 \u0645\u0631\u0629 \u0639\u0627\u0645 1996 \u0643\u0625\u0636\u0627\u0641\u0629 \u0645\u0643\u0645\u0644\u0629 \u0644\u0644\u0640 HTML<\/strong>\u060c \u062d\u064a\u062b \u0623\u0646 HTML \u0645\u0633\u0624\u0648\u0644 \u0639\u0646 \u0647\u064a\u0643\u0644\u0629 \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0635\u0641\u062d\u0629 (\u0627\u0644\u0646\u0635\u0648\u0635\u060c \u0627\u0644\u0635\u0648\u0631\u060c \u0627\u0644\u062c\u062f\u0627\u0648\u0644…) \u0628\u064a\u0646\u0645\u0627 \u062a\u0642\u0648\u0645 CSS \u0628\u0625\u0639\u0637\u0627\u0621 \u0647\u0630\u0627 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0634\u0643\u0644 \u0627\u0644\u062c\u0645\u0627\u0644\u064a \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0627\u0644\u0623\u0644\u0648\u0627\u0646\u060c \u0627\u0644\u062e\u0637\u0648\u0637\u060c \u0627\u0644\u0623\u062d\u062c\u0627\u0645\u060c \u0627\u0644\u062a\u0628\u0627\u0639\u062f\u060c \u0627\u0644\u062e\u0644\u0641\u064a\u0627\u062a\u060c \u0627\u0644\u062a\u0623\u062b\u064a\u0631\u0627\u062a\u060c \u0648\u062d\u062a\u0649 \u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/a> \u0627\u0644\u0645\u062a\u062c\u0627\u0648\u0628 \u0645\u0639 \u0645\u062e\u062a\u0644\u0641 \u0627\u0644\u0623\u062c\u0647\u0632\u0629.<\/p>\n

CSS \u0627\u0644\u064a\u0648\u0645 \u062a\u064f\u0639\u062a\u0628\u0631 \u0645\u0646 \u0627\u0644\u0631\u0643\u0627\u0626\u0632 \u0627\u0644\u062b\u0644\u0627\u062b\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0648\u064a\u0628<\/strong> \u0628\u062c\u0627\u0646\u0628 HTML \u0648JavaScript. \u0641\u0647\u064a \u0627\u0644\u062a\u064a \u062a\u062c\u0639\u0644 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u062c\u0630\u0627\u0628\u0629 \u0628\u0635\u0631\u064a\u064b\u0627 \u0648\u062a\u0645\u0646\u062d \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u062a\u062c\u0631\u0628\u0629 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u062a\u0643\u0627\u0645\u0644\u0629.<\/p>\n

\u0628\u0646\u064a\u0629 CSS<\/h3>\n

\u062a\u064f\u0639\u062f \u0623\u0648\u0631\u0627\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u062a\u062a\u0627\u0644\u064a\u0629 (CSS) \u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0648\u064a\u0628\u060c \u062d\u064a\u062b \u062a\u062a\u064a\u062d \u0644\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0645\u0638\u0647\u0631 \u0639\u0646\u0627\u0635\u0631 HTML \u0639\u0644\u0649 \u0635\u0641\u062d\u0629 \u0627\u0644\u0648\u064a\u0628. \u064a\u064f\u0639\u062f \u0641\u0647\u0645 \u0628\u0646\u064a\u0629 CSS \u0623\u0645\u0631\u064b\u0627 \u0623\u0633\u0627\u0633\u064a\u064b\u0627 \u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0628\u0641\u0639\u0627\u0644\u064a\u0629. \u0641\u064a \u062c\u0648\u0647\u0631\u0647\u0627\u060c \u062a\u062a\u0643\u0648\u0646 \u0644\u063a\u0629 CSS \u0645\u0646 \u0633\u0644\u0633\u0644\u0629 \u0645\u0646 \u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u062a\u064a \u062a\u064f\u062d\u062f\u062f \u0643\u064a\u0641\u064a\u0629 \u0639\u0631\u0636 \u0627\u0644\u0639\u0646\u0627\u0635\u0631. \u062a\u064f\u0639\u0631\u0651\u0641 \u0643\u0644 \u0642\u0627\u0639\u062f\u0629 \u0628\u0645\u062d\u062f\u062f \u0648\u062e\u0627\u0635\u064a\u0629 \u0648\u0642\u064a\u0645\u0629. \u064a\u064f\u062d\u062f\u062f \u0627\u0644\u0645\u062d\u062f\u062f \u0639\u0646\u0635\u0631 HTML \u0627\u0644\u0630\u064a \u062a\u064f\u0637\u0628\u0642 \u0639\u0644\u064a\u0647 \u0627\u0644\u0623\u0646\u0645\u0627\u0637\u060c \u0628\u064a\u0646\u0645\u0627 \u062a\u064f\u0634\u064a\u0631 \u0627\u0644\u062e\u0627\u0635\u064a\u0629 \u0625\u0644\u0649 \u062c\u0627\u0646\u0628 \u0627\u0644\u0646\u0645\u0637 \u0627\u0644\u0645\u064f\u062d\u062f\u062f\u060c \u0645\u062b\u0644 \u0627\u0644\u0644\u0648\u0646 \u0623\u0648 \u062d\u062c\u0645 \u0627\u0644\u062e\u0637. \u062a\u064f\u062d\u062f\u062f \u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629 \u0644\u062a\u0644\u0643 \u0627\u0644\u062e\u0627\u0635\u064a\u0629.<\/p>\n

\u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u064a\u064f\u0645\u0643\u0646 \u0647\u064a\u0643\u0644\u0629 \u0642\u0627\u0639\u062f\u0629 CSS \u0628\u0633\u064a\u0637\u0629 \u0643\u0645\u0627 \u064a\u0644\u064a: \u0627\u0644\u0645\u062d\u062f\u062f {\u062e\u0627\u0635\u064a\u0629: \u0642\u064a\u0645\u0629\u061b}. \u064a\u064f\u0645\u0643\u0646 \u0631\u0624\u064a\u0629 \u0645\u062b\u0627\u0644 \u0639\u0645\u0644\u064a \u0641\u064a h1 {\u0644\u0648\u0646: \u0623\u0632\u0631\u0642\u061b}\u060c \u062d\u064a\u062b \u064a\u064f\u063a\u064a\u0631 \u0645\u062d\u062f\u062f h1 \u0644\u0648\u0646 \u0646\u0635 \u062c\u0645\u064a\u0639 \u0639\u0646\u0627\u0648\u064a\u0646 \u0627\u0644\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u0623\u0648\u0644 \u0625\u0644\u0649 \u0627\u0644\u0623\u0632\u0631\u0642. \u062a\u064f\u0634\u0643\u0644 \u0647\u0630\u0647 \u0627\u0644\u0628\u0646\u064a\u0629 \u0627\u0644\u0628\u0633\u064a\u0637\u0629 \u0623\u0633\u0627\u0633 \u062a\u0646\u0633\u064a\u0642 CSS\u060c \u0648\u062a\u064f\u0645\u0643\u0651\u0646 \u0645\u064f\u0635\u0645\u0645\u064a \u0627\u0644\u0648\u064a\u0628 \u0645\u0646 \u0625\u0646\u0634\u0627\u0621 \u0645\u0648\u0627\u0642\u0639 \u062c\u0630\u0627\u0628\u0629 \u0628\u0635\u0631\u064a\u064b\u0627.<\/p>\n

\u0648\u0645\u0646 \u0627\u0644\u062c\u0648\u0627\u0646\u0628 \u0627\u0644\u0645\u0647\u0645\u0629 \u0627\u0644\u0623\u062e\u0631\u0649 \u0641\u064a CSS \u0647\u064a \u0627\u0644\u062e\u0635\u0648\u0635\u064a\u0629\u060c \u0627\u0644\u062a\u064a \u062a\u064f\u062d\u062f\u062f \u0643\u064a\u0641\u064a\u0629 \u062a\u0641\u0633\u064a\u0631 \u0627\u0644\u0645\u064f\u062a\u0635\u0641\u062d\u0627\u062a \u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u064f\u062a\u0636\u0627\u0631\u0628\u0629. \u062a\u064f\u062d\u0633\u0628 \u0627\u0644\u062e\u0635\u0648\u0635\u064a\u0629 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0646\u0648\u0639 \u0648\u0639\u062f\u062f \u0627\u0644\u0645\u064f\u062d\u062f\u062f\u0627\u062a \u0627\u0644\u0645\u064f\u0633\u062a\u062e\u062f\u0645\u0629. \u0633\u062a\u064f\u0644\u063a\u064a \u0627\u0644\u0645\u064f\u062d\u062f\u062f\u0627\u062a \u0627\u0644\u0623\u0643\u062b\u0631 \u062e\u0635\u0648\u0635\u064a\u0629 \u0627\u0644\u0645\u064f\u062d\u062f\u062f\u0627\u062a \u0627\u0644\u0623\u0642\u0644 \u062e\u0635\u0648\u0635\u064a\u0629\u060c \u0645\u0645\u0627 \u064a\u062c\u0639\u0644 \u0645\u0646 \u0627\u0644\u0636\u0631\u0648\u0631\u064a \u0641\u0647\u0645 \u0622\u0644\u064a\u0629 \u0639\u0645\u0644 \u0627\u0644\u062e\u0635\u0648\u0635\u064a\u0629 \u0639\u0646\u062f \u0643\u062a\u0627\u0628\u0629 CSS.<\/p>\n

\u0628\u0627\u0644\u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u0630\u0644\u0643\u060c \u064a\u0644\u0639\u0628 \u0627\u0644\u062a\u0633\u0644\u0633\u0644 \u062f\u0648\u0631\u064b\u0627 \u062d\u0627\u0633\u0645\u064b\u0627 \u0641\u064a \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637. \u0641\u0647\u0648 \u064a\u0634\u064a\u0631 \u0625\u0644\u0649 \u062a\u0631\u062a\u064a\u0628 \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637\u060c \u062d\u064a\u062b \u064a\u0645\u0643\u0646 \u0644\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0644\u0627\u062d\u0642\u0629 \u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0645\u0627 \u0644\u0645 \u062a\u0643\u0646 \u0627\u0644\u0623\u062e\u064a\u0631\u0629 \u0630\u0627\u062a \u062f\u0642\u0629 \u0623\u0639\u0644\u0649. \u0645\u0646 \u0646\u0627\u062d\u064a\u0629 \u0623\u062e\u0631\u0649\u060c \u064a\u0633\u0645\u062d \u0627\u0644\u0648\u0631\u0627\u062b\u0629 \u0628\u0646\u0642\u0644 \u062e\u0635\u0627\u0626\u0635 \u0645\u0639\u064a\u0646\u0629 \u0645\u0646 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0623\u0635\u0644\u064a\u0629 \u0625\u0644\u0649 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062a\u0627\u0628\u0639\u0629 \u0644\u0647\u0627\u060c \u0645\u0645\u0627 \u064a\u064f\u0628\u0633\u0637 \u0639\u0645\u0644\u064a\u0629 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0639\u0628\u0631 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u062a\u0634\u0627\u0628\u0647\u0629.<\/p>\n

\u0628\u0627\u062e\u062a\u0635\u0627\u0631\u060c \u064a\u064f\u0639\u062f \u0625\u062a\u0642\u0627\u0646 \u0642\u0648\u0627\u0639\u062f \u0644\u063a\u0629 CSS – \u0627\u0644\u0645\u062d\u062f\u062f\u0627\u062a\u060c \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635\u060c \u0648\u0627\u0644\u0642\u064a\u0645\u060c \u0648\u0627\u0644\u062f\u0642\u0629\u060c \u0648\u0627\u0644\u062a\u062a\u0627\u0644\u064a\u060c \u0648\u0627\u0644\u0648\u0631\u0627\u062b\u0629 – \u0623\u0645\u0631\u064b\u0627 \u0623\u0633\u0627\u0633\u064a\u064b\u0627 \u0644\u062a\u0635\u0645\u064a\u0645 \u0648\u064a\u0628 \u0641\u0639\u0627\u0644. \u062a\u064f\u0645\u0643\u0651\u0646 \u0647\u0630\u0647 \u0627\u0644\u0645\u0639\u0631\u0641\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0627\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u0645\u0646 \u0625\u0646\u0634\u0627\u0621 \u0635\u0641\u062d\u0627\u062a \u0648\u064a\u0628 \u0645\u062a\u0645\u0627\u0633\u0643\u0629 \u0628\u0635\u0631\u064a\u064b\u0627 \u0648\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0648\u0635\u064a\u0627\u0646\u062a\u0647\u0627.<\/p>\n

 <\/p>\n

\u0641\u0648\u0627\u0626\u062f CSS<\/a><\/h3>\n
    \n
  1. \u0641\u0635\u0644 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0639\u0646 \u0627\u0644\u062a\u0635\u0645\u064a\u0645:
    \n<\/strong><\/span>
    \n<\/strong>\u0645\u0646 \u0623\u0647\u0645 \u0641\u0648\u0627\u0626\u062f CSS \u0623\u0646\u0647\u0627 \u062a\u0641\u0635\u0644 \u0628\u064a\u0646 \u0647\u064a\u0643\u0644 \u0627\u0644\u0635\u0641\u062d\u0629 (HTML) \u0648\u0627\u0644\u062a\u0646\u0633\u064a\u0642\u060c \u0645\u0645\u0627 \u064a\u062c\u0639\u0644 \u0627\u0644\u0643\u0648\u062f \u0623\u0643\u062b\u0631 \u0648\u0636\u0648\u062d\u064b\u0627 \u0648\u0633\u0647\u0648\u0644\u0629 \u0641\u064a \u0627\u0644\u0635\u064a\u0627\u0646\u0629.<\/li>\n
  2. \n

    \u0625\u0639\u0627\u062f\u0629 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0643\u0648\u062f:
    \n<\/strong><\/span>
    \u0639\u0628\u0631 \u0645\u0644\u0641 CSS \u062e\u0627\u0631\u062c\u064a\u060c \u064a\u0645\u0643\u0646 \u062a\u0637\u0628\u064a\u0642 \u0646\u0641\u0633 \u0627\u0644\u062a\u0646\u0633\u064a\u0642\u0627\u062a \u0639\u0644\u0649 \u0639\u062f\u0629 \u0635\u0641\u062d\u0627\u062a\u060c \u0628\u062f\u0644\u064b\u0627 \u0645\u0646 \u062a\u0643\u0631\u0627\u0631 \u0627\u0644\u0643\u0648\u062f \u0641\u064a \u0643\u0644 \u0635\u0641\u062d\u0629.<\/p>\n<\/li>\n

  3. \n

    \u062a\u0648\u0641\u064a\u0631 \u0627\u0644\u0648\u0642\u062a \u0648\u0627\u0644\u062c\u0647\u062f:
    \n<\/strong><\/span>
    \u062a\u0639\u062f\u064a\u0644 \u0645\u0644\u0641 CSS \u0648\u0627\u062d\u062f \u064a\u063a\u064a\u0651\u0631 \u062a\u0646\u0633\u064a\u0642 \u0645\u0626\u0627\u062a \u0627\u0644\u0635\u0641\u062d\u0627\u062a \u062f\u0641\u0639\u0629 \u0648\u0627\u062d\u062f\u0629.<\/p>\n<\/li>\n

  4. \n

    \u0627\u0644\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 \u0645\u062e\u062a\u0644\u0641 \u0627\u0644\u0623\u062c\u0647\u0632\u0629:
    \n<\/strong><\/span>
    \u062a\u064f\u0645\u0643\u0651\u0646 CSS \u0627\u0644\u0645\u0637\u0648\u0631 \u0645\u0646 \u062c\u0639\u0644 \u0627\u0644\u0645\u0648\u0642\u0639 \u0645\u062a\u062c\u0627\u0648\u0628\u064b\u0627 (Responsive) \u0645\u0639 \u0627\u0644\u0647\u0648\u0627\u062a\u0641\u060c \u0627\u0644\u0623\u062c\u0647\u0632\u0629 \u0627\u0644\u0644\u0648\u062d\u064a\u0629\u060c \u0648\u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0643\u0628\u064a\u0631\u0629.<\/p>\n<\/li>\n

  5. \n

    \u062a\u062d\u0633\u064a\u0646 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645:
    \n<\/strong><\/span>
    \u0639\u0628\u0631 \u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a \u0627\u0644\u0628\u064a\u0636\u0627\u0621\u060c \u0627\u0644\u0623\u0644\u0648\u0627\u0646\u060c \u0648\u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0639\u0627\u0645\u060c \u064a\u0635\u0628\u062d \u0627\u0644\u0645\u0648\u0642\u0639 \u0623\u0643\u062b\u0631 \u0631\u0627\u062d\u0629 \u0641\u064a \u0627\u0644\u062a\u0635\u0641\u062d.<\/p>\n<\/li>\n

  6. \n

    \u062f\u0639\u0645 \u0627\u0644\u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0648\u0627\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646:
    \n<\/strong><\/span>
    \u062a\u0633\u0645\u062d CSS \u0628\u0625\u0646\u0634\u0627\u0621 \u062d\u0631\u0643\u0627\u062a \u0627\u0646\u062a\u0642\u0627\u0644\u064a\u0629 \u0648\u0631\u0633\u0648\u0645 \u0645\u062a\u062d\u0631\u0643\u0629 \u062a\u0636\u064a\u0641 \u062d\u064a\u0648\u064a\u0629 \u0644\u0644\u0635\u0641\u062d\u0629.<\/p>\n<\/li>\n<\/ol>\n

    \u0645\u0645\u064a\u0632\u0627\u062a CSS<\/h3>\n
      \n
    1. \n

      \u0627\u0644\u0645\u0631\u0648\u0646\u0629 \u0648\u0633\u0647\u0648\u0644\u0629 \u0627\u0644\u062a\u0639\u0644\u0645:
      \n<\/strong><\/span>
      \u0642\u0648\u0627\u0639\u062f CSS \u0628\u0633\u064a\u0637\u0629 \u0648\u064a\u0645\u0643\u0646 \u0644\u0623\u064a \u0645\u0628\u062a\u062f\u0626 \u0641\u0647\u0645\u0647\u0627 \u0628\u0633\u0631\u0639\u0629.<\/p>\n<\/li>\n

    2. \n

      \u0627\u0644\u062a\u062f\u0631\u062c (Cascading):
      \n<\/strong><\/span>
      \u0623\u064a \u0623\u0646 \u0627\u0644\u0642\u0648\u0627\u0639\u062f \u062a\u064f\u0637\u0628\u0651\u0642 \u062d\u0633\u0628 \u0627\u0644\u0623\u0648\u0644\u0648\u064a\u0629 (Inline > Internal > External)\u060c \u0645\u0645\u0627 \u064a\u0645\u0646\u062d \u062a\u062d\u0643\u0645\u064b\u0627 \u062f\u0642\u064a\u0642\u064b\u0627.<\/p>\n<\/li>\n

    3. \n

      \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u062a\u062c\u0627\u0648\u0628 (Responsive Design):
      \n<\/strong><\/span>
      \u0639\u0628\u0631 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 Media Queries<\/em> \u064a\u0645\u0643\u0646 \u062a\u0639\u062f\u064a\u0644 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0642\u0639 \u0644\u064a\u062a\u0646\u0627\u0633\u0628 \u0645\u0639 \u0623\u062d\u062c\u0627\u0645 \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629.<\/p>\n<\/li>\n

    4. \n

      \u062f\u0639\u0645 \u0648\u0627\u0633\u0639 \u0645\u0646 \u0627\u0644\u0645\u062a\u0635\u0641\u062d\u0627\u062a:
      \n<\/strong><\/span>
      \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u062a\u0635\u0641\u062d\u0627\u062a \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u062a\u062f\u0639\u0645 CSS \u0628\u0634\u0643\u0644 \u0643\u0627\u0645\u0644 \u062a\u0642\u0631\u064a\u0628\u064b\u0627.<\/p>\n<\/li>\n

    5. \n

      \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0628\u0635\u0631\u064a\u0629:
      \n<\/strong><\/span>
      \u0639\u0628\u0631 CSS3 \u064a\u0645\u0643\u0646 \u0625\u0636\u0627\u0641\u0629 \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0645\u062b\u0644 \u0627\u0644\u0638\u0644\u0627\u0644\u060c \u0627\u0644\u062a\u062d\u0648\u0644\u0627\u062a (Transforms)\u060c \u0627\u0644\u0634\u0641\u0627\u0641\u064a\u0629\u060c \u0648\u0627\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646.<\/p>\n<\/li>\n

    6. \n

      \u0627\u0644\u062a\u062d\u0643\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 \u0628\u0627\u0644\u062e\u0637\u0648\u0637 \u0648\u0627\u0644\u0623\u0644\u0648\u0627\u0646:
      \n<\/strong><\/span>
      \u0625\u0645\u0643\u0627\u0646\u064a\u0629 \u0627\u0633\u062a\u064a\u0631\u0627\u062f \u062e\u0637\u0648\u0637 \u062e\u0627\u0631\u062c\u064a\u0629 \u0645\u0646 Google Fonts \u0648\u062a\u0637\u0628\u064a\u0642 \u0644\u0648\u062d\u0627\u062a \u0623\u0644\u0648\u0627\u0646 \u0645\u062a\u0642\u062f\u0645\u0629.<\/p>\n<\/li>\n<\/ol>\n

      \"\u0644\u063a\u0629
      \u0644\u063a\u0629 CSS<\/figcaption><\/figure>\n

      \u0643\u064a\u0641\u064a\u0629 \u0627\u0644\u0639\u0645\u0644 \u0628\u0644\u063a\u0629 CSS<\/h3>\n

      CSS \u064a\u0645\u0643\u0646 \u0643\u062a\u0627\u0628\u062a\u0647\u0627 \u0628\u062b\u0644\u0627\u062b \u0637\u0631\u0642 \u0631\u0626\u064a\u0633\u064a\u0629:<\/p>\n

      1. \u0627\u0644\u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u062f\u0627\u062e\u0644\u064a (Internal CSS):<\/strong><\/span><\/h4>\n

      \u064a\u062a\u0645 \u0648\u0636\u0639 \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u0627\u062a \u062f\u0627\u062e\u0644 \u0645\u0644\u0641 HTML \u0646\u0641\u0633\u0647 \u0628\u064a\u0646 \u0648\u0633\u0645 <style><\/code> \u0648 <\/style><\/code>.<\/p>\n

      \n
      \n
      \n
      <\/div>\n<\/div>\n<\/div>\n
      <html<\/span><\/span>>
      \n<head<\/span><\/span>>
      \n<style<\/span><\/span>>
      \nbody<\/span> {
      \nbackground-color<\/span>: lightblue;
      \nfont-family<\/span>: Arial, sans-serif;
      \n}
      \nh1<\/span> {
      \ncolor<\/span>: navy;
      \ntext-align<\/span>: center;
      \n}
      \n<\/style<\/span><\/span>>
      \n<\/head<\/span><\/span>>
      \n<body<\/span><\/span>>
      \n<h1<\/span><\/span>>\u0645\u0631\u062d\u0628\u064b\u0627 \u0628\u0643 \u0641\u064a CSS<\/h1<\/span><\/span>>
      \n<\/body<\/span><\/span>>
      \n<\/html<\/span><\/span>>
      \n<\/code><\/div>\n<\/div>\n

      2. \u0627\u0644\u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u062e\u0627\u0631\u062c\u064a (External CSS):<\/strong><\/span><\/h4>\n

      \u0648\u0647\u0648 \u0627\u0644\u0623\u0641\u0636\u0644\u060c \u062d\u064a\u062b \u064a\u062a\u0645 \u0648\u0636\u0639 \u0627\u0644\u0623\u0643\u0648\u0627\u062f \u0641\u064a \u0645\u0644\u0641 \u0645\u0633\u062a\u0642\u0644 \u0628\u0627\u0645\u062a\u062f\u0627\u062f .css<\/code> \u0648\u0631\u0628\u0637\u0647 \u0628\u0635\u0641\u062d\u0629 HTML:<\/p>\n

      \n
      \n
      \n
      <\/div>\n<\/div>\n<\/div>\n
      <link<\/span><\/span> rel<\/span>=\"stylesheet\"<\/span> type<\/span>=\"text\/css\"<\/span> href<\/span>=\"style.css\"<\/span>>
      \n<\/code><\/div>\n<\/div>\n

      \u0648\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0645\u0644\u0641 style.css<\/code>:<\/p>\n

      \n
      \n
      \n
      <\/div>\n<\/div>\n<\/div>\n
      p<\/span> {
      \ncolor<\/span>: green;
      \nfont-size<\/span>: 18px<\/span>;
      \n}
      \n<\/code><\/div>\n<\/div>\n

      3. \u0627\u0644\u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u062f\u0627\u062e\u0644\u064a \u0644\u0644\u0633\u0637\u0631 (Inline CSS):<\/strong><\/span><\/h4>\n

      \u0628\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0643\u0648\u062f \u0645\u0628\u0627\u0634\u0631\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0639\u0646\u0635\u0631:<\/p>\n

      \n
      \n
      \n
      <\/div>\n<\/div>\n<\/div>\n
      <p<\/span><\/span> style<\/span>=\"color:red; font-size:20px;\"<\/span>>\u0647\u0630\u0627 \u0646\u0635 \u0628\u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u062d\u0645\u0631<\/p<\/span><\/span>>
      \n<\/code><\/div>\n<\/div>\n

      <\/h3>\n

      \u0623\u0647\u0645 \u062e\u0635\u0627\u0626\u0635 CSS<\/h3>\n
        \n
      • \n

        \u0627\u0644\u0623\u0644\u0648\u0627\u0646:<\/strong><\/span><\/p>\n

        \n
        \n
        \n
        <\/div>\n<\/div>\n<\/div>\n
        h1<\/span> { color<\/span>: blue; }
        \n<\/code><\/div>\n<\/div>\n<\/li>\n
      • \n

        \u0627\u0644\u062e\u0644\u0641\u064a\u0627\u062a:<\/strong><\/span><\/p>\n

        \n
        \n
        \n
        <\/div>\n<\/div>\n<\/div>\n
        body<\/span> { background-image<\/span>: url<\/span>('bg.jpg'<\/span>); }
        \n<\/code><\/div>\n<\/div>\n<\/li>\n
      • \n

        \u0627\u0644\u062e\u0637\u0648\u0637:<\/strong><\/span><\/p>\n

        \n
        \n
        \n
        <\/div>\n<\/div>\n<\/div>\n
        p<\/span> { font-family<\/span>: 'Arial'<\/span>, sans-serif; }
        \n<\/code><\/div>\n<\/div>\n<\/li>\n
      • \n

        \u0627\u0644\u062a\u0628\u0627\u0639\u062f (Spacing):<\/strong><\/span><\/p>\n

        \n
        \n
        \n
        <\/div>\n<\/div>\n<\/div>\n
        div<\/span> { margin<\/span>: 20px<\/span>; padding<\/span>: 15px<\/span>; }
        \n<\/code><\/div>\n<\/div>\n<\/li>\n
      • \n

        \u0627\u0644\u0645\u062d\u0627\u0630\u0627\u0629:<\/strong><\/span><\/p>\n

        \n
        \n
        \n
        <\/div>\n<\/div>\n<\/div>\n
        h1<\/span> { text-align<\/span>: center; }
        \n<\/code><\/div>\n<\/div>\n<\/li>\n
      • \n

        \u0627\u0644\u062d\u062f\u0648\u062f (Borders):<\/strong><\/span><\/p>\n

        \n
        \n
        \n
        <\/div>\n<\/div>\n<\/div>\n
        p<\/span> { border<\/span>: 2px<\/span> solid black; }
        \n<\/code><\/div>\n<\/div>\n<\/li>\n
      • \n

        \u0627\u0644\u062a\u062c\u0627\u0648\u0628 (Responsive):<\/strong><\/span><\/p>\n

        \n
        \n
        \n
        <\/div>\n<\/div>\n<\/div>\n
        @media<\/span> (max-width<\/span>: 600px<\/span>) {
        \nbody<\/span> { background-color<\/span>: lightgreen; }
        \n}
        \n<\/code><\/div>\n<\/div>\n<\/li>\n<\/ul>\n

        <\/h3>\n

        \u0645\u062d\u062f\u062f\u0627\u062a CSS: \u0627\u0644\u0623\u0646\u0648\u0627\u0639 \u0648\u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0627\u062a<\/h3>\n

        \u062a\u064f\u0639\u062f \u0645\u062d\u062f\u062f\u0627\u062a CSS \u0623\u062f\u0648\u0627\u062a \u0623\u0633\u0627\u0633\u064a\u0629 \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0623\u0648\u0631\u0627\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u062a\u062a\u0627\u0644\u064a\u0629 \u0644\u0627\u0633\u062a\u0647\u062f\u0627\u0641 \u0639\u0646\u0627\u0635\u0631 HTML \u0644\u0623\u063a\u0631\u0627\u0636 \u0627\u0644\u062a\u0635\u0645\u064a\u0645. \u064a\u064f\u0639\u062f \u0641\u0647\u0645 \u0627\u0644\u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0645\u0646 \u0627\u0644\u0645\u062d\u062f\u062f\u0627\u062a \u0627\u0644\u0645\u062a\u0627\u062d\u0629 \u0641\u064a CSS \u0623\u0645\u0631\u064b\u0627 \u0636\u0631\u0648\u0631\u064a\u064b\u0627 \u0644\u0623\u064a \u0645\u0637\u0648\u0631 \u0648\u064a\u0628 \u064a\u062a\u0637\u0644\u0639 \u0625\u0644\u0649 \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0628\u0643\u0641\u0627\u0621\u0629 \u0639\u0644\u0649 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0647. \u062a\u0634\u0645\u0644 \u0627\u0644\u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0644\u0645\u062d\u062f\u062f\u0627\u062a \u0645\u062d\u062f\u062f\u0627\u062a \u0627\u0644\u0639\u0646\u0627\u0635\u0631\u060c \u0648\u0645\u062d\u062f\u062f\u0627\u062a \u0627\u0644\u0641\u0626\u0627\u062a\u060c \u0648\u0645\u062d\u062f\u062f\u0627\u062a \u0627\u0644\u0645\u0639\u0631\u0641\u0627\u062a\u060c \u0648\u0645\u062d\u062f\u062f\u0627\u062a \u0627\u0644\u0633\u0645\u0627\u062a\u060c \u0648\u0627\u0644\u0645\u062d\u062f\u062f\u0627\u062a \u0627\u0644\u0632\u0627\u0626\u0641\u0629.<\/p>\n

        \u062a\u062a\u064a\u062d \u0645\u062d\u062f\u062f\u0627\u062a \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0644\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u062a\u062d\u062f\u064a\u062f \u0648\u0633\u0648\u0645 HTML \u0645\u0628\u0627\u0634\u0631\u0629\u064b. \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u0633\u064a\u0624\u062f\u064a \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0645\u062d\u062f\u062f p \u0625\u0644\u0649 \u0627\u0633\u062a\u0647\u062f\u0627\u0641 \u062c\u0645\u064a\u0639 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0641\u0642\u0631\u0629\u060c \u0645\u0639 \u062a\u0637\u0628\u064a\u0642 \u062a\u0646\u0633\u064a\u0642 \u0645\u062a\u0633\u0642 \u0639\u0644\u0649 \u0643\u0644 \u0639\u0646\u0635\u0631 \u0641\u064a \u0627\u0644\u0635\u0641\u062d\u0629. \u064a\u064f\u0639\u062f \u0647\u0630\u0627 \u0627\u0644\u0645\u062d\u062f\u062f \u0623\u0633\u0627\u0633\u064a\u064b\u0627 \u0644\u0625\u062c\u0631\u0627\u0621 \u062a\u063a\u064a\u064a\u0631\u0627\u062a \u0648\u0627\u0633\u0639\u0629 \u0627\u0644\u0646\u0637\u0627\u0642 \u0639\u0644\u0649 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u062a\u0634\u0627\u0628\u0647\u0629\u060c \u0645\u0645\u0627 \u064a\u0639\u0632\u0632 \u0627\u062a\u0633\u0627\u0642 \u0627\u0644\u062a\u0635\u0645\u064a\u0645.<\/p>\n

        \u062a\u062a\u064a\u062d \u0645\u062d\u062f\u062f\u0627\u062a \u0627\u0644\u0641\u0626\u0627\u062a\u060c \u0627\u0644\u0645\u064f\u0634\u0627\u0631 \u0625\u0644\u064a\u0647\u0627 \u0628\u0646\u0642\u0637\u0629 (\u0645\u062b\u0644 .classname)\u060c \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062a\u064a \u062a\u0634\u062a\u0631\u0643 \u0641\u064a \u0633\u0645\u0629 \u0627\u0644\u0641\u0626\u0629 \u0646\u0641\u0633\u0647\u0627. \u064a\u0648\u0641\u0631 \u0647\u0630\u0627 \u0645\u0631\u0648\u0646\u0629 \u0643\u0628\u064a\u0631\u0629\u060c \u062d\u064a\u062b \u064a\u0645\u0643\u0646 \u0644\u0639\u0646\u0627\u0635\u0631 \u0645\u062a\u0639\u062f\u062f\u0629 \u0623\u0646 \u062a\u0634\u062a\u0631\u0643 \u0641\u064a \u0627\u0644\u0641\u0626\u0629 \u0646\u0641\u0633\u0647\u0627\u060c \u0645\u0645\u0627 \u064a\u064f\u0633\u0647\u0651\u0644 \u062a\u0637\u0628\u064a\u0642 \u0623\u0646\u0645\u0627\u0637 \u0645\u062d\u062f\u062f\u0629 \u0639\u0644\u0649 \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0645\u0646 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u062f\u0648\u0646 \u0627\u0644\u062a\u0623\u062b\u064a\u0631 \u0639\u0644\u0649 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0623\u062e\u0631\u0649. \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0639\u0644\u0649 \u062c\u0645\u064a\u0639 \u0627\u0644\u0635\u0648\u0631<\/p>\n

        <\/h3>\n

        \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629 \u0641\u064a CSS<\/h3>\n
          \n
        1. \n

          CSS Flexbox:<\/strong><\/span>
          \u0646\u0638\u0627\u0645 \u062a\u062e\u0637\u064a\u0637\u064a \u0642\u0648\u064a \u0644\u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0628\u0634\u0643\u0644 \u0645\u0631\u0646.<\/p>\n

          \n
          \n
          \n
          <\/div>\n<\/div>\n<\/div>\n
          .container<\/span> {
          \ndisplay<\/span>: flex;
          \njustify-content<\/span>: space-between;
          \n}
          \n<\/code><\/div>\n<\/div>\n<\/li>\n
        2. \n

          CSS Grid:<\/strong><\/span>
          \u0644\u062a\u0635\u0645\u064a\u0645 \u0634\u0628\u0643\u0627\u062a \u0645\u0639\u0642\u062f\u0629 \u0648\u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0628\u0634\u0643\u0644 \u0627\u062d\u062a\u0631\u0627\u0641\u064a.<\/p>\n

          \n
          \n
          \n
          <\/div>\n<\/div>\n<\/div>\n
          .grid<\/span> {
          \ndisplay<\/span>: grid;
          \ngrid-template-columns<\/span>: 1<\/span>fr 2<\/span>fr;
          \n}
          \n<\/code><\/div>\n<\/div>\n<\/li>\n
        3. \n

          Transitions & Animations:<\/strong><\/span>
          \u0644\u0625\u0636\u0627\u0641\u0629 \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0645\u062a\u062d\u0631\u0643\u0629 \u0633\u0644\u0633\u0629.<\/p>\n

          \n
          \n
          \n
          <\/div>\n<\/div>\n<\/div>\n
          button<\/span> {
          \ntransition<\/span>: background 0.3s<\/span> ease;
          \n}
          \nbutton<\/span>:hover<\/span> {
          \nbackground<\/span>: orange;
          \n}
          \n<\/code><\/div>\n<\/div>\n<\/li>\n
        4. \n

          Pseudo-classes & Pseudo-elements:<\/strong><\/span>
          \u0645\u062b\u0644 :hover<\/code>, :first-child<\/code>, ::before<\/code>, ::after<\/code> \u0644\u0644\u062a\u062d\u0643\u0645 \u0628\u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0628\u0634\u0643\u0644 \u0623\u0643\u062b\u0631 \u062f\u0642\u0629.<\/p>\n<\/li>\n<\/ol>\n

          <\/h3>\n

          \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0627\u062a CSS \u0641\u064a \u0627\u0644\u0648\u0627\u0642\u0639<\/h3>\n
            \n
          • \n

            \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/span>:<\/strong> \u0644\u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0646\u0635\u0648\u0635\u060c \u0627\u0644\u0623\u0632\u0631\u0627\u0631\u060c \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0648\u0627\u0644\u062e\u0644\u0641\u064a\u0627\u062a.<\/p>\n<\/li>\n

          • \n

            \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/span>:<\/strong> \u0639\u0628\u0631 \u0625\u0636\u0627\u0641\u0629 \u0648\u0627\u062c\u0647\u0627\u062a \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0648\u062c\u0630\u0627\u0628\u0629.<\/p>\n<\/li>\n

          • \n

            \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 (UX)<\/span>:<\/strong> \u062a\u062d\u0633\u064a\u0646 \u0642\u0627\u0628\u0644\u064a\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0648\u0627\u0644\u062a\u0641\u0627\u0639\u0644.<\/p>\n<\/li>\n

          • \n

            \u0625\u0646\u0634\u0627\u0621 \u0635\u0641\u062d\u0627\u062a \u0645\u062a\u062c\u0627\u0648\u0628\u0629<\/span>:<\/strong> \u062a\u0639\u0645\u0644 \u0628\u0633\u0644\u0627\u0633\u0629 \u0639\u0644\u0649 \u0627\u0644\u0647\u0648\u0627\u062a\u0641 \u0648\u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0643\u0628\u064a\u0631\u0629.<\/p>\n<\/li>\n

          • \n

            \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0628\u0635\u0631\u064a\u0629<\/span>:<\/strong> \u0639\u0628\u0631 \u062a\u0637\u0628\u064a\u0642 \u0623\u0644\u0648\u0627\u0646 \u0648\u0647\u0648\u064a\u0629 \u0627\u0644\u0639\u0644\u0627\u0645\u0629 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629.<\/p>\n<\/li>\n<\/ul>\n

            <\/h3>\n

            \u0627\u0644\u0641\u0631\u0642 \u0628\u064a\u0646 CSS \u0648 CSS3<\/h3>\n
              \n
            • \n

              CSS<\/span>:<\/strong> \u0627\u0644\u0646\u0633\u062e\u0629 \u0627\u0644\u0623\u0648\u0644\u0649\u060c \u062a\u0642\u062f\u0645 \u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0648\u0627\u0644\u062e\u0637\u0648\u0637 \u0648\u0627\u0644\u062a\u0646\u0633\u064a\u0642\u0627\u062a \u0627\u0644\u0628\u0633\u064a\u0637\u0629.<\/p>\n<\/li>\n

            • \n

              CSS3<\/span>:<\/strong> \u062c\u0644\u0628\u062a \u062e\u0635\u0627\u0626\u0635 \u0645\u062a\u0642\u062f\u0645\u0629 \u0645\u062b\u0644 \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629\u060c \u0627\u0644\u062a\u062f\u0631\u062c\u0627\u062a \u0627\u0644\u0644\u0648\u0646\u064a\u0629\u060c \u0627\u0644\u0638\u0644\u0627\u0644\u060c Flexbox\u060c Grid\u060c \u0648Media Queries.<\/p>\n<\/li>\n<\/ul>\n

              <\/h3>\n

              \u062e\u0644\u0627\u0635\u0629<\/h3>\n

              CSS \u0644\u064a\u0633\u062a \u0645\u062c\u0631\u062f \u0623\u062f\u0627\u0629 \u0644\u062a\u0644\u0648\u064a\u0646 \u0627\u0644\u0646\u0635\u0648\u0635\u060c \u0628\u0644 \u0647\u064a \u0644\u063a\u0629 \u0642\u0648\u064a\u0629 \u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0648\u064a\u0628\u060c \u062a\u0645\u0646\u062d \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0645\u0638\u0647\u0631\u064b\u0627 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u064b\u0627 \u0648\u062a\u062c\u0639\u0644\u0647\u0627 \u0645\u062a\u062c\u0627\u0648\u0628\u0629 \u0648\u0633\u0647\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645. \u0645\u0646 \u062e\u0644\u0627\u0644 \u0641\u0635\u0644 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0639\u0646 \u0627\u0644\u062a\u0635\u0645\u064a\u0645\u060c \u0648\u062a\u0642\u062f\u064a\u0645 \u0625\u0645\u0643\u0627\u0646\u064a\u0627\u062a \u0645\u062a\u0642\u062f\u0645\u0629 \u0645\u062b\u0644 Grid \u0648Flexbox \u0648\u0627\u0644\u0623\u0646\u064a\u0645\u064a\u0634\u0646\u060c \u0623\u0635\u0628\u062d\u062a CSS \u0644\u063a\u0629 \u0644\u0627 \u063a\u0646\u0649 \u0639\u0646\u0647\u0627 \u0644\u0623\u064a \u0645\u0637\u0648\u0631 \u0623\u0648 \u0645\u0635\u0645\u0645.<\/p>\n

              \u0625\u0630\u0627 \u0643\u0646\u062a \u062a\u0631\u064a\u062f \u0627\u0644\u062f\u062e\u0648\u0644 \u0625\u0644\u0649 \u0639\u0627\u0644\u0645 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0648\u064a\u0628\u060c \u0641\u0625\u0646 HTML + CSS<\/strong> \u0647\u064a \u0627\u0644\u062e\u0637\u0648\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 \u0627\u0644\u062d\u0642\u064a\u0642\u064a\u0629\u060c \u0641\u0647\u064a \u062a\u0645\u0646\u062d\u0643 \u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u062a\u062d\u0648\u064a\u0644 \u0623\u064a \u0641\u0643\u0631\u0629 \u0645\u0646 \u0645\u062c\u0631\u062f \u0646\u0635\u0648\u0635 \u0625\u0644\u0649 \u0648\u0627\u062c\u0647\u0629 \u062c\u0645\u064a\u0644\u0629 \u0648\u0645\u062a\u0646\u0627\u0633\u0642\u0629.<\/p>\n

               <\/p>\n

              <\/div>\n