CSS زبان ظاهر صفحه است. HTML ساختار را نوشت؛ حالا همان صفحه باید خوانا، مرتب و قابل‌استفاده شود. این دوره دقیقاً از همان نقطه شروع می‌شود: از فایل استایلی که به سند HTML وصل می‌شود، تا پروژهٔ نهایی که همان صفحهٔ محصول دورهٔ HTML است — این بار کامل، واکنش‌گرا و حرفه‌ای.
در ۲۲ ویدیوی کوتاه، از اضافه‌کردن اولین link تا مدل جعبه، فلکس‌باکس، گرید، واکنش‌گرایی، متغیرها، انیمیشن و معماری فایل‌های CSS پیش می‌رویم. هر خط کد همان لحظه کنار خروجی واقعی مرورگر دیده می‌شود؛ نه اسلاید، نه تصویر ساختگی.
این دوره برای چه کسی است؟
- کسی که دورهٔ HTML را دیده و الان می‌خواهد صفحه‌اش را از حالت بی‌ظاهر بیرون بیاورد.
- کسی که CSS را «تکه‌تکه» یاد گرفته: یک چیدمان از این‌جا، یک رنگ از آن‌جا، ولی هنوز نمی‌تواند یک صفحهٔ کامل را بدون آزمون‌وخطا بچیند.
- کسی که با
floatوpositionکلنجار می‌رود و می‌خواهد فلکس‌باکس و گرید را درست و از پایه بفهمد. - کسی که سایتش روی موبایل به‌هم می‌ریزد و می‌خواهد واکنش‌گرایی را اصولی یاد بگیرد.
- توسعه‌دهنده‌ای که می‌خواهد CSS را نگه‌داری‌پذیر بنویسد: نام‌گذاری، ساختار فایل و لایه‌بندی.
پیش‌نیاز: دورهٔ HTML
این دوره فرض می‌کند HTML را می‌دانید. اپیزود ۱ با یک بررسی پیش‌نیاز شروع می‌شود: اگر هنوز با تگ‌ها، ساختار سند و معنایی‌سازی راحت نیستید، اول دورهٔ جامع HTML از صفر را ببینید و بعد برگردید.
چرا؟ چون پروژهٔ محوری هر دو دوره یکی است: صفحهٔ محصول یک فروشگاه. در دورهٔ HTML ساختارش ساخته شد؛ در این دوره ظاهرش را می‌سازیم. اگر HTML را ندیده باشید، این صفحه برایتان فقط یک فایل ناشناس است.
دورهٔ جامع HTML از صفر — inzip.ir/series/23-html-series
بعد از این دوره چه کاری می‌توانید انجام دهید
- فایل استایل را درست به سند HTML وصل کنید و بدانید چرا استایل اعمال نمی‌شود.
- مدل جعبه را کامل کنترل کنید: فاصلهٔ داخلی، حاشیه، ابعاد و سرریز.
- با واحدهای درست اندازه بدهید:
rem،em،%،vhوclamp(). - انتخابگر درست بنویسید و آبشار، ارث‌بری و اولویت را بفهمید — و از جنگ اولویت خارج شوید.
- متن فارسی را خوانا تایپوگرافی کنید: وب‌فونت،
line-height، مقیاس تیتر. - صفحه را با فلکس‌باکس و گرید بچینید، بدون حدس‌زدن.
- سایت را واکنش‌گرا کنید: Mobile-First، تصویر تطبیقی و
container query. - با متغیرها سیستم رنگ و تم بسازید و حالت روشن/تاریک را پیاده کنید.
- انیمیشن و تعامل بسازید و بدانید کدام انیمیشن به دسترس‌پذیری آسیب می‌زند.
- یک صفحهٔ قابل‌دسترس، سریع و قابل‌نگهداری تحویل دهید.
چطور آموزش داده می‌شود؟
هر اپیزود ۶ تا ۱۱ دقیقه است. کد داخل ادیتور نوشته می‌شود و همان لحظه نتیجه‌اش در مرورگر واقعی دیده می‌شود؛ هر جا لازم باشد، پنل Styles مرورگر باز می‌شود و همان چیزی که در ابزار بازرسی می‌بینید آموزش داده می‌شود. هیچ اپیزودی با مکث مصنوعی طولانی نشده است.
سرفصل‌های دوره
۲۲ ویدیو در پنج بخش، از اتصال فایل استایل تا پروژهٔ پایانی و معماری CSS.
بخش ۱ — زبان CSS
- اپیزود ۱ — اتصال CSS به سند HTML:ساختار فایل استایل، ترتیب بارگذاری و ابزار بازرسی مرورگر — بررسی پیش‌نیاز و ارجاع به دورهٔ HTML،
link rel="stylesheet"و مسیر درست، inline و<style>و اینکه چرا فقط برای استثنا خوب‌اند، ساختcss/style.css، ترتیب بارگذاری. - اپیزود ۲ — مدل جعبه در CSS:کنترل فضای داخلی، حاشیه، ابعاد و سرریز محتوا —
content/padding/border/margin،box-sizing: border-boxو اینکه چرا از اول روشنش می‌کنیم، خواص کوتاه‌نویسpadding/margin،widthوmax-width،overflowوborder-radius. - اپیزود ۳ — واحدهای اندازه‌گیری:از px و rem تا واحدهای نسبی و منطق انتخاب در پروژهٔ واقعی — واحد مطلق و نسبی،
remبر پایهٔ ریشه وemبر پایهٔ والد،%نسبت به چه چیزی،vh/vwو مشکل نوار آدرس موبایل،chو طول خوانا. - اپیزود ۴ — انتخابگرهای CSS:از انتخابگرهای پایه تا شبه‌کلاس‌ها، ترکیب‌ها و انتخابگرهای صفتی — نوع، کلاس، شناسه، ترکیب فرزند و همسایه (
>،+،~)،:hover،:focus،:focus-visible،:first-child،:nth-child(2n)،:not()و:is(). - اپیزود ۵ — آبشار، ارث‌بری و اولویت:چرا استایل شما اعمال نمی‌شود و چگونه از جنگ اولویت خارج شویم — cascade و ترتیب نوشتن، specificity و محاسبهٔ سادهٔ آن، ارث‌بری و
inherit/initial،!importantو هزینه‌اش، سازمان‌دهی کلاس‌ها برای جلوگیری از جنگ اولویت. - اپیزود ۶ — رنگ و تایپوگرافی:خوانایی متن فارسی، وب‌فونت و مقیاس منعطف تیترها —
#hex،rgb()،hsl()،oklchو شفافیت،font-familyبا فهرست جانشین،font-display: swapو وب‌فونت وزیرمتن،line-heightبرای متن فارسی،letter-spacingوtext-align. - اپیزود ۷ — شبه‌عناصر و تزئین:
::before/::after، شمارنده‌ها، پس‌زمینه و گرادیان، فیلترها —::beforeو::afterوcontent، شمارنده‌ها (counter-reset/counter-increment) و نشانه‌های سفارشی فهرست، چند پس‌زمینه و گرادیان خطی/شعاعی،box-shadowوtext-shadow،filterوbackdrop-filter.
بخش ۲ — چیدمان
- اپیزود ۸ — جریان طبیعی سند و display:صفحه پیش از چیدمان چگونه شکل می‌گیرد — بلوک، اینلاین،
inline-block،display: noneدر برابرvisibility: hidden، رفتار natural flow، فروپاشی margin (margin collapse)،overflowو شکل‌گیری BFC. - اپیزود ۹ — چیدمان با Flexbox — بخش اول: محورها، تراز و توزیع فضا —
display: flexو محور اصلی/متقاطع،flex-directionوwrap،justify-content،align-itemsوalign-self،gap. - اپیزود ۱۰ — چیدمان با Flexbox — بخش دوم: کارت‌های هم‌ارتفاع، کنترل سرریز و الگوهای رایج —
flex-grow/shrinkدر عمل،min-width: autoو سرریز متن، ستون هم‌ارتفاع وalign-items: stretch، چسبیدن دکمه به پایین کارت،margin-inline-start: auto. - اپیزود ۱۱ — چیدمان با CSS Grid — بخش اول: شبکهٔ دوبعدی، ستون‌های انعطاف‌پذیر و گالری واکنش‌گرا — تعریف ستون و ردیف،
fr،minmax()،repeat(auto-fit, minmax())و شبکهٔ خودجوش،gapوplace-items. - اپیزود ۱۲ — چیدمان با CSS Grid — بخش دوم: نواحی نام‌دار، چیدمان صفحهٔ کامل و subgrid —
grid-template-areasو نقشهٔ صفحه، نام‌گذاری خطوط وspan،grid-row/column، هم‌ترازی سلول‌ها،subgridبرای هم‌ترازی کارت‌ها. - اپیزود ۱۳ — جای‌گذاری و لایه‌بندی:position، چسبندگی و مدل واقعی z-index — چهار حالت
position،inset، والدrelativeبرای absolute،stickyو شرط‌هایش،fixedو نوار پایین موبایل.
بخش ۳ — واکنش‌گرایی و CSS مدرن
- اپیزود ۱۴ — طراحی واکنش‌گرا — بخش اول: رویکرد Mobile-First و نقطه‌شکست‌های محتوامحور —
meta viewport،@media (min-width: …)، چرا موبایل‌اول، انتخاب breakpoint بر اساس محتوا، واحدهای نسبی در نقطه‌شکست. - اپیزود ۱۵ — طراحی واکنش‌گرا — بخش دوم: تصویر، نسبت ابعاد و رسانهٔ تطبیقی —
max-width: 100%وheight: auto،aspect-ratioو جلوگیری از پرش چیدمان،object-fitوobject-position،srcsetوsizes،pictureبرای تصویر هنری. - اپیزود ۱۶ — متغیرهای CSS و تم‌پذیری:توکن‌های طراحی و پیاده‌سازی حالت روشن و تاریک —
--tokenوvar()، دامنهٔ متغیر و ارث‌بری، تم باprefers-color-scheme، تغییر تم با کلاس روی:root، توکن‌های رنگ، فاصله و گردی گوشه. - اپیزود ۱۷ — CSS مدرن:container query، انتخابگر :has()، nesting، ویژگی‌های منطقی و انیمیشن‌های اسکرول —
container-typeو@container،:has()و انتخاب والد، nesting بومی و&،margin-inline/padding-blockبرای راست‌به‌چپ،@layerو ترتیب لایه‌ها.
بخش ۴ — حرکت و اجزا
- اپیزود ۱۸ — حرکت و انیمیشن:transition، transform و انیمیشن‌های مبتنی بر keyframes —
transitionو کدام خواص ارزان‌اند،transform: translate/scale/rotate،@keyframesوanimation، اسپینر و اسکلتون لودینگ،prefers-reduced-motion. - اپیزود ۱۹ — طراحی اجزای رابط:دکمه، فرم، کارت و جدول در قالب یک کتابخانهٔ سبک — حالت‌های دکمه: hover/focus/active/disabled، استایل
input،select،textareaو حالت خطا با:invalid، کارت با سایه و لایهٔ درست، جدول واکنش‌گرا و راه‌راه، نشان‌ها و پیام‌ها.
بخش ۵ — کیفیت، معماری و تحویل
- اپیزود ۲۰ — دسترس‌پذیری و کیفیت در CSS:فوکوس، کنتراست، استایل چاپ و پایداری چیدمان —
:focus-visibleو حذف‌نکردن فوکوس، کنتراست رنگ و اندازهٔ متن، اندازهٔ هدف لمسی،visually-hiddenدر برابرdisplay:none، لینک پرش وscroll-behavior. - اپیزود ۲۱ — معماری و نگهداری CSS:نام‌گذاری، ساختار فایل، لایه‌بندی و بازآرایی — قاعدهٔ نام‌گذاری کلاس و الگوی BEM به زبان ساده، ساختار پوشه و ترتیب فایل‌ها (
base/layout/components/utilities)،@layerبرای ترتیب مشخص، پیدا کردن استایل مرده و بازآرایی یک فایل به‌هم‌ریخته، چک‌لیست نگهداشت. - اپیزود ۲۲ — پروژهٔ پایانی:بازطراحی کامل صفحهٔ محصول و نقشهٔ ادامهٔ مسیر یادگیری — ساختار فایل و لایه‌ها، توکن‌ها، هدر و منو، بخش محصول، جدول مشخصات.
چه چیزی دریافت می‌کنید
- ۲۲ ویدیوی کوتاه و بدون حاشیه با فصل‌بندی داخلی
- نزدیک ۳ ساعت و نیم آموزش، از اولین فایل استایل تا پروژهٔ پایانی
- کد هر اپیزود کنار خروجی واقعی مرورگر
- پروژهٔ واحد: صفحهٔ محصول یک فروشگاه — ساخته‌شده در دورهٔ HTML، استایل‌داده‌شده در این دوره
- فایل تمرین و چک‌لیست پایان دوره
- بدون نصب ابزار سنگین: یک ادیتور و یک مرورگر کافی است
پنج ویدیوی اول رایگان است — بدون ثبت‌نام. برای دیدن ادامه، دوره را تهیه کنید.