[{"data":1,"prerenderedAt":253},["ShallowReactive",2],{"lesson:t2-s01-first-css":3,"course:taropood":56},{"meta":4,"prev":11,"next":15,"sections":18},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,1,"t2-s01-first-css","book",2,"فصل ۰۱ — اولین CSS",{"free_preview":5,"order":12,"slug":13,"source":8,"term":6,"title_fa":14},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":9,"slug":16,"source":8,"term":9,"title_fa":17},"t2-s02-selectors","فصل ۰۲ — selector ها",[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>تا اینجا هر صفحه‌ای که ساختی یک چیز مشترک داشت: سیاه روی سفید، فونتِ پیش‌فرض، بی‌رنگ. کارِ HTML همین بود و درست هم بود. حالا ترمِ تازه‌ای شروع می‌شود. آخر این فصل یک کارت معرفیِ کوچک داری که پس‌زمینه‌اش رنگ دارد، متنش رنگ دارد، و تیترش رنگی جدا دارد — و همهٔ این رنگ‌ها را \u003Cstrong>تو\u003C\u002Fstrong> انتخاب کرده‌ای، نه مرورگر. این اولین باری است که به صفحه می‌گویی «چه شکلی باش».\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-css-before-after.dc9adc4aac.160.webp 160w, \u002F_img\u002F01-image-css-before-after.dc9adc4aac.320.webp 320w, \u002F_img\u002F01-image-css-before-after.dc9adc4aac.640.webp 640w, \u002F_img\u002F01-image-css-before-after.dc9adc4aac.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-css-before-after.dc9adc4aac.1280.jpg\" srcset=\"\u002F_img\u002F01-image-css-before-after.dc9adc4aac.160.jpg 160w, \u002F_img\u002F01-image-css-before-after.dc9adc4aac.320.jpg 320w, \u002F_img\u002F01-image-css-before-after.dc9adc4aac.640.jpg 640w, \u002F_img\u002F01-image-css-before-after.dc9adc4aac.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>بگویی چرا ظاهر و رنگ کارِ HTML نیست و CSS دقیقاً چه کاری را برعهده می‌گیرد\u003C\u002Fli>\n\u003Cli>یک فایل CSS جدا بسازی و با \u003Ccode>&lt;link&gt;\u003C\u002Fcode> به صفحه وصلش کنی\u003C\u002Fli>\n\u003Cli>ساختار یک قاعدهٔ CSS را خط‌به‌خط بشناسی: selector و declaration\u003C\u002Fli>\n\u003Cli>رنگ متن و رنگ پس‌زمینه را با \u003Ccode>color\u003C\u002Fcode> و \u003Ccode>background-color\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> اسکلت یک صفحهٔ HTML (\u003Ccode>&lt;head&gt;\u003C\u002Fcode> و \u003Ccode>&lt;body&gt;\u003C\u002Fcode>) و tag های semantic مثل \u003Ccode>&lt;header&gt;\u003C\u002Fcode> و \u003Ccode>&lt;main&gt;\u003C\u002Fcode>. ما این ترم روی همان صفحه‌ها رنگ و ظاهر می‌گذاریم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۱ ترم ۱:\u003C\u002Fstrong> یادت هست که \u003Ccode>&lt;head&gt;\u003C\u002Fcode> جایی است که به ماشین‌ها حرف می‌زنی؟ وصل‌کردن CSS هم همان‌جا اتفاق می‌افتد.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل کل این خودآموز فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":27,"heading":28,"html":29,"embed":30},"lab","","— یک صفحهٔ بی‌رنگِ ترم‌یکی می‌بینی و یک فایل CSS خالی کنارش. کارِ این فصل این است که خط‌به‌خط رنگ را به این صفحه اضافه کنی و هر بار نتیجه را ببینی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-2-css-basics\u002Fsession-01-first-css",{"kind":20,"heading":32,"html":33},"۱. چرا رنگ کارِ HTML نیست","\u003Ch2 id=\"۱-چرا-رنگ-کارِ-html-نیست\">۱. چرا رنگ کارِ HTML نیست\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%DA%86%D8%B1%D8%A7-%D8%B1%D9%86%DA%AF-%DA%A9%D8%A7%D8%B1%D9%90-html-%D9%86%DB%8C%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>در کل ترم ۱ یک قانون را تکرار کردیم: \u003Cstrong>HTML می‌گوید هر تکه از صفحه چه هست، نه اینکه چه شکلی باشد.\u003C\u002Fstrong> \u003Ccode>&lt;h1&gt;\u003C\u002Fcode> یعنی «مهم‌ترین تیتر»، نه «متنِ بزرگ». \u003Ccode>&lt;strong&gt;\u003C\u002Fcode> یعنی «این مهم است»، نه «این را ضخیم کن». بزرگ‌بودن و ضخیم‌بودن، تصمیمِ پیش‌فرضِ مرورگر بود، نه چیزی که تو گفتی.\u003C\u002Fp>\n\u003Cp>حالا وقتش رسیده که خودت دربارهٔ ظاهر تصمیم بگیری. ابزار این کار یک زبان جداست به اسم \u003Cstrong>CSS\u003C\u002Fstrong>. کارِ CSS یک چیز است: می‌گوید عنصرهای صفحه \u003Cstrong>چه شکلی\u003C\u002Fstrong> باشند — چه رنگی، چه اندازه‌ای، کجای صفحه، با چه فاصله‌ای.\u003C\u002Fp>\n\u003Cp>چرا این دو تا را جدا کرده‌اند؟ چرا رنگ را همان‌جا داخل HTML نمی‌نویسیم؟ سه دلیلِ محکم:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>یک CSS، صدها صفحه.\u003C\u002Fstrong> یک سایتِ واقعی ده‌ها صفحه دارد که باید شبیه هم باشند. با CSSِ جدا، رنگ و فونت را یک‌جا می‌نویسی و همهٔ صفحه‌ها از آن استفاده می‌کنند. رنگِ اصلی را عوض کنی، کلِ سایت با هم عوض می‌شود.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>معنا دست‌نخورده می‌ماند.\u003C\u002Fstrong> موتور جست‌وجو و screen reader فقط به ساختارِ HTML کار دارند، نه به رنگ. وقتی ظاهر را از ساختار جدا نگه می‌داری، هر کدام کارِ خودش را تمیز انجام می‌دهد.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>عوض‌کردنِ ظاهر، ساختار را خراب نمی‌کند.\u003C\u002Fstrong> می‌خواهی رنگ را عوض کنی؟ به HTML دست نمی‌زنی. این یعنی کمتر چیزی می‌شکند.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>یک مثالِ ملموس از دلیلِ اول: فرض کن یک سایتِ پنجاه‌صفحه‌ای داری و رنگِ اصلی‌اش آبی است. یک روز تصمیم می‌گیری سبزش کنی. اگر رنگ را جای‌جای داخلِ HTMLِ هر پنجاه صفحه نوشته بودی، باید هر پنجاه فایل را دستی بگردی و عوض کنی — و کافی است یکی را جا بیندازی تا یک صفحه بدقواره بماند. ولی وقتی رنگ در یک فایلِ CSSِ مشترک است، یک خط را عوض می‌کنی و هر پنجاه صفحه با هم سبز می‌شوند. همین یک تفاوت، جدا نگه‌داشتنِ ظاهر از ساختار را از یک سلیقه به یک ضرورت تبدیل می‌کند.\u003C\u002Fp>\n\u003Cp>پس از این به بعد دو فایل داریم که با هم کار می‌کنند: یک فایل \u003Ccode>.html\u003C\u002Fcode> که می‌گوید \u003Cstrong>چه هست\u003C\u002Fstrong>، و یک فایل \u003Ccode>.css\u003C\u002Fcode> که می‌گوید \u003Cstrong>چه شکلی است\u003C\u002Fstrong>. تار و پود، کنار هم.\u003C\u002Fp>\n",{"kind":20,"heading":35,"html":36},"۲. یک فایل CSS بساز و وصلش کن","\u003Ch2 id=\"۲-یک-فایل-css-بساز-و-وصلش-کن\">۲. یک فایل CSS بساز و وصلش کن\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%DB%8C%DA%A9-%D9%81%D8%A7%DB%8C%D9%84-css-%D8%A8%D8%B3%D8%A7%D8%B2-%D9%88-%D9%88%D8%B5%D9%84%D8%B4-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بیا از همین کارتِ معرفی شروع کنیم. این صفحهٔ ترم‌یکیِ ماست — کاملاً آشنا، بدون یک ذره CSS:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;fa&quot; dir=&quot;rtl&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;title&gt;کارت معرفی من&lt;\u002Ftitle&gt;\n  &lt;\u002Fhead&gt;\n  &lt;body&gt;\n    &lt;header&gt;\n      &lt;h1&gt;سارا احمدی&lt;\u002Fh1&gt;\n      &lt;p&gt;تازه ساختن سایت را یاد می‌گیرم.&lt;\u002Fp&gt;\n    &lt;\u002Fheader&gt;\n\n    &lt;main&gt;\n      &lt;p&gt;این اولین صفحه‌ای است که رنگش را خودم انتخاب می‌کنم.&lt;\u002Fp&gt;\n    &lt;\u002Fmain&gt;\n  &lt;\u002Fbody&gt;\n&lt;\u002Fhtml&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا کنارِ این، یک فایلِ دوم می‌سازیم به اسم \u003Ccode>styles.css\u003C\u002Fcode>. داخلش این را بنویس:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>body {\n  background-color: cornsilk;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>این می‌گوید «پس‌زمینهٔ \u003Ccode>&lt;body&gt;\u003C\u002Fcode> را رنگِ cornsilk کن» — یک کِرِمِ روشن. ولی اگر همین الان صفحه را نگاه کنی، \u003Cstrong>هیچ اتفاقی نمی‌افتد.\u003C\u002Fstrong> چرا؟ چون این دو فایل هنوز همدیگر را نمی‌شناسند. فایلِ HTML اصلاً خبر ندارد که یک فایلِ CSS وجود دارد.\u003C\u002Fp>\n\u003Cp>باید به HTML بگوییم «برو این فایلِ CSS را هم بردار و اعمال کن». این کار را با یک tag به اسم \u003Ccode>&lt;link&gt;\u003C\u002Fcode> انجام می‌دهیم که داخل \u003Ccode>&lt;head&gt;\u003C\u002Fcode> می‌رود. این خط را به \u003Ccode>&lt;head&gt;\u003C\u002Fcode> اضافه کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>rel=&quot;stylesheet&quot;\u003C\u002Fcode> می‌گوید «این لینک به یک برگهٔ استایل است»، و \u003Ccode>href\u003C\u002Fcode> می‌گوید «آدرسِ آن فایل این است».\u003C\u002Fp>\n\u003Cp>نگاه کن به صفحه. باز هم پس‌زمینه عوض \u003Cstrong>نشد\u003C\u002Fstrong>. اما این‌بار خبری از خطا هم نیست — نه در HTML، نه در CSS. صفحه بی‌سروصدا بی‌رنگ ماند. این دقیقاً همان موذی‌بودنی است که در ترم ۱ دیدیم، این‌بار در CSS.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> پس‌زمینه رنگی نشد؟ به \u003Ccode>href\u003C\u002Fcode> دقت کن. ما نوشتیم \u003Ccode>href=&quot;style.css&quot;\u003C\u002Fcode> ولی اسم فایلی که ساختیم \u003Ccode>styles.css\u003C\u002Fcode> است — با یک \u003Ccode>s\u003C\u002Fcode>ِ اضافه. برای تو این دو تا «تقریباً یکی» است، ولی برای مرورگر دو اسمِ کاملاً متفاوت‌اند. مرورگر رفت دنبالِ \u003Ccode>style.css\u003C\u002Fcode>، پیدایش نکرد، و بی‌خیالِ کلِ استایل شد. اسم را دقیقاً یکسان کن:\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا نگاه کن.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> پس‌زمینهٔ کلِ صفحه باید کِرِمی (cornsilk) شده باشد. اگر هنوز سفید است، یعنی هنوز اسمِ فایل در \u003Ccode>href\u003C\u002Fcode> با اسمِ واقعیِ فایلِ CSS مو‌به‌مو یکی نیست — تا وقتی این دو دقیقاً برابر نشوند، مرورگر فایل را پیدا نمی‌کند.\u003C\u002Fp>\n\u003Cp>این اولین درسِ بزرگِ CSS بود: \u003Cstrong>اگر استایلت اصلاً اعمال نمی‌شود، قبل از هر چیز مطمئن شو فایل درست وصل شده.\u003C\u002Fstrong> خیلی وقت‌ها مشکل در قاعده‌ات نیست؛ مرورگر اصلاً فایلت را ندیده.\u003C\u002Fp>\n",{"kind":20,"heading":38,"html":39},"۳. ساختارِ یک قاعده","\u003Ch2 id=\"۳-ساختارِ-یک-قاعده\">۳. ساختارِ یک قاعده\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1%D9%90-%DB%8C%DA%A9-%D9%82%D8%A7%D8%B9%D8%AF%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا که کار می‌کند، بیا خوب نگاه کنیم چه نوشتیم. آن تکه‌ی CSS یک \u003Cstrong>قاعده\u003C\u002Fstrong> (rule) است، و هر قاعدهٔ CSS دقیقاً دو بخش دارد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>body {\n  background-color: cornsilk;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>بخشِ اول، آن \u003Ccode>body\u003C\u002Fcode> که قبل از \u003Ccode>{\u003C\u002Fcode> آمده، \u003Cstrong>selector\u003C\u002Fstrong> است: می‌گوید این قاعده به کدام عنصرها بخورد. اینجا نوشته‌ایم \u003Ccode>body\u003C\u002Fcode>، یعنی «هر جا \u003Ccode>&lt;body&gt;\u003C\u002Fcode> هست». به همین سادگی: اسمِ tag را بنویسی، آن قاعده به آن نوع عنصر می‌خورد.\u003C\u002Fp>\n\u003Cp>بخشِ دوم، هر چیزی که داخلِ \u003Ccode>{ }\u003C\u002Fcode> است، \u003Cstrong>declaration block\u003C\u002Fstrong> است: فهرستِ کارهایی که باید انجام شود. اینجا یک کار داریم. هر کار خودش هم دو تکه است:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>background-color\u003C\u002Fcode> اسمِ \u003Cstrong>property\u003C\u002Fstrong> است — «چه چیزی را عوض می‌کنی». اینجا: رنگِ پس‌زمینه.\u003C\u002Fli>\n\u003Cli>\u003Ccode>cornsilk\u003C\u002Fcode> مقدار یا \u003Cstrong>value\u003C\u002Fstrong> است — «به چه چیزی عوضش می‌کنی».\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>بینِ property و value یک \u003Ccode>:\u003C\u002Fcode> می‌گذاری، و آخرِ هر کار یک \u003Ccode>;\u003C\u002Fcode>. پس شکلِ کامل این است: \u003Ccode>selector\u003C\u002Fcode> بیرون، بعد \u003Ccode>{\u003C\u002Fcode>، بعد یک یا چند \u003Ccode>property: value;\u003C\u002Fcode>، بعد \u003Ccode>}\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-css-rule-anatomy.4d122a0cf8.160.webp 160w, \u002F_img\u002F02-image-css-rule-anatomy.4d122a0cf8.320.webp 320w, \u002F_img\u002F02-image-css-rule-anatomy.4d122a0cf8.640.webp 640w, \u002F_img\u002F02-image-css-rule-anatomy.4d122a0cf8.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-css-rule-anatomy.4d122a0cf8.1280.jpg\" srcset=\"\u002F_img\u002F02-image-css-rule-anatomy.4d122a0cf8.160.jpg 160w, \u002F_img\u002F02-image-css-rule-anatomy.4d122a0cf8.320.jpg 320w, \u002F_img\u002F02-image-css-rule-anatomy.4d122a0cf8.640.jpg 640w, \u002F_img\u002F02-image-css-rule-anatomy.4d122a0cf8.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک قاعدهٔ CSS به‌شکل نموداری از هم باز شده: یک شکل که به عنصری روی صفحه اشاره می‌کند (selector)، و کنارش یک جعبه که چند جفت نقطه‌ورنگ داخلش است (declaration ها)، با خط‌های راهنما به حاشیه\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> آن \u003Ccode>;\u003C\u002Fcode> آخرِ هر خط الان که یک کار داری الزامی به‌نظر نمی‌رسد، ولی وقتی چند کار پشتِ هم بیاید، همین \u003Ccode>;\u003C\u002Fcode> است که به مرورگر می‌گوید یک کار تمام شد و کارِ بعدی شروع می‌شود. عادت کن \u003Cstrong>همیشه\u003C\u002Fstrong> بگذاری‌اش؛ در بخشِ آخرِ همین فصل می‌بینی نبودنش چه بلایی سرِ صفحه می‌آورد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>قبل از ادامه، جواب بده: در قاعدهٔ \u003Ccode>h1 { color: crimson; }\u003C\u002Fcode> کدام تکه selector است، کدام property و کدام value؟\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> \u003Ccode>h1\u003C\u002Fcode> همان selector است (به کدام عنصر می‌خورد)، \u003Ccode>color\u003C\u002Fcode> همان property است (چه چیزی را عوض می‌کنی: رنگِ متن)، و \u003Ccode>crimson\u003C\u002Fcode> همان value است (به چه رنگی). همین ساختار در هر قاعدهٔ CSS تکرار می‌شود؛ فقط اسم‌ها عوض می‌شوند.\u003C\u002Fp>\n",{"kind":20,"heading":41,"html":42},"۴. color: رنگِ متن","\u003Ch2 id=\"۴-color-رنگِ-متن\">۴. \u003Ccode>color\u003C\u002Fcode>: رنگِ متن\u003Ca class=\"head-anchor\" href=\"#%DB%B4-color-%D8%B1%D9%86%DA%AF%D9%90-%D9%85%D8%AA%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>background-color\u003C\u002Fcode> رنگِ پس‌زمینه بود. رنگِ خودِ \u003Cstrong>متن\u003C\u002Fstrong> property دیگری دارد: \u003Ccode>color\u003C\u002Fcode>. بیا به همان قاعدهٔ \u003Ccode>body\u003C\u002Fcode> یک کار دوم اضافه کنیم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>body {\n  background-color: cornsilk;\n  color: navy;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>دو تا declaration در یک block، هر کدام با \u003Ccode>;ِ\u003C\u002Fcode> خودش. \u003Ccode>navy\u003C\u002Fcode> یک سرمه‌ایِ تیره است.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> همهٔ متن‌های صفحه — تیتر، پاراگرافِ زیرش، متنِ \u003Ccode>&lt;main&gt;\u003C\u002Fcode> — باید سرمه‌ای شده باشند. یک قاعده روی \u003Ccode>body\u003C\u002Fcode> گذاشتی و رنگِ همهٔ متن‌ها عوض شد؛ چراییِ این را در فصل ۳ کامل می‌بینیم.\u003C\u002Fp>\n\u003Cp>حالا بیا تیتر را یک رنگِ جدا بدهیم تا از بقیهٔ متن جدا شود. یک قاعدهٔ دومِ کامل، این‌بار با selectorِ \u003Ccode>h1\u003C\u002Fcode>، زیرِ قاعدهٔ \u003Ccode>body\u003C\u002Fcode> اضافه کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>h1 {\n  color: crimson;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> فقط تیتر «سارا احمدی» باید قرمز (crimson) شده باشد، و بقیهٔ متن‌ها هنوز سرمه‌ای بمانند. چون این قاعده مستقیم \u003Ccode>&lt;h1&gt;\u003C\u002Fcode> را هدف گرفته، رنگِ تیتر همین قرمز می‌شود؛ اینکه چرا این قاعده بر آن \u003Ccode>color: navy\u003C\u002Fcode>ِ \u003Ccode>body\u003C\u002Fcode> غلبه می‌کند، دقیقاً موضوعِ فصل ۳ است — فعلاً همین‌قدر که می‌بینی کار می‌کند کافی است.\u003C\u002Fp>\n\u003Cp>اینها همهٔ فایلِ \u003Ccode>styles.css\u003C\u002Fcode> تا اینجاست:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\nbody {\n  background-color: cornsilk;\n  color: navy;\n}\n\nh1 {\n  color: crimson;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و این هم فایلِ کاملِ HTML با \u003Ccode>&lt;link&gt;\u003C\u002Fcode>ِ درست، که فایلِ CSS بالا را صدا می‌زند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;!-- index.html --&gt;\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;fa&quot; dir=&quot;rtl&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;title&gt;کارت معرفی من&lt;\u002Ftitle&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;\n  &lt;\u002Fhead&gt;\n  &lt;body&gt;\n    &lt;header&gt;\n      &lt;h1&gt;سارا احمدی&lt;\u002Fh1&gt;\n      &lt;p&gt;تازه ساختن سایت را یاد می‌گیرم.&lt;\u002Fp&gt;\n    &lt;\u002Fheader&gt;\n\n    &lt;main&gt;\n      &lt;p&gt;این اولین صفحه‌ای است که رنگش را خودم انتخاب می‌کنم.&lt;\u002Fp&gt;\n    &lt;\u002Fmain&gt;\n  &lt;\u002Fbody&gt;\n&lt;\u002Fhtml&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیار AI ات بپرس «فرقِ \u003Ccode>color\u003C\u002Fcode> و \u003Ccode>background-color\u003C\u002Fcode> چیست؟». جوابش را بخوان، ولی همان اولین عادتِ این خودآموز را تمرین کن: \u003Cstrong>جوابِ AI را با چیزی که خودت می‌بینی چک کن.\u003C\u002Fstrong> در آزمایشگاه یک بار جای این دو property را عوض کن — به \u003Ccode>body\u003C\u002Fcode> بده \u003Ccode>background-color: navy\u003C\u002Fcode> و \u003Ccode>color: cornsilk\u003C\u002Fcode> — و ببین صفحه چطور معکوس می‌شود. چیزی که با چشمِ خودت دیدی از هر توضیحی معتبرتر است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":44,"html":45},"۵. حالا عمداً خرابش کن","\u003Ch2 id=\"۵-حالا-عمداً-خرابش-کن\">۵. حالا عمداً خرابش کن\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%D8%AD%D8%A7%D9%84%D8%A7-%D8%B9%D9%85%D8%AF%D8%A7%D9%8B-%D8%AE%D8%B1%D8%A7%D8%A8%D8%B4-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یاد گرفتنِ اینکه یک چیز چطور \u003Cstrong>می‌شکند\u003C\u002Fstrong> به‌اندازهٔ یاد گرفتنِ اینکه چطور کار می‌کند مهم است. در آزمایشگاه، از قاعدهٔ \u003Ccode>h1\u003C\u002Fcode> آن \u003Ccode>;ِ\u003C\u002Fcode> آخرِ خطِ \u003Ccode>color: crimson\u003C\u002Fcode> را پاک کن، بعد بلافاصله زیرش یک کارِ دوم اضافه کن، مثلاً \u003Ccode>background-color: gold\u003C\u002Fcode>، تا این‌طور شود:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>h1 {\n  color: crimson\n  background-color: gold;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>نگاه کن به تیتر. نه قرمز شد، نه پس‌زمینهٔ طلایی گرفت — \u003Cstrong>هیچ‌کدام.\u003C\u002Fstrong> بدونِ آن \u003Ccode>;\u003C\u002Fcode>، مرورگر این دو خط را یک کارِ به‌هم‌چسبیده و بی‌معنی دید، نفهمیدش، و کلاً هر دو را دور انداخت. باز هم خطایی روی صفحه ندیدی؛ CSS هم مثل HTML وقتی چیزی را نمی‌فهمد، بی‌سروصدا ردش می‌کند و می‌رود سراغِ قاعدهٔ بعدی.\u003C\u002Fp>\n\u003Cp>حالا آن \u003Ccode>;\u003C\u002Fcode> را سرِ جایش برگردان:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>h1 {\n  color: crimson;\n  background-color: gold;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا تیتر هم قرمز است و هم پس‌زمینهٔ طلایی دارد. همان یک \u003Ccode>;\u003C\u002Fcode> بود که همه‌چیز را برگرداند.\u003C\u002Fp>\n\u003Cp>این رفتار را به خاطر بسپار: \u003Cstrong>CSSِ خراب معمولاً فریاد نمی‌زند؛ فقط ساکت می‌شود.\u003C\u002Fstrong> اگر یک قاعده اعمال نشد، دو مظنونِ اولت همین دو تاست: یا فایل درست وصل نشده (بخش ۲)، یا جایی یک \u003Ccode>;\u003C\u002Fcode> یا \u003Ccode>{\u003C\u002Fcode> یا \u003Ccode>}\u003C\u002Fcode> جا افتاده و مرورگر قاعده را دور انداخته. حالا \u003Ccode>background-color: gold\u003C\u002Fcode> را از \u003Ccode>h1\u003C\u002Fcode> بردار تا به همان فایلِ تمیزِ بخش قبل برگردی.\u003C\u002Fp>\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>CSS\u003C\u002Ftd>\n\u003Ctd>سی‌اِس‌اِس\u003C\u002Ftd>\n\u003Ctd>زبانی که ظاهرِ صفحه را کنترل می‌کند: رنگ، اندازه، فاصله، چیدمان\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>rule\u003C\u002Ftd>\n\u003Ctd>رول\u003C\u002Ftd>\n\u003Ctd>یک قاعدهٔ کامل CSS: یک selector به‌علاوهٔ یک declaration block\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>selector\u003C\u002Ftd>\n\u003Ctd>سِلِکتور\u003C\u002Ftd>\n\u003Ctd>تکهٔ قبل از \u003Ccode>{\u003C\u002Fcode> که می‌گوید قاعده به کدام عنصرها بخورد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>declaration\u003C\u002Ftd>\n\u003Ctd>دِکلَریشِن\u003C\u002Ftd>\n\u003Ctd>یک کار داخلِ \u003Ccode>{ }\u003C\u002Fcode>: یک جفتِ \u003Ccode>property: value;\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>property\u003C\u002Ftd>\n\u003Ctd>پراپِرتی\u003C\u002Ftd>\n\u003Ctd>چه چیزی را عوض می‌کنی (مثل \u003Ccode>color\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>value\u003C\u002Ftd>\n\u003Ctd>ولیو\u003C\u002Ftd>\n\u003Ctd>به چه چیزی عوضش می‌کنی (مثل \u003Ccode>navy\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>link\u003C\u002Ftd>\n\u003Ctd>لینک\u003C\u002Ftd>\n\u003Ctd>tag یی که در \u003Ccode>&lt;head&gt;\u003C\u002Fcode> یک فایلِ CSS را به صفحه وصل می‌کند\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>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: یک قاعدهٔ CSS از چه دو بخشِ اصلی ساخته شده و اسمشان چیست؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک صفحهٔ semantic کوچک از ترم ۱ بردار (یا همین کارت را) و یک \u003Ccode>styles.css\u003C\u002Fcode> برایش بنویس که: پس‌زمینهٔ \u003Ccode>body\u003C\u002Fcode> را یک رنگ بدهد، رنگِ متنِ \u003Ccode>body\u003C\u002Fcode> را یک رنگِ دیگر، و رنگِ \u003Ccode>h1\u003C\u002Fcode> را رنگِ سومی که با آن دو تا خوانا باشد. مطمئن شو \u003Ccode>&lt;link&gt;\u003C\u002Fcode> درست وصل است و هر سه رنگ روی صفحه دیده می‌شوند.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> عمداً \u003Ccode>href\u003C\u002Fcode> را در \u003Ccode>&lt;link&gt;\u003C\u002Fcode> غلط بنویس (مثلاً یک حرف کم یا زیاد) و صفحه را نگاه کن — همه‌چیز بی‌رنگ می‌شود. حالا درستش کن. بعد یک بارِ دیگر خرابی بساز، این‌بار یک \u003Ccode>}\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>الان می‌توانی یک قاعده بنویسی و با اسمِ tag (مثلِ \u003Ccode>body\u003C\u002Fcode> یا \u003Ccode>h1\u003C\u002Fcode>) به یک نوع عنصر بخورانی‌اش. ولی همیشه نمی‌خواهی \u003Cstrong>همهٔ\u003C\u002Fstrong> \u003Ccode>&lt;p&gt;\u003C\u002Fcode> ها یک شکل باشند — گاهی فقط یکی‌شان را می‌خواهی جدا کنی. فصل بعد سراغِ selector های قوی‌تر می‌رویم: \u003Ccode>class\u003C\u002Fcode> و \u003Ccode>id\u003C\u002Fcode>، اینکه چرا \u003Ccode>class\u003C\u002Fcode> انتخابِ اولت است، چطور چند عنصر را با هم هدف بگیری، و چطور فقط عنصرهای داخلِ یک ناحیهٔ خاص را انتخاب کنی.\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,70,73,77,81,85,89,93,97,101,102,103,104,107,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":6,"slug":68,"source":8,"term":6,"title_fa":69},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":9,"slug":71,"source":8,"term":6,"title_fa":72},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":74,"slug":75,"source":8,"term":6,"title_fa":76},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":78,"slug":79,"source":8,"term":6,"title_fa":80},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":82,"slug":83,"source":8,"term":6,"title_fa":84},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":86,"slug":87,"source":8,"term":6,"title_fa":88},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":90,"slug":91,"source":8,"term":6,"title_fa":92},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":94,"slug":95,"source":8,"term":6,"title_fa":96},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":98,"slug":99,"source":8,"term":6,"title_fa":100},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":12,"slug":13,"source":8,"term":6,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":9,"slug":16,"source":8,"term":9,"title_fa":17},{"free_preview":5,"order":74,"slug":105,"source":8,"term":9,"title_fa":106},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":78,"slug":108,"source":8,"term":9,"title_fa":109},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":82,"slug":111,"source":8,"term":9,"title_fa":112},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":86,"slug":114,"source":8,"term":9,"title_fa":115},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":90,"slug":117,"source":8,"term":9,"title_fa":118},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":94,"slug":120,"source":8,"term":9,"title_fa":121},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":98,"slug":123,"source":8,"term":9,"title_fa":124},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":12,"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":6,"slug":133,"source":8,"term":74,"title_fa":134},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":9,"slug":136,"source":8,"term":74,"title_fa":137},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":74,"slug":139,"source":8,"term":74,"title_fa":140},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":78,"slug":142,"source":8,"term":74,"title_fa":143},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":82,"slug":145,"source":8,"term":74,"title_fa":146},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":86,"slug":148,"source":8,"term":74,"title_fa":149},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":90,"slug":151,"source":8,"term":74,"title_fa":152},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":94,"slug":154,"source":8,"term":74,"title_fa":155},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":98,"slug":157,"source":8,"term":74,"title_fa":158},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":12,"slug":160,"source":8,"term":74,"title_fa":161},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":129,"slug":163,"source":8,"term":74,"title_fa":164},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":6,"slug":166,"source":8,"term":78,"title_fa":167},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":9,"slug":169,"source":8,"term":78,"title_fa":170},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":74,"slug":172,"source":8,"term":78,"title_fa":173},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":78,"slug":175,"source":8,"term":78,"title_fa":176},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":82,"slug":178,"source":8,"term":78,"title_fa":179},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":86,"slug":181,"source":8,"term":78,"title_fa":182},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":90,"slug":184,"source":8,"term":78,"title_fa":185},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":94,"slug":187,"source":8,"term":78,"title_fa":188},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":6,"slug":190,"source":8,"term":82,"title_fa":191},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":9,"slug":193,"source":8,"term":82,"title_fa":194},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":74,"slug":196,"source":8,"term":82,"title_fa":197},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":78,"slug":199,"source":8,"term":82,"title_fa":200},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":82,"slug":202,"source":8,"term":82,"title_fa":203},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":86,"slug":205,"source":8,"term":82,"title_fa":206},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":90,"slug":208,"source":8,"term":82,"title_fa":209},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":94,"slug":211,"source":8,"term":82,"title_fa":212},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":98,"slug":214,"source":8,"term":82,"title_fa":215},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":12,"slug":217,"source":8,"term":82,"title_fa":218},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":6,"slug":220,"source":8,"term":86,"title_fa":221},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":9,"slug":223,"source":8,"term":86,"title_fa":224},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":74,"slug":226,"source":8,"term":86,"title_fa":227},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":78,"slug":229,"source":8,"term":86,"title_fa":230},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":82,"slug":232,"source":8,"term":86,"title_fa":233},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":86,"slug":235,"source":8,"term":86,"title_fa":236},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":90,"slug":238,"source":8,"term":86,"title_fa":239},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":94,"slug":241,"source":8,"term":86,"title_fa":242},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":98,"slug":244,"source":8,"term":86,"title_fa":245},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":12,"slug":247,"source":8,"term":86,"title_fa":248},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":129,"slug":250,"source":8,"term":86,"title_fa":251},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827104961]