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

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

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

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

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

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

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

• 1. CSS چیست و چرا مهم است؟
• 2. محیط توسعه CSS: ویرایشگرها و مرورگرها
• 3. اولین استایل: تگ های HTML و انتخابگرها
• 4. نحوه اعمال CSS: Inline, Internal, External
• 5. انتخابگرهای اساسی: تگ، کلاس، آیدی
• 6. انتخابگرهای گروهی و ترکیبی
• 7. خاصیت (Property) و مقدار (Value) در CSS
• 8. مرورگرهای وب و تاریخچه CSS
• 9. CSS2 و CSS3: تفاوت ها و پیشرفت ها
• 10. مدل جعبه ای (Box Model): محتوا، padding، border، margin
• 11. واحد های اندازه گیری: px، em، rem، vw، vh
• 12. واحد های اندازه گیری نسبی و مطلق
• 13. رنگ ها در CSS: نام، RGB، HEX، HSL
• 14. شفافیت (Opacity) و رنگ با کانال آلفا
• 15. پس زمینه (Background): رنگ، تصویر، تکرار، موقعیت
• 16. خاصیت `background-attachment`
• 17. خاصیت `background-clip` و `background-origin`
• 18. خاصیت `background-size`
• 19. CSS Reset و Normalize: چرا و چگونه
• 20. قوانین اولویت بندی (Specificity) در CSS
• 21. فاکتورهای اولویت بندی: نوع، کلاس، آیدی، اینلاین
• 22. وراثت (Inheritance) در CSS
• 23. مقادیر `inherit`, `initial`, `unset`, `revert`
• 24. مدیریت فونت ها: `font-family`
• 25. تنظیمات فونت: `font-size`, `font-weight`, `font-style`
• 26. خطوط فاصله: `line-height`
• 27. فاصله گذاری حروف و کلمات: `letter-spacing`, `word-spacing`
• 28. تراز متن: `text-align`
• 29. تزئینات متن: `text-decoration`
• 30. حروف بزرگ و کوچک: `text-transform`
• 31. سایه متن: `text-shadow`
• 32. فضای خالی: `white-space`
• 33. خاصیت `word-break`
• 34. خاصیت `overflow-wrap`
• 35. متن چند خطی (Multi-line Text)
• 36. لیست ها (Lists): `list-style-type`, `list-style-image`
• 37. چیدمان آیتم های لیست: `list-style-position`
• 38. تنظیمات کلی لیست ها
• 39. قوانین جدید لیست ها در CSS3
• 40. جدول ها (Tables): استایل دهی به سلول ها
• 41. استایل دهی به ردیف ها و ستون ها
• 42. کنترل حاشیه جدول: `border-collapse`
• 43. استایل دهی به سرجدول و ته جدول
• 44. سیاست های جدول: `table-layout`
• 45. نوار ابزار (Toolbars) در مدیریت ناوگان
• 46. استایل دهی به دکمه ها (Buttons)
• 47. دکمه های آیکون دار
• 48. افکت های هاور (Hover) برای دکمه ها
• 49. حالت های فعال و غیرفعال دکمه ها
• 50. فرم ها (Forms) و ورودی ها (Inputs)
• 51. استایل دهی به لیبل ها (Labels)
• 52. استایل دهی به فیلدهای متنی و متن آrea
• 53. استایل دهی به چک باکس ها و رادیو باتن ها
• 54. استایل دهی به دکمه های ارسال فرم
• 55. استایل دهی به لیست های کشویی (Select Boxes)
• 56. استایل دهی به فیلدهای تاریخ و زمان
• 57. استایل دهی به فیلدهای عدد و رنگ
• 58. فیلدهای مخفی (Hidden Inputs)
• 59. اعتبارسنجی (Validation) در CSS
• 60. پیام های خطا و موفقیت در فرم ها
• 61. ناوبری (Navigation) در رابط کاربری
• 62. منوهای افقی (Horizontal Menus)
• 63. منوهای عمودی (Vertical Menus)
• 64. منوهای کشویی (Dropdown Menus)
• 65. منوهای همبرگری (Hamburger Menus)
• 66. استایل دهی به لینک ها (Links)
• 67. حالت های مختلف لینک: `link`, `visited`, `hover`, `active`
• 68. استایل دهی به هدر (Header)
• 69. استایل دهی به فوتر (Footer)
• 70. استایل دهی به سایدبار (Sidebar)
• 71. طراحی ریسپانسیو (Responsive Design): مقدمه
• 72. `@media` Queries: اساس طراحی ریسپانسیو
• 73. استفاده از Viewport Units برای ریسپانسیو
• 74. تنظیمات فونت در طراحی ریسپانسیو
• 75. تنظیمات تصویر در طراحی ریسپانسیو
• 76. طراحی واکنش گرا برای تبلت ها
• 77. طراحی واکنش گرا برای موبایل ها
• 78. تنظیمات Grid Layout
• 79. خاصیت `display: grid`
• 80. تعریف Rows و Columns در Grid
• 81. خاصیت `grid-template-areas`
• 82. هم ترازی (Alignment) در Grid
• 83. تراکمی (Spanning) در Grid
• 84. Grid برای طرح بندی پیچیده
• 85. تنظیمات Flexbox
• 86. خاصیت `display: flex`
• 87. جهت (Direction) و چرخش (Wrap) در Flexbox
• 88. هم ترازی در محور اصلی و متقاطع
• 89. توزیع فضا در Flexbox
• 90. Flex Items و تنظیمات آن ها
• 91. Flexbox برای چیدمان های پویا
• 92. انیمیشن ها (Animations) در CSS
• 93. `@keyframes` Rules
• 94. خاصیت `animation-name`
• 95. خاصیت `animation-duration`
• 96. خاصیت `animation-timing-function`
• 97. خاصیت `animation-delay`
• 98. خاصیت `animation-iteration-count`
• 99. خاصیت `animation-direction`
• 100. خاصیت `animation-fill-mode`