قراره تو این دوره چی یاد بگیرم؟

  • آشنایی با قواعد نوشتن CSS
  • آموزش دستورات خلاصه یا Shorthand
  • یادگیری اولویت اجرای دستورات
  • آموزش پوزیشن های static و relative و fixed و ...
  • آشنایی با z-index یا لایه بندی
  • و ...

سرفصل های دوره

۱ فصل
۳۱ جلسه
۵ ساعت
۱

لیست ویدئوهای دوره

۳۱ قسمت
۰۴:۵۵:۴۲
1

CSS چیه ؟

پخش
۰۳:۴۲
3

قاعده نوشتن CSS

۰۸:۳۴
4

انتخاب کننده های ساده

۰۹:۰۳
5

انتخاب کننده های ترکیبی

۱۹:۵۹
6

کامنت در CSS

۰۳:۳۵
7

روش های رنگ دهی

۱۱:۴۶
8

بکگراند ها

۱۴:۴۲
9

حاشیه ها

۱۰:۳۷
10

دستورات خلاصه یا Shorthand

۰۴:۰۲
11

پدینگ و مارجین

۱۰:۳۶
12

عرض و ارتفاع

۱۲:۲۵
13

باکس مدل

۰۴:۴۶
14

جهت سایت یا Direction

۰۵:۱۴
15

تراز بندی متن و decoration

۱۳:۵۶
16

فضای سفید نوشته ها و transform

۱۰:۳۹
17

سایه ها

۱۰:۵۰
18

شبه کلاس ها

۱۳:۱۲
19

اولویت اجرای دستورات

۰۸:۱۷
20

لیست ها

۱۱:۲۶
21

جداول

۱۱:۲۶
22

تغیر display یا نحوه نمایش

۰۶:۱۷
23

فلکس - سیستم ستون بندی و چینش -معرفی و نحوه استفاده

۱۴:۴۲
24

فلکس - چیدمان در محور اصلی

۰۶:۲۷
25

فلکس - شکستگی در سطر

۰۷:۱۷
26

فلکس - چیدمان در محور فرعی

۰۵:۲۴
27

فلکس - تغیر مسیر

۰۶:۵۴
28

پوزیشن های static و relative و fixed

۰۹:۳۸
29

پوزیشن های absolute و sticky

۰۷:۲۱
30

z-index یا لایه بندی

۰۴:۵۶
31

gradient در CSS

۰۸:۱۳

در دنیای طراحی وب، CSS یکی از مهم‌ترین ابزارهایی است که طراحان وب برای زیبا‌سازی و جذاب کردن صفحات وب به آن نیاز دارند. دوره رایگان آموزش CSS با هدف آشنایی کامل با این زبان استایل‌دهی و یادگیری اصولی آن طراحی شده است. در این دوره، شما با مفاهیم پایه‌ای CSS، نحوه کار با ویژگی‌های مختلف استایل‌دهی، اصول واکنش‌گرایی (Responsive Design) و ایجاد صفحات وب حرفه‌ای آشنا خواهید شد. اگر به دنبال بهبود مهارت‌های طراحی وب خود هستید و می‌خواهید ظاهری جذاب و مدرن به وب‌سایت‌هایتان بدهید، این دوره نقطه شروع مناسبی برای شما خواهد بود.

چرا یادگیری CSS مهم است؟

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

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

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

در این دوره چه می آموزیم؟

در این دوره، با اصول پایه و پیشرفته CSS آشنا می‌شوید. مواردی که یاد خواهید گرفت شامل:

  1. مفاهیم پایه CSS و نحوه افزودن آن به پروژه‌ها.
  2. قاعده نوشتن CSS و استفاده از انتخاب‌کننده‌های ساده و ترکیبی.
  3. تنظیمات پایه‌ای مانند بک‌گراند، حاشیه‌ها، پدینگ، مارجین و مدل جعبه‌ای.
  4. چیدمان با Flexbox و پوزیشن‌دهی برای کنترل موقعیت و لایه‌بندی عناصر.
  5. استفاده از شبه کلاس‌ها و گرادینت‌ها برای استایل‌دهی پیشرفته.

پیش نیاز های دوره آموزش css

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

این دوره برای چه کسانی مناسب است؟

دوره آموزش css برای افرادی که می‌خواهند در زمینه طراحی وب مهارت‌های خود را تقویت کنند، مناسب است. از مبتدیانی که تازه شروع به یادگیری CSS کرده‌اند تا طراحان وب با تجربه‌ای که به دنبال ارتقاء مهارت‌های خود هستند، می‌توانند از این دوره بهره‌مند شوند. همچنین، این دوره برای کسانی که می‌خواهند با مفاهیم پیشرفته‌تری مانند Flexbox و پوزیشن‌دهی آشنا شوند و طراحی‌های پیچیده‌تری انجام دهند، بسیار مفید است.

برای یادگیری عمیق تر این مباحث در دوره طلایی آموزش فرانت اند از ۰ تا ۱۰۰ طراحی وب حرفه‌ای توسط همین مدرس تدریس شده است.


👇جهت مشاهده دوره روی تصویر زیر کلیک کنید.👇

آموزش فرانت اند

سرفصل های دوره

  1. CSS چیه؟
  2. راه های اضافه کردن css به پروژه
  3. قاعده نوشتن CSS
  4. انتخاب کننده های ساده
  5. انتخاب کننده های ترکیبی
  6. کامنت در CSS
  7. بکگراند ها
  8. حاشیه ها
  9. دستورات خلاصه یا Shorthand
  10. پدینگ و مارجین
  11. عرض و ارتفاع
  12. باکس مدل
  13. جهت سایت یا Direction
  14. تراز بندی متن و decoration
  15. فضای سفید نوشته ها و transform
  16. سایه ها
  17. شبه کلاس ها
  18. اولویت اجرای دستورات
  19. لیست ها
  20. جداول
  21. تغیر display یا نحوه نمایش
  22. فلکس – سیستم ستون بندی و چینش -معرفی و نحوه استفاده
  23. فلکس – چیدمان در محور اصلی
  24. فلکس – شکستگی در سطر
  25. فلکس – چیدمان در محور فرعی
  26. فلکس – تغیر مسیر
  27. پوزیشن های static و relative و fixed
  28. پوزیشن های absolute و sticky
  29. z-index یا لایه بندی
  30. gradient در CSS

CSS چیست؟

CSS مخفف عبارت Cascading Style Sheets است که به زبان فارسی می‌توان آن را “برگه‌های سبک آبشاری” نامید. در واقع CSS یک زبان طراحی است که به شما امکان می‌دهد استایل و ظاهر عناصر HTML را تغییر دهید. با استفاده از CSS می‌توانید به راحتی تعیین کنید که هر عنصر در صفحه چگونه نمایش داده شود. این شامل مواردی مثل تغییر رنگ‌ها، اندازه‌ها، فاصله‌ها، فونت‌ها و حتی موقعیت قرارگیری عناصر در صفحه است. به زبان ساده‌تر، HTML ساختار یک صفحه وب را فراهم می‌کند و CSS آن ساختار را زیبا و کاربرپسند می‌کند.

تاریخچه CSS

CSS در سال 1994 توسط هاکون ویوم لی پیشنهاد شد تا مشکل استایل‌دهی صفحات وب را حل کند و محتوای HTML را از طراحی جدا کند. در سال 1996، اولین نسخه استاندارد CSS1 توسط W3C منتشر شد که قابلیت‌های پایه‌ای مانند استایل‌دهی به متن و رنگ‌ها را ارائه داد.

در سال 1998، CSS2 با قابلیت‌های پیشرفته‌تر مانند چیدمان پیچیده، پشتیبانی از رسانه‌های مختلف و جداول معرفی شد. سپس، CSS3 به صورت مدولار از اوایل دهه 2000 ارائه شد و ویژگی‌های جدیدی مانند انیمیشن‌ها، ترانزیشن‌ها و طراحی ریسپانسیو را به همراه داشت. CSS به مرور زمان به یکی از ابزارهای اصلی طراحی وب تبدیل شده و همچنان در حال بهبود است.

برخی از ویژگی های css

یکی از ویژگی‌های برجسته CSS، ماهیت “آبشاری” آن است. به این معنی که اگر استایل‌هایی در سطوح مختلف تعریف شوند (مثلاً برای کل صفحه و یک بخش خاص از صفحه)، استایل‌های خاص‌تر اولویت بیشتری خواهند داشت. این به شما امکان می‌دهد تا به راحتی استایل‌هایی را برای عناصر مختلف با سطوح مختلف از جزئیات اعمال کنید. همچنین، CSS یکی از ابزارهای اصلی برای طراحی ریسپانسیو (Responsive Design) است، که به شما اجازه می‌دهد سایت‌هایی طراحی کنید که در تمامی دستگاه‌ها از جمله موبایل، تبلت و کامپیوتر به‌درستی نمایش داده شوند.

استفاده از CSS تنها به تغییر ظاهر صفحات محدود نمی‌شود. در دوره آموزش CSS شما با تکنیک‌هایی آشنا می‌شوید که تأثیر زیادی بر عملکرد و بهینه‌سازی سایت دارند. با یادگیری CSS می‌توان بارگذاری سریع‌تر صفحات، کاهش حجم فایل‌ها و بهبود تجربه کاربری را به‌طور چشمگیری فراهم کرد.

کاربردهای css

CSS کاربردهای متعددی در طراحی وب دارد، از جمله:

کاربردهای css
  • طراحی و استایل‌دهی: تعیین رنگ‌ها، فونت‌ها، اندازه‌ها، فاصله‌ها و سایر ویژگی‌های ظاهری عناصر HTML.
  • چینش و موقعیت‌گذاری: کنترل نحوه چیدمان عناصر در صفحات وب، شامل استفاده از ویژگی‌هایی مانند Flexbox و Grid.
  • طراحی ریسپانسیو: ایجاد طراحی‌هایی که به طور خودکار برای دستگاه‌های مختلف مانند موبایل و دسکتاپ بهینه شده‌اند.
  • انیمیشن و ترانزیشن: اضافه کردن انیمیشن‌ها و جلوه‌های بصری به عناصر برای افزایش جذابیت و تعامل.
  • طراحی متریال و تم‌ها: استفاده از CSS برای ایجاد تم‌های مختلف و طراحی‌های متنوع برای وب‌سایت‌ها.
  • پشتیبانی از طراحی‌های چندلایه: ایجاد طراحی‌های پیچیده با لایه‌ها و موقعیت‌گذاری دقیق.

مزایا و معایب CSS

CSS یکی از زبان‌های اساسی برای طراحی وب است که مزایای زیادی را به همراه دارد و به طراحان اجازه می‌دهد تا کنترل کاملی بر ظاهر سایت داشته باشند. با استفاده از CSS می‌توان محتوا و طراحی سایت را از هم جدا کرد، به این معنی که ساختار اصلی در کدهای HTML قرار می‌گیرد و تمام تنظیمات ظاهری و طراحی در فایل‌های CSS اعمال می‌شوند. این جداسازی نه‌تنها باعث نظم و خوانایی بیشتر کدها می‌شود، بلکه نگهداری و تغییر طراحی سایت را نیز آسان‌تر می‌کند؛ به‌طوری که با تغییر در فایل CSS، تمام صفحات سایت به‌روزرسانی می‌شوند و نیازی به ویرایش تک‌تک صفحات نیست.

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

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

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

سوالات متداول

آيا یادگیری CSS سخت است؟

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

یادگیری CSS چقدر زمان می‌برد؟

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

یادگیری CSS برای طراحی وب الزامیست؟

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