[{"data":1,"prerenderedAt":259},["ShallowReactive",2],{"lesson:t2-s05-units-colors":3,"course:taropood":63},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,5,"t2-s05-units-colors","book",2,"فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},4,"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},6,"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",[20,24,27,32,35,38,41,44,47,50,53,56,60],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>آخر این فصل یک رشته نظرِ تودرتو داری — مثل بخش نظرهای زیر یک مطلب، که هر جواب کمی تو رفته و زیر نظرِ قبلی می‌نشیند. رنگ‌هایش را خودت انتخاب می‌کنی، اسم‌ها آبی‌اند، یک برچسبِ «نویسنده» رنگی دارد، و زمان‌ها کم‌رنگ و محوند. ولی مهم‌تر از ظاهرش، دو ابزارِ پایه را کنترل می‌کنی: \u003Cstrong>واحد\u003C\u002Fstrong> (اندازه‌ها را با چه چیزی بنویسی) و \u003Cstrong>رنگ\u003C\u002Fstrong> (رنگ را به چند شکل بنویسی).\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-rem-vs-em.52b1d61be6.160.webp 160w, \u002F_img\u002F01-image-rem-vs-em.52b1d61be6.320.webp 320w, \u002F_img\u002F01-image-rem-vs-em.52b1d61be6.640.webp 640w, \u002F_img\u002F01-image-rem-vs-em.52b1d61be6.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-rem-vs-em.52b1d61be6.1280.jpg\" srcset=\"\u002F_img\u002F01-image-rem-vs-em.52b1d61be6.160.jpg 160w, \u002F_img\u002F01-image-rem-vs-em.52b1d61be6.320.jpg 320w, \u002F_img\u002F01-image-rem-vs-em.52b1d61be6.640.jpg 640w, \u002F_img\u002F01-image-rem-vs-em.52b1d61be6.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"مقایسهٔ دو راهِ اندازه‌گیری فونت: در سمتی، جعبه‌های تودرتو که هرکدام از قبلی بزرگ‌تر می‌شوند و مثل گلوله برف رشد می‌کنند؛ در سمتِ دیگر، همان جعبه‌ها که همه از یک خط‌کشِ ثابت اندازه گرفته‌اند و یک‌اندازه‌اند\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>فرق واحدِ مطلق (\u003Ccode>px\u003C\u002Fcode>) و نسبی (\u003Ccode>%\u003C\u002Fcode>، \u003Ccode>rem\u003C\u002Fcode>، \u003Ccode>em\u003C\u002Fcode>) را بگویی\u003C\u002Fli>\n\u003Cli>برای اندازهٔ فونت \u003Ccode>rem\u003C\u002Fcode> را درست به‌کار ببری و بفهمی چرا معمولاً بهترین انتخاب است\u003C\u002Fli>\n\u003Cli>یک رنگ را با \u003Ccode>hex\u003C\u002Fcode>، \u003Ccode>rgb()\u003C\u002Fcode>، \u003Ccode>hsl()\u003C\u002Fcode> و \u003Ccode>oklch()\u003C\u002Fcode> بنویسی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>opacity\u003C\u002Fcode> چیزی را نیمه‌شفاف کنی\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۴:\u003C\u002Fstrong> \u003Ccode>box-sizing\u003C\u002Fcode>، \u003Ccode>padding\u003C\u002Fcode>، \u003Ccode>border\u003C\u002Fcode>، \u003Ccode>margin\u003C\u002Fcode> و واحد \u003Ccode>px\u003C\u002Fcode> که آنجا سرسری معرفی شد؛ اینجا کاملش می‌کنیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۳:\u003C\u002Fstrong> \u003Ccode>cascade\u003C\u002Fcode> — یادت هست که وقتی دو قاعده به یک چیز مقدار می‌دهند، آخری برنده است؟ در بخش \u003Ccode>oklch\u003C\u002Fcode> دقیقاً به همین تکیه می‌کنیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۲:\u003C\u002Fstrong> \u003Ccode>class\u003C\u002Fcode> و از \u003Cstrong>فصل ۱:\u003C\u002Fstrong> \u003Ccode>color\u003C\u002Fcode> و \u003Ccode>background-color\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک رشته نظرِ تودرتو می‌بینی که هرچه جواب‌ها تودرتوتر می‌شوند، متن‌شان بی‌دلیل بزرگ‌تر می‌شود. کارِ این فصل این است که بفهمی چرا و با rem مهارش کنی، و بعد رنگ‌هایش را بسازی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-2-css-basics\u002Fsession-05-units-colors",{"kind":21,"heading":33,"html":34},"۱. واحد: مطلق در برابر نسبی","\u003Ch2 id=\"۱-واحد-مطلق-در-برابر-نسبی\">۱. واحد: مطلق در برابر نسبی\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D9%88%D8%A7%D8%AD%D8%AF-%D9%85%D8%B7%D9%84%D9%82-%D8%AF%D8%B1-%D8%A8%D8%B1%D8%A7%D8%A8%D8%B1-%D9%86%D8%B3%D8%A8%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>هر اندازه‌ای در CSS — پهنا، فاصله، اندازهٔ فونت — یک عدد است به‌علاوهٔ یک \u003Cstrong>واحد\u003C\u002Fstrong>. واحدها دو دسته‌اند.\u003C\u002Fp>\n\u003Cp>واحدِ \u003Cstrong>مطلق\u003C\u002Fstrong>، یعنی \u003Ccode>px\u003C\u002Fcode>: همیشه همان‌قدر است، به هیچ‌چیزِ دیگر وابسته نیست. \u003Ccode>16px\u003C\u002Fcode> یعنی ۱۶ نقطه، تمام. صریح و قابل‌پیش‌بینی است.\u003C\u002Fp>\n\u003Cp>واحدِ \u003Cstrong>نسبی\u003C\u002Fstrong>، یعنی درصدی یا برابری از \u003Cstrong>یک چیزِ دیگر\u003C\u002Fstrong>. مثلاً \u003Ccode>%\u003C\u002Fcode> نسبت به فضای در دسترس است. اگر به یک جعبه بگویی \u003Ccode>width: 50%\u003C\u002Fcode>، یعنی نصفِ عرضِ چیزی که داخلش نشسته. بیا سریع ببینیمش؛ در آزمایشگاه یک جعبهٔ آزمایشی بساز:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.demo {\n  width: 50%;\n  background-color: #2a6b93;\n  height: 40px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> جعبه دقیقاً تا نصفِ عرضِ صفحه کشیده می‌شود. حالا پنجرهٔ مرورگر (یا پنلِ آزمایشگاه) را پهن‌تر و باریک‌تر کن — جعبه هم با آن بزرگ و کوچک می‌شود، چون \u003Ccode>50%\u003C\u002Fcode> به عرضِ صفحه \u003Cstrong>وابسته\u003C\u002Fstrong> است. اگر \u003Ccode>width\u003C\u002Fcode> را \u003Ccode>200px\u003C\u002Fcode> بگذاری، هرچه پنجره را عوض کنی جعبه ثابت می‌ماند. این تفاوتِ مطلق و نسبی است.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. rem و em: دو واحدِ نسبی برای فونت","\u003Ch2 id=\"۲-rem-و-em-دو-واحدِ-نسبی-برای-فونت\">۲. rem و em: دو واحدِ نسبی برای فونت\u003Ca class=\"head-anchor\" href=\"#%DB%B2-rem-%D9%88-em-%D8%AF%D9%88-%D9%88%D8%A7%D8%AD%D8%AF%D9%90-%D9%86%D8%B3%D8%A8%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%81%D9%88%D9%86%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>برای اندازهٔ فونت دو واحدِ نسبیِ مهم داریم که خیلی شبیه‌اند و دقیقاً همین شباهت، تازه‌کارها را گیر می‌اندازد:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>\u003Ccode>em\u003C\u002Fcode>\u003C\u002Fstrong> نسبت به font-size ‌ی است که \u003Cstrong>خودِ عنصر\u003C\u002Fstrong> دارد (که معمولاً از پدرش به ارث برده). \u003Ccode>1.25em\u003C\u002Fcode> یعنی «۱٫۲۵ برابرِ فونتِ فعلی».\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ccode>rem\u003C\u002Fcode>\u003C\u002Fstrong> نسبت به font-size ‌ی است که \u003Cstrong>ریشهٔ صفحه\u003C\u002Fstrong> (\u003Ccode><html>\u003C\u002Fcode>) دارد. آن یکی هرچقدر تودرتو باشی ثابت می‌ماند.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مرورگر به‌طور پیش‌فرض به ریشه \u003Ccode>16px\u003C\u002Fcode> می‌دهد. پس \u003Ccode>1rem\u003C\u002Fcode> تقریباً همیشه \u003Ccode>16px\u003C\u002Fcode> است، \u003Ccode>1.5rem\u003C\u002Fcode> می‌شود \u003Ccode>24px\u003C\u002Fcode>، و این عددها هرجای صفحه که باشی عوض نمی‌شوند. \u003Ccode>em\u003C\u002Fcode> اما بستگی دارد به اینکه \u003Cstrong>کجا\u003C\u002Fstrong> نشسته‌ای — و همین‌جاست که ماجرا جالب می‌شود.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> چرا اصلاً \u003Ccode>rem\u003C\u002Fcode> به‌جای \u003Ccode>px\u003C\u002Fcode>؟ چون بعضی کاربران برای راحتیِ چشم، اندازهٔ فونتِ پیش‌فرضِ مرورگرشان را بزرگ‌تر می‌کنند. اگر فونت‌ها را با \u003Ccode>rem\u003C\u002Fcode> نوشته باشی، همه‌شان با آن تنظیم بزرگ می‌شوند و صفحه‌ات خوانا می‌ماند. اگر با \u003Ccode>px\u003C\u002Fcode> نوشته باشی، ثابت می‌مانند و آن کاربر را نادیده گرفته‌ای.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>بیا این را روی نظرهای واقعی ببینیم. اول ساختارِ رشته‌نظرها را در HTML بنویس — دقت کن هر جواب، یک \u003Ccode><article class="comment">\u003C\u002Fcode> است \u003Cstrong>داخلِ\u003C\u002Fstrong> نظرِ قبلی:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <title>نظرها<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <article class="comment">\n      <p class="name">نیما<\u002Fp>\n      <p class="tag">نویسنده<\u002Fp>\n      <p>این مقاله خیلی به‌دردم خورد، ممنون!<\u002Fp>\n      <p class="time">۲ ساعت پیش<\u002Fp>\n\n      <article class="comment">\n        <p class="name">سارا<\u002Fp>\n        <p>موافقم، مخصوصاً بخش آخرش را دوست داشتم.<\u002Fp>\n        <p class="time">۱ ساعت پیش<\u002Fp>\n\n        <article class="comment">\n          <p class="name">نیما<\u002Fp>\n          <p>خوشحالم که مفید بود.<\u002Fp>\n          <p class="time">۴۰ دقیقه پیش<\u002Fp>\n        <\u002Farticle>\n      <\u002Farticle>\n    <\u002Farticle>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و یک استایلِ ساده بهش بده تا هر نظر یک جعبهٔ سفید با کمی فاصله باشد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.comment {\n  background-color: #ffffff;\n  border: 1px solid #d9cbaa;\n  padding: 16px;\n  margin-top: 16px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> سه نظر می‌بینی که هرکدام کمی تو رفته و زیرِ نظرِ قبلی نشسته‌اند — چون هر جواب داخلِ نظرِ قبلی است و padding ‌اش آن را تو می‌بَرد. اندازهٔ متنِ همه یکسان است. حالا با \u003Ccode>em\u003C\u002Fcode> این آرامش را به‌هم می‌زنیم.\u003C\u002Fp>\n",{"kind":21,"heading":39,"html":40},"۳. وقتی em از دستت در می‌رود","\u003Ch2 id=\"۳-وقتی-em-از-دستت-در-می‌رود\">۳. وقتی em از دستت در می‌رود\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D9%88%D9%82%D8%AA%DB%8C-em-%D8%A7%D8%B2-%D8%AF%D8%B3%D8%AA%D8%AA-%D8%AF%D8%B1-%D9%85%DB%8C%E2%80%8C%D8%B1%D9%88%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فرض کن می‌خواهی نظرها کمی بزرگ‌تر از حالت عادی باشند. طبیعی است که بنویسی «۱٫۲۵ برابرِ فونت». به \u003Ccode>.comment\u003C\u002Fcode> این را بده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.comment {\n  font-size: 1.25em;\n  background-color: #ffffff;\n  border: 1px solid #d9cbaa;\n  padding: 16px;\n  margin-top: 16px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>به صفحه نگاه کن. نظرِ اول کمی بزرگ‌تر شده — خوب است. ولی جوابِ زیرش \u003Cstrong>از آن هم بزرگ‌تر\u003C\u002Fstrong> است، و جوابِ سومی که از همه تودرتوتر است، درشتِ درشت شده. هرچه عمیق‌تر، بزرگ‌تر. تو که همه‌جا یک عدد نوشتی، پس چرا؟\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> این عمدی است و باید همین بزرگ‌شدنِ پلکانی را ببینی. دلیلش در تعریفِ \u003Ccode>em\u003C\u002Fcode> است: \u003Ccode>em\u003C\u002Fcode> نسبت به فونتِ \u003Cstrong>خودِ عنصر\u003C\u002Fstrong> است، و هر نظر فونتش را از نظرِ پدرش می‌گیرد. پس محاسبه اینطور زنجیر می‌شود: نظرِ اول \u003Ccode>1.25 × 16 = 20\u003C\u002Fcode>؛ نظرِ دوم \u003Ccode>1.25 ×\u003C\u002Fcode> \u003Cstrong>۲۰\u003C\u002Fstrong> \u003Ccode>= 25\u003C\u002Fcode>؛ نظرِ سوم \u003Ccode>1.25 ×\u003C\u002Fcode> \u003Cstrong>۲۵\u003C\u002Fstrong> \u003Ccode>= 31\u003C\u002Fcode>. هر لایه \u003Ccode>1.25\u003C\u002Fcode> برابرِ لایهٔ قبل می‌شود، نه ۱٫۲۵ برابرِ ریشه — به این می‌گویند compounding، مثل گلولهٔ برفی که هر دور بزرگ‌تر می‌شود.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>راهِ حل این است که به‌جای «۱٫۲۵ برابرِ پدرم» بگویی «۱٫۲۵ برابرِ ریشه» — یعنی \u003Ccode>em\u003C\u002Fcode> را با \u003Ccode>rem\u003C\u002Fcode> عوض کنی. \u003Ccode>rem\u003C\u002Fcode> هرچقدر هم تودرتو باشی به همان ریشه نگاه می‌کند، پس دیگر زنجیر نمی‌شود:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.comment {\n  font-size: 1rem;\n  background-color: #ffffff;\n  border: 1px solid #d9cbaa;\n  padding: 16px;\n  margin-top: 16px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا هر سه نظر دقیقاً هم‌اندازه‌اند، مهم نیست چقدر تودرتو باشند. مقدار را به \u003Ccode>1.25rem\u003C\u002Fcode> عوض کن: همه با هم بزرگ می‌شوند ولی باز هم \u003Cstrong>هم‌اندازه\u003C\u002Fstrong> می‌مانند — چون هر سه از یک ریشه اندازه می‌گیرند. این است فرقِ \u003Ccode>rem\u003C\u002Fcode> و \u003Ccode>em\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> پس \u003Ccode>em\u003C\u002Fcode> بی‌فایده است؟ نه. \u003Ccode>em\u003C\u002Fcode> دقیقاً وقتی خوب است که بخواهی چیزی نسبت به فونتِ \u003Cstrong>همان عنصر\u003C\u002Fstrong> مقیاس بگیرد — مثلاً padding ‌ی که باید با بزرگ‌شدنِ متن، بزرگ شود. قاعدهٔ سرانگشتی: برای \u003Cstrong>اندازهٔ فونت\u003C\u002Fstrong> \u003Ccode>rem\u003C\u002Fcode>، برای فاصله‌هایی که باید با فونت هماهنگ بمانند \u003Ccode>em\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>قبل از ادامه، جواب بده: اگر ریشه \u003Ccode>16px\u003C\u002Fcode> باشد و یک عنصر \u003Ccode>font-size: 2rem\u003C\u002Fcode> بگیرد، چند پیکسل می‌شود؟ (جواب: \u003Ccode>32px\u003C\u002Fcode> — و مهم نیست کجای صفحه باشد.)\u003C\u002Fp>\n",{"kind":21,"heading":42,"html":43},"۴. رنگ: سه راه برای نوشتنِ یک رنگ","\u003Ch2 id=\"۴-رنگ-سه-راه-برای-نوشتنِ-یک-رنگ\">۴. رنگ: سه راه برای نوشتنِ یک رنگ\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D8%B1%D9%86%DA%AF-%D8%B3%D9%87-%D8%B1%D8%A7%D9%87-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%86%D9%88%D8%B4%D8%AA%D9%86%D9%90-%DB%8C%DA%A9-%D8%B1%D9%86%DA%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا حالا رنگ‌ها را با کدهایی مثل \u003Ccode>#2a6b93\u003C\u002Fcode> نوشتیم. به این \u003Ccode>hex\u003C\u002Fcode> می‌گویند: یک \u003Ccode>#\u003C\u002Fcode> و شش رقمِ شانزده‌شانزدهی که به‌ترتیب مقدارِ قرمز، سبز و آبی‌اند. کوتاه است ولی برای آدم خواندنی نیست — با نگاه به \u003Ccode>#2a6b93\u003C\u002Fcode> نمی‌فهمی چه رنگی است.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-color-models.2f29a376ed.160.webp 160w, \u002F_img\u002F02-image-color-models.2f29a376ed.320.webp 320w, \u002F_img\u002F02-image-color-models.2f29a376ed.640.webp 640w, \u002F_img\u002F02-image-color-models.2f29a376ed.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-color-models.2f29a376ed.1280.jpg\" srcset=\"\u002F_img\u002F02-image-color-models.2f29a376ed.160.jpg 160w, \u002F_img\u002F02-image-color-models.2f29a376ed.320.jpg 320w, \u002F_img\u002F02-image-color-models.2f29a376ed.640.jpg 640w, \u002F_img\u002F02-image-color-models.2f29a376ed.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک رنگِ آبیِ یکسان که با سه نمودارِ مختلف توصیف شده: سه نوارِ قرمز\u002Fسبز\u002Fآبی، یک چرخِ رنگ، و یک نوارِ روشنایی که همه به یک مربعِ رنگیِ مرکزی می‌رسند\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>همان رنگ را می‌شود جورِ دیگر هم نوشت. \u003Ccode>rgb()\u003C\u002Fcode> همان سه مقدارِ قرمز\u002Fسبز\u002Fآبی را با عددِ معمولی (۰ تا ۲۵۵) می‌گیرد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.name {\n  color: rgb(42 107 147);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>rgb(42 107 147)\u003C\u002Fcode> \u003Cstrong>دقیقاً\u003C\u002Fstrong> همان \u003Ccode>#2a6b93\u003C\u002Fcode> است، فقط خواناتر. ولی هنوز هم با دیدنِ سه عدد نمی‌فهمی رنگ چیست. اینجاست که \u003Ccode>hsl()\u003C\u002Fcode> کمک می‌کند: رنگ را با سه چیزِ قابل‌تصور می‌گوید — \u003Cstrong>hue\u003C\u002Fstrong> (نوعِ رنگ، ۰ تا ۳۶۰ روی چرخِ رنگ)، \u003Cstrong>saturation\u003C\u002Fstrong> (چقدر پُررنگ) و \u003Cstrong>lightness\u003C\u002Fstrong> (چقدر روشن):\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.name {\n  color: hsl(203 56% 37%);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> هر سه نوشته — \u003Ccode>#2a6b93\u003C\u002Fcode>، \u003Ccode>rgb(42 107 147)\u003C\u002Fcode> و \u003Ccode>hsl(203 56% 37%)\u003C\u002Fcode> — یک رنگِ آبیِ یکسان می‌دهند؛ یکی‌یکی امتحان کن و ببین اسمِ نظرها عوض نمی‌شود. مزیتِ \u003Ccode>hsl\u003C\u002Fcode> وقتی معلوم می‌شود که بخواهی رنگ را \u003Cstrong>تنظیم\u003C\u002Fstrong> کنی: عددِ اولِ \u003Ccode>hsl\u003C\u002Fcode> را از \u003Ccode>203\u003C\u002Fcode> به \u003Ccode>10\u003C\u002Fcode> ببر تا آبی به قرمز برود، یا عددِ آخر را از \u003Ccode>37%\u003C\u002Fcode> به \u003Ccode>70%\u003C\u002Fcode> ببر تا همان آبی روشن‌تر شود. با \u003Ccode>hex\u003C\u002Fcode> این کارها حدس‌وگمان است؛ با \u003Ccode>hsl\u003C\u002Fcode> مثل چرخاندنِ چند پیچ است.\u003C\u002Fp>\n",{"kind":21,"heading":45,"html":46},"۵. oklch و یک fallback واقعی","\u003Ch2 id=\"۵-oklch-و-یک-fallback-واقعی\">۵. oklch و یک fallback واقعی\u003Ca class=\"head-anchor\" href=\"#%DB%B5-oklch-%D9%88-%DB%8C%DA%A9-fallback-%D9%88%D8%A7%D9%82%D8%B9%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک راهِ تازه‌تر و بهترِ نوشتنِ رنگ هم هست: \u003Ccode>oklch()\u003C\u002Fcode>. مثل \u003Ccode>hsl\u003C\u002Fcode> با روشنی و رنگ و شدت کار می‌کند، ولی طوری ساخته شده که به \u003Cstrong>چشمِ آدم\u003C\u002Fstrong> نزدیک‌تر است — وقتی روشنی را کم‌وزیاد می‌کنی، تغییرش یکنواخت به‌نظر می‌رسد، نه پرشی. و به رنگ‌های زنده‌تری دسترسی می‌دهد که در \u003Ccode>rgb\u003C\u002Fcode> قدیمی جا نمی‌شدند.\u003C\u002Fp>\n\u003Cp>\u003Ccode>oklch\u003C\u002Fcode> امروز در مرورگرهای امروزی کار می‌کند، ولی ممکن است کاربری مرورگرِ خیلی قدیمی داشته باشد که آن را نشناسد. برای این‌جور جاها یک \u003Cstrong>fallback\u003C\u002Fstrong> می‌نویسیم: اول رنگ را به یک شکلِ قدیمی و مطمئن (\u003Ccode>hex\u003C\u002Fcode>) می‌نویسیم، بعد در خطِ بعد به \u003Ccode>oklch\u003C\u002Fcode>. به برچسبِ «نویسنده» این را بده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.tag {\n  color: #ffffff;\n  background-color: #a36207;              \u002F* fallback: rang-e sRGB *\u002F\n  background-color: oklch(55% 0.11 66);   \u002F* modern: gamut-e vasi'-tar *\u002F\n  padding: 2px 8px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>اینجا دقیقاً از \u003Ccode>cascade\u003C\u002Fcode>ِ فصل ۳ استفاده می‌کنیم: دو قاعده به یک property مقدار می‌دهند و \u003Cstrong>آخری برنده\u003C\u002Fstrong> است — به‌شرطی که مرورگر آن را بفهمد. مرورگرِ امروزی هر دو خط را می‌خواند و چون \u003Ccode>oklch\u003C\u002Fcode> را می‌فهمد، خطِ دومی برنده می‌شود. مرورگرِ خیلی قدیمی خطِ \u003Ccode>oklch\u003C\u002Fcode> را \u003Cstrong>نمی‌فهمد و دورش می‌اندازد\u003C\u002Fstrong>، پس همان \u003Ccode>hex\u003C\u002Fcode> برایش می‌ماند. هیچ‌کس رنگِ خراب نمی‌بیند.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> برچسبِ «نویسنده» یک پس‌زمینهٔ نارنجی‌‌‌طلایی می‌گیرد. خطِ \u003Ccode>oklch\u003C\u002Fcode> را موقتاً پاک کن و ببین رنگ به همان نارنجیِ \u003Ccode>hex\u003C\u002Fcode> برمی‌گردد — همان چیزی که یک مرورگرِ قدیمی می‌بیند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> ترتیب مهم است. اگر \u003Ccode>hex\u003C\u002Fcode> را \u003Cstrong>بعد\u003C\u002Fstrong> از \u003Ccode>oklch\u003C\u002Fcode> بنویسی، مرورگرِ امروزی هم آخری را برمی‌دارد و رنگِ بهتر را از دست می‌دهی. همیشه fallback ‌ی اول، نسخهٔ بهتر بعد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>نوشتنِ این نسخه‌های مختلفِ یک رنگ، دقیقاً جایی است که AI می‌تواند کارت را راه بیندازد:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیار AI ات بخواه یک رنگِ \u003Ccode>hex\u003C\u002Fcode> (مثلاً \u003Ccode>#a36207\u003C\u002Fcode>) را به \u003Ccode>hsl\u003C\u002Fcode> و \u003Ccode>oklch\u003C\u002Fcode> تبدیل کند. بعد هر سه را در آزمایشگاه امتحان کن و با چشمت چک کن که واقعاً یک رنگ‌اند — چون AI در تبدیلِ رنگ گاهی عددِ کمی پرت می‌دهد، و تنها راهِ مطمئن‌شدن، دیدنِ نتیجه در مرورگر است، نه اعتماد به عددِ AI.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":48,"html":49},"۶. opacity: نیمه‌شفاف کردن","\u003Ch2 id=\"۶-opacity-نیمه‌شفاف-کردن\">۶. opacity: نیمه‌شفاف کردن\u003Ca class=\"head-anchor\" href=\"#%DB%B6-opacity-%D9%86%DB%8C%D9%85%D9%87%E2%80%8C%D8%B4%D9%81%D8%A7%D9%81-%DA%A9%D8%B1%D8%AF%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>گاهی می‌خواهی چیزی کم‌رنگ و کم‌اهمیت به‌نظر برسد، مثل زمانِ زیر هر نظر. \u003Ccode>opacity\u003C\u002Fcode> کلِ عنصر را شفاف می‌کند: \u003Ccode>1\u003C\u002Fcode> یعنی کاملاً تو‌پُر، \u003Ccode>0\u003C\u002Fcode> یعنی کاملاً نامرئی، و بینشان نیمه‌شفاف. به زمان‌ها این را بده:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.time {\n  color: #2c2114;\n  opacity: 0.55;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> زمان‌ها («۲ ساعت پیش» و بقیه) کم‌رنگ و محو شده‌اند و دیگر با متنِ اصلی رقابت نمی‌کنند. عدد \u003Ccode>0.55\u003C\u002Fcode> را به \u003Ccode>0.2\u003C\u002Fcode> ببر تا تقریباً ناپدید شوند، بعد به \u003Ccode>1\u003C\u002Fcode> تا کاملاً برگردند.\u003C\u002Fp>\n",{"kind":21,"heading":51,"html":52},"کد کاملِ این فصل","\u003Ch2 id=\"کد-کاملِ-این-فصل\">کد کاملِ این فصل\u003Ca class=\"head-anchor\" href=\"#%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فایلِ HTML همان است که در بخش ۲ نوشتی. این هم \u003Ccode>styles.css\u003C\u002Fcode>ِ کامل:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  background-color: #f6edda;\n}\n\n.comment {\n  font-size: 1rem;\n  background-color: #ffffff;\n  border: 1px solid #d9cbaa;\n  padding: 16px;\n  margin-top: 16px;\n}\n\n.name {\n  color: #2a6b93;\n}\n\n.tag {\n  color: #ffffff;\n  background-color: #a36207;              \u002F* fallback: rang-e sRGB *\u002F\n  background-color: oklch(55% 0.11 66);   \u002F* modern: gamut-e vasi'-tar *\u002F\n  padding: 2px 8px;\n}\n\n.time {\n  color: #2c2114;\n  opacity: 0.55;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n",{"kind":21,"heading":54,"html":55},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>unit\u003C\u002Ftd>\n\u003Ctd>یونیت\u003C\u002Ftd>\n\u003Ctd>واحدِ اندازه که بعد از عدد می‌آید (\u003Ccode>px\u003C\u002Fcode>, \u003Ccode>rem\u003C\u002Fcode>, …)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>px\u003C\u002Ftd>\n\u003Ctd>پیکسل\u003C\u002Ftd>\n\u003Ctd>واحدِ مطلق؛ همیشه ثابت\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>rem\u003C\u002Ftd>\n\u003Ctd>رِم\u003C\u002Ftd>\n\u003Ctd>واحدِ نسبی به font-size ‌ی ریشهٔ صفحه (\u003Ccode><html>\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>em\u003C\u002Ftd>\n\u003Ctd>اِم\u003C\u002Ftd>\n\u003Ctd>واحدِ نسبی به font-size ‌ی خودِ عنصر\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>font-size\u003C\u002Ftd>\n\u003Ctd>فونت‌سایز\u003C\u002Ftd>\n\u003Ctd>اندازهٔ متن\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>hex\u003C\u002Ftd>\n\u003Ctd>هِکس\u003C\u002Ftd>\n\u003Ctd>رنگ به‌شکلِ \u003Ccode>#\u003C\u002Fcode> و شش رقم شانزده‌شانزدهی\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>rgb\u003C\u002Ftd>\n\u003Ctd>آر‌جی‌بی\u003C\u002Ftd>\n\u003Ctd>رنگ با سه مقدارِ قرمز، سبز، آبی\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>hsl\u003C\u002Ftd>\n\u003Ctd>اچ‌اس‌ال\u003C\u002Ftd>\n\u003Ctd>رنگ با hue، saturation، lightness\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>oklch\u003C\u002Ftd>\n\u003Ctd>اُکِل‌سی‌اچ\u003C\u002Ftd>\n\u003Ctd>راهِ تازه‌ترِ نوشتن رنگ، نزدیک‌تر به چشمِ آدم\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>fallback\u003C\u002Ftd>\n\u003Ctd>فال‌بک\u003C\u002Ftd>\n\u003Ctd>نسخهٔ پشتیبان برای وقتی مرورگر نسخهٔ اصلی را نمی‌فهمد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>opacity\u003C\u002Ftd>\n\u003Ctd>اوپَسیتی\u003C\u002Ftd>\n\u003Ctd>میزانِ شفافیتِ کلِ عنصر، از \u003Ccode>0\u003C\u002Fcode> تا \u003Ccode>1\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":57,"heading":58,"html":59},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا سه نظرِ تودرتو با \u003Ccode>font-size: 1.25em\u003C\u002Fcode> هم‌اندازه نشدند ولی با \u003Ccode>1.25rem\u003C\u002Fcode> می‌شوند؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> به برچسب یک رنگِ دیگر بده، این‌بار با \u003Ccode>hsl()\u003C\u002Fcode>. بعد فقط با عوض‌کردنِ عددِ سومِ \u003Ccode>hsl\u003C\u002Fcode> (lightness)، سه نسخهٔ روشن، متوسط و تیرهٔ همان رنگ بساز و هر سه را امتحان کن. ببین چطور با \u003Ccode>hsl\u003C\u002Fcode> این کار راحت است ولی با \u003Ccode>hex\u003C\u002Fcode> تقریباً غیرممکن.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک نظرِ چهارم، از سومی هم تودرتوتر، اضافه کن. اول با \u003Ccode>font-size: 1.25em\u003C\u002Fcode> ببین چقدر درشت می‌شود و عددِ پیکسلش را با فرمولِ compounding حساب کن (\u003Ccode>1.25 × ۳۱ ≈ ...\u003C\u002Fcode>). بعد به \u003Ccode>1rem\u003C\u002Fcode> برگردان و ببین دوباره سرِ جای بقیه می‌نشیند.\u003C\u002Fp>\n",{"kind":21,"heading":61,"html":62},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان واحدها و رنگ را در دست داری. تا اینجا متن‌ها با فونتِ پیش‌فرضِ مرورگر بودند — که مخصوصاً برای فارسی همیشه زیبا و خوانا نیست. فصل بعد سراغ \u003Cstrong>تایپوگرافی\u003C\u002Fstrong> می‌رویم: با \u003Ccode>font-family\u003C\u002Fcode> فونت را عوض می‌کنیم، با \u003Ccode>@font-face\u003C\u002Fcode> یک فونتِ فارسیِ درست‌وحسابی را بار می‌کنیم، و با \u003Ccode>line-height\u003C\u002Fcode> به متنِ فارسی جای نفس‌کشیدن می‌دهیم.\u003C\u002Fp>\n",{"course":64,"entitled":72,"lessons":73,"payments_enabled":72,"terms":258,"live":5},{"active_window":65,"effective_price_toman":66,"free":5,"lesson_count":67,"price_toman":68,"slug":69,"summary_fa":70,"title_fa":71},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[74,78,81,85,88,91,94,98,102,106,110,113,116,119,120,121,122,125,128,131,134,138,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252,255],{"free_preview":5,"order":75,"slug":76,"source":8,"term":75,"title_fa":77},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":9,"slug":79,"source":8,"term":75,"title_fa":80},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":82,"slug":83,"source":8,"term":75,"title_fa":84},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":12,"slug":86,"source":8,"term":75,"title_fa":87},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":6,"slug":89,"source":8,"term":75,"title_fa":90},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":16,"slug":92,"source":8,"term":75,"title_fa":93},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":95,"slug":96,"source":8,"term":75,"title_fa":97},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":99,"slug":100,"source":8,"term":75,"title_fa":101},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":103,"slug":104,"source":8,"term":75,"title_fa":105},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":107,"slug":108,"source":8,"term":75,"title_fa":109},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":75,"slug":111,"source":8,"term":9,"title_fa":112},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":9,"slug":114,"source":8,"term":9,"title_fa":115},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":82,"slug":117,"source":8,"term":9,"title_fa":118},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":95,"slug":123,"source":8,"term":9,"title_fa":124},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":99,"slug":126,"source":8,"term":9,"title_fa":127},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":103,"slug":129,"source":8,"term":9,"title_fa":130},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":107,"slug":132,"source":8,"term":9,"title_fa":133},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":135,"slug":136,"source":8,"term":9,"title_fa":137},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":75,"slug":139,"source":8,"term":82,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":9,"slug":142,"source":8,"term":82,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":82,"slug":145,"source":8,"term":82,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":12,"slug":148,"source":8,"term":82,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":6,"slug":151,"source":8,"term":82,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":16,"slug":154,"source":8,"term":82,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":95,"slug":157,"source":8,"term":82,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":99,"slug":160,"source":8,"term":82,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":103,"slug":163,"source":8,"term":82,"title_fa":164},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":107,"slug":166,"source":8,"term":82,"title_fa":167},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":135,"slug":169,"source":8,"term":82,"title_fa":170},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":75,"slug":172,"source":8,"term":12,"title_fa":173},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":9,"slug":175,"source":8,"term":12,"title_fa":176},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":82,"slug":178,"source":8,"term":12,"title_fa":179},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":12,"slug":181,"source":8,"term":12,"title_fa":182},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":6,"slug":184,"source":8,"term":12,"title_fa":185},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":16,"slug":187,"source":8,"term":12,"title_fa":188},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":95,"slug":190,"source":8,"term":12,"title_fa":191},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":99,"slug":193,"source":8,"term":12,"title_fa":194},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":75,"slug":196,"source":8,"term":6,"title_fa":197},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":9,"slug":199,"source":8,"term":6,"title_fa":200},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":82,"slug":202,"source":8,"term":6,"title_fa":203},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":12,"slug":205,"source":8,"term":6,"title_fa":206},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":6,"slug":208,"source":8,"term":6,"title_fa":209},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":16,"slug":211,"source":8,"term":6,"title_fa":212},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":95,"slug":214,"source":8,"term":6,"title_fa":215},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":99,"slug":217,"source":8,"term":6,"title_fa":218},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":103,"slug":220,"source":8,"term":6,"title_fa":221},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":107,"slug":223,"source":8,"term":6,"title_fa":224},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":75,"slug":226,"source":8,"term":16,"title_fa":227},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":9,"slug":229,"source":8,"term":16,"title_fa":230},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":82,"slug":232,"source":8,"term":16,"title_fa":233},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":12,"slug":235,"source":8,"term":16,"title_fa":236},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":6,"slug":238,"source":8,"term":16,"title_fa":239},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":16,"slug":241,"source":8,"term":16,"title_fa":242},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":95,"slug":244,"source":8,"term":16,"title_fa":245},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":99,"slug":247,"source":8,"term":16,"title_fa":248},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":103,"slug":250,"source":8,"term":16,"title_fa":251},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":107,"slug":253,"source":8,"term":16,"title_fa":254},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":135,"slug":256,"source":8,"term":16,"title_fa":257},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105004]