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