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

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در داشبوردهای مدیریت ناوگان
• 2. نحوه اتصال CSS به HTML: داخلی، خارجی و درون‌خطی
• 3. آشنایی با ساختار یک قانون CSS (Selector, Declaration, Property, Value)
• 4. کامنت‌گذاری در CSS
• 5. انتخابگرهای اصلی: عنصر، کلاس و شناسه (Type, Class, ID)
• 6. انتخابگر عمومی (Universal Selector)
• 7. گروه‌بندی انتخابگرها (Grouping Selectors)
• 8. انتخابگرهای ترکیبی: فرزند و نسل (Descendant and Child Combinators)
• 9. انتخابگرهای ترکیبی: همسایه مجاور و عمومی (Adjacent and General Sibling)
• 10. انتخابگرهای ویژگی (Attribute Selectors)
• 11. مفهوم وراثت (Inheritance) در CSS
• 12. اولویت و آبشاری بودن در CSS (Specificity and the Cascade)
• 13. استفاده از کلمه کلیدی !important و خطرات آن
• 14. مدل رنگ در CSS: نام‌های رنگ، HEX، RGB و RGBA
• 15. مدل رنگ HSL و HSLA
• 16. ویژگی color برای رنگ متن
• 17. ویژگی background-color برای رنگ پس‌زمینه
• 18. استفاده از تصاویر پس‌زمینه (background-image)
• 19. کنترل تکرار تصویر پس‌زمینه (background-repeat)
• 20. موقعیت‌یابی تصویر پس‌زمینه (background-position)
• 21. اندازه‌بندی تصویر پس‌زمینه (background-size)
• 22. ویژگی مختصرنویسی background
• 23. مفهوم Box Model: محتوا، Padding، Border، Margin
• 24. واحد‌های اندازه‌گیری مطلق: px, pt, cm
• 25. واحد‌های اندازه‌گیری نسبی: em, rem, %, vh, vw
• 26. ویژگی‌های width و height
• 27. کنترل Box Model با box-sizing: content-box و border-box
• 28. ویژگی Padding
• 29. ویژگی Margin و مفهوم Margin Collapse
• 30. ویژگی Border و استایل‌های مختلف آن
• 31. ویژگی border-radius برای گرد کردن گوشه‌ها
• 32. ویژگی box-shadow برای ایجاد سایه
• 33. ویژگی display: block, inline, inline-block
• 34. ویژگی display: none و visibility: hidden
• 35. موقعیت‌یابی (Positioning): static و relative
• 36. موقعیت‌یابی (Positioning): absolute
• 37. موقعیت‌یابی (Positioning): fixed
• 38. موقعیت‌یابی (Positioning): sticky
• 39. کنترل لایه‌ها با z-index
• 40. مفهوم Floating و ویژگی float
• 41. مشکلات Float و روش‌های Clearfix
• 42. استایل‌دهی به متون: font-family و فونت‌های وب
• 43. استایل‌دهی به متون: font-size, font-weight, font-style
• 44. استایل‌دهی به متون: text-align, text-decoration, text-transform
• 45. تنظیم فاصله بین حروف و کلمات (letter-spacing, word-spacing)
• 46. تنظیم ارتفاع خط (line-height)
• 47. استایل‌دهی به لیست‌ها (ul, ol, li)
• 48. استایل‌دهی به جداول: border, padding, text-align
• 49. استایل‌دهی به ردیف‌های زوج و فرد جدول (Zebra Striping)
• 50. طراحی جداول واکنش‌گرا برای نمایش داده‌های ناوگان
• 51. استایل‌دهی به فرم‌ها و عناصر ورودی (input, button, textarea)
• 52. شبه‌کلاس‌ها (Pseudo-classes): :hover, :active, :focus
• 53. شبه‌کلاس‌ها (Pseudo-classes): :first-child, :last-child, :nth-child
• 54. شبه‌عناصر (Pseudo-elements): ::before و ::after
• 55. شبه‌عناصر (Pseudo-elements): ::first-letter و ::first-line
• 56. مقدمه‌ای بر Flexbox برای چیدمان داشبورد
• 57. ویژگی display: flex و جهت‌دهی (flex-direction)
• 58. کنترل شکست خط در Flexbox با flex-wrap
• 59. تراز کردن آیتم‌ها در محور اصلی (justify-content)
• 60. تراز کردن آیتم‌ها در محور متقاطع (align-items)
• 61. تراز کردن محتوای چند خطی (align-content)
• 62. ویژگی‌های آیتم‌های Flex: flex-grow, flex-shrink, flex-basis
• 63. ویژگی مختصرنویسی flex
• 64. تنظیم ترتیب آیتم‌ها با order
• 65. مقدمه‌ای بر CSS Grid برای ساختار کلی صفحه
• 66. ویژگی display: grid
• 67. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 68. واحد fr در CSS Grid
• 69. ایجاد فاصله بین آیتم‌ها با gap
• 70. موقعیت‌دهی آیتم‌ها در Grid با شماره خط
• 71. نام‌گذاری خطوط و نواحی در Grid (grid-template-areas)
• 72. تراز کردن آیتم‌ها و کل شبکه در Grid
• 73. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Web Design)
• 74. مفهوم Viewport و استفاده از متا تگ viewport
• 75. استفاده از Media Queries برای نمایشگرهای مختلف
• 76. رویکرد Mobile-First در طراحی واکنش‌گرا
• 77. تصاویر واکنش‌گرا با max-width: 100%
• 78. تایپوگرافی روان (Fluid Typography) با clamp()
• 79. تبدیل‌های دو بعدی (2D Transforms): translate, rotate, scale
• 80. تبدیل‌های سه بعدی (3D Transforms)
• 81. تنظیم نقطه شروع تبدیل با transform-origin
• 82. انتقال‌های نرم (Transitions)
• 83. ویژگی‌های Transition: property, duration, timing-function, delay
• 84. انیمیشن‌ها در CSS با @keyframes
• 85. ویژگی‌های Animation: name, duration, iteration-count
• 86. کنترل وضعیت انیمیشن با animation-play-state
• 87. متغیرهای CSS (Custom Properties) برای تم‌بندی داشبورد
• 88. استفاده از متغیرهای CSS برای ایجاد تم تاریک (Dark Mode)
• 89. تابع calc() برای محاسبات دینامیک
• 90. استفاده از فیلترها (filters): blur, brightness, contrast
• 91. استایل‌دهی به Scrollbar
• 92. استایل‌دهی به نشانگرهای خودرو روی نقشه (Vehicle Markers)
• 93. تغییر استایل نشانگر بر اساس وضعیت (حرکت، توقف، آفلاین)
• 94. طراحی پنجره‌های اطلاعاتی روی نقشه (InfoWindows)
• 95. استایل‌دهی به کنترل‌های سفارشی نقشه (زوم، لایه‌ها)
• 96. استایل‌دهی به ژئوفنس‌ها و مسیرها (Geofences & Routes)
• 97. طراحی نمودارهای میله‌ای (Bar Charts) با CSS
• 98. طراحی نمودارهای خطی (Line Charts) با CSS
• 99. استفاده از گرادینت‌ها (Gradients) برای پس‌زمینه و داده‌ها
• 100. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند SASS/SCSS