فلش‌کارت‌های آموزشی CSS for Desertification Control

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

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

عنوان دوره: دوره CSS for Desertification Control

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

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

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

• 1. مبانی CSS: چرا CSS مهم است؟
• 2. CSS چیست؟ تاریخچه و تکامل
• 3. نحوه اتصال CSS به HTML
• 4. سینتکس CSS: سلکتورها، پراپرتی‌ها و مقادیر
• 5. سلکتورهای پایه: عناصر، کلاس‌ها و ID ها
• 6. گروه بندی سلکتورها
• 7. سلکتورهای ترکیبی: فرزند، عموزاده و همسایه
• 8. سلکتورهای صفتی
• 9. سلکتورهای شبه-کلاس‌ها (Pseudo-classes)
• 10. سلکتورهای شبه-عناصر (Pseudo-elements)
• 11. اهمیت نظم در CSS
• 12. قوانین cascading و اولویت‌بندی (Specificity)
• 13. ارث‌بری (Inheritance) در CSS
• 14. واحدها در CSS: پیکسل، em، rem، vw، vh
• 15. رنگ‌ها در CSS: مقادیر نامی، HEX، RGB، RGBA
• 16. رنگ‌های HSL و HSLA
• 17. کار با پس‌زمینه‌ها: `background-color`
• 18. تنظیم تصاویر پس‌زمینه: `background-image`
• 19. تکرار تصاویر پس‌زمینه: `background-repeat`
• 20. موقعیت تصاویر پس‌زمینه: `background-position`
• 21. اندازه تصاویر پس‌زمینه: `background-size`
• 22. چسباندن تصاویر پس‌زمینه: `background-attachment`
• 23. فشرده‌سازی ویژگی‌های پس‌زمینه: `background` shorthand
• 24. مبانی متن: `font-family`
• 25. اندازه فونت: `font-size`
• 26. وزن فونت: `font-weight`
• 27. سبک فونت: `font-style`
• 28. تزئینات متن: `text-decoration`
• 29. تراز متن: `text-align`
• 30. فاصله بین خطوط: `line-height`
• 31. فاصله بین کلمات: `word-spacing`
• 32. فاصله بین حروف: `letter-spacing`
• 33. تورفتگی متن: `text-indent`
• 34. تبدیل حروف: `text-transform`
• 35. سایه‌ها در متن: `text-shadow`
• 36. کار با باکس مدل (Box Model): محتوا، padding، border، margin
• 37. عرض و ارتفاع عناصر: `width` و `height`
• 38. حالت نمایش (Display): `block`, `inline`, `inline-block`
• 39. مدیریت عناصر مخفی: `display: none` و `visibility: hidden`
• 40. مبانی موقعیت‌دهی (Positioning): `static`
• 41. موقعیت‌دهی نسبی: `relative`
• 42. موقعیت‌دهی مطلق: `absolute`
• 43. موقعیت‌دهی ثابت: `fixed`
• 44. موقعیت‌دهی چسبنده: `sticky`
• 45. تنظیم موقعیت: `top`, `bottom`, `left`, `right`
• 46. تنظیم z-index
• 47. مبانی شناورسازی (Floats): `float: left` و `float: right`
• 48. پاک کردن شناورسازی: `clear`
• 49. تکنیک clear: both
• 50. مبانی Flexbox: مقدمات و کاربردها
• 51. پدر Flexbox (Flex Container)
• 52. فرزند Flexbox (Flex Items)
• 53. جهت‌دهی محور اصلی: `flex-direction`
• 54. انعطاف‌پذیری آیتم‌ها: `flex-grow`, `flex-shrink`, `flex-basis`
• 55. تنظیم `flex` shorthand
• 56. تراز کردن در محور اصلی: `justify-content`
• 57. تراز کردن در محور متقاطع: `align-items`
• 58. انعطاف‌پذیری خطوط: `flex-wrap`
• 59. تراز کردن آیتم‌ها در خطوط مختلف: `align-content`
• 60. مبانی Grid Layout: مقدمات و کاربردها
• 61. پدر Grid (Grid Container)
• 62. فرزند Grid (Grid Items)
• 63. تعریف ستون‌ها: `grid-template-columns`
• 64. تعریف ردیف‌ها: `grid-template-rows`
• 65. فاصله بین ستون‌ها و ردیف‌ها: `gap`
• 66. قرار دادن آیتم‌ها در Grid: `grid-column` و `grid-row`
• 67. تنظیم `grid-area`
• 68. مبانی طراحی واکنش‌گرا (Responsive Design)
• 69. مفهوم viewport
• 70. استفاده از واحدهای نسبی در طراحی واکنش‌گرا
• 71. مدیریت تصاویر واکنش‌گرا
• 72. پرسش‌های رسانه‌ای (Media Queries): مقدمه
• 73. پرسش‌های رسانه‌ای برای عرض صفحه
• 74. پرسش‌های رسانه‌ای برای ارتفاع صفحه
• 75. پرسش‌های رسانه‌ای برای جهت‌گیری دستگاه
• 76. پرسش‌های رسانه‌ای برای رزولوشن
• 77. استفاده از `min-width` و `max-width`
• 78. استراتژی‌های طراحی واکنش‌گرا: Mobile-first
• 79. استراتژی‌های طراحی واکنش‌گرا: Desktop-first
• 80. استفاده از واحد `em` و `rem` در طراحی واکنش‌گرا
• 81. تنظیم `overflow`
• 82. مخفی کردن محتوای اضافی: `overflow: hidden`
• 83. اسکرول کردن محتوای اضافی: `overflow: auto`
• 84. اهمیت Scrollbars
• 85. کار با فرم‌ها: ورودی‌های متنی
• 86. ورودی‌های عددی و تاریخ
• 87. ورودی‌های چک‌باکس و رادیو
• 88. انتخاب‌کننده‌ها: `select` و `option`
• 89. دکمه‌ها: `button`
• 90. استایل‌دهی به دکمه‌ها
• 91. استایل‌دهی به ورودی‌های فرم
• 92. مخفی کردن عناصر با `display: none`
• 93. مدیریت focus در عناصر فرم
• 94. استفاده از `outline` در عناصر فرم
• 95. مبانی انیمیشن در CSS: `transition`
• 96. تنظیم `transition-property`
• 97. تنظیم `transition-duration`
• 98. تنظیم `transition-timing-function`
• 99. تنظیم `transition-delay`
• 100. تنظیم `transition` shorthand