کتاب صوتی CSS for Fleet Management Resources

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

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

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

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در وب
• 2. جایگاه CSS در داشبوردهای مدیریت ناوگان
• 3. روش‌های افزودن CSS به HTML: داخلی، خارجی و درون‌خطی
• 4. ساختار یک دستور CSS: انتخابگر، خصوصیت و مقدار
• 5. آشنایی با انتخابگرهای پایه: تگ، کلاس و شناسه
• 6. نحوه نوشتن توضیحات (Comments) در CSS
• 7. کار با رنگ‌ها: نام، هگزادسیمال، RGB و HSL
• 8. مبانی استایل‌دهی به متن: font-family و font-size
• 9. خصوصیات متن: font-weight, font-style و font-variant
• 10. تراز کردن متن و دکوراسیون آن (Text Alignment & Decoration)
• 11. کار با پس‌زمینه: background-color و background-image
• 12. مفهوم آبشار (Cascade) و اولویت در CSS
• 13. مفهوم وراثت (Inheritance)
• 14. قانون !important و زمان استفاده (و عدم استفاده) از آن
• 15. آشنایی با ابزارهای توسعه‌دهنده مرورگر (DevTools) برای دیباگ CSS
• 16. معرفی Box Model: محتوا، Padding, Border, Margin
• 17. تنظیم ابعاد عناصر: width و height
• 18. آشنایی با Padding و ایجاد فضای داخلی
• 19. آشنایی با Margin و ایجاد فضای خارجی
• 20. فروپاشی حاشیه‌ها (Margin Collapsing)
• 21. کار با Border و انواع استایل‌های آن
• 22. خصوصیت box-sizing: content-box در برابر border-box
• 23. تفاوت outline و border
• 24. مدیریت سرریز محتوا با خصوصیت overflow
• 25. استایل‌دهی به کارت‌های اطلاعات خودرو با Box Model
• 26. خصوصیت display: بلاک، اینلاین و اینلاین-بلاک
• 27. آشنایی با مفهوم موقعیت‌یابی (Positioning)
• 28. Position: static و relative
• 29. Position: absolute
• 30. Position: fixed برای ساخت هدر و سایدبار ثابت
• 31. Position: sticky برای سرتیترهای چسبان جداول
• 32. کنترل لایه‌ها با z-index
• 33. معرفی Flexbox برای چیدمان یک‌بعدی
• 34. ساخت Flex Container با display: flex
• 35. جهت‌دهی آیتم‌ها با flex-direction
• 36. شکستن خط در Flexbox با flex-wrap
• 37. تراز کردن آیتم‌ها در محور اصلی با justify-content
• 38. تراز کردن آیتم‌ها در محور متقاطع با align-items
• 39. مدیریت خطوط چندگانه با align-content
• 40. انعطاف‌پذیری آیتم‌ها: flex-grow, flex-shrink, flex-basis
• 41. خاصیت کوتاه‌نویسی flex
• 42. تغییر ترتیب نمایش آیتم‌ها با order
• 43. معرفی CSS Grid برای چیدمان دوبعدی
• 44. ساخت Grid Container با display: grid
• 45. تعریف ستون‌ها و ردیف‌ها با grid-template-columns/rows
• 46. واحد fr و کاربرد آن در گرید
• 47. ایجاد فاصله بین آیتم‌ها با gap
• 48. مکان‌یابی آیتم‌ها بر اساس شماره خطوط
• 49. کوتاه‌نویسی مکان‌یابی با grid-column و grid-row
• 50. نام‌گذاری خطوط گرید
• 51. تعریف نواحی گرید با grid-template-areas
• 52. مکان‌یابی آیتم‌ها با grid-area
• 53. طراحی ساختار اصلی داشبورد مدیریت ناوگان با CSS Grid
• 54. استایل‌دهی به لینک‌ها و حالت‌های آن‌ها (hover, active, visited)
• 55. استایل‌دهی به لیست‌های مرتب و نامرتب
• 56. طراحی جداول داده‌های ناوگان
• 57. استایل‌دهی به سرتیتر (thead) و پاورقی (tfoot) جداول
• 58. ایجاد جداول راه‌راه (Zebra-striping) با شبه‌کلاس‌ها
• 59. استایل‌دهی به فرم‌های ورود اطلاعات (input, textarea, label)
• 60. طراحی دکمه‌ها و فراخوان‌ها (Call-to-Action)
• 61. شخصی‌سازی Checkbox و Radio Button
• 62. استفاده از فونت‌های سفارشی با @font-face
• 63. ادغام فونت‌های آیکون (Icon Fonts) مانند Font Awesome
• 64. استفاده از SVG برای آیکون‌ها و لوگوها
• 65. استایل‌دهی به نقل‌قول‌ها و دیگر تگ‌های معنایی
• 66. تغییر شکل نشانگر ماوس با خصوصیت cursor
• 67. ایجاد منوهای کشویی (Dropdown Menus)
• 68. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 69. متا تگ Viewport
• 70. استفاده از Media Queries برای صفحات نمایش مختلف
• 71. رویکرد Mobile-First در برابر Desktop-First
• 72. طراحی چیدمان‌های سیال با استفاده از درصد (%)
• 73. کار با تصاویر واکنش‌گرا
• 74. واکنش‌گرا کردن جداول داده
• 75. مخفی کردن و نمایش عناصر در اندازه‌های مختلف صفحه
• 76. انتخابگرهای ویژگی (Attribute Selectors)
• 77. شبه‌کلاس‌ها (Pseudo-classes) مانند nth-child و first-child
• 78. شبه‌عناصر (Pseudo-elements) مانند before:: و after::
• 79. ساخت عناصر تزئینی با شبه‌عناصر
• 80. انتخابگرهای ترکیبی: فرزند مستقیم (>), همزاد مجاور (+) و همزاد عمومی (~)
• 81. ایجاد انیمیشن‌های نرم با CSS Transitions
• 82. توابع زمانی انتقال (Transition Timing Functions)
• 83. تبدیل‌های دو بعدی: translate(), rotate(), scale()
• 84. تبدیل‌های سه بعدی (3D Transforms)
• 85. انیمیشن‌های پیچیده‌تر با @keyframes
• 86. خاصیت کوتاه‌نویسی animation
• 87. انیمیشن‌سازی نشانگر وضعیت خودروها (فعال، خاموش، در حرکت)
• 88. افکت‌دهی با خصوصیت filter: تاری، سیاه‌وسفید و ...
• 89. ایجاد سایه برای جعبه‌ها (box-shadow) و متن (text-shadow)
• 90. ایجاد پس‌زمینه‌های گرادیان (Gradients)
• 91. شفافیت با opacity و رنگ‌های RGBA
• 92. برش عناصر با clip-path
• 93. کنترل نحوه نمایش تصاویر با object-fit
• 94. گرد کردن گوشه‌ها با border-radius
• 95. متغیرهای CSS (Custom Properties) و کاربرد در تم‌بندی داشبورد
• 96. سازماندهی کد CSS با متدولوژی BEM
• 97. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/LESS
• 98. بهینه‌سازی عملکرد CSS
• 99. مبانی دسترسی‌پذیری وب (Accessibility) در CSS
• 100. پروژه نهایی: ساختار HTML داشبورد مدیریت ناوگان