{"id":1616,"date":"2021-10-08T20:14:18","date_gmt":"2021-10-08T16:44:18","guid":{"rendered":"https:\/\/behnudi.ir\/?p=1616"},"modified":"2025-01-25T19:45:53","modified_gmt":"2025-01-25T16:15:53","slug":"web22-units","status":"publish","type":"post","link":"https:\/\/behnudi.ir\/?p=1616","title":{"rendered":"\u0637\u0631\u0627\u062d\u06cc \u0648\u0628: \u06f2- \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0647\u0627"},"content":{"rendered":"<p>\u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06af\u06cc\u0631\u06cc \u062f\u0631 CSS \u0628\u0633\u06cc\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631\u062f \u062f\u0627\u0631\u062f. \u0686\u0648\u0646 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u067e\u0631\u0627\u067e\u0631\u062a\u06cc\u200c\u0647\u0627\u06cc \u06cc\u06a9 \u0627\u0644\u0645\u0646\u062a HTML \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0627\u06cc \u0631\u0627 \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0648 \u062f\u0627\u062f\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u06cc\u06a9 \u0686\u06cc\u0632 \u0628\u0647 \u0635\u0648\u0631\u062a \u06cc\u06a9 \u0639\u062f\u062f \u0628\u062f\u0648\u0646 \u0648\u0627\u062d\u062f\u060c \u0628\u06cc\u200c\u0641\u0627\u06cc\u062f\u0647 \u0627\u0633\u062a. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0645\u0648\u0646\u0647 \u0627\u06af\u0631 \u0634\u0645\u0627 \u0628\u062e\u0648\u0627\u0647\u06cc\u062f width \u06cc\u06a9 \u0639\u06a9\u0633 \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f\u060c \u0648 \u062a\u0646\u0647\u0627 \u06cc\u06a9 \u0639\u062f\u062f \u0628\u062f\u0647\u06cc\u062f (\u0645\u062b\u0644\u0627 \u06f2\u06f0) \u0648 \u0648\u0627\u062d\u062f \u0622\u0646 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0646\u06a9\u0646\u06cc\u062f\u060c \u0646\u0648\u0634\u062a\u0646 \u0627\u06cc\u0646 \u0639\u062f\u062f \u0647\u06cc\u0686 \u0627\u0631\u0632\u0634\u06cc \u0646\u062f\u0627\u0631\u062f. \u067e\u0633 \u062a\u0639\u06cc\u06cc\u0646 \u0648\u0627\u062d\u062f \u0628\u0631\u0627\u06cc \u0645\u0639\u0646\u0627 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0627\u0639\u062f\u0627\u062f \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a.<!--more--><\/p>\n<p>\u067e\u0631\u0627\u067e\u0631\u062a\u06cc\u200c\u0647\u0627\u06cc \u0628\u0633\u06cc\u0627\u0631\u06cc \u0628\u0647 \u062a\u0639\u06cc\u06cc\u0646 \u0648\u0627\u062d\u062f \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u0646\u062f. \u0627\u0632 \u062c\u0645\u0644\u0647:<\/p>\n<p dir=\"ltr\">width, Height, margin, padding, border, border-radius, shadow, font-size, &#8230;<\/p>\n<p>\u0648\u0627\u062d\u062f\u0647\u0627 \u0628\u0647 \u062f\u0648 \u0646\u0648\u0639 \u0627\u0635\u0644\u06cc \u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0645\u06cc\u200c\u0634\u0648\u0646\u062f:<\/p>\n<ul>\n<li>\u0645\u0637\u0644\u0642 &#8211; Absolute<\/li>\n<li>\u0646\u0633\u0628\u06cc &#8211; Relative<\/li>\n<\/ul>\n<h3>\u0645\u0637\u0644\u0642 &#8211; Absolute<\/h3>\n<p>\u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06af\u06cc\u0631\u06cc \u0645\u0637\u0644\u0642 \u0628\u0647 \u0686\u06cc\u0632 \u062f\u06cc\u06af\u0631\u06cc \u0648\u0627\u0628\u0633\u062a\u0647 \u0646\u06cc\u0633\u062a.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1252\" src=\"https:\/\/behnudi.ir\/f\/web2\/02\/img\/css-units-absolute.png\" width=\"640\" \/><\/p>\n<ul dir=\"ltr\" style=\"text-align: left;\">\n<li><mark>px<\/mark>\u00a0(pixels) : 1 px = 1\/96 of 1 inch<\/li>\n<li><mark>pt<\/mark>\u00a0(points) : 1 pt = 1\/72 of 1 inch<\/li>\n<li><mark>pc<\/mark>\u00a0(picas) : 1 pc = 1\/6 of 1 inch<\/li>\n<\/ul>\n<ul dir=\"ltr\" style=\"text-align: left;\">\n<li><mark>in<\/mark>\u00a0(inch) : 1 in = 25.4 mm<\/li>\n<li><mark>cm<\/mark>\u00a0(centimeter) : 1 cm = 10 mm<\/li>\n<li><mark>mm<\/mark>\u00a0(millimeter)<\/li>\n<\/ul>\n<h3>\u0646\u0633\u0628\u06cc &#8211; Relative<\/h3>\n<p>\u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06af\u06cc\u0631\u06cc \u0646\u0633\u0628\u06cc \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u067e\u0646\u062c\u0631\u0647 \u0628\u0631\u0648\u0632\u0631\u060c \u0627\u0644\u0645\u0646\u062a \u067e\u0631\u0646\u062a\u060c \u0641\u0648\u0646\u062a \u06cc\u0627 \u0686\u06cc\u0632 \u062f\u06cc\u06af\u0631\u06cc \u0648\u0627\u0628\u0633\u062a\u0647 \u0627\u0633\u062a.<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1253\" src=\"https:\/\/behnudi.ir\/f\/web2\/02\/img\/css-units-relative.png\" width=\"640\" \/><\/p>\n<ul dir=\"ltr\" style=\"text-align: left;\">\n<li><mark>%<\/mark>\u00a0(Percent) : Relative to the parent element<\/li>\n<\/ul>\n<ul dir=\"ltr\" style=\"text-align: left;\">\n<li><mark>em<\/mark>\u00a0: 1 em = font-size of the element<\/li>\n<li><mark>rem<\/mark>\u00a0: 1 rem = font-size of the root element<\/li>\n<\/ul>\n<ul dir=\"ltr\" style=\"text-align: left;\">\n<li><mark>vw<\/mark>\u00a0: 1 vw = 1% viewport width<\/li>\n<li><mark>vh<\/mark>\u00a0: 1 vh = 1% viewport height<\/li>\n<li><mark>vmin<\/mark>\u00a0: 1 vmin = 1% smaller length of vw or vh<\/li>\n<li><mark>vmax<\/mark>\u00a0: 1 vmax = 1% larger length of vw or vh<\/li>\n<\/ul>\n<h4>\u062f\u0631\u0635\u062f %<\/h4>\n<p>\u0648\u0627\u062d\u062f % \u0647\u0631 \u062c\u0627\u06cc\u06cc \u0645\u0639\u0646\u0627\u06cc \u062e\u0648\u062f\u0634 \u0631\u0627 \u062f\u0627\u0631\u062f:<\/p>\n<ul>\n<li>font-size: \u0646\u0633\u0628\u062a \u0628\u0647 font-size \u067e\u0631\u0646\u062a<\/li>\n<li>width: \u0646\u0633\u0628\u062a \u0628\u0647 width \u067e\u0631\u0646\u062a<\/li>\n<li>height: \u0646\u0633\u0628\u062a \u0628\u0647 height \u067e\u0631\u0646\u062a<\/li>\n<li>\u00a0&#8230;<\/li>\n<\/ul>\n<h4>em \/ rem<\/h4>\n<p>\u062d\u0631\u0641 M \u0627\u06af\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a Capital \u0646\u0648\u0634\u062a\u0647 \u0634\u0648\u062f\u060c \u0637\u0648\u0644 \u0648 \u0639\u0631\u0636 \u0622\u0646 \u0645\u0633\u0627\u0648\u06cc \u0627\u0633\u062a. \u0648 \u062f\u0631\u0648\u0646 \u06cc\u06a9 \u0645\u0631\u0628\u0639 \u0631\u0627 \u067e\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u0646\u062f\u0627\u0632\u0647 \u0636\u0644\u0639 \u0627\u06cc\u0646 \u0645\u0631\u0628\u0639 \u0631\u0627 \u06cc\u06a9 em \u0645\u06cc\u200c\u06af\u0648\u06cc\u0646\u062f. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062f\u0631 \u0647\u0631 \u0627\u0644\u0645\u0646\u062a\u06cc 1em \u0628\u0631\u0627\u0628\u0631 font-size \u0647\u0645\u0627\u0646 \u0627\u0644\u0645\u0646\u062a \u0627\u0633\u062a. \u0648 \u0627\u0646\u062f\u0627\u0632\u0647\u00a0 1em \u062f\u0631 \u06cc\u06a9 \u0627\u0644\u0645\u0646\u062a \u0628\u0627 \u06cc\u06a9 \u0627\u0644\u0645\u0646\u062a \u062f\u06cc\u06af\u0631 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0645\u062a\u0641\u0627\u0648\u062a \u0628\u0627\u0634\u062f. \u0627\u06af\u0631 \u0628\u0631\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647 font-size \u0627\u0632 \u0627\u06cc\u0646 \u0648\u0627\u062d\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f\u060c \u0628\u0631\u0627\u0633\u0627\u0633 font-size \u067e\u0631\u0646\u062a \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1266\" src=\"https:\/\/behnudi.ir\/f\/web2\/02\/img\/font-height.png\" alt=\"\" width=\"498\" height=\"198\" \/><\/p>\n<p>\u0648 \u0627\u0645\u0627 rem \u06a9\u0648\u062a\u0627\u0647 \u0634\u062f\u0647 root em \u0627\u0633\u062a. \u0648 root \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u0631\u06cc\u0634\u0647 \u0627\u0633\u062a \u0648 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0646\u0638\u0648\u0631 \u0627\u0644\u0645\u0646\u062a html \u0627\u0633\u062a. \u06a9\u0647 \u0647\u0645\u0647 \u0627\u0644\u0645\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631\u0628\u0631\u0645\u06cc\u200c\u06af\u06cc\u0631\u062f. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 1rem \u0647\u0645\u0647 \u062c\u0627 \u0628\u0627 \u0647\u0645 \u0628\u0631\u0627\u0628\u0631 \u0627\u0633\u062a. \u0648 \u0628\u0631\u0627\u0628\u0631\u0627\u0633\u062a \u0628\u0627 font-size \u0627\u0644\u0645\u0646\u062a html.<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1254\" src=\"https:\/\/behnudi.ir\/f\/web2\/02\/img\/em-vs-rem.png\" width=\"640\" \/><br \/>\n\u0646\u06a9\u062a\u0647\u200c\u200c\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a:<\/p>\n<ul>\n<li>\u062f\u0631 \u0627\u0644\u0645\u0646\u062a html \u0648\u0627\u062d\u062f em \u06cc\u0627 rem \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0631 \u0646\u0628\u0631\u06cc\u062f.<\/li>\n<li>\u062f\u0631 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0645\u062b\u0644 header \u06cc\u0627 footer \u06cc\u0627 &#8230; \u0627\u0632 \u0648\u0627\u062d\u062f rem \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u062f\u0631 \u062c\u0627\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 em \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<blockquote><p>\u0633\u0639\u06cc \u06a9\u0646\u06cc\u062f \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0631 \u0686\u06cc\u0632 \u062f\u0631 \u0647\u0631 \u062c\u0627\u06cc\u06cc \u0627\u0632 \u0648\u0627\u062d\u062f em \u06cc\u0627 rem \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u06af\u0631 \u0628\u062e\u0648\u0627\u0647\u06cc\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u062f\u0631\u0634\u062a\u200c\u062a\u0631 \u06cc\u0627 \u0631\u06cc\u0632\u062a\u0631 \u06a9\u0646\u06cc\u062f\u060c \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f. \u062a\u0646\u0647\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a html \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/p><\/blockquote>\n<div class=\"code-header\">CSS<\/div>\n<pre><code class=\"css\">\r\n\/* Root *\/\r\nhtml {font-size: 16px;}\r\n\r\n\/* Components *\/\r\nheader {font-size: 1.5rem;}\r\nfooter {font-size: 0.75rem;}\r\nmain {font-size: 1.0rem;}\r\n\r\n\/* Text Elements *\/\r\np {font-size: 1em;}\r\n\r\nh1 {font-size: 2em;}\r\nh2 {font-size: 1.5em;}\r\nh3 {font-size: 1.17em;}\r\nh4 {font-size: 1em;}\r\nh5 {font-size: .83em;}\r\nh6 {font-size: .75em;}\r\n\r\np,h1,h2,h3,h4,h5 {\r\n    margin-top: .5em;\r\n    margin-bottom: .25em;\r\n}\r\n\r\n<\/code><\/pre>\n<h4>\u0648\u06cc\u0648\u067e\u0648\u0631\u062a Viewport<\/h4>\n<p>\u0648\u06cc\u0648\u067e\u0648\u0631\u062a \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc <strong>\u06af\u0633\u062a\u0631\u0647 \u062f\u06cc\u062f\u06af\u0627\u0647<\/strong> \u0627\u0633\u062a. \u06cc\u0639\u0646\u06cc \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u0633\u0627\u06cc\u062a \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647\u200c \u0645\u06cc\u200c\u0634\u0648\u062f. (\u0641\u0636\u0627\u06cc \u062f\u0631\u0648\u0646\u06cc \u067e\u0646\u062c\u0631\u0647 \u0628\u0631\u0648\u0632\u0631) \u0648\u06cc\u0648\u067e\u0648\u0631\u062a \u06cc\u06a9 \u0645\u0633\u062a\u0637\u06cc\u0644 \u0627\u0633\u062a \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0647\u0645\u06cc\u0634\u0647 width \u0648 height \u062f\u0627\u0631\u062f.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1255\" src=\"https:\/\/behnudi.ir\/f\/web2\/02\/img\/css-viewport.jpg\" width=\"640\" \/><\/p>\n<p>\u06f1- <strong>vw<\/strong>: \u0645\u0642\u062f\u0627\u0631\u00a0 100vw \u0628\u0631\u0627\u0628\u0631 \u0627\u0633\u062a \u0628\u0627 width \u0648\u06cc\u0648\u067e\u0648\u0631\u062a.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1256\" src=\"https:\/\/behnudi.ir\/f\/web2\/02\/img\/vw.png\" width=\"640\" \/><\/p>\n<p>\u06f2- <strong>vh<\/strong>: \u0645\u0642\u062f\u0627\u0631\u00a0 100vh \u0628\u0631\u0627\u0628\u0631 \u0627\u0633\u062a \u0628\u0627 height \u0648\u06cc\u0648\u067e\u0648\u0631\u062a.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1257\" src=\"https:\/\/behnudi.ir\/f\/web2\/02\/img\/vh.png\" width=\"640\" \/><\/p>\n<p>\u06f3- <strong>vmin<\/strong>: \u0645\u0642\u062f\u0627\u0631\u00a0 100vmin \u0628\u0631\u0627\u0628\u0631 \u0627\u0633\u062a \u0628\u0627 width \u06cc\u0627 height \u0648\u06cc\u0648\u067e\u0648\u0631\u062a\u060c \u0647\u0631\u06a9\u062f\u0627\u0645 \u06a9\u0648\u0686\u06a9\u062a\u0631 \u0627\u0633\u062a.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1258\" src=\"https:\/\/behnudi.ir\/f\/web2\/02\/img\/vmin.png\" width=\"640\" \/><\/p>\n<p>\u06f4- <strong>vmax<\/strong>: \u0645\u0642\u062f\u0627\u0631\u00a0 100vmax \u0628\u0631\u0627\u0628\u0631 \u0627\u0633\u062a \u0628\u0627 width \u06cc\u0627 height \u0648\u06cc\u0648\u067e\u0648\u0631\u062a\u060c \u0647\u0631\u06a9\u062f\u0627\u0645 \u0628\u0632\u0631\u06af\u062a\u0631 \u0627\u0633\u062a.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1259\" src=\"https:\/\/behnudi.ir\/f\/web2\/02\/img\/vmax.png\" width=\"640\" \/><\/p>\n<h4>\u0645\u062b\u0627\u0644<\/h4>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u06cc\u06a9 \u0645\u0631\u0628\u0639 \u062f\u0631 \u0645\u06cc\u0627\u0646 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f. \u0648 \u0628\u0627 \u0628\u0632\u0631\u06af \u0648 \u06a9\u0648\u0686\u06a9 \u06a9\u0631\u062f\u0646 \u067e\u0646\u062c\u0631\u0647 \u0628\u0631\u0648\u0632\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u0645\u0631\u0628\u0639 \u0646\u06cc\u0632 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f.<\/p>\n<div class=\"code-header\">CSS<\/div>\n<pre><code class=\"css\">\r\nmain {\r\n    margin: 10vmin;\r\n    width: 80vmin;\r\n    height: 80vmin;\r\n}\r\n\r\n<\/code><\/pre>\n<p><iframe loading=\"lazy\" dir=\"ltr\" style=\"resize: both;\" src=\"https:\/\/behnudi.ir\/f\/web2\/02\/01\/\" width=\"640\" height=\"480\"><\/iframe><br \/>\n\u06af\u0648\u0634\u0647 \u0641\u0631\u06cc\u0645 \u0628\u0627\u0644\u0627 \u0631\u0627 \u0628\u06af\u06cc\u0631\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0632\u0631\u06af \u0648 \u06a9\u0648\u0686\u06a9 \u06a9\u0646\u06cc\u062f \u0648 \u0646\u062a\u06cc\u062c\u0647 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f.<\/p>\n<hr \/>\n<h4>\u062a\u0645\u0631\u06cc\u0646 \u06f1<\/h4>\n<ul>\n<li>\u0627\u06cc\u0646\u00a0<a href=\"https:\/\/behnudi.ir\/f\/web2\/02\/02-1.zip\">\u0641\u0627\u06cc\u0644<\/a>\u00a0\u0631\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0622\u0646 \u0631\u0627 \u062f\u0631 \u0641\u0648\u0644\u062f\u0631 web2 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u062f\u0631 \u0622\u0646 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a\u06cc \u0628\u062f\u0647\u06cc\u062f \u062a\u0627 \u0639\u06a9\u0633 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0647\u0645\u0627\u0646\u0646\u062f \u062a\u0635\u0648\u06cc\u0631 \u0632\u06cc\u0631 \u062f\u0631 \u0648\u0633\u0637 \u0635\u0641\u062d\u0647 \u0628\u0627\u0634\u062f. \u0648 \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0631\u0648\u0632\u0631 \u06a9\u0648\u0686\u06a9 \u0648 \u0628\u0632\u0631\u06af \u0634\u0648\u062f.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1249\" src=\"https:\/\/behnudi.ir\/f\/web2\/02\/img\/02-1.jpg\" \/><\/p>\n<hr \/>\n<h3>\u0645\u062a\u063a\u06cc\u0631\u0647\u0627 &#8211; Variables<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-769\" src=\"https:\/\/behnudi.ir\/f\/web2\/02\/img\/var.png\" alt=\"\" width=\"400\" \/><\/p>\n<h5>\u062a\u0639\u0631\u06cc\u0641:<\/h5>\n<div class=\"code-header\">CSS<\/div>\n<pre><code class=\"css\">\r\nelement {\r\n    --main-bg-color: brown;\r\n}\r\n\r\n<\/code><\/pre>\n<h5>\u0627\u0633\u062a\u0641\u0627\u062f\u0647:<\/h5>\n<div class=\"code-header\">CSS<\/div>\n<pre><code class=\"css\">\r\nelement {\r\n    background-color: var(--main-bg-color);\r\n}\r\n\r\n<\/code><\/pre>\n<h4>\u0648\u0631\u0627\u062b\u062a Inheritance<\/h4>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1260\" src=\"https:\/\/behnudi.ir\/f\/web2\/02\/img\/inheritance.jpg\" \/><\/p>\n<div class=\"code-header\">HTML<\/div>\n<pre><code class=\"html\">\r\n&lt;div class=\"one\"&gt;\r\n    &lt;div class=\"two\"&gt;\r\n        &lt;div class=\"three\"&gt;&lt;\/div&gt;\r\n        &lt;div class=\"four\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n<\/code><\/pre>\n<div class=\"code-header\">CSS<\/div>\n<pre><code class=\"css\">\r\n.two {\r\n    --test: 10px;\r\n}\r\n\r\n.three {\r\n    --test: 16px;\r\n}\r\n\r\n<\/code><\/pre>\n<p><b>The results of var(&#8211;test) for class:<\/b><\/p>\n<ul dir=\"ltr\" style=\"text-align: left;\">\n<li><mark>.one<\/mark> &#8211; invalid<\/li>\n<li><mark>.two<\/mark> &#8211; 10px<\/li>\n<li><mark>.three<\/mark> &#8211; 16px<\/li>\n<li><mark>.four<\/mark> &#8211; 10px (inherited)<\/li>\n<\/ul>\n<h4>Fallback Values<\/h4>\n<div class=\"code-header\">CSS<\/div>\n<pre><code class=\"css\">\r\n.two {\r\n    \/* Red if --my-var is not defined *\/\r\n    color: var(--my-var, red);\r\n}\r\n\r\n.three {\r\n    \/* pink if my-var and --my-background are not defined *\/\r\n    background-color: var(--my-var, var(--my-background, pink));\r\n}\r\n\r\n<\/code><\/pre>\n<h3>\u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0646\u0627\u0645\u0639\u062a\u0628\u0631<\/h3>\n<div class=\"code-header\">CSS<\/div>\n<pre><code class=\"css\">\r\n:root { --text-color: 16px; }\r\n\r\np {\r\n    color: blue;  \r\n    color: var(--text-color);\r\n}\r\n\r\n<\/code><\/pre>\n<div dir=\"ltr\">This paragraph is initial black.The <mark>invalid<\/mark> value is replaced by<br \/>\nthe <mark>inherited<\/mark> value.<br \/>\nif doesn&#8217;t have,<br \/>\nthe <mark>initial<\/mark> value is used.<\/div>\n<hr \/>\n<h4>\u062a\u0645\u0631\u06cc\u0646 \u06f2<\/h4>\n<ul>\n<li>\u0627\u06cc\u0646\u00a0<a href=\"https:\/\/behnudi.ir\/f\/web2\/02\/02-2.zip\">\u0641\u0627\u06cc\u0644<\/a>\u00a0\u0631\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0622\u0646 \u0631\u0627 \u062f\u0631 \u0641\u0648\u0644\u062f\u0631 web2 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0627\u0632 variable \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u060c \u062a\u0627 \u0639\u06a9\u0633 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0647\u0645\u0627\u0646\u0646\u062f \u062a\u0635\u0648\u06cc\u0631 \u0632\u06cc\u0631 \u062f\u0631 \u0648\u0633\u0637 \u0635\u0641\u062d\u0647 \u0628\u0627\u0634\u062f.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1249\" src=\"https:\/\/behnudi.ir\/f\/web2\/02\/img\/02-1.jpg\" \/><\/p>\n<hr \/>\n<h4>\u0645\u062d\u0627\u0633\u0628\u0627\u062a<\/h4>\n<p><b>Operators:<\/b><\/p>\n<ul dir=\"ltr\" style=\"text-align: left;\">\n<li><mark>+<\/mark> Addition<\/li>\n<li><mark>&#8211;<\/mark> Subtraction<\/li>\n<li><mark>*<\/mark> Multiplication<\/li>\n<li><mark>\/<\/mark> Division<\/li>\n<\/ul>\n<p><b>Values:<\/b><\/p>\n<ul dir=\"ltr\" style=\"text-align: left;\">\n<li><mark>number<\/mark><\/li>\n<li><mark>percentage<\/mark><\/li>\n<li><mark>angle<\/mark><\/li>\n<li><mark>time<\/mark><\/li>\n<\/ul>\n<h3>calc( ) Examples<\/h3>\n<div class=\"code-header\">CSS<\/div>\n<pre><code class=\"css\">\r\nelement {\r\n    margin-left: calc(50% + 20px);\r\n    width: calc(50% - 3em);\r\n    font-size: calc(1.5rem + 3vw);\r\n    width: calc(40% + 20px - 1em);\r\n    height: calc(100vh \/ 7 * 3);\r\n    width: calc((100% + 60px) \/ 3);\r\n\r\n    --ht: 4em;\r\n    height: calc(var(--ht) + 7px);\r\n\r\n}\r\n\r\n<\/code><\/pre>\n<h3>Example: Position Background Image<\/h3>\n<p><code>css<\/code><\/p>\n<pre><code class=\"css\">\r\nelement {\r\n    background-position: calc(100% - 20px) calc(100% - 20px);\r\n}\r\n\r\n<\/code><\/pre>\n<p><iframe loading=\"lazy\" dir=\"ltr\" style=\"resize: both;\" src=\"https:\/\/behnudi.ir\/f\/web2\/02\/02\/\" width=\"640\" height=\"480\"><\/iframe><br \/>\n\u06af\u0648\u0634\u0647 \u0641\u0631\u06cc\u0645 \u0628\u0627\u0644\u0627 \u0631\u0627 \u0628\u06af\u06cc\u0631\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0632\u0631\u06af \u0648 \u06a9\u0648\u0686\u06a9 \u06a9\u0646\u06cc\u062f \u0648 \u0646\u062a\u06cc\u062c\u0647 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f.<\/p>\n<hr \/>\n<h4>\u062a\u0645\u0631\u06cc\u0646 \u06f3<\/h4>\n<ul>\n<li>\u0627\u06cc\u0646\u00a0<a href=\"https:\/\/behnudi.ir\/f\/web2\/02\/02-3.zip\">\u0641\u0627\u06cc\u0644<\/a>\u00a0\u0631\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0622\u0646 \u0631\u0627 \u062f\u0631 \u0641\u0648\u0644\u062f\u0631 web2 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0628\u0627 \u0631\u0648\u0634 \u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a\u06cc \u062f\u0631 \u0622\u0646 \u0628\u062f\u0647\u06cc\u062f \u062a\u0627 \u0647\u0645\u0627\u0646\u0646\u062f \u0648\u06cc\u062f\u06cc\u0648\u06cc \u0632\u06cc\u0631 \u0647\u0645\u06cc\u0634\u0647 \u062f\u0631 \u0645\u0631\u06a9\u0632 \u0635\u0641\u062d\u0647 \u0628\u0627\u0634\u062f.<\/li>\n<\/ul>\n<p><video controls=\"controls\" width=\"400\" height=\"150\"><source src=\"https:\/\/behnudi.ir\/f\/web2\/02\/img\/02-3.mp4\" \/>Your browser does not support the video tag.<\/video><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0648\u0627\u062d\u062f\u0647\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06af\u06cc\u0631\u06cc \u062f\u0631 CSS \u0628\u0633\u06cc\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631\u062f \u062f\u0627\u0631\u062f. \u0686\u0648\u0646 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u067e\u0631\u0627\u067e\u0631\u062a\u06cc\u200c\u0647\u0627\u06cc \u06cc\u06a9 \u0627\u0644\u0645\u0646\u062a HTML \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u0627\u06cc \u0631\u0627 \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0648 \u062f\u0627\u062f\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u06cc\u06a9 \u0686\u06cc\u0632 \u0628\u0647 \u0635\u0648\u0631\u062a \u06cc\u06a9 \u0639\u062f\u062f \u0628\u062f\u0648\u0646 \u0648\u0627\u062d\u062f\u060c \u0628\u06cc\u200c\u0641\u0627\u06cc\u062f\u0647 \u0627\u0633\u062a. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0645\u0648\u0646\u0647 \u0627\u06af\u0631 \u0634\u0645\u0627 \u0628\u062e\u0648\u0627\u0647\u06cc\u062f width \u06cc\u06a9 \u0639\u06a9\u0633 \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f\u060c \u0648 \u062a\u0646\u0647\u0627 \u06cc\u06a9 \u0639\u062f\u062f \u0628\u062f\u0647\u06cc\u062f (\u0645\u062b\u0644\u0627 \u06f2\u06f0) \u0648 \u0648\u0627\u062d\u062f \u0622\u0646 \u0631\u0627 \u0645\u0634\u062e\u0635 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1613,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[44],"class_list":["post-1616","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-computer-science","tag-web-design"],"_links":{"self":[{"href":"https:\/\/behnudi.ir\/index.php?rest_route=\/wp\/v2\/posts\/1616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/behnudi.ir\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/behnudi.ir\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/behnudi.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/behnudi.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1616"}],"version-history":[{"count":0,"href":"https:\/\/behnudi.ir\/index.php?rest_route=\/wp\/v2\/posts\/1616\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/behnudi.ir\/index.php?rest_route=\/wp\/v2\/media\/1613"}],"wp:attachment":[{"href":"https:\/\/behnudi.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/behnudi.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/behnudi.ir\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}