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