[{"data":1,"prerenderedAt":253},["ShallowReactive",2],{"lesson:t2-s03-cascade":3,"course:taropood":56},{"meta":4,"prev":11,"next":14,"sections":18},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,3,"t2-s03-cascade","book",2,"فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":9,"slug":12,"source":8,"term":9,"title_fa":13},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":15,"slug":16,"source":8,"term":9,"title_fa":17},4,"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",[19,23,26,31,34,37,40,43,46,49,53],{"kind":20,"heading":21,"html":22},"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>این کوتاه‌ترین فصلِ ترم است، ولی مهم‌ترینش. تا اینجا هر قاعده که نوشتی، تنها بود و کارش را می‌کرد. در دنیای واقعی این‌طور نیست: چند قاعده به یک عنصر می‌خورند و رنگ‌های متفاوت می‌خواهند. کدام برنده می‌شود؟ بیشترِ کسانی که CSS را رها می‌کنند، دقیقاً همین‌جا گیر می‌کنند — چون \u003Cstrong>حدس\u003C\u002Fstrong> می‌زنند. آخر این فصل تو حدس نمی‌زنی؛ \u003Cstrong>می‌شماری\u003C\u002Fstrong> و از قبل می‌دانی کدام رنگ برنده است.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-specificity-count.8b2c627966.160.webp 160w, \u002F_img\u002F01-image-specificity-count.8b2c627966.320.webp 320w, \u002F_img\u002F01-image-specificity-count.8b2c627966.640.webp 640w, \u002F_img\u002F01-image-specificity-count.8b2c627966.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-specificity-count.8b2c627966.1280.jpg\" srcset=\"\u002F_img\u002F01-image-specificity-count.8b2c627966.160.jpg 160w, \u002F_img\u002F01-image-specificity-count.8b2c627966.320.jpg 320w, \u002F_img\u002F01-image-specificity-count.8b2c627966.640.jpg 640w, \u002F_img\u002F01-image-specificity-count.8b2c627966.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک ترازو که سه ستون وزنه دارد — ستونِ id سنگین‌تر از ستونِ class و آن هم سنگین‌تر از ستونِ نوع — و ترازو به سمتِ id خم شده\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>بگویی وقتی چند قاعده به یک عنصر می‌خورند، \u003Ccode>cascade\u003C\u002Fcode> چطور برنده را انتخاب می‌کند\u003C\u002Fli>\n\u003Cli>specificity یک selector را بشماری و از قبل بگویی کدام قاعده می‌بَرد\u003C\u002Fli>\n\u003Cli>توضیح بدهی inheritance چیست و چرا \u003Ccode>color\u003C\u002Fcode> ارث می‌رسد ولی \u003Ccode>background-color\u003C\u002Fcode> نه\u003C\u002Fli>\n\u003Cli>بگویی چرا \u003Ccode>!important\u003C\u002Fcode> جوابِ درست نیست\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":20,"heading":24,"html":25},"قبل از شروع","\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> selectorِ نوع، \u003Ccode>class\u003C\u002Fcode> (با \u003Ccode>.\u003C\u002Fcode>) و \u003Ccode>id\u003C\u002Fcode> (با \u003Ccode>#\u003C\u002Fcode>). این فصل روی همین سه تا بنا می‌شود.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۱ این ترم:\u003C\u002Fstrong> \u003Ccode>color\u003C\u002Fcode> و \u003Ccode>background-color\u003C\u002Fcode>. باز هم همین دو property کافی‌اند.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>فقط یک مرورگر لازم داری، یا همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":27,"heading":28,"html":29,"embed":30},"lab","","— چند خط متن می‌بینی که بعضی‌شان هم id دارند هم class. در این فصل چند قاعدهٔ متضاد به یک خط می‌خورانیم و تو باید قبل از دیدنِ نتیجه حدس بزنی کدام برنده است، بعد چک کنی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-2-css-basics\u002Fsession-03-cascade",{"kind":20,"heading":32,"html":33},"۱. cascade: وقتی قاعده‌ها با هم می‌جنگند","\u003Ch2 id=\"۱-cascade-وقتی-قاعده‌ها-با-هم-می‌جنگند\">۱. cascade: وقتی قاعده‌ها با هم می‌جنگند\u003Ca class=\"head-anchor\" href=\"#%DB%B1-cascade-%D9%88%D9%82%D8%AA%DB%8C-%D9%82%D8%A7%D8%B9%D8%AF%D9%87%E2%80%8C%D9%87%D8%A7-%D8%A8%D8%A7-%D9%87%D9%85-%D9%85%DB%8C%E2%80%8C%D8%AC%D9%86%DA%AF%D9%86%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فرض کن این دو قاعده را نوشته‌ای که هر دو دقیقاً \u003Ccode>p\u003C\u002Fcode> را هدف گرفته‌اند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>p {\n  color: gray;\n}\n\np {\n  color: teal;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>هر دو یک عنصر را می‌خواهند رنگ کنند، با دو رنگِ متفاوت. مرورگر نمی‌تواند هم خاکستری باشد هم سبزآبی؛ باید یکی را انتخاب کند. این انتخاب‌کردن، همان \u003Cstrong>cascade\u003C\u002Fstrong> است: مجموعه قانون‌هایی که مرورگر با آن‌ها برندهٔ یک جنگِ قاعده‌ها را پیدا می‌کند.\u003C\u002Fp>\n\u003Cp>اولین قانونِ cascade ساده است: \u003Cstrong>وقتی دو قاعده دقیقاً هم‌وزن‌اند، آنکه پایین‌تر (دیرتر) نوشته شده برنده است.\u003C\u002Fstrong> اینجا هر دو selector یکی‌اند (\u003Ccode>p\u003C\u002Fcode>)، پس هم‌وزن‌اند و قاعدهٔ پایینی می‌بَرد.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> پاراگراف‌ها سبزآبی می‌شوند، نه خاکستری. حالا جای دو قاعده را عوض کن — \u003Ccode>teal\u003C\u002Fcode> را ببر بالا، \u003Ccode>gray\u003C\u002Fcode> را بیاور پایین — و ببین رنگ به خاکستری برمی‌گردد. با چشمِ خودت دیدی که «قاعدهٔ دیرتر برنده است».\u003C\u002Fp>\n\u003Cp>قبل از ادامه، جواب بده: اگر دو قاعدهٔ هم‌وزن، یکی رنگِ قرمز و دیگری رنگِ آبی بخواهند و قرمز پایین‌تر نوشته شده باشد، رنگ چه می‌شود؟\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> قرمز. چون هم‌وزن‌اند و قرمز دیرتر آمده. ولی این فقط \u003Cstrong>نصفِ\u003C\u002Fstrong> ماجراست — و نصفِ گمراه‌کننده‌اش. الان می‌بینی که «دیرتر برنده است» خیلی وقت‌ها اصلاً درست نیست.\u003C\u002Fp>\n",{"kind":20,"heading":35,"html":36},"۲. specificity: چرا «دیرتر» همیشه برنده نیست","\u003Ch2 id=\"۲-specificity-چرا-دیرتر-همیشه-برنده-نیست\">۲. specificity: چرا «دیرتر» همیشه برنده نیست\u003Ca class=\"head-anchor\" href=\"#%DB%B2-specificity-%DA%86%D8%B1%D8%A7-%D8%AF%DB%8C%D8%B1%D8%AA%D8%B1-%D9%87%D9%85%DB%8C%D8%B4%D9%87-%D8%A8%D8%B1%D9%86%D8%AF%D9%87-%D9%86%DB%8C%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا یک خط داریم که هم \u003Ccode>id\u003C\u002Fcode> دارد هم \u003Ccode>class\u003C\u002Fcode>: \u003Ccode><p id="intro" class="lead">\u003C\u002Fcode>. سه قاعده به آن می‌خورند، و عمداً قاعدهٔ \u003Ccode>p\u003C\u002Fcode> را \u003Cstrong>آخر\u003C\u002Fstrong> گذاشته‌ایم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>#intro {\n  color: crimson;\n}\n\n.lead {\n  color: teal;\n}\n\np {\n  color: gray;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>بر اساسِ چیزی که همین الان یاد گرفتی، منطقی است فکر کنی چون \u003Ccode>p\u003C\u002Fcode> آخر از همه نوشته شده، برنده است و آن خط خاکستری می‌شود. نگاه کن به صفحه.\u003C\u002Fp>\n\u003Cp>خاکستری \u003Cstrong>نشد\u003C\u002Fstrong>. قرمز شد. «دیرتر برنده است» اینجا کار نکرد — و این دقیقاً همان‌جایی است که تازه‌کارها ساعت‌ها سردرگم می‌شوند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> رنگی که می‌بینی با انتظارت فرق دارد؟ ترتیبِ نوشتن را فراموش کن؛ ترتیب فقط وقتی حرفِ آخر را می‌زند که قاعده‌ها \u003Cstrong>هم‌وزن\u003C\u002Fstrong> باشند. اینجا هم‌وزن نیستند. مرورگر اول وزنِ هر selector را می‌شمارد، و فقط اگر مساوی شدند سراغِ ترتیب می‌رود. پس بشمار.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>به این وزن می‌گویند \u003Cstrong>specificity\u003C\u002Fstrong>. شمردنش راحت است: هر selector را در سه ستون می‌شماری — چند تا \u003Ccode>id\u003C\u002Fcode>، چند تا \u003Ccode>class\u003C\u002Fcode>، چند تا نوع:\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>selector\u003C\u002Fth>\n\u003Cth>id\u003C\u002Fth>\n\u003Cth>class\u003C\u002Fth>\n\u003Cth>نوع\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>#intro\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>1\u003C\u002Ftd>\n\u003Ctd>0\u003C\u002Ftd>\n\u003Ctd>0\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>.lead\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>0\u003C\u002Ftd>\n\u003Ctd>1\u003C\u002Ftd>\n\u003Ctd>0\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>p\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>0\u003C\u002Ftd>\n\u003Ctd>0\u003C\u002Ftd>\n\u003Ctd>1\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>حالا از \u003Cstrong>چپ\u003C\u002Fstrong> مقایسه می‌کنی، مثلِ مقایسهٔ عددهای چندرقمی که رقمِ سمتِ چپ مهم‌تر است. اول ستونِ \u003Ccode>id\u003C\u002Fcode>: فقط \u003Ccode>#intro\u003C\u002Fcode> آنجا یک ۱ دارد و بقیه صفرند. همین کافی است — \u003Ccode>#intro\u003C\u002Fcode> برنده است، \u003Cstrong>مهم نیست کجای فایل نوشته شده.\u003C\u002Fstrong> یک \u003Ccode>id\u003C\u002Fcode> از هر تعداد \u003Ccode>class\u003C\u002Fcode> و نوع سنگین‌تر است، و یک \u003Ccode>class\u003C\u002Fcode> از هر تعداد نوع.\u003C\u002Fp>\n\u003Cp>این ترتیبِ اهمیت را به خاطر بسپار: \u003Cstrong>\u003Ccode>id\u003C\u002Fcode> قوی‌تر از \u003Ccode>class\u003C\u002Fcode>، و \u003Ccode>class\u003C\u002Fcode> قوی‌تر از نوع.\u003C\u002Fstrong> برای همین در فصل قبل گفتیم \u003Ccode>id\u003C\u002Fcode> برای استایل «زیادی سفت‌وسخت» است — وزنش آن‌قدر بالاست که بعداً به‌سختی می‌شود رویش را پوشاند.\u003C\u002Fp>\n\u003Cp>قبل از ادامه، جواب بده: خطِ دومِ ما \u003Ccode><p class="lead">\u003C\u002Fcode> است (فقط class، بدونِ id). با همان سه قاعدهٔ بالا، این خط چه رنگی می‌شود؟\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> سبزآبی (teal). \u003Ccode>#intro\u003C\u002Fcode> به این خط نمی‌خورد چون این خط \u003Ccode>id="intro"\u003C\u002Fcode> ندارد. می‌ماند \u003Ccode>.lead\u003C\u002Fcode> (وزن \u003Ccode>0,1,0\u003C\u002Fcode>) و \u003Ccode>p\u003C\u002Fcode> (وزن \u003Ccode>0,0,1\u003C\u002Fcode>). ستونِ class را مقایسه کن: \u003Ccode>.lead\u003C\u002Fcode> یک ۱ دارد، \u003Ccode>p\u003C\u002Fcode> صفر. پس \u003Ccode>.lead\u003C\u002Fcode> می‌بَرد و خط سبزآبی می‌شود — باز هم بی‌اعتنا به اینکه \u003Ccode>p\u003C\u002Fcode> دیرتر نوشته شده.\u003C\u002Fp>\n",{"kind":20,"heading":38,"html":39},"۳. inheritance: رنگی که از بالا می‌آید","\u003Ch2 id=\"۳-inheritance-رنگی-که-از-بالا-می‌آید\">۳. inheritance: رنگی که از بالا می‌آید\u003Ca class=\"head-anchor\" href=\"#%DB%B3-inheritance-%D8%B1%D9%86%DA%AF%DB%8C-%DA%A9%D9%87-%D8%A7%D8%B2-%D8%A8%D8%A7%D9%84%D8%A7-%D9%85%DB%8C%E2%80%8C%D8%A2%DB%8C%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک قاعدهٔ دیگر به بازی اضافه کن، این‌بار روی \u003Ccode>body\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>body {\n  color: navy;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode><body>\u003C\u002Fcode> والدِ همه‌چیز است. اگر برای امتحان، آن سه قاعدهٔ \u003Ccode>p\u003C\u002Fcode> و \u003Ccode>.lead\u003C\u002Fcode> و \u003Ccode>#intro\u003C\u002Fcode> را موقتاً پاک کنی و فقط همین بماند، می‌بینی \u003Cstrong>همهٔ\u003C\u002Fstrong> متن‌های صفحه سرمه‌ای می‌شوند — با اینکه هیچ قاعده‌ای مستقیم به آن پاراگراف‌ها نخورده. رنگ از \u003Ccode>body\u003C\u002Fcode> به فرزندانش \u003Cstrong>ارث\u003C\u002Fstrong> رسیده. اسمِ این پدیده \u003Cstrong>inheritance\u003C\u002Fstrong> است: بعضی property ها از والد به فرزند سرازیر می‌شوند.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-inheritance-flow.3f31ed77e3.160.webp 160w, \u002F_img\u002F02-image-inheritance-flow.3f31ed77e3.320.webp 320w, \u002F_img\u002F02-image-inheritance-flow.3f31ed77e3.640.webp 640w, \u002F_img\u002F02-image-inheritance-flow.3f31ed77e3.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-inheritance-flow.3f31ed77e3.1280.jpg\" srcset=\"\u002F_img\u002F02-image-inheritance-flow.3f31ed77e3.160.jpg 160w, \u002F_img\u002F02-image-inheritance-flow.3f31ed77e3.320.jpg 320w, \u002F_img\u002F02-image-inheritance-flow.3f31ed77e3.640.jpg 640w, \u002F_img\u002F02-image-inheritance-flow.3f31ed77e3.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک درختِ عنصرها: رنگِ متن مثلِ جوهر از ریشه به همهٔ شاخه‌ها سرازیر شده، ولی کنارش پس‌زمینه در هر جعبه جدا و بی‌سرازیری مانده است\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>ولی همهٔ property ها این‌طور نیستند. \u003Ccode>color\u003C\u002Fcode> ارث می‌رسد؛ \u003Ccode>background-color\u003C\u002Fcode> نه. برای اینکه با چشم ببینی‌اش، این را در آزمایشگاه امتحان کن: به \u003Ccode>body\u003C\u002Fcode> یک \u003Ccode>background-color: gold\u003C\u002Fcode> بده، بعد به \u003Ccode>main\u003C\u002Fcode> یک \u003Ccode>background-color: cornsilk\u003C\u002Fcode>. یک بلوکِ کِرِمیِ جدا می‌بینی که روی صفحهٔ طلایی نشسته. اگر \u003Ccode>background-color\u003C\u002Fcode> ارث می‌رسید، \u003Ccode>main\u003C\u002Fcode> از قبل طلایی بود و اصلاً جدا دیده نمی‌شد. پس هر عنصر پس‌زمینهٔ خودش را دارد و پیش‌فرضش شفاف است؛ آن رنگِ طلاییِ صفحه فقط پس‌زمینهٔ \u003Ccode>body\u003C\u002Fcode> بود که از پشتِ عنصرهای شفاف دیده می‌شد، نه رنگی که ارث رسیده باشد.\u003C\u002Fp>\n\u003Cp>یک نکتهٔ مهم: inheritance ضعیف‌ترین است. آن \u003Ccode>body { color: navy }\u003C\u002Fcode> به همهٔ متن‌ها ارث می‌رسد، ولی همین‌که یک قاعدهٔ مستقیم مثلِ \u003Ccode>p { color: gray }\u003C\u002Fcode> هم باشد، آن قاعده — هرچقدر هم کم‌وزن — بر رنگِ ارث‌رسیده غلبه می‌کند. رنگِ ارث‌رسیده فقط وقتی دیده می‌شود که هیچ قاعدهٔ مستقیمی روی آن عنصر نباشد.\u003C\u002Fp>\n\u003Cp>قبل از ادامه، جواب بده: اگر روی \u003Ccode>body\u003C\u002Fcode> بنویسی \u003Ccode>color: navy\u003C\u002Fcode> و هیچ قاعدهٔ دیگری برای یک پاراگرافِ به‌خصوص نداشته باشی، آن پاراگراف چه رنگی است؟\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> سرمه‌ای. رنگ را از \u003Ccode>body\u003C\u002Fcode> ارث می‌برد، چون هیچ قاعدهٔ مستقیمی جلویش را نگرفته.\u003C\u002Fp>\n",{"kind":20,"heading":41,"html":42},"۴. inherit و initial: ارث را دستی کنترل کن","\u003Ch2 id=\"۴-inherit-و-initial-ارث-را-دستی-کنترل-کن\">۴. \u003Ccode>inherit\u003C\u002Fcode> و \u003Ccode>initial\u003C\u002Fcode>: ارث را دستی کنترل کن\u003Ca class=\"head-anchor\" href=\"#%DB%B4-inherit-%D9%88-initial-%D8%A7%D8%B1%D8%AB-%D8%B1%D8%A7-%D8%AF%D8%B3%D8%AA%DB%8C-%DA%A9%D9%86%D8%AA%D8%B1%D9%84-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>گاهی می‌خواهی خودت بگویی «این عنصر رنگِ والدش را بگیرد». مقدارِ ویژه‌ای برای این هست: \u003Ccode>inherit\u003C\u002Fcode>. لینک‌ها مثالِ خوبی‌اند، چون مرورگر برایشان یک رنگِ پیش‌فرضِ آبی می‌گذارد که ارث را نادیده می‌گیرد. به قاعده‌هایت این را اضافه کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>a {\n  color: inherit;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> آن لینکِ وسطِ خطِ آخر، از رنگِ آبیِ پیش‌فرض درمی‌آید و هم‌رنگِ متنِ اطرافش می‌شود. با \u003Ccode>inherit\u003C\u002Fcode> صریح گفتی «رنگِ والدت را بگیر».\u003C\u002Fp>\n\u003Cp>یک مقدارِ ویژهٔ دیگر هم هست: \u003Ccode>initial\u003C\u002Fcode>، که property را به مقدارِ \u003Cstrong>کارخانه‌ای‌اش\u003C\u002Fstrong> برمی‌گرداند (برای \u003Ccode>color\u003C\u002Fcode> یعنی سیاه). امتحانش کن: به یک پاراگراف \u003Ccode>color: initial\u003C\u002Fcode> بده و ببین با اینکه \u003Ccode>body\u003C\u002Fcode> سرمه‌ای گفته، آن پاراگراف سیاه می‌شود — انگار هیچ رنگی برایش تعیین نشده.\u003C\u002Fp>\n",{"kind":20,"heading":44,"html":45},"۵. چرا !important جواب نیست","\u003Ch2 id=\"۵-چرا-important-جواب-نیست\">۵. چرا \u003Ccode>!important\u003C\u002Fcode> جواب نیست\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%DA%86%D8%B1%D8%A7-important-%D8%AC%D9%88%D8%A7%D8%A8-%D9%86%DB%8C%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فرض کن می‌خواهی به‌زور آن خطِ \u003Ccode>#intro\u003C\u002Fcode> را خاکستری کنی، ولی هرچه می‌کنی قرمز می‌ماند چون \u003Ccode>id\u003C\u002Fcode> سنگین است. یک راهِ وسوسه‌انگیز هست: به قاعدهٔ \u003Ccode>p\u003C\u002Fcode> یک \u003Ccode>!important\u003C\u002Fcode> بچسبانی:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>p {\n  color: gray !important;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و... کار می‌کند. \u003Ccode>!important\u003C\u002Fcode> از کلِ بازیِ specificity می‌پرد و به‌زور برنده می‌شود. پس چرا نگوییم همه‌جا از آن استفاده کن؟\u003C\u002Fp>\n\u003Cp>چون یک پتک است، نه یک ابزارِ دقیق. مشکل‌ها همین‌جا شروع می‌شوند: فردا که بخواهی همان خط را رنگِ دیگری کنی، specificityِ معمولی دیگر جواب نمی‌دهد — مجبوری یک \u003Ccode>!important\u003C\u002Fcode>ِ دیگر بزنی. و آن یکی را هم که خواستی بپوشانی، باز \u003Ccode>!important\u003C\u002Fcode>ِ بعدی. کم‌کم فایلت پر می‌شود از \u003Ccode>!important\u003C\u002Fcode> هایی که با هم می‌جنگند و دیگر هیچ‌کس نمی‌فهمد چه چیزی چه چیزی را می‌پوشاند. \u003Cstrong>\u003Ccode>!important\u003C\u002Fcode> مشکلِ امروز را حل می‌کند و مشکلِ بزرگ‌ترِ فردا را می‌سازد.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>جوابِ درست تقریباً همیشه این است: به‌جای زورزدن، specificity را بشمار و selectorَت را درست انتخاب کن. آن \u003Ccode>!important\u003C\u002Fcode> را از قاعدهٔ \u003Ccode>p\u003C\u002Fcode> بردار تا به فایلِ سالم برگردی. این فایلِ کاملِ \u003Ccode>styles.css\u003C\u002Fcode>ِ ماست:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\nbody {\n  color: navy;\n}\n\np {\n  color: gray;\n}\n\n.lead {\n  color: teal;\n}\n\n#intro {\n  color: crimson;\n}\n\na {\n  color: inherit;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و این HTMLِ کاملی است که این قاعده‌ها رویش اجرا می‌شوند:\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    <main>\n      <p id="intro" class="lead">این خط هم id دارد هم class.<\u002Fp>\n      <p class="lead">این خط فقط class دارد.<\u002Fp>\n      <p>این یک خط کاملاً معمولی است.<\u002Fp>\n      <p>یک <a href="#">لینک<\u002Fa> وسط یک خط عادی.<\u002Fp>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>سه رنگِ متفاوت روی سه خطِ اول می‌بینی — قرمز، سبزآبی، خاکستری — و همه از یک اصل درمی‌آیند. جالب اینجاست: آن \u003Ccode>body { color: navy }\u003C\u002Fcode> در نتیجهٔ نهایی هیچ‌جا دیده نمی‌شود، چون هر خط یک قاعدهٔ مستقیمِ خاص‌تر دارد که رنگِ ارث‌رسیده را می‌پوشاند. همین یک صفحه، هر سه مفهومِ فصل را کنارِ هم نشان می‌دهد: \u003Ccode>cascade\u003C\u002Fcode> انتخاب می‌کند، \u003Ccode>specificity\u003C\u002Fcode> وزن می‌کشد، و \u003Ccode>inheritance\u003C\u002Fcode> ضعیف‌ترینِ آن‌هاست.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> وقتی یک رنگ آن‌طور که می‌خواهی اعمال نمی‌شود و از دستیار AI ات کمک می‌خواهی، خیلی وقت‌ها با اعتمادبه‌نفس می‌گوید «یک \u003Ccode>!important\u003C\u002Fcode> بزن، درست می‌شود». این همان \u003Cstrong>«AI هم اشتباه می‌کند»\u003C\u002Fstrong> است — جوابش کار می‌کند ولی درست نیست، و همان دردسری را می‌سازد که این بخش گفت. به‌جایش از AI بپرس «specificity این دو selector را برایم بشمار»، بعد خودت روی کاغذ هم بشمار و با هم بسنج. کمک‌گرفتن برای \u003Cstrong>فهمیدن\u003C\u002Fstrong>، نه برای پتک‌برداشتن.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":47,"html":48},"واژه‌های تازهٔ این فصل","\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>cascade\u003C\u002Ftd>\n\u003Ctd>کَسکِید\u003C\u002Ftd>\n\u003Ctd>قانون‌هایی که مرورگر با آن‌ها بینِ قاعده‌های متضاد برنده را انتخاب می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>specificity\u003C\u002Ftd>\n\u003Ctd>اِسپِسیفیسیتی\u003C\u002Ftd>\n\u003Ctd>وزنِ یک selector؛ با شمردنِ id و class و نوع به‌دست می‌آید\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>inheritance\u003C\u002Ftd>\n\u003Ctd>اینهِریتِنس\u003C\u002Ftd>\n\u003Ctd>سرازیرشدنِ بعضی property ها (مثل \u003Ccode>color\u003C\u002Fcode>) از والد به فرزند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>inherit\u003C\u002Ftd>\n\u003Ctd>اینهِریت\u003C\u002Ftd>\n\u003Ctd>مقداری که می‌گوید «رنگِ والدت را بگیر»\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>initial\u003C\u002Ftd>\n\u003Ctd>اینیشِیال\u003C\u002Ftd>\n\u003Ctd>مقداری که property را به مقدارِ کارخانه‌ای‌اش برمی‌گرداند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>important\u003C\u002Ftd>\n\u003Ctd>ایمپورتنت\u003C\u002Ftd>\n\u003Ctd>با \u003Ccode>!important\u003C\u002Fcode> قاعده به‌زور برنده می‌شود؛ آخرین راه، نه اولین\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":50,"heading":51,"html":52},"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>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: برای شمردنِ specificity، سه چیز را می‌شماری. آن سه چیز چیست، و کدام سنگین‌تر است؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک \u003Ccode><p>\u003C\u002Fcode> بساز که هم \u003Ccode>id\u003C\u002Fcode> داشته باشد هم \u003Ccode>class\u003C\u002Fcode>. سه قاعده برایش بنویس — یکی با نوع، یکی با class، یکی با id — که هر سه رنگِ متفاوت بخواهند. \u003Cstrong>قبل\u003C\u002Fstrong> از نگاه‌کردن به صفحه، روی کاغذ specificity هر سه را بشمار و بنویس کدام برنده است. حالا نگاه کن؛ اگر حدست درست بود، یعنی دیگر حدس نمی‌زنی، می‌شماری.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> به همان قاعدهٔ بازنده یک \u003Ccode>!important\u003C\u002Fcode> بزن و ببین ناگهان برنده می‌شود. حالا سعی کن با یک قاعدهٔ \u003Cstrong>معمولیِ دیگر\u003C\u002Fstrong> (بدونِ \u003Ccode>!important\u003C\u002Fcode>) رنگش را عوض کنی — می‌بینی نمی‌شود، هرچقدر هم specificity بالا ببری. این همان دامِ \u003Ccode>!important\u003C\u002Fcode> است که خودت با دستت ساختی؛ حالا با حذفش، مسئله را درست حل کن.\u003C\u002Fp>\n",{"kind":20,"heading":54,"html":55},"در فصل بعد","\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>الان می‌دانی وقتی چند قاعده به یک عنصر می‌خورند چه اتفاقی می‌افتد — نه با حدس، با شمردن. این سنگِ بنای همه‌چیزِ CSS است. فصل بعد از رنگ فراتر می‌رویم و سراغِ \u003Cstrong>جعبه\u003C\u002Fstrong> می‌رویم: هر عنصر در CSS یک جعبه است با فضای داخلی، حاشیه و مرز. یاد می‌گیری این جعبه از چه لایه‌هایی ساخته شده و چطور اندازه و فاصله‌اش را کنترل کنی — همان چیزی که به آن box model می‌گویند.\u003C\u002Fp>\n",{"course":57,"entitled":65,"lessons":66,"payments_enabled":65,"terms":252,"live":5},{"active_window":58,"effective_price_toman":59,"free":5,"lesson_count":60,"price_toman":61,"slug":62,"summary_fa":63,"title_fa":64},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[67,71,74,77,80,84,88,92,96,100,104,107,108,109,110,113,116,119,122,125,128,132,135,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],{"free_preview":5,"order":68,"slug":69,"source":8,"term":68,"title_fa":70},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":9,"slug":72,"source":8,"term":68,"title_fa":73},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":6,"slug":75,"source":8,"term":68,"title_fa":76},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":15,"slug":78,"source":8,"term":68,"title_fa":79},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":81,"slug":82,"source":8,"term":68,"title_fa":83},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":85,"slug":86,"source":8,"term":68,"title_fa":87},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":89,"slug":90,"source":8,"term":68,"title_fa":91},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":93,"slug":94,"source":8,"term":68,"title_fa":95},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":97,"slug":98,"source":8,"term":68,"title_fa":99},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":101,"slug":102,"source":8,"term":68,"title_fa":103},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":68,"slug":105,"source":8,"term":9,"title_fa":106},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":9,"slug":12,"source":8,"term":9,"title_fa":13},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":15,"slug":16,"source":8,"term":9,"title_fa":17},{"free_preview":5,"order":81,"slug":111,"source":8,"term":9,"title_fa":112},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":85,"slug":114,"source":8,"term":9,"title_fa":115},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":89,"slug":117,"source":8,"term":9,"title_fa":118},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":93,"slug":120,"source":8,"term":9,"title_fa":121},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":97,"slug":123,"source":8,"term":9,"title_fa":124},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":101,"slug":126,"source":8,"term":9,"title_fa":127},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":129,"slug":130,"source":8,"term":9,"title_fa":131},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":68,"slug":133,"source":8,"term":6,"title_fa":134},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":9,"slug":136,"source":8,"term":6,"title_fa":137},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":6,"slug":139,"source":8,"term":6,"title_fa":140},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":15,"slug":142,"source":8,"term":6,"title_fa":143},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":81,"slug":145,"source":8,"term":6,"title_fa":146},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":85,"slug":148,"source":8,"term":6,"title_fa":149},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":89,"slug":151,"source":8,"term":6,"title_fa":152},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":93,"slug":154,"source":8,"term":6,"title_fa":155},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":97,"slug":157,"source":8,"term":6,"title_fa":158},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":101,"slug":160,"source":8,"term":6,"title_fa":161},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":129,"slug":163,"source":8,"term":6,"title_fa":164},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":68,"slug":166,"source":8,"term":15,"title_fa":167},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":9,"slug":169,"source":8,"term":15,"title_fa":170},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":6,"slug":172,"source":8,"term":15,"title_fa":173},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":15,"slug":175,"source":8,"term":15,"title_fa":176},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":81,"slug":178,"source":8,"term":15,"title_fa":179},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":85,"slug":181,"source":8,"term":15,"title_fa":182},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":89,"slug":184,"source":8,"term":15,"title_fa":185},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":93,"slug":187,"source":8,"term":15,"title_fa":188},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":68,"slug":190,"source":8,"term":81,"title_fa":191},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":9,"slug":193,"source":8,"term":81,"title_fa":194},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":6,"slug":196,"source":8,"term":81,"title_fa":197},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":15,"slug":199,"source":8,"term":81,"title_fa":200},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":81,"slug":202,"source":8,"term":81,"title_fa":203},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":85,"slug":205,"source":8,"term":81,"title_fa":206},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":89,"slug":208,"source":8,"term":81,"title_fa":209},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":93,"slug":211,"source":8,"term":81,"title_fa":212},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":97,"slug":214,"source":8,"term":81,"title_fa":215},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":101,"slug":217,"source":8,"term":81,"title_fa":218},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":68,"slug":220,"source":8,"term":85,"title_fa":221},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":9,"slug":223,"source":8,"term":85,"title_fa":224},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":6,"slug":226,"source":8,"term":85,"title_fa":227},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":15,"slug":229,"source":8,"term":85,"title_fa":230},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":81,"slug":232,"source":8,"term":85,"title_fa":233},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":85,"slug":235,"source":8,"term":85,"title_fa":236},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":89,"slug":238,"source":8,"term":85,"title_fa":239},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":93,"slug":241,"source":8,"term":85,"title_fa":242},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":97,"slug":244,"source":8,"term":85,"title_fa":245},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":101,"slug":247,"source":8,"term":85,"title_fa":248},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":129,"slug":250,"source":8,"term":85,"title_fa":251},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827104990]