به یادگیری CSS خوش آمدید!

این دوره اصول CSS را به قطعات واضح و قابل هضم تقسیم می کند. در طی چند ماژول بعدی، نحوه عملکرد جنبه های اصلی CSS و نحوه استفاده موثر از آنها در پروژه های خود را خواهید آموخت. برای پیمایش ماژول ها از منوی لوگوی "Learn CSS" استفاده کنید.

شما اصول CSS مانند مدل جعبه، آبشار و ویژگی، flexbox، grid و z-index را خواهید آموخت. همچنین با توابع، انواع رنگ ها، گرادیان ها، ویژگی های منطقی و وراثت آشنا خواهید شد تا شما را به یک توسعه دهنده فرانت اند کامل تبدیل کند که آماده پذیرش هر رابط کاربری است.

هر ماژول پر از دموهای تعاملی و خودارزیابی است تا دانش خود را آزمایش کنید. علاوه بر یادگیری از طریق خواندن و دمو، یک قسمت پادکست همراه با هر موضوع به عنوان راه دیگری برای یادگیری و ادامه گسترش دانش شما وجود دارد.

این دوره برای توسعه دهندگان CSS مبتدی و پیشرفته ایجاد شده است. می‌توانید این سری را از ابتدا تا انتها مرور کنید تا به درک کلی از CSS از بالا به پایین دست پیدا کنید، یا می‌توانید از آن به عنوان مرجعی برای موضوعات خاص استفاده کنید. برای کسانی که به طور کلی در زمینه توسعه وب تازه کار هستند، آموزش HTML را بررسی کنید تا با نحوه نوشتن نشانه گذاری و پیوند دادن شیوه نامه های خود آشنا شوید.

در اینجا چیزی است که یاد خواهید گرفت:

مدل جعبه

از آنجایی که هر چیزی که CSS نمایش می دهد یک جعبه است، درک نحوه عملکرد CSS Box Model پایه اصلی CSS است.

انتخابگرها

برای اعمال CSS روی یک عنصر، باید آن را انتخاب کنید. CSS راه های مختلفی برای انجام این کار در اختیار شما قرار می دهد و می توانید آنها را در این ماژول بررسی کنید.

لانه سازی

تودرتوی قوانین سبک CSS می‌تواند شیت‌های سبک شما را سازماندهی‌تر، خواندن آسان‌تر و قابل نگهداری‌تر کند.

آبشار

گاهی اوقات دو یا چند قانون CSS رقیب می توانند برای یک عنصر اعمال شوند. دریابید که مرورگر چگونه انتخاب می‌کند که از کدام مورد استفاده کند، و چگونه این انتخاب را کنترل کنید.

خاص بودن

این ماژول نگاه عمیق‌تری به ویژگی‌ها، بخش کلیدی آبشار، دارد.

ارث

اگر مقداری برای آن‌ها تعیین نکنید، برخی از ویژگی‌های CSS ارث می‌برند. در این ماژول بیاموزید که چگونه این کار می کند و چگونه از آن به نفع خود استفاده کنید.

رنگ

چندین روش مختلف برای تعیین رنگ در CSS وجود دارد. این ماژول رایج ترین مقادیر رنگ مورد استفاده را بررسی می کند.

واحدهای اندازه گیری

نحوه اندازه گیری عناصر با استفاده از CSS، کار با رسانه انعطاف پذیر وب را بیاموزید.

طرح بندی

مروری بر روش‌های مختلف طرح‌بندی که هنگام ساختن یک کامپوننت یا صفحه‌آرایی باید انتخاب کنید.

فلکس باکس

Flexbox مکانیزمی است که برای چیدمان گروهی از اقلام در یک بعد طراحی شده است. نحوه استفاده از آن را در این ماژول بیاموزید.

شبکه

CSS Grid Layout یک سیستم چیدمان دوبعدی را ارائه می دهد که چیدمان را در سطرها و ستون ها کنترل می کند. همه چیزهایی را که شبکه ارائه می دهد کشف کنید.

خواص منطقی

خواص و مقادیر منطقی و مرتبط با جریان به جریان متن مرتبط هستند، نه شکل فیزیکی صفحه. یاد بگیرید که چگونه از این رویکرد جدیدتر در CSS استفاده کنید.

ویژگی های سفارشی

ویژگی های سفارشی یا متغیرهای CSS به شما امکان می دهد مقادیر را در CSS خود سازماندهی و مجدداً استفاده کنید، به طوری که سبک های شما انعطاف پذیرتر و قابل درک تر باشد.

فاصله گذاری

نحوه انتخاب بهترین روش فاصله بین عناصر را برای روش چیدمانی که استفاده می کنید و مؤلفه ای که می سازید، بیابید.

شبه عناصر

شبه عنصر مانند افزودن یا هدف قرار دادن یک عنصر اضافی بدون نیاز به افزودن HTML بیشتر است. آنها نقش های مختلفی دارند و شما می توانید در این ماژول با آنها آشنا شوید.

شبه طبقات

کلاس های شبه به شما امکان می دهند CSS را بر اساس تغییرات حالت اعمال کنید. این بدان معناست که طرح شما می تواند به ورودی کاربر، مانند آدرس ایمیل نامعتبر، واکنش نشان دهد.

مرزها

یک حاشیه یک قاب برای جعبه های شما فراهم می کند. نحوه تغییر اندازه، سبک و رنگ حاشیه ها با استفاده از CSS را بیاموزید.

سایه ها

چندین راه برای افزودن سایه به متن و عناصر در CSS وجود دارد. نحوه استفاده از هر گزینه و وظایفی که برای آنها طراحی شده است را بیاموزید.

تمرکز کنید

اهمیت تمرکز در برنامه های کاربردی وب خود را درک کنید. شما یاد خواهید گرفت که چگونه تمرکز را مدیریت کنید، و چگونه مطمئن شوید که مسیر عبور از صفحه شما هم برای افرادی که از ماوس استفاده می کنند و هم برای افرادی که از صفحه کلید برای پیمایش استفاده می کنند، کار می کند.

نشانگرها و نشانگرها

مکان نما یک راه ضروری برای کاربران شما است تا بدانند با چه چیزی در حال تعامل هستند. در این ماژول، یاد بگیرید که چگونه می توانید مکان نماها را در شرایط خاص استایل دهید.

Z-index و انباشتن زمینه ها

با استفاده از z-index و زمینه انباشتگی، نحوه کنترل ترتیب لایه بندی عناصر روی هم را بیاموزید.

موقعیت لنگر

موقعیت یابی لنگر CSS راهی را برای قرار دادن یک عنصر نسبت به عنصر دیگر ارائه می دهد.

پاپاور و دیالوگ

پاپاور هر عنصری است که دارای ویژگی popover است و برای طیف وسیعی از الگوهای تعاملی، از جمله راهنمای ابزار، هشدارها، نان تست‌ها و موارد دیگر مفید است.

توابع

CSS دارای طیف وسیعی از توابع داخلی است. با برخی از عملکردهای کلیدی و نحوه استفاده از آنها آشنا شوید.

مسیرها، اشکال، برش، و پوشش

مسیرها، شکل ها، برش دادن و ماسک کردن به توسعه دهندگان این امکان را می دهد که از طریق توابع مختلف، اشکال پیچیده را در CSS ارائه دهند که می تواند تجربیات به یاد ماندنی را برای کاربران شما ایجاد کند.

گرادیان ها

در این ماژول، نحوه استفاده از انواع مختلف گرادینت های موجود در CSS را خواهید یافت. گرادیان ها می توانند مجموعه کاملی از افکت های مفید را ایجاد کنند، بدون اینکه نیازی به برنامه های گرافیکی برای ایجاد تصاویر داشته باشند.

انیمیشن ها

انیمیشن راهی عالی برای برجسته کردن عناصر تعاملی و افزودن علاقه و سرگرمی به طرح های شما است. با نحوه افزودن و کنترل افکت های انیمیشن با CSS آشنا شوید.

فیلترها

فیلترها در CSS به این معنی است که می‌توانید افکت‌هایی را اعمال کنید که فکر می‌کنید فقط در یک برنامه گرافیکی ممکن است. در این ماژول، می توانید موارد موجود را کشف کنید.

حالت های ترکیبی

با ترکیب دو یا چند لایه جلوه های ترکیبی ایجاد کنید و یاد بگیرید که چگونه یک تصویر با پس زمینه سفید را در این ماژول در حالت های ترکیبی جدا کنید.

لیست ها

یک لیست، از نظر ساختاری، از یک عنصر محفظه لیست پر شده با آیتم های لیست تشکیل شده است. در این ماژول، نحوه استایل دادن به تمام قسمت های یک لیست را خواهید آموخت.

شمارنده ها

CSS چندین راه برای کنترل شمارنده ها در یک لیست برای موارد استفاده مختلف ارائه می دهد. در این ماژول، نحوه کنترل شمارنده ها در یک لیست را خواهید آموخت.

انتقال ها

یاد بگیرید که چگونه انتقال بین حالت های یک عنصر را تعریف کنید. از انتقال برای بهبود تجربه کاربر با ارائه بازخورد بصری برای تعامل کاربر استفاده کنید.

مشاهده انتقال برای SPA

View Transitions راهی برای نشان دادن تداوم یا زمینه بین صفحات در SPA به شما می دهد.

سرریز

Overflow نحوه برخورد شما با محتوایی است که در اندازه والدین تنظیم شده نمی گنجد. در این ماژول، خارج از چارچوب فکر می‌کنید و یاد می‌گیرید که چگونه به محتوای سرریز استایل دهید.

پس زمینه ها

نحوه استایل دادن به پس زمینه جعبه ها با استفاده از CSS را بیاموزید.

متن و تایپوگرافی

نحوه استایل دادن به متن در وب را بیاموزید.

پرس و جوهای کانتینر

بر خلاف پرس و جوهای رسانه ای، پرس و جوهای کانتینر به شما امکان می دهند تا تنظیمات خاص تری را در عناصر بر اساس اندازه و وضعیت اجداد یا ظروف آنها انجام دهید.

نتیجه گیری و مراحل بعدی

منابع بیشتر برای کمک به شما در برداشتن گام های بعدی.

بنابراین، آیا برای یادگیری CSS آماده هستید؟ بیایید شروع کنیم .