{"id":6419,"date":"2025-02-07T16:04:02","date_gmt":"2025-02-07T13:04:02","guid":{"rendered":"https:\/\/planet-www.com\/marketing-tutorials\/?p=6419"},"modified":"2025-02-07T16:05:38","modified_gmt":"2025-02-07T13:05:38","slug":"designing-web-pages-using-css","status":"publish","type":"post","link":"https:\/\/planet-www.com\/marketing-tutorials\/designing-web-pages-using-css\/","title":{"rendered":"\u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS"},"content":{"rendered":"\n<p><strong>\u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS<\/strong> \u0647\u0648 \u062e\u0637\u0648\u0629 \u0623\u0633\u0627\u0633\u064a\u0629 \u0641\u064a \u062a\u0637\u0648\u064a\u0631 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0648\u062c\u0639\u0644 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0623\u0643\u062b\u0631 \u062c\u0627\u0630\u0628\u064a\u0629 \u0648\u0633\u0647\u0648\u0644\u0629 \u0641\u064a \u0627\u0644\u062a\u0635\u0641\u062d. \u0628\u064a\u0646\u0645\u0627 \u062a\u064f\u0639\u062a\u0628\u0631 HTML \u0647\u064a \u0627\u0644\u0623\u0633\u0627\u0633 \u0644\u0628\u0646\u0627\u0621 \u0647\u064a\u0643\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\u060c \u064a\u0623\u062a\u064a \u062f\u0648\u0631 <strong>CSS<\/strong> \u0644\u062a\u062d\u0648\u064a\u0644 \u0647\u0630\u0647 \u0627\u0644\u0635\u0641\u062d\u0629 \u0625\u0644\u0649 \u062a\u0635\u0645\u064a\u0645 \u0645\u062a\u0643\u0627\u0645\u0644 \u0648\u062c\u0645\u064a\u0644 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0623\u0644\u0648\u0627\u0646\u060c \u0627\u0644\u062e\u0637\u0648\u0637\u060c \u0627\u0644\u062a\u0628\u0627\u0639\u062f\u060c \u0648\u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0628\u0637\u0631\u064a\u0642\u0629 \u062a\u062c\u0639\u0644 \u0627\u0644\u0645\u0648\u0642\u0639 \u064a\u0628\u062f\u0648 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u064b\u0627.<\/p>\n\n\n\n<p>\u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0645\u0642\u0627\u0644\u060c \u0633\u0646\u062a\u0639\u0631\u0641 \u0639\u0644\u0649 \u0643\u064a\u0641\u064a\u0629 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 <strong>CSS<\/strong> \u0644\u062a\u0646\u0633\u064a\u0642 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0628\u062f\u0621\u064b\u0627 \u0645\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0625\u0644\u0649 \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629 \u0627\u0644\u062a\u064a \u062a\u0633\u0627\u0639\u062f\u0643 \u0639\u0644\u0649 \u062a\u062d\u0633\u064a\u0646 \u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0648\u062a\u0646\u0633\u064a\u0642 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0628\u0634\u0643\u0644 \u0641\u0639\u0627\u0644.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0645\u0627 \u0647\u0648 CSS\u061f<\/h2>\n\n\n\n<p>CSS (<strong>Cascading Style Sheets<\/strong>) \u0647\u064a \u0644\u063a\u0629 \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0644\u062a\u0646\u0633\u064a\u0642 \u0645\u0638\u0647\u0631 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u0645\u0643\u062a\u0648\u0628\u0629 \u0628\u0640 HTML. \u0628\u0641\u0636\u0644 <strong>CSS<\/strong>\u060c \u064a\u0645\u0643\u0646 \u0644\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u062a\u062d\u062f\u064a\u062f \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0635\u0641\u062d\u0629 \u0628\u0634\u0643\u0644 \u0643\u0627\u0645\u0644\u060c \u0628\u0645\u0627 \u0641\u064a \u0630\u0644\u0643 \u0627\u0644\u0623\u0644\u0648\u0627\u0646\u060c \u0627\u0644\u062e\u0637\u0648\u0637\u060c \u0627\u0644\u062a\u0628\u0627\u0639\u062f\u060c \u0627\u0644\u062a\u0631\u062a\u064a\u0628\u060c \u0648\u062d\u062a\u0649 \u0627\u0644\u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0627\u0644\u062d\u0631\u0643\u064a\u0629.<\/p>\n\n\n\n<p>CSS \u064a\u0639\u0645\u0644 \u0639\u0644\u0649 \u0641\u0635\u0644 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 (\u0627\u0644\u0630\u064a \u064a\u064f\u0643\u062a\u0628 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 HTML) \u0639\u0646 \u0627\u0644\u062a\u0646\u0633\u064a\u0642. \u0647\u0630\u0627 \u064a\u0639\u0646\u064a \u0623\u0646 \u0627\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u064a\u0645\u0643\u0646\u0647\u0645 \u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0628\u0634\u0643\u0644 \u0645\u064f\u0646\u0638\u0645 \u062f\u0627\u062e\u0644 HTML\u060c \u0628\u064a\u0646\u0645\u0627 \u064a\u0636\u0639\u0648\u0646 \u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0645\u062a\u0639\u0644\u0642\u0629 \u0628\u0643\u064a\u0641\u064a\u0629 \u0638\u0647\u0648\u0631 \u0647\u0630\u0627 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 <strong>CSS<\/strong>. \u064a\u062a\u064a\u062d \u0647\u0630\u0627 \u0627\u0644\u0641\u0635\u0644 \u0639\u0645\u0644\u064a\u0629 \u062a\u0637\u0648\u064a\u0631 \u0623\u0633\u0647\u0644 \u0648\u0623\u0643\u062b\u0631 \u0643\u0641\u0627\u0621\u0629\u060c \u0645\u0645\u0627 \u064a\u0633\u0645\u062d \u0628\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0628\u0633\u0647\u0648\u0644\u0629 \u062f\u0648\u0646 \u0627\u0644\u062a\u0623\u062b\u064a\u0631 \u0639\u0644\u0649 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0623\u0633\u0627\u0633\u064a.<\/p>\n\n\n\n<p>\u0645\u0646 \u062e\u0644\u0627\u0644 <strong>CSS<\/strong>\u060c \u064a\u0645\u0643\u0646 \u0644\u0645\u0635\u0645\u0645\u064a \u0627\u0644\u0648\u064a\u0628 \u062a\u062e\u0635\u064a\u0635 \u0645\u0648\u0627\u0642\u0639\u0647\u0645 \u0628\u0634\u0643\u0644 \u062f\u0642\u064a\u0642 \u0644\u062a\u0646\u0627\u0633\u0628 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u064a\u0646\u060c \u0633\u0648\u0627\u0621 \u0643\u0627\u0646\u0648\u0627 \u0641\u064a \u0623\u062c\u0647\u0632\u0629 \u0633\u0637\u062d \u0627\u0644\u0645\u0643\u062a\u0628 \u0623\u0648 \u0627\u0644\u0647\u0648\u0627\u062a\u0641 \u0627\u0644\u0645\u062d\u0645\u0648\u0644\u0629. \u0643\u0645\u0627 \u0623\u0646 <strong>CSS<\/strong> \u064a\u0639\u062a\u0628\u0631 \u0623\u062f\u0627\u0629 \u0642\u0648\u064a\u0629 \u0644\u062c\u0639\u0644 \u0627\u0644\u0645\u0648\u0642\u0639 \u0633\u0631\u064a\u0639 \u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629 (Responsive) \u0648\u064a\u0639\u0645\u0644 \u0628\u0634\u0643\u0644 \u062c\u064a\u062f \u0639\u0628\u0631 \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u062c\u0647\u0632\u0629 \u0648\u0627\u0644\u0645\u062a\u0635\u0641\u062d\u0627\u062a.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0643\u064a\u0641 \u064a\u0639\u0645\u0644 CSS\u061f<\/h2>\n\n\n\n<p>CSS \u064a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0642\u0627\u0639\u062f\u0629 \u0623\u0633\u0627\u0633\u064a\u0629 \u0648\u0647\u064a \u0631\u0628\u0637 <strong>\u0627\u0644\u0623\u0646\u0645\u0627\u0637 (Styles)<\/strong> \u0628\u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u0648\u062c\u0648\u062f\u0629 \u0641\u064a <strong>HTML<\/strong>. \u064a\u0642\u0648\u0645 \u0627\u0644\u0645\u0637\u0648\u0631\u0648\u0646 \u0628\u0643\u062a\u0627\u0628\u0629 \u0642\u0648\u0627\u0639\u062f CSS \u0627\u0644\u062a\u064a \u062a\u062d\u062f\u062f \u0643\u064a\u0641\u064a\u0629 \u0639\u0631\u0636 \u0627\u0644\u0639\u0646\u0627\u0635\u0631\u060c \u062b\u0645 \u064a\u062a\u0645 \u062a\u0637\u0628\u064a\u0642 \u0647\u0630\u0647 \u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0639\u0644\u0649 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u062d\u062f\u062f\u0629 \u062f\u0627\u062e\u0644 \u0635\u0641\u062d\u0629 \u0627\u0644\u0648\u064a\u0628.<\/p>\n\n\n\n<p><strong>\u0643\u0644 \u0642\u0627\u0639\u062f\u0629 CSS \u062a\u062a\u0643\u0648\u0646 \u0645\u0646 \u062c\u0632\u0626\u064a\u0646 \u0623\u0633\u0627\u0633\u064a\u064a\u0646<\/strong>:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u0627\u0644\u0645\u062d\u062f\u062f (Selector):<\/strong> \u0647\u0630\u0627 \u0647\u0648 \u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u0630\u064a \u0633\u062a\u0637\u0628\u0642 \u0639\u0644\u064a\u0647 \u0627\u0644\u0642\u0627\u0639\u062f\u0629. \u064a\u0645\u0643\u0646 \u0623\u0646 \u064a\u0643\u0648\u0646 \u0645\u062d\u062f\u062f\u064b\u0627 \u0639\u0627\u0645\u064b\u0627 \u0645\u062b\u0644 <code>&lt;h1&gt;<\/code>, \u0623\u0648 \u0645\u062e\u0635\u0635\u064b\u0627 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 <strong>\u0627\u0644\u0641\u0626\u0627\u062a (classes)<\/strong> \u0623\u0648 <strong>\u0627\u0644\u0645\u0639\u0631\u0641\u0627\u062a (IDs)<\/strong>.<\/li>\n\n\n\n<li><strong>\u0627\u0644\u062e\u0635\u0627\u0626\u0635 (Properties) \u0648\u0627\u0644\u0642\u064a\u0645 (Values):<\/strong> \u0647\u0630\u0647 \u0647\u064a \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u062a\u064a \u062a\u062d\u062f\u062f \u0643\u064a\u0641 \u0633\u064a\u0638\u0647\u0631 \u0627\u0644\u0639\u0646\u0635\u0631. \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u064a\u0645\u0643\u0646 \u062a\u062d\u062f\u064a\u062f \u0644\u0648\u0646 \u0627\u0644\u0646\u0635\u060c \u062d\u062c\u0645 \u0627\u0644\u062e\u0637\u060c \u0627\u0644\u062a\u0628\u0627\u0639\u062f \u0628\u064a\u0646 \u0627\u0644\u0639\u0646\u0627\u0635\u0631\u060c \u0648\u063a\u064a\u0631\u0647\u0627 \u0645\u0646 \u0627\u0644\u062e\u0635\u0627\u0626\u0635.<\/li>\n<\/ol>\n\n\n\n<p><strong>\u0645\u062b\u0627\u0644 \u0639\u0644\u0649 \u0642\u0627\u0639\u062f\u0629 CSS:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n    color: blue;\n    font-size: 24px;\n}<\/code><\/pre>\n\n\n\n<p>\u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0645\u062b\u0627\u0644:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>h1<\/strong> \u0647\u0648 \u0627\u0644\u0645\u062d\u062f\u062f\u060c \u0648\u064a\u0639\u0646\u064a \u0623\u0646\u0647 \u0633\u064a\u062a\u0645 \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0639\u0644\u0649 \u062c\u0645\u064a\u0639 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0645\u0646 \u0627\u0644\u0646\u0648\u0639 <code>&lt;h1&gt;<\/code>.<\/li>\n\n\n\n<li><strong>color: blue;<\/strong> \u062a\u0639\u0646\u064a \u0623\u0646 \u0627\u0644\u0646\u0635 \u062f\u0627\u062e\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0645\u0646 \u0627\u0644\u0646\u0648\u0639 <code>&lt;h1&gt;<\/code> \u0633\u064a\u0643\u0648\u0646 \u0644\u0648\u0646\u0647 \u0623\u0632\u0631\u0642.<\/li>\n\n\n\n<li><strong>font-size: 24px;<\/strong> \u062a\u0639\u0646\u064a \u0623\u0646 \u062d\u062c\u0645 \u0627\u0644\u062e\u0637 \u0633\u064a\u0643\u0648\u0646 24 \u0628\u0643\u0633\u0644.<\/li>\n<\/ul>\n\n\n\n<p>\u064a\u0645\u0643\u0646 \u062a\u0637\u0628\u064a\u0642 \u0642\u0648\u0627\u0639\u062f CSS \u062f\u0627\u062e\u0644 \u0627\u0644\u0635\u0641\u062d\u0629 \u0646\u0641\u0633\u0647\u0627 \u062f\u0627\u062e\u0644 \u0648\u0633\u0645 <code>&lt;style&gt;<\/code>, \u0623\u0648 \u0641\u064a \u0645\u0644\u0641 \u062e\u0627\u0631\u062c\u064a \u0645\u0646\u0641\u0635\u0644 \u064a\u064f\u0631\u062a\u0628\u0637 \u0628\u0627\u0644\u0635\u0641\u062d\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0648\u0633\u0645 <code>&lt;link&gt;<\/code> \u0641\u064a \u0627\u0644\u0640 HTML. \u064a\u0639\u062a\u0645\u062f \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631 \u0628\u064a\u0646 \u0627\u0644\u0623\u0633\u0644\u0648\u0628\u064a\u0646 \u0639\u0644\u0649 \u062d\u062c\u0645 \u0648\u062a\u0639\u0642\u064a\u062f \u0627\u0644\u0645\u0634\u0631\u0648\u0639.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0623\u0646\u0648\u0627\u0639 CSS<\/h2>\n\n\n\n<p>\u0647\u0646\u0627\u0643 \u062b\u0644\u0627\u062b\u0629 \u0623\u0646\u0648\u0627\u0639 \u0631\u0626\u064a\u0633\u064a\u0629 \u0645\u0646 CSS \u0627\u0644\u062a\u064a \u064a\u0645\u0643\u0646 \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0647\u0627 \u0644\u062a\u0646\u0633\u064a\u0642 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS \u0627\u0644\u0645\u062f\u0645\u062c (Inline CSS)<\/h3>\n\n\n\n<p>\u0647\u0648 CSS \u064a\u062a\u0645 \u062a\u0637\u0628\u064a\u0642\u0647 \u0645\u0628\u0627\u0634\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u0639\u0646\u0635\u0631 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0633\u0645\u0629 <code>style<\/code> \u062f\u0627\u062e\u0644 \u0648\u0633\u0645 HTML. \u0647\u0630\u0647 \u0627\u0644\u0637\u0631\u064a\u0642\u0629 \u062a\u0643\u0648\u0646 \u0645\u0641\u064a\u062f\u0629 \u0644\u062a\u0637\u0628\u064a\u0642 \u0623\u0646\u0645\u0627\u0637 \u0633\u0631\u064a\u0639\u0629 \u0623\u0648 \u0644\u062a\u0646\u0633\u064a\u0642 \u0639\u0646\u0635\u0631 \u0645\u0639\u064a\u0646 \u0628\u0634\u0643\u0644 \u0641\u0631\u062f\u064a. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>&lt;h1 style=\"color: red; text-align: center;\"&gt;\u0645\u0631\u062d\u0628\u064b\u0627 \u0628\u0627\u0644\u0639\u0627\u0644\u0645!&lt;\/h1&gt;<\/code> \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u062a\u0645 \u062a\u062d\u062f\u064a\u062f \u0644\u0648\u0646 \u0627\u0644\u0646\u0635 \u0628\u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u062d\u0645\u0631 \u0648\u0645\u062d\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635 \u0625\u0644\u0649 \u0627\u0644\u0645\u0646\u062a\u0635\u0641 \u0645\u0628\u0627\u0634\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u0639\u0646\u0635\u0631 <code>&lt;h1&gt;<\/code> \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 <code>style<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS \u0627\u0644\u062f\u0627\u062e\u0644\u064a (Internal CSS)<\/h3>\n\n\n\n<p>\u064a\u062a\u0645 \u0625\u062f\u0631\u0627\u062c CSS \u062f\u0627\u062e\u0644 \u0648\u0633\u0645 <code>&lt;style&gt;<\/code> \u0641\u064a \u0631\u0623\u0633 \u0627\u0644\u0635\u0641\u062d\u0629 HTML \u062f\u0627\u062e\u0644 \u0627\u0644\u0648\u0633\u0645 <code>&lt;head&gt;<\/code>. \u0647\u0630\u0627 \u0627\u0644\u0646\u0648\u0639 \u0645\u0646\u0627\u0633\u0628 \u0644\u0644\u0645\u0634\u0631\u0648\u0639\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629 \u0623\u0648 \u0639\u0646\u062f\u0645\u0627 \u062a\u0631\u063a\u0628 \u0641\u064a \u062a\u0646\u0638\u064a\u0645 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0644\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u062d\u0627\u0644\u064a\u0629 \u0641\u0642\u0637. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>&lt;head&gt; &lt;style&gt; body { background-color: #f0f0f0; } h1 { color: blue; } &lt;\/style&gt; &lt;\/head&gt;<\/code> \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u064a\u062a\u0645 \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0639\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 \u0645\u062e\u062a\u0644\u0641\u0629 \u0641\u064a \u0646\u0641\u0633 \u0627\u0644\u0635\u0641\u062d\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0648\u0633\u0645 <code>&lt;style&gt;<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS \u0627\u0644\u062e\u0627\u0631\u062c\u064a (External CSS)<\/h3>\n\n\n\n<p>\u0647\u0648 \u0627\u0644\u0623\u0643\u062b\u0631 \u0634\u064a\u0648\u0639\u064b\u0627 \u0648\u064a\u0633\u062a\u062e\u062f\u0645 \u0641\u064a \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0643\u0628\u064a\u0631\u0629. \u064a\u062a\u0645 \u0641\u0635\u0644 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0641\u064a \u0645\u0644\u0641 \u0645\u0646\u0641\u0635\u0644 \u0628\u0627\u0645\u062a\u062f\u0627\u062f <code>.css<\/code>\u060c \u062b\u0645 \u064a\u062a\u0645 \u0631\u0628\u0637 \u0647\u0630\u0627 \u0627\u0644\u0645\u0644\u0641 \u0628\u0627\u0644\u0635\u0641\u062d\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0648\u0633\u0645 <code>&lt;link&gt;<\/code>. \u0647\u0630\u0647 \u0627\u0644\u0637\u0631\u064a\u0642\u0629 \u062a\u0633\u0647\u0644 \u0627\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0627\u0644\u062a\u0646\u0638\u064a\u0645 \u0648\u062a\u0633\u0645\u062d \u0628\u0625\u0639\u0627\u062f\u0629 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0641\u064a \u0639\u062f\u0629 \u0635\u0641\u062d\u0627\u062a. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>&lt;head&gt; &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\"&gt; &lt;\/head&gt;<\/code> \u0648\u0641\u064a \u0645\u0644\u0641 <code>styles.css<\/code>: <code>body { font-family: Arial, sans-serif; background-color: #ffffff; } h1 { color: green; }<\/code> \u0647\u0646\u0627 \u064a\u062a\u0645 \u0631\u0628\u0637 \u0627\u0644\u0635\u0641\u062d\u0629 \u0628\u0645\u0644\u0641 CSS \u062e\u0627\u0631\u062c\u064a \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0647\u0627.<\/p>\n\n\n\n<p>\u0643\u0644 \u0646\u0648\u0639 \u0645\u0646 \u0647\u0630\u0647 \u0627\u0644\u0623\u0646\u0648\u0627\u0639 \u0644\u0647 \u0645\u0632\u0627\u064a\u0627 \u0648\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0627\u062a \u062e\u0627\u0635\u0629 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0637\u0628\u064a\u0639\u0629 \u0627\u0644\u0645\u0634\u0631\u0648\u0639.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0643\u062a\u0627\u0628\u0629 CSS<\/h2>\n\n\n\n<p>CSS \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0647\u064a\u0643\u0644 \u0628\u0633\u064a\u0637 \u064a\u0645\u0643\u0646 \u0623\u0646 \u064a\u062e\u062a\u0644\u0641 \u0628\u0634\u0643\u0644 \u0643\u0628\u064a\u0631 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u062a\u064a \u062a\u0631\u064a\u062f \u062a\u0637\u0628\u064a\u0642\u0647\u0627. \u0644\u0641\u0647\u0645 \u0643\u064a\u0641\u064a\u0629 \u0643\u062a\u0627\u0628\u0629 \u0623\u0643\u0648\u0627\u062f CSS\u060c \u064a\u062c\u0628 \u0623\u0646 \u062a\u0639\u0631\u0641 \u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0644\u0642\u0648\u0627\u0639\u062f \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 (CSS Rules)<\/h3>\n\n\n\n<p>\u0627\u0644\u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0641\u064a CSS \u062a\u062a\u0643\u0648\u0646 \u0645\u0646 <strong>\u0627\u0644\u0645\u062d\u062f\u062f (Selector)<\/strong> \u0648 <strong>\u0627\u0644\u062e\u0627\u0635\u064a\u0629 (Property)<\/strong> \u0648 <strong>\u0627\u0644\u0642\u064a\u0645\u0629 (Value)<\/strong>.<ul><li><strong>\u0627\u0644\u0645\u062d\u062f\u062f (Selector):<\/strong> \u0647\u0648 \u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u0630\u064a \u0646\u0631\u064a\u062f \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0639\u0644\u064a\u0647\u060c \u0645\u062b\u0644 <code>body<\/code> \u0623\u0648 <code>h1<\/code> \u0623\u0648 <code>.class-name<\/code>.<strong>\u0627\u0644\u062e\u0627\u0635\u064a\u0629 (Property):<\/strong> \u0647\u064a \u0627\u0644\u0646\u0645\u0637 \u0623\u0648 \u0627\u0644\u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0630\u064a \u0646\u0631\u064a\u062f \u062a\u0637\u0628\u064a\u0642\u0647\u060c \u0645\u062b\u0644 <code>color<\/code> \u0623\u0648 <code>font-size<\/code> \u0623\u0648 <code>background-color<\/code>.<strong>\u0627\u0644\u0642\u064a\u0645\u0629 (Value):<\/strong> \u0647\u064a \u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u062a\u064a \u0633\u064a\u062a\u0645 \u062a\u0637\u0628\u064a\u0642\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u062e\u0627\u0635\u064a\u0629\u060c \u0645\u062b\u0644 <code>red<\/code> \u0623\u0648 <code>16px<\/code> \u0623\u0648 <code>#fff<\/code>.<\/li><\/ul><strong>\u0645\u062b\u0627\u0644:<\/strong><code>p { color: blue; font-size: 14px; }<\/code> \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0645\u062b\u0627\u0644:<\/p>\n\n\n\n<p><code>p<\/code> \u0647\u0648 \u0627\u0644\u0645\u062d\u062f\u062f (\u0623\u064a \u0627\u0644\u0641\u0642\u0631\u0629).<\/p>\n\n\n\n<p><code>color<\/code> \u0648 <code>font-size<\/code> \u0647\u0645\u0627 \u0627\u0644\u062e\u0635\u0627\u0626\u0635.<\/p>\n\n\n\n<p><code>blue<\/code> \u0648 <code>14px<\/code> \u0647\u0645\u0627 \u0627\u0644\u0642\u064a\u0645.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0644\u0641\u0648\u0627\u0635\u0644 \u0628\u064a\u0646 \u0627\u0644\u062e\u0635\u0627\u0626\u0635<\/h3>\n\n\n\n<p>\u064a\u062a\u0645 \u0641\u0635\u0644 \u0643\u0644 \u062e\u0627\u0635\u064a\u0629 \u0639\u0646 \u0627\u0644\u0623\u062e\u0631\u0649 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0641\u0627\u0635\u0644\u0629 \u0627\u0644\u0645\u0646\u0642\u0648\u0637\u0629 <code>;<\/code>. \u0627\u0644\u0641\u0627\u0635\u0644\u0629 \u0636\u0631\u0648\u0631\u064a\u0629 \u0644\u062a\u062d\u062f\u064a\u062f \u0646\u0647\u0627\u064a\u0629 \u0643\u0644 \u062e\u0627\u0635\u064a\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0642\u0627\u0639\u062f\u0629.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0627\u062a (Grouping)<\/h3>\n\n\n\n<p>\u0625\u0630\u0627 \u0643\u0646\u062a \u062a\u0631\u064a\u062f \u062a\u0637\u0628\u064a\u0642 \u0646\u0641\u0633 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0639\u0644\u0649 \u0639\u062f\u0629 \u0639\u0646\u0627\u0635\u0631\u060c \u064a\u0645\u0643\u0646\u0643 \u062a\u062c\u0645\u064a\u0639\u0647\u0627 \u0645\u0639\u064b\u0627 \u0641\u064a \u0645\u062d\u062f\u062f \u0648\u0627\u062d\u062f\u060c \u0645\u0639 \u0641\u0635\u0644\u0647\u0627 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0641\u0627\u0635\u0644\u0629. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>h1, h2, h3 { color: green; }<\/code> \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u064a\u062a\u0645 \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u062e\u0636\u0631 \u0639\u0644\u0649 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 <code>h1<\/code> \u0648 <code>h2<\/code> \u0648 <code>h3<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0644\u062a\u0639\u0644\u064a\u0642\u0627\u062a (Comments)<\/h3>\n\n\n\n<p>\u064a\u0645\u0643\u0646\u0643 \u0625\u0636\u0627\u0641\u0629 \u062a\u0639\u0644\u064a\u0642\u0627\u062a \u062f\u0627\u062e\u0644 \u0643\u0648\u062f CSS \u0644\u0634\u0631\u062d \u0627\u0644\u0623\u062c\u0632\u0627\u0621 \u0623\u0648 \u062a\u0648\u0636\u064a\u062d \u0623\u064a \u0634\u064a\u0621 \u063a\u064a\u0631 \u0648\u0627\u0636\u062d. \u064a\u062a\u0645 \u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u062a\u0639\u0644\u064a\u0642\u0627\u062a \u0628\u064a\u0646 <code>\/*<\/code> \u0648 <code>*\/<\/code>. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>\/* \u0647\u0630\u0627 \u062a\u0639\u0644\u064a\u0642 \u064a\u0648\u0636\u062d \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0641\u0642\u0631\u0629 *\/ p { color: red; }<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0644\u062a\u0646\u0633\u064a\u0642\u0627\u062a \u0627\u0644\u0634\u0627\u0645\u0644\u0629 (Universal Selector)<\/h3>\n\n\n\n<p>\u0625\u0630\u0627 \u0643\u0646\u062a \u062a\u0631\u063a\u0628 \u0641\u064a \u062a\u0637\u0628\u064a\u0642 \u0646\u0645\u0637 \u0644\u062c\u0645\u064a\u0639 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0641\u064a \u0627\u0644\u0635\u0641\u062d\u0629\u060c \u064a\u0645\u0643\u0646\u0643 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0645\u062d\u062f\u062f \u0627\u0644\u0639\u0627\u0645 (<code>*<\/code>)\u060c \u0627\u0644\u0630\u064a \u0633\u064a\u0624\u062b\u0631 \u0639\u0644\u0649 \u0643\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0641\u064a \u0627\u0644\u0635\u0641\u062d\u0629. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>* { margin: 0; padding: 0; }<\/code> \u0647\u0630\u0627 \u0627\u0644\u0643\u0648\u062f \u0633\u064a\u0632\u064a\u0644 \u0627\u0644\u0647\u0627\u0645\u0634 \u0648\u0627\u0644\u062d\u0634\u0648 \u0645\u0646 \u062c\u0645\u064a\u0639 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0641\u064a \u0627\u0644\u0635\u0641\u062d\u0629.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0643\u064a\u0641\u064a\u0629 \u0625\u0636\u0627\u0641\u0629 CSS \u0625\u0644\u0649 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628<\/h2>\n\n\n\n<p>\u0647\u0646\u0627\u0643 \u0639\u062f\u0629 \u0637\u0631\u0642 \u0644\u0625\u0636\u0627\u0641\u0629 CSS \u0625\u0644\u0649 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628. \u064a\u0645\u0643\u0646\u0643 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u062a\u064a \u062a\u0646\u0627\u0633\u0628 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643 \u0648\u062a\u0635\u0645\u064a\u0645\u0643. \u0641\u064a\u0645\u0627 \u064a\u0644\u064a \u0623\u0628\u0631\u0632 \u0627\u0644\u0637\u0631\u0642:<\/p>\n\n\n\n<p><strong>\u0625\u0636\u0627\u0641\u0629 CSS \u062f\u0627\u062e\u0644 \u0645\u0644\u0641 HTML (Inline CSS):<\/strong><br>\u064a\u0645\u0643\u0646 \u0625\u0636\u0627\u0641\u0629 CSS \u0645\u0628\u0627\u0634\u0631\u0629 \u062f\u0627\u062e\u0644 \u0645\u0644\u0641 HTML \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0633\u0645\u0629 <code>style<\/code> \u062f\u0627\u062e\u0644 \u0627\u0644\u0639\u0646\u0635\u0631. \u062a\u0639\u062a\u0628\u0631 \u0647\u0630\u0647 \u0627\u0644\u0637\u0631\u064a\u0642\u0629 \u0645\u0646\u0627\u0633\u0628\u0629 \u0644\u062a\u0646\u0633\u064a\u0642 \u0639\u0646\u0635\u0631 \u0645\u0639\u064a\u0646 \u0628\u0633\u0631\u0639\u0629 \u062f\u0648\u0646 \u0627\u0644\u062d\u0627\u062c\u0629 \u0625\u0644\u0649 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0644\u0641\u0627\u062a \u062e\u0627\u0631\u062c\u064a\u0629. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>&lt;h1 style=\"color: blue; text-align: center;\"&gt;\u0645\u0631\u062d\u0628\u0627 \u0628\u0627\u0644\u0639\u0627\u0644\u0645&lt;\/h1&gt;<\/code><\/p>\n\n\n\n<p><strong>\u0625\u0636\u0627\u0641\u0629 CSS \u062f\u0627\u062e\u0644 \u0631\u0623\u0633 \u0627\u0644\u0635\u0641\u062d\u0629 (Internal CSS):<\/strong><br>\u064a\u0645\u0643\u0646\u0643 \u062a\u0636\u0645\u064a\u0646 CSS \u0641\u064a \u0627\u0644\u0635\u0641\u062d\u0629 HTML \u062f\u0627\u062e\u0644 \u0642\u0633\u0645 <code>&lt;head&gt;<\/code> \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0648\u0633\u0645 <code>&lt;style&gt;<\/code>. \u0647\u0630\u0647 \u0627\u0644\u0637\u0631\u064a\u0642\u0629 \u062c\u064a\u062f\u0629 \u0625\u0630\u0627 \u0643\u0646\u062a \u062a\u0631\u064a\u062f \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0639\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 \u0645\u062a\u0639\u062f\u062f\u0629 \u062f\u0627\u062e\u0644 \u0646\u0641\u0633 \u0627\u0644\u0635\u0641\u062d\u0629. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>&lt;head&gt; &lt;style&gt; body { font-family: Arial, sans-serif; background-color: #f4f4f4; } &lt;\/style&gt; &lt;\/head&gt;<\/code><\/p>\n\n\n\n<p><strong>\u0625\u0636\u0627\u0641\u0629 CSS \u0639\u0628\u0631 \u0645\u0644\u0641 \u062e\u0627\u0631\u062c\u064a (External CSS):<\/strong><br>\u0648\u0647\u064a \u0627\u0644\u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u0623\u0641\u0636\u0644 \u0641\u064a \u0645\u0639\u0638\u0645 \u0627\u0644\u062d\u0627\u0644\u0627\u062a\u060c \u062d\u064a\u062b \u064a\u0645\u0643\u0646\u0643 \u0641\u0635\u0644 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0639\u0646 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0644\u0641 CSS \u062e\u0627\u0631\u062c\u064a. \u0647\u0630\u0627 \u064a\u0633\u0647\u0644 \u0635\u064a\u0627\u0646\u0629 \u0627\u0644\u0643\u0648\u062f \u0648\u064a\u062c\u0639\u0644 \u0627\u0644\u0635\u0641\u062d\u0629 \u0623\u0633\u0631\u0639 \u0641\u064a \u0627\u0644\u062a\u062d\u0645\u064a\u0644. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\"&gt;<\/code> \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u064a\u0634\u064a\u0631 \u0648\u0633\u0645 <code>&lt;link&gt;<\/code> \u0625\u0644\u0649 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u062e\u0627\u0631\u062c\u064a \u0627\u0644\u0630\u064a \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0623\u0646\u0645\u0627\u0637 CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u062a\u0646\u0633\u064a\u0642 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS: \u0623\u0647\u0645 \u0627\u0644\u062e\u0635\u0627\u0626\u0635<\/h2>\n\n\n\n<p>CSS \u064a\u062a\u064a\u062d \u0644\u0643 \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0639\u062f\u064a\u062f \u0645\u0646 \u0627\u0644\u062c\u0648\u0627\u0646\u0628 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0648\u064a\u0628. \u0625\u0644\u064a\u0643 \u0628\u0639\u0636 \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0627\u0644\u062a\u064a \u0633\u062a\u0633\u0627\u0639\u062f\u0643 \u0641\u064a \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0646\u0633\u064a\u0642 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628:<\/p>\n\n\n\n<p><strong>\u0627\u0644\u062e\u0637\u0648\u0637 (Fonts):<\/strong><br>\u0644\u062a\u063a\u064a\u064a\u0631 \u0646\u0648\u0639 \u0627\u0644\u062e\u0637\u060c \u0627\u0644\u062d\u062c\u0645\u060c \u0623\u0648 \u0627\u0644\u0648\u0632\u0646\u060c \u064a\u0645\u0643\u0646\u0643 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062e\u0635\u0627\u0626\u0635 <code>font-family<\/code>\u060c <code>font-size<\/code>\u060c \u0648 <code>font-weight<\/code>. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>p { font-family: 'Arial', sans-serif; font-size: 16px; font-weight: bold; }<\/code><\/p>\n\n\n\n<p><strong>\u0627\u0644\u0623\u0644\u0648\u0627\u0646 (Colors):<\/strong><br>\u064a\u0645\u0643\u0646\u0643 \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0644\u0648\u0646 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062e\u0635\u0627\u0626\u0635 \u0645\u062b\u0644 <code>color<\/code> \u0644\u0644\u0646\u0635\u0648\u0635 \u0648 <code>background-color<\/code> \u0644\u0644\u062e\u0644\u0641\u064a\u0629. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>body { background-color: #f0f0f0; } h1 { color: blue; }<\/code><\/p>\n\n\n\n<p><strong>\u0627\u0644\u0647\u0648\u0627\u0645\u0634 (Margins) \u0648\u0627\u0644\u062d\u0634\u0648\u0627\u062a (Padding):<\/strong><br>\u064a\u0645\u0643\u0646 \u0627\u0644\u062a\u062d\u0643\u0645 \u0641\u064a \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u062d\u0648\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 <code>margin<\/code> (\u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u062d\u0648\u0644 \u0627\u0644\u0639\u0646\u0635\u0631) \u0648 <code>padding<\/code> (\u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0639\u0646\u0635\u0631). <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>.container { margin: 20px; padding: 10px; }<\/code><\/p>\n\n\n\n<p><strong>\u0627\u0644\u062a\u062e\u0637\u064a\u0637 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 Flexbox:<\/strong><br>Flexbox \u0647\u0648 \u0623\u062f\u0627\u0629 \u0642\u0648\u064a\u0629 \u0644\u0625\u0646\u0634\u0627\u0621 \u062a\u0635\u0645\u064a\u0645\u0627\u062a \u0645\u0631\u0646\u0629 \u0648\u0633\u0647\u0644\u0629 \u0627\u0644\u062a\u0639\u062f\u064a\u0644. \u064a\u0633\u0627\u0639\u062f \u0641\u064a \u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0645\u0633\u0627\u062d\u0627\u062a \u062f\u0627\u062e\u0644 \u0627\u0644\u062d\u0627\u0648\u064a\u0627\u062a \u0628\u0634\u0643\u0644 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>.flex-container { display: flex; justify-content: space-between; align-items: center; }<\/code><\/p>\n\n\n\n<p><strong>\u0627\u0644\u062a\u062e\u0637\u064a\u0637 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 Grid:<\/strong><br>Grid \u0647\u0648 \u0646\u0638\u0627\u0645 \u0622\u062e\u0631 \u0644\u062a\u0646\u0638\u064a\u0645 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0641\u064a \u0635\u0641\u0648\u0641 \u0648\u0623\u0639\u0645\u062f\u0629. \u064a\u0645\u0646\u062d\u0643 \u0645\u0631\u0648\u0646\u0629 \u0623\u0643\u0628\u0631 \u0641\u064a \u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0628\u0634\u0643\u0644 \u0645\u0639\u0642\u062f. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>.grid-container { display: grid; grid-template-columns: auto auto auto; gap: 10px; }<\/code><\/p>\n\n\n\n<div class=\"wp-block-columns shadow rounded has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#e3c2ff\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:15%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"185\" height=\"200\" src=\"https:\/\/planet-www.com\/marketing-tutorials\/wp-content\/uploads\/2024\/10\/Aesthetic-Planet-Phone-Wallpaper-1.png\" alt=\"\" class=\"wp-image-6117\" style=\"width:119px;height:auto\"\/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:85%\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex\">\n<p>\u0627\u0646\u0636\u0645 \u0644\u0645\u0632\u0627\u064a\u0627 \u0627\u0644\u0627\u0634\u062a\u0631\u0627\u0643 \u0627\u0644\u0645\u062f\u0641\u0648\u0639: \u0645\u0642\u0627\u0644\u0627\u062a \u0645\u0645\u064a\u0632\u0629\u060c \u062a\u062d\u0633\u064a\u0646 SEO\u060c \u0648\u0625\u062f\u0627\u0631\u0629 \u0645\u062d\u062a\u0648\u0649 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629!<\/p>\n<\/div>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-d68eae28 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-font-size is-style-fill has-medium-font-size\"><a class=\"wp-block-button__link has-background wp-element-button\" href=\"https:\/\/planet-www.com\/marketing-tutorials\/subscription\/\" style=\"border-radius:21px;background-color:#a138a1\">\u0627\u0634\u062a\u0631\u0643 \u0627\u0644\u0627\u0646<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 (Interactivity) \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS<\/h2>\n\n\n\n<p>\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0625\u0644\u0649 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u064a\u0639\u0632\u0632 \u0645\u0646 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645. \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS\u060c \u064a\u0645\u0643\u0646\u0643 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0639\u062f\u064a\u062f \u0645\u0646 \u0627\u0644\u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u0627\u0644\u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0639\u0646\u062f \u0627\u0644\u062a\u0645\u0631\u064a\u0631 (Hover Effects):<\/strong><br>\u064a\u0645\u0643\u0646\u0643 \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0639\u0646\u062f \u0645\u0631\u0648\u0631 \u0627\u0644\u0645\u0627\u0648\u0633 \u0641\u0648\u0642 \u0627\u0644\u0639\u0646\u0635\u0631 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062e\u0627\u0635\u064a\u0629 <code>:hover<\/code>. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>a:hover { color: red; text-decoration: underline; }<\/code><\/li>\n\n\n\n<li><strong>\u0627\u0644\u0627\u0646\u062a\u0642\u0627\u0644\u0627\u062a (Transitions):<\/strong><br>\u062a\u0633\u0627\u0639\u062f \u0627\u0644\u0627\u0646\u062a\u0642\u0627\u0644\u0627\u062a \u0641\u064a \u0625\u0636\u0627\u0641\u0629 \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0633\u0644\u0633\u0629 \u0639\u0646\u062f \u062a\u063a\u064a\u064a\u0631 \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0639\u0646\u0635\u0631\u060c \u0645\u062b\u0644 \u0627\u0644\u0644\u0648\u0646 \u0623\u0648 \u0627\u0644\u062d\u062c\u0645. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>button { transition: background-color 0.3s ease; } button:hover { background-color: blue; }<\/code><\/li>\n\n\n\n<li><strong>\u0627\u0644\u062a\u062d\u0648\u0644\u0627\u062a (Transforms):<\/strong><br>\u064a\u0645\u0643\u0646\u0643 \u062a\u062d\u0631\u064a\u0643\u060c \u062a\u062f\u0648\u064a\u0631\u060c \u0623\u0648 \u062a\u063a\u064a\u064a\u0631 \u062d\u062c\u0645 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062e\u0635\u0627\u0626\u0635 \u0645\u062b\u0644 <code>transform<\/code>. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>.box { transform: rotate(45deg); }<\/code><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u0623\u0641\u0636\u0644 \u0627\u0644\u0645\u0645\u0627\u0631\u0633\u0627\u062a \u0641\u064a \u0643\u062a\u0627\u0628\u0629 CSS<\/h2>\n\n\n\n<p>\u0644\u0643\u062a\u0627\u0628\u0629 \u0623\u0643\u0648\u0627\u062f CSS \u0628\u0634\u0643\u0644 \u0645\u0646\u0638\u0645 \u0648\u0641\u0639\u0627\u0644\u060c \u0625\u0644\u064a\u0643 \u0628\u0639\u0636 \u0627\u0644\u0646\u0635\u0627\u0626\u062d \u0627\u0644\u062a\u064a \u064a\u062c\u0628 \u0627\u062a\u0628\u0627\u0639\u0647\u0627:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u062a\u0646\u0638\u064a\u0645 \u0627\u0644\u0643\u0648\u062f:<\/strong><br>\u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u062a\u0639\u0644\u064a\u0642\u0627\u062a \u0644\u062a\u0646\u0638\u064a\u0645 \u0627\u0644\u0643\u0648\u062f \u0648\u062a\u0648\u0636\u064a\u062d \u0643\u0644 \u062c\u0632\u0621. \u0642\u0633\u0645 \u0627\u0644\u0643\u0648\u062f \u0625\u0644\u0649 \u0623\u0642\u0633\u0627\u0645 \u0645\u062b\u0644 \u0627\u0644\u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0639\u0627\u0645\u060c \u0627\u0644\u0623\u0644\u0648\u0627\u0646\u060c \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0627\u0644\u0639\u0646\u0627\u0635\u0631\u060c \u0625\u0644\u062e.<\/li>\n\n\n\n<li><strong>\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0640 Classes \u0648\u0627\u0644\u0640 IDs \u0628\u0630\u0643\u0627\u0621:<\/strong><br>\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0640 classes \u064a\u0633\u0645\u062d \u0628\u062a\u0637\u0628\u064a\u0642 \u0646\u0641\u0633 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0639\u0644\u0649 \u0627\u0644\u0639\u062f\u064a\u062f \u0645\u0646 \u0627\u0644\u0639\u0646\u0627\u0635\u0631\u060c \u0628\u064a\u0646\u0645\u0627 \u0627\u0644\u0640 IDs \u062a\u0643\u0648\u0646 \u0645\u062e\u0635\u0635\u0629 \u0644\u0639\u0646\u0635\u0631 \u0648\u0627\u062d\u062f.<\/li>\n\n\n\n<li><strong>\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a (CSS Variables):<\/strong><br>\u064a\u0645\u0643\u0646\u0643 \u062a\u0639\u0631\u064a\u0641 \u0642\u064a\u0645 \u0645\u062a\u063a\u064a\u0631\u0629 \u0644\u062a\u0633\u0647\u064a\u0644 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0623\u0644\u0648\u0627\u0646\u060c \u0627\u0644\u0623\u062d\u062c\u0627\u0645\u060c \u0623\u0648 \u0623\u064a \u0642\u064a\u0645\u0629 \u0645\u0643\u0631\u0631\u0629. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>:root { --main-color: blue; } p { color: var(--main-color); }<\/code><\/li>\n\n\n\n<li><strong>\u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0643\u0648\u062f \u0639\u0644\u0649 \u0645\u062e\u062a\u0644\u0641 \u0627\u0644\u0623\u062c\u0647\u0632\u0629:<\/strong><br>\u062a\u0623\u0643\u062f \u0645\u0646 \u0623\u0646 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u062a\u0639\u0645\u0644 \u0628\u0634\u0643\u0644 \u062c\u064a\u062f \u0639\u0644\u0649 \u0645\u062e\u062a\u0644\u0641 \u0627\u0644\u0623\u062c\u0647\u0632\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 <strong>Media Queries<\/strong> \u0644\u062a\u062e\u0635\u064a\u0635 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0644\u0644\u0639\u0631\u0636 \u0639\u0644\u0649 \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629 \u0648\u0627\u0644\u0643\u0628\u064a\u0631\u0629. <strong>\u0645\u062b\u0627\u0644:<\/strong> <code>@media (max-width: 768px) { body { font-size: 14px; } }<\/code><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u062e\u0627\u062a\u0645\u0629<\/strong><\/h2>\n\n\n\n<p>\u0641\u064a \u0627\u0644\u062e\u062a\u0627\u0645\u060c \u064a\u0639\u062a\u0628\u0631 <strong>\u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS<\/strong> \u0645\u0646 \u0627\u0644\u0645\u0647\u0627\u0631\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0623\u064a \u0645\u0637\u0648\u0631 \u0648\u064a\u0628. \u0645\u0646 \u062e\u0644\u0627\u0644 \u062a\u0639\u0644\u0645 \u062e\u0635\u0627\u0626\u0635 CSS \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0648\u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0645\u0639\u0647\u0627\u060c \u064a\u0645\u0643\u0646\u0643 \u062a\u062d\u0633\u064a\u0646 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0648\u062c\u0639\u0644 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0623\u0643\u062b\u0631 \u062c\u0645\u0627\u0644\u064b\u0627 \u0648\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629. \u0644\u0627 \u062a\u062a\u0648\u0642\u0641 \u0647\u0646\u0627\u060c \u0627\u0633\u062a\u0645\u0631 \u0641\u064a \u0627\u0644\u062a\u0639\u0644\u0645 \u0648\u0627\u0633\u062a\u0643\u0634\u0627\u0641 \u062a\u0642\u0646\u064a\u0627\u062a \u062c\u062f\u064a\u062f\u0629 \u0644\u062a\u062d\u0633\u064a\u0646 \u0645\u0647\u0627\u0631\u0627\u062a\u0643 \u0641\u064a \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0633\u0646\u062a\u0646\u0627\u0648\u0644 \u0623\u0647\u0645 \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0648\u0627\u0644\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u062a\u064a \u064a\u0642\u062f\u0645\u0647\u0627 CSS\u060c \u0648\u0643\u064a\u0641\u064a\u0629 \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0647\u0627 \u0644\u0625\u0636\u0641\u0627\u0621 \u0627\u0644\u062c\u0645\u0627\u0644 \u0648\u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0639\u0644\u0649 \u0623\u064a \u0645\u0634\u0631\u0648\u0639 \u0648\u064a\u0628.<\/p>\n","protected":false},"author":1213,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6419","post","type-post","status-publish","format-standard","hentry","category-daily-news"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/planet-www.com\/marketing-tutorials\/wp-json\/wp\/v2\/posts\/6419","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planet-www.com\/marketing-tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planet-www.com\/marketing-tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planet-www.com\/marketing-tutorials\/wp-json\/wp\/v2\/users\/1213"}],"replies":[{"embeddable":true,"href":"https:\/\/planet-www.com\/marketing-tutorials\/wp-json\/wp\/v2\/comments?post=6419"}],"version-history":[{"count":3,"href":"https:\/\/planet-www.com\/marketing-tutorials\/wp-json\/wp\/v2\/posts\/6419\/revisions"}],"predecessor-version":[{"id":6425,"href":"https:\/\/planet-www.com\/marketing-tutorials\/wp-json\/wp\/v2\/posts\/6419\/revisions\/6425"}],"wp:attachment":[{"href":"https:\/\/planet-www.com\/marketing-tutorials\/wp-json\/wp\/v2\/media?parent=6419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planet-www.com\/marketing-tutorials\/wp-json\/wp\/v2\/categories?post=6419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planet-www.com\/marketing-tutorials\/wp-json\/wp\/v2\/tags?post=6419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}