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