این دوره اصول CSS را به قطعات واضح و قابل هضم تقسیم می کند. در طی چند ماژول بعدی، نحوه عملکرد جنبه های اصلی CSS و نحوه استفاده موثر از آنها در پروژه های خود را خواهید آموخت. برای پیمایش ماژول ها از منوی لوگوی "Learn CSS" استفاده کنید.
شما اصول CSS مانند مدل جعبه، آبشار و ویژگی، flexbox، grid و z-index را خواهید آموخت. همچنین با توابع، انواع رنگ ها، گرادیان ها، ویژگی های منطقی و وراثت آشنا خواهید شد تا شما را به یک توسعه دهنده فرانت اند کامل تبدیل کند که آماده پذیرش هر رابط کاربری است.
هر ماژول پر از دموهای تعاملی و خودارزیابی است تا دانش خود را آزمایش کنید. علاوه بر یادگیری از طریق خواندن و دمو، یک قسمت پادکست همراه با هر موضوع به عنوان راه دیگری برای یادگیری و ادامه گسترش دانش شما وجود دارد.
این دوره برای توسعه دهندگان CSS مبتدی و پیشرفته ایجاد شده است. می‌توانید این سری را از ابتدا تا انتها مرور کنید تا به درک کلی از CSS از بالا به پایین دست پیدا کنید، یا می‌توانید از آن به عنوان مرجعی برای موضوعات خاص استفاده کنید. برای کسانی که به طور کلی در زمینه توسعه وب تازه کار هستند، آموزش HTML را بررسی کنید تا با نحوه نوشتن نشانه گذاری و پیوند دادن شیوه نامه های خود آشنا شوید.
در اینجا چیزی است که یاد خواهید گرفت:
مدل جعبه
از آنجایی که هر چیزی که CSS نمایش می دهد یک جعبه است، درک نحوه عملکرد CSS Box Model پایه اصلی CSS است.
انتخابگرها
برای اعمال CSS روی یک عنصر، باید آن را انتخاب کنید. CSS راه های مختلفی برای انجام این کار در اختیار شما قرار می دهد و می توانید آنها را در این ماژول بررسی کنید.
آبشار
گاهی اوقات دو یا چند قانون CSS رقیب می توانند برای یک عنصر اعمال شوند. دریابید که مرورگر چگونه انتخاب می‌کند که از کدام مورد استفاده کند، و چگونه این انتخاب را کنترل کنید.
اختصاصی
این ماژول نگاه عمیق‌تری به ویژگی‌ها، بخش کلیدی آبشار، دارد.
وراثت
اگر مقداری برای آنها تعیین نکنید، برخی از ویژگی‌های CSS ارث می‌برند. در این ماژول بیاموزید که چگونه این کار می کند و چگونه از آن به نفع خود استفاده کنید.
رنگ
چندین روش مختلف برای تعیین رنگ در CSS وجود دارد. این ماژول رایج ترین مقادیر رنگ مورد استفاده را بررسی می کند.
واحدهای اندازه گیری
نحوه اندازه گیری عناصر با استفاده از CSS، کار با رسانه انعطاف پذیر وب را بیاموزید.
چیدمان
مروری بر روش‌های مختلف طرح‌بندی که هنگام ساختن یک کامپوننت یا صفحه‌آرایی باید انتخاب کنید.
فلکس باکس
Flexbox مکانیزمی است که برای چیدمان گروهی از اقلام در یک بعد طراحی شده است. نحوه استفاده از آن را در این ماژول بیاموزید.
توری
CSS Grid Layout یک سیستم چیدمان دوبعدی را ارائه می دهد که چیدمان را در سطرها و ستون ها کنترل می کند. همه چیزهایی را که شبکه ارائه می دهد کشف کنید.
خواص منطقی
خواص و مقادیر منطقی و مرتبط با جریان به جریان متن مرتبط هستند، نه شکل فیزیکی صفحه. یاد بگیرید که چگونه از این رویکرد جدیدتر در CSS استفاده کنید.
فاصله گذاری
نحوه انتخاب بهترین روش فاصله بین عناصر را برای روش چیدمانی که استفاده می کنید و مؤلفه ای که می سازید، بیابید.
شبه عناصر
شبه عنصر مانند افزودن یا هدف قرار دادن یک عنصر اضافی بدون نیاز به افزودن HTML بیشتر است. آنها نقش های مختلفی دارند و شما می توانید در این ماژول با آنها آشنا شوید.
شبه طبقات
کلاس های شبه به شما امکان می دهند CSS را بر اساس تغییرات حالت اعمال کنید. این بدان معناست که طرح شما می تواند به ورودی کاربر، مانند آدرس ایمیل نامعتبر، واکنش نشان دهد.
مرز ها
یک حاشیه یک قاب برای جعبه های شما فراهم می کند. نحوه تغییر اندازه، سبک و رنگ حاشیه ها با استفاده از CSS را بیاموزید.
سایه ها
چندین راه برای افزودن سایه به متن و عناصر در CSS وجود دارد. نحوه استفاده از هر گزینه و وظایفی که برای آنها طراحی شده است را بیاموزید.
تمرکز
اهمیت تمرکز در برنامه های کاربردی وب خود را درک کنید. شما یاد خواهید گرفت که چگونه تمرکز را مدیریت کنید، و چگونه مطمئن شوید که مسیر عبور از صفحه شما هم برای افرادی که از ماوس استفاده می کنند و هم برای افرادی که از صفحه کلید برای پیمایش استفاده می کنند، کار می کند.
Z-index و انباشتن زمینه ها
با استفاده از z-index و زمینه انباشتگی، نحوه کنترل ترتیب لایه بندی عناصر روی هم را بیاموزید.
کارکرد
CSS دارای طیف وسیعی از توابع داخلی است. با برخی از عملکردهای کلیدی و نحوه استفاده از آنها آشنا شوید.
گرادیان ها
در این ماژول، نحوه استفاده از انواع مختلف گرادینت های موجود در CSS را خواهید یافت. گرادیان ها می توانند مجموعه کاملی از افکت های مفید را ایجاد کنند، بدون اینکه نیازی به برنامه های گرافیکی برای ایجاد تصاویر داشته باشند.
تصاوير متحرك
انیمیشن راهی عالی برای برجسته کردن عناصر تعاملی و افزودن علاقه و سرگرمی به طرح های شما است. با نحوه افزودن و کنترل افکت های انیمیشن با CSS آشنا شوید.
فیلترها
فیلترها در CSS به این معنی است که می‌توانید افکت‌هایی را اعمال کنید که فکر می‌کنید فقط در یک برنامه گرافیکی ممکن است. در این ماژول، می توانید موارد موجود را کشف کنید.
حالت های ترکیبی
با ترکیب دو یا چند لایه جلوه های ترکیبی ایجاد کنید و یاد بگیرید که چگونه یک تصویر با پس زمینه سفید را در این ماژول در حالت های ترکیبی جدا کنید.
لیست ها
یک لیست، از نظر ساختاری، از یک عنصر محفظه لیست پر شده با آیتم های لیست تشکیل شده است. در این ماژول، نحوه استایل دادن به تمام قسمت های یک لیست را خواهید آموخت.
انتقال ها
یاد بگیرید که چگونه انتقال بین حالت های یک عنصر را تعریف کنید. از انتقال برای بهبود تجربه کاربر با ارائه بازخورد بصری برای تعامل کاربر استفاده کنید.
سرریز
Overflow نحوه برخورد شما با محتوایی است که در اندازه والدین تنظیم شده نمی گنجد. در این ماژول، خارج از چارچوب فکر می‌کنید و یاد می‌گیرید که چگونه به محتوای سرریز استایل دهید.
پس زمینه ها
نحوه استایل دادن به پس زمینه جعبه ها با استفاده از CSS را بیاموزید.
متن و تایپوگرافی
نحوه استایل دادن به متن در وب را بیاموزید.
نتیجه گیری و مراحل بعدی
منابع بیشتر برای کمک به شما در برداشتن گام های بعدی.
بنابراین، آیا برای یادگیری CSS آماده هستید؟ بیا شروع کنیم .
،این دوره اصول CSS را به قطعات واضح و قابل هضم تقسیم می کند. در طی چند ماژول بعدی، نحوه عملکرد جنبه های اصلی CSS و نحوه استفاده موثر از آنها در پروژه های خود را خواهید آموخت. برای پیمایش ماژول ها از منوی لوگوی "Learn CSS" استفاده کنید.
شما اصول CSS مانند مدل جعبه، آبشار و ویژگی، flexbox، grid و z-index را خواهید آموخت. همچنین با توابع، انواع رنگ ها، گرادیان ها، ویژگی های منطقی و وراثت آشنا خواهید شد تا شما را به یک توسعه دهنده فرانت اند کامل تبدیل کند که آماده پذیرش هر رابط کاربری است.
هر ماژول پر از دموهای تعاملی و خودارزیابی است تا دانش خود را آزمایش کنید. علاوه بر یادگیری از طریق خواندن و دمو، یک قسمت پادکست همراه با هر موضوع به عنوان راه دیگری برای یادگیری و ادامه گسترش دانش شما وجود دارد.
این دوره برای توسعه دهندگان CSS مبتدی و پیشرفته ایجاد شده است. می‌توانید این سری را از ابتدا تا انتها مرور کنید تا به درک کلی از CSS از بالا به پایین دست پیدا کنید، یا می‌توانید از آن به عنوان مرجعی برای موضوعات خاص استفاده کنید. برای کسانی که به طور کلی در زمینه توسعه وب تازه کار هستند، آموزش HTML را بررسی کنید تا با نحوه نوشتن نشانه گذاری و پیوند دادن شیوه نامه های خود آشنا شوید.
در اینجا چیزی است که یاد خواهید گرفت:
مدل جعبه
از آنجایی که هر چیزی که CSS نمایش می دهد یک جعبه است، درک نحوه عملکرد CSS Box Model پایه اصلی CSS است.
انتخابگرها
برای اعمال CSS روی یک عنصر، باید آن را انتخاب کنید. CSS راه های مختلفی برای انجام این کار در اختیار شما قرار می دهد و می توانید آنها را در این ماژول بررسی کنید.
آبشار
گاهی اوقات دو یا چند قانون CSS رقیب می توانند برای یک عنصر اعمال شوند. دریابید که مرورگر چگونه انتخاب می‌کند که از کدام مورد استفاده کند، و چگونه این انتخاب را کنترل کنید.
اختصاصی
این ماژول نگاه عمیق‌تری به ویژگی‌ها، بخش کلیدی آبشار، دارد.
وراثت
اگر مقداری برای آنها تعیین نکنید، برخی از ویژگی‌های CSS ارث می‌برند. در این ماژول بیاموزید که چگونه این کار می کند و چگونه از آن به نفع خود استفاده کنید.
رنگ
چندین روش مختلف برای تعیین رنگ در CSS وجود دارد. این ماژول رایج ترین مقادیر رنگ مورد استفاده را بررسی می کند.
واحدهای اندازه گیری
نحوه اندازه گیری عناصر با استفاده از CSS، کار با رسانه انعطاف پذیر وب را بیاموزید.
چیدمان
مروری بر روش‌های مختلف طرح‌بندی که هنگام ساختن یک کامپوننت یا صفحه‌آرایی باید انتخاب کنید.
فلکس باکس
Flexbox مکانیزمی است که برای چیدمان گروهی از اقلام در یک بعد طراحی شده است. نحوه استفاده از آن را در این ماژول بیاموزید.
توری
CSS Grid Layout یک سیستم چیدمان دوبعدی را ارائه می دهد که چیدمان را در سطرها و ستون ها کنترل می کند. همه چیزهایی را که شبکه ارائه می دهد کشف کنید.
خواص منطقی
خواص و مقادیر منطقی و مرتبط با جریان به جریان متن مرتبط هستند، نه شکل فیزیکی صفحه. یاد بگیرید که چگونه از این رویکرد جدیدتر در CSS استفاده کنید.
فاصله گذاری
نحوه انتخاب بهترین روش فاصله بین عناصر را برای روش چیدمانی که استفاده می کنید و مؤلفه ای که می سازید، بیابید.
شبه عناصر
شبه عنصر مانند افزودن یا هدف قرار دادن یک عنصر اضافی بدون نیاز به افزودن HTML بیشتر است. آنها نقش های مختلفی دارند و شما می توانید در این ماژول با آنها آشنا شوید.
شبه طبقات
کلاس های شبه به شما امکان می دهند CSS را بر اساس تغییرات حالت اعمال کنید. این بدان معناست که طرح شما می تواند به ورودی کاربر، مانند آدرس ایمیل نامعتبر، واکنش نشان دهد.
مرز ها
یک حاشیه یک قاب برای جعبه های شما فراهم می کند. نحوه تغییر اندازه، سبک و رنگ حاشیه ها با استفاده از CSS را بیاموزید.
سایه ها
چندین راه برای افزودن سایه به متن و عناصر در CSS وجود دارد. نحوه استفاده از هر گزینه و وظایفی که برای آنها طراحی شده است را بیاموزید.
تمرکز
اهمیت تمرکز در برنامه های کاربردی وب خود را درک کنید. شما یاد خواهید گرفت که چگونه تمرکز را مدیریت کنید، و چگونه مطمئن شوید که مسیر عبور از صفحه شما هم برای افرادی که از ماوس استفاده می کنند و هم برای افرادی که از صفحه کلید برای پیمایش استفاده می کنند، کار می کند.
Z-index و انباشتن زمینه ها
با استفاده از z-index و زمینه انباشتگی، نحوه کنترل ترتیب لایه بندی عناصر روی هم را بیاموزید.
کارکرد
CSS دارای طیف وسیعی از توابع داخلی است. با برخی از عملکردهای کلیدی و نحوه استفاده از آنها آشنا شوید.
گرادیان ها
در این ماژول، نحوه استفاده از انواع مختلف گرادینت های موجود در CSS را خواهید یافت. گرادیان ها می توانند مجموعه کاملی از افکت های مفید را ایجاد کنند، بدون اینکه نیازی به برنامه های گرافیکی برای ایجاد تصاویر داشته باشند.
تصاوير متحرك
انیمیشن راهی عالی برای برجسته کردن عناصر تعاملی و افزودن علاقه و سرگرمی به طرح های شما است. با نحوه افزودن و کنترل افکت های انیمیشن با CSS آشنا شوید.
فیلترها
فیلترها در CSS به این معنی است که می‌توانید افکت‌هایی را اعمال کنید که فکر می‌کنید فقط در یک برنامه گرافیکی ممکن است. در این ماژول، می توانید موارد موجود را کشف کنید.
حالت های ترکیبی
با ترکیب دو یا چند لایه جلوه های ترکیبی ایجاد کنید و یاد بگیرید که چگونه یک تصویر با پس زمینه سفید را در این ماژول در حالت های ترکیبی جدا کنید.
لیست ها
یک لیست، از نظر ساختاری، از یک عنصر محفظه لیست پر شده با آیتم های لیست تشکیل شده است. در این ماژول، نحوه استایل دادن به تمام قسمت های یک لیست را خواهید آموخت.
انتقال ها
یاد بگیرید که چگونه انتقال بین حالت های یک عنصر را تعریف کنید. از انتقال برای بهبود تجربه کاربر با ارائه بازخورد بصری برای تعامل کاربر استفاده کنید.
سرریز
Overflow نحوه برخورد شما با محتوایی است که در اندازه والدین تنظیم شده نمی گنجد. در این ماژول، خارج از چارچوب فکر می‌کنید و یاد می‌گیرید که چگونه به محتوای سرریز استایل دهید.
پس زمینه ها
نحوه استایل دادن به پس زمینه جعبه ها با استفاده از CSS را بیاموزید.
متن و تایپوگرافی
نحوه استایل دادن به متن در وب را بیاموزید.
نتیجه گیری و مراحل بعدی
منابع بیشتر برای کمک به شما در برداشتن گام های بعدی.
بنابراین، آیا برای یادگیری CSS آماده هستید؟ بیا شروع کنیم .