فلش‌کارت‌های آموزشی CSS for Fleet Management Solutions Providers

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در پلتفرم‌های مدیریت ناوگان
• 2. چرا CSS برای رابط‌های کاربری (UI) مدیریت ناوگان حیاتی است؟
• 3. آشنایی با ساختار یک دستور CSS (Selector, Property, Value)
• 4. روش‌های افزودن CSS به یک صفحه وب (Inline, Internal, External)
• 5. آشنایی با کامنت‌گذاری در CSS
• 6. اتصال فایل CSS به سند HTML
• 7. انتخابگرهای عناصر (Element Selectors)
• 8. انتخابگرهای کلاس (Class Selectors)
• 9. انتخابگرهای شناسه (ID Selectors)
• 10. انتخابگرهای ویژگی (Attribute Selectors)
• 11. گروه‌بندی انتخابگرها (Grouping Selectors)
• 12. انتخابگر فرزند (Child Combinator)
• 13. انتخابگر نسل (Descendant Combinator)
• 14. انتخابگر همسایه مجاور (Adjacent Sibling Combinator)
• 15. انتخابگر همسایه‌های عمومی (General Sibling Combinator)
• 16. شبه-کلاس‌ها (Pseudo-classes): مفهوم و کاربرد
• 17. استفاده از :hover برای نمایش اطلاعات خودرو روی نقشه
• 18. استفاده از :focus برای بهبود فرم‌های ورود داده
• 19. شبه-کلاس‌های مربوط به فرم‌ها (:checked, :disabled, :required)
• 20. شبه-کلاس‌های ساختاری (:first-child, :last-child, :nth-child)
• 21. شبه-عناصر (Pseudo-elements): ::before و ::after
• 22. کاربرد ::before و ::after برای افزودن آیکون به لیست خودروها
• 23. اولویت، وراثت و آبشاری شدن در CSS (Specificity, Inheritance, and the Cascade)
• 24. محاسبه و درک Specificity
• 25. کلمه کلیدی !important و زمان استفاده (و عدم استفاده) از آن
• 26. مفهوم مدل جعبه‌ای (The Box Model)
• 27. ویژگی‌های width و height
• 28. ویژگی‌های padding
• 29. ویژگی‌های border
• 30. ویژگی‌های margin
• 31. مفهوم Collapsing Margins
• 32. ویژگی box-sizing: content-box vs. border-box
• 33. استایل‌دهی به متن و تایپوگرافی
• 34. ویژگی color برای تعیین رنگ متن
• 35. ویژگی font-family و استفاده از فونت‌های امن وب
• 36. ویژگی font-size و واحدهای اندازه‌گیری آن (px, em, rem)
• 37. ویژگی‌های font-weight و font-style
• 38. ویژگی text-align برای ترازبندی متن در جداول داده
• 39. ویژگی text-decoration
• 40. ویژگی line-height برای خوانایی بهتر گزارش‌ها
• 41. اتصال فونت‌های سفارشی با @font-face
• 42. استفاده از سرویس‌های فونت مانند Google Fonts
• 43. واحدهای اندازه‌گیری مطلق و نسبی در CSS
• 44. آشنایی با رنگ‌ها در CSS (Keywords, HEX, RGB, RGBA)
• 45. استفاده از RGBA برای ایجاد شفافیت در پنجره‌های پاپ‌آپ نقشه
• 46. آشنایی با مدل رنگی HSL و HSLA
• 47. ویژگی background-color
• 48. ویژگی background-image
• 49. ویژگی background-repeat
• 50. ویژگی background-position
• 51. ویژگی background-size و کاربرد آن در داشبوردها
• 52. استفاده از گرادیان‌های خطی و شعاعی (Gradients)
• 53. مختصرنویسی ویژگی‌های background
• 54. ویژگی display: block, inline, inline-block
• 55. پنهان کردن عناصر با display: none و visibility: hidden
• 56. مفهوم چیدمان (Layout) در CSS
• 57. موقعیت‌یابی (Positioning): static, relative, absolute
• 58. موقعیت‌یابی (Positioning): fixed و sticky
• 59. کاربرد position: sticky برای هدر جداول طولانی
• 60. ویژگی z-index و مدیریت لایه‌ها
• 61. مفهوم Float و کاربرد آن
• 62. پاک‌سازی Float با استفاده از Clearfix
• 63. ویژگی overflow
• 64. مقدمه‌ای بر Flexbox برای طراحی داشبوردهای انعطاف‌پذیر
• 65. ویژگی display: flex و مفاهیم اصلی (Main Axis, Cross Axis)
• 66. ویژگی‌های flex-direction و flex-wrap
• 67. ویژگی justify-content برای ترازبندی افقی ویجت‌ها
• 68. ویژگی align-items برای ترازبندی عمودی
• 69. ویژگی align-content
• 70. ویژگی‌های flex-grow, flex-shrink, و flex-basis
• 71. ویژگی order برای تغییر ترتیب نمایش عناصر
• 72. ساخت یک لیست کارت برای نمایش وضعیت خودروها با Flexbox
• 73. مقدمه‌ای بر CSS Grid Layout
• 74. ویژگی display: grid
• 75. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 76. واحد fr در گرید
• 77. قرار دادن آیتم‌ها در گرید (grid-column, grid-row)
• 78. ویژگی gap برای ایجاد فاصله بین آیتم‌های گرید
• 79. طراحی ساختار اصلی داشبورد مدیریت ناوگان با CSS Grid
• 80. مفهوم طراحی واکنش‌گرا (Responsive Web Design)
• 81. استفاده از متا تگ viewport
• 82. مفهوم Media Queries
• 83. رویکرد Mobile-First در طراحی واکنش‌گرا
• 84. ساخت گالری تصاویر واکنش‌گرا
• 85. تبدیل‌های دو بعدی (2D Transforms): translate, rotate, scale
• 86. ویژگی transform-origin
• 87. انتقال‌ها (Transitions) برای انیمیشن‌های نرم
• 88. ویژگی‌های transition-property, duration, timing-function, delay
• 89. انیمیشن‌های کلیدی با @keyframes
• 90. ویژگی animation و خصوصیات آن
• 91. ایجاد یک انیمیشن لودینگ برای بارگذاری داده‌ها
• 92. متغیرهای CSS (Custom Properties) و کاربرد آن در تم‌سازی
• 93. ساخت تم روشن و تاریک (Light/Dark Mode) برای داشبورد
• 94. تابع calc() برای محاسبات دینامیک
• 95. فیلترهای CSS (blur, grayscale, brightness)
• 96. استایل‌دهی به جداول داده (Data Tables)
• 97. ایجاد ردیف‌های شطرنجی (Zebra-striping) در جداول
• 98. استایل‌دهی به فرم‌های ورود اطلاعات (لاگ تعمیرات، فرم اعزام)
• 99. استایل‌دهی به دکمه‌ها و فراخوان‌ها (Call-to-Actions)
• 100. شخصی‌سازی Checkbox و Radio Button