دوره CSS for Fleet Management Organizations همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره CSS for Fleet Management Organizations

موضوع کلی: برنامه نویسی

موضوع میانی: CSS

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

• 1. مقدمه: نقش CSS در رابط‌های کاربری مدیریت ناوگان
• 2. CSS چیست و چرا برای داشبوردهای مدیریتی حیاتی است؟
• 3. روش‌های افزودن CSS به صفحه: داخلی، خارجی و درون‌خطی
• 4. آشنایی با ساختار یک قانون CSS: انتخابگر، خصوصیت و مقدار
• 5. کامنت‌گذاری در CSS برای خوانایی بهتر کد
• 6. انتخابگرهای اصلی: تگ، کلاس و شناسه (ID)
• 7. مفهوم وراثت (Inheritance) در CSS
• 8. ترکیب انتخابگرها برای هدف‌گیری دقیق عناصر
• 9. واحدها در CSS: واحدهای مطلق (px, pt)
• 10. واحدها در CSS: واحدهای نسبی (em, rem, %, vh, vw)
• 11. کار با رنگ‌ها: نام رنگ، HEX، RGB و RGBA
• 12. تنظیم رنگ پس‌زمینه و رنگ متن عناصر
• 13. مدل جعبه‌ای (Box Model): پایه و اساس هر عنصر در داشبورد
• 14. خصوصیت‌های Padding برای ایجاد فاصله داخلی
• 15. خصوصیت‌های Margin برای ایجاد فاصله خارجی
• 16. خصوصیت‌های Border: استایل، ضخامت و رنگ حاشیه
• 17. خصوصیت border-radius برای گرد کردن گوشه‌ها
• 18. کنترل ابعاد عناصر: width و height
• 19. خصوصیت box-sizing: content-box در مقابل border-box
• 20. تنظیمات فونت: font-family و font-size
• 21. تنظیمات فونت: font-weight و font-style
• 22. استایل‌دهی به متن: text-align, text-decoration, text-transform
• 23. تنظیم ارتفاع خط (line-height) و فاصله بین حروف (letter-spacing)
• 24. استفاده از فونت‌های سفارشی با font-face@
• 25. مفهوم Cascade و اولویت قوانین CSS
• 26. محاسبه Specificity: کدام قانون CSS اعمال می‌شود؟
• 27. استفاده از important! و خطرات آن
• 28. کلاس‌های کاذب (Pseudo-classes): استایل‌دهی به حالت‌های مختلف (hover, active, focus)
• 29. کلاس‌های کاذب ساختاری: nth-child و first-child
• 30. عناصر کاذب (Pseudo-elements): before:: و after::
• 31. استایل‌دهی به لینک‌ها در حالت‌های مختلف
• 32. استایل‌دهی به لیست‌ها: list-style-type و list-style-image
• 33. خصوصیت display: بلاک، درون‌خطی و درون‌خطی-بلاک
• 34. مخفی کردن عناصر: display: none در مقابل visibility: hidden
• 35. مفهوم موقعیت‌یابی (Positioning): static و relative
• 36. موقعیت‌یابی مطلق (absolute) برای عناصر شناور
• 37. موقعیت‌یابی ثابت (fixed) برای هدر و فوتر داشبورد
• 38. موقعیت‌یابی چسبنده (sticky) برای سایدبارها
• 39. کنترل لایه‌ها با z-index
• 40. مقدمه‌ای بر چیدمان با Flexbox برای ویجت‌ها
• 41. Flex Container: خصوصیت‌های display: flex و flex-direction
• 42. Flex Container: خصوصیت flex-wrap برای مدیریت سرریز آیتم‌ها
• 43. Flex Container: تراز افقی با justify-content
• 44. Flex Container: تراز عمودی با align-items و align-content
• 45. Flex Items: خصوصیت‌های flex-grow, flex-shrink, flex-basis
• 46. Flex Items: کنترل ترتیب نمایش با order
• 47. مثال عملی با Flexbox: ساخت هدر یک داشبورد
• 48. مثال عملی با Flexbox: طراحی کارت اطلاعات یک خودرو
• 49. مقدمه‌ای بر CSS Grid برای ساخت داشبوردهای پیچیده
• 50. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 51. ایجاد فاصله بین آیتم‌ها با gap
• 52. موقعیت‌دهی آیتم‌ها در Grid با شماره خطوط
• 53. ادغام سلول‌ها با grid-column-start/end و grid-row-start/end
• 54. نام‌گذاری نواحی با grid-template-areas برای چیدمان خوانا
• 55. مثال عملی با Grid: ساختار کلی یک صفحه مدیریت ناوگان
• 56. مقایسه Flexbox و Grid: چه زمانی از کدام استفاده کنیم؟
• 57. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 58. استفاده از متا تگ viewport
• 59. مفهوم Media Queries برای اعمال استایل‌های شرطی
• 60. رویکرد Mobile-First در طراحی واکنش‌گرا
• 61. ساخت یک نوار ناوبری واکنش‌گرا برای داشبورد
• 62. واکنش‌گرا کردن تصاویر با max-width
• 63. استفاده از واحدهای نسبی برای تایپوگرافی واکنش‌گرا
• 64. استایل‌دهی به فرم‌ها: input, textarea, select
• 65. استایل‌دهی به دکمه‌ها (Buttons) و حالت‌های مختلف آن
• 66. استایل‌دهی به Checkbox و Radio Button سفارشی
• 67. استایل‌دهی به حالت‌های اعتبارسنجی فرم (valid, invalid)
• 68. استایل‌دهی به جداول داده: لیست خودروها و گزارشات
• 69. استایل‌دهی به ردیف‌های زوج و فرد جدول برای خوانایی بهتر
• 70. ایجاد جدول واکنش‌گرا برای نمایش در موبایل
• 71. مقدمه‌ای بر Transition ها برای ایجاد انیمیشن‌های نرم
• 72. کنترل سرعت Transition با transition-timing-function
• 73. مقدمه‌ای بر Animation ها با keyframes@
• 74. ایجاد انیمیشن برای نشانگرهای وضعیت خودرو (فعال، خاموش، در حال تعمیر)
• 75. ایجاد افکت‌های Loading Spinner با CSS
• 76. متغیرهای CSS (Custom Properties) برای مدیریت تم رنگی
• 77. ساخت تم تاریک (Dark Mode) برای داشبورد با متغیرهای CSS
• 78. توابع در CSS: calc() برای محاسبات دینامیک
• 79. توابع در CSS: min(), max(), clamp() برای ابعاد انعطاف‌پذیر
• 80. انتخابگرهای پیشرفته: انتخابگرهای 속성 (Attribute Selectors)
• 81. انتخابگرهای پیشرفته: ترکیب‌کننده‌ها (+, ~, >)
• 82. تبدیل‌های دو بعدی (2D Transforms): translate, rotate, scale
• 83. تبدیل‌های سه بعدی (3D Transforms): perspective و transform-style
• 84. ایجاد سایه برای جعبه‌ها با box-shadow
• 85. ایجاد سایه برای متون با text-shadow
• 86. استفاده از فیلترها (Filters): blur, brightness, grayscale
• 87. استفاده از blend-mode برای ترکیب لایه‌ها
• 88. پس‌زمینه‌های گرادیان (Gradients) خطی و شعاعی
• 89. کار با تصاویر پس‌زمینه: background-image, position, size, repeat
• 90. استفاده از چندین تصویر پس‌زمینه
• 91. استایل‌دهی به آیکون‌های SVG
• 92. تغییر رنگ SVG با خصوصیت fill
• 93. سازماندهی فایل‌های CSS: متدولوژی BEM
• 94. پیش‌پردازنده‌ها (Preprocessors): معرفی Sass/SCSS
• 95. مفهوم Nesting در Sass برای کدهای خواناتر
• 96. استفاده از متغیرها و Mixin ها در Sass
• 97. مفهوم Reset CSS در مقابل Normalize.css
• 98. بهینه‌سازی کارایی: کاهش حجم فایل CSS
• 99. مفهوم Critical CSS برای بارگذاری سریع‌تر صفحه
• 100. طراحی برای چاپ: ساخت استایل‌شیت‌های چاپی (Print Stylesheets)