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

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

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

عنوان دوره: دوره CSS for Transformative Learning

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

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

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

• 1. CSS چیست و چه کاربردی دارد؟
• 2. روش‌های افزودن CSS به HTML: داخلی، خارجی و درون‌خطی
• 3. ساختار یک قانون CSS: انتخابگر، خصوصیت و مقدار
• 4. کامنت‌گذاری در CSS و اهمیت آن
• 5. مفهوم آبشار (Cascade) در CSS
• 6. اولویت و امتیازدهی انتخابگرها (Specificity)
• 7. مفهوم وراثت (Inheritance) و مقادیر اولیه
• 8. انتخابگرهای اصلی: نوع، کلاس و شناسه (ID)
• 9. انتخابگرهای ترکیبی (Combinators): فرزند، نسل، همسایه
• 10. شبه-کلاس‌ها (Pseudo-classes) مانند :hover و :focus
• 11. شبه-المان‌ها (Pseudo-elements) مانند ::before و ::after
• 12. انتخابگرهای ویژگی (Attribute Selectors)
• 13. گروه‌بندی انتخابگرها و انتخابگر عمومی (*)
• 14. مدل جعبه‌ای (Box Model): محتوا، Padding، Border، Margin
• 15. خصوصیت box-sizing: content-box در مقابل border-box
• 16. واحد‌های اندازه‌گیری مطلق: px, pt, cm
• 17. واحد‌های اندازه‌گیری نسبی: em, rem, %
• 18. واحد‌های اندازه‌گیری Viewport: vw, vh, vmin, vmax
• 19. تنظیم رنگ‌ها: کلمات کلیدی، HEX، RGB و RGBA
• 20. تنظیم رنگ‌ها با HSL و HSLA
• 21. خصوصیت color برای رنگ متن
• 22. خصوصیت background-color برای رنگ پس‌زمینه
• 23. استفاده از background-image برای تصویر پس‌زمینه
• 24. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 25. خصوصیت background-size برای کنترل اندازه تصویر
• 26. استفاده همزمان از چندین تصویر پس‌زمینه
• 27. گرادینت‌های خطی (Linear Gradients)
• 28. گرادینت‌های دایره‌ای (Radial Gradients)
• 29. کار با فونت‌ها: خصوصیت font-family و فونت‌های وب-امن
• 30. افزودن فونت‌های سفارشی با @font-face
• 31. خصوصیات font-size, font-weight, font-style
• 32. تراز کردن متن: text-align و vertical-align
• 33. تزئین متن: text-decoration و text-transform
• 34. فاصله بین حروف و کلمات: letter-spacing و word-spacing
• 35. تنظیم ارتفاع خط: خصوصیت line-height
• 36. استایل‌دهی به لیست‌ها: list-style-type, list-style-position
• 37. خصوصیت display: block, inline, inline-block
• 38. خصوصیت display: none و visibility: hidden
• 39. موقعیت‌یابی (Positioning): static و relative
• 40. موقعیت‌یابی (Positioning): absolute
• 41. موقعیت‌یابی (Positioning): fixed و sticky
• 42. مفهوم z-index و لایه‌بندی المان‌ها
• 43. استفاده از float برای چیدمان
• 44. مشکلات float و روش‌های پاک‌سازی آن (Clearfix)
• 45. کنترل سرریز محتوا با خصوصیت overflow
• 46. مقدمه‌ای بر Flexbox و محورهای اصلی و متقاطع
• 47. ایجاد یک کانتینر Flexbox با display: flex
• 48. کنترل جهت‌دهی با flex-direction
• 49. تراز کردن آیتم‌ها در محور اصلی با justify-content
• 50. تراز کردن آیتم‌ها در محور متقاطع با align-items
• 51. چندخطی شدن آیتم‌ها با flex-wrap
• 52. تراز کردن خطوط در حالت چندخطی با align-content
• 53. کنترل رشد آیتم‌ها با flex-grow
• 54. کنترل کوچک‌شدن آیتم‌ها با flex-shrink
• 55. تعیین اندازه اولیه آیتم‌ها با flex-basis
• 56. خاصیت مختصرنویسی flex
• 57. تغییر ترتیب نمایش آیتم‌ها با order
• 58. تراز کردن یک آیتم خاص با align-self
• 59. مقدمه‌ای بر CSS Grid و قدرت چیدمان دو بعدی
• 60. ایجاد یک کانتینر Grid با display: grid
• 61. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 62. واحد fr برای ایجاد ستون‌ها و ردیف‌های انعطاف‌پذیر
• 63. ایجاد فاصله بین خانه‌ها با gap, column-gap, row-gap
• 64. جایگذاری آیتم‌ها بر اساس شماره خطوط Grid
• 65. نام‌گذاری خطوط Grid و جایگذاری آیتم‌ها با نام
• 66. نام‌گذاری نواحی Grid با grid-template-areas
• 67. جایگذاری آیتم‌ها در نواحی نام‌گذاری شده با grid-area
• 68. Grid ضمنی (Implicit) در مقابل Grid صریح (Explicit)
• 69. کنترل اندازه ترک‌های ضمنی با grid-auto-rows و grid-auto-columns
• 70. استفاده از تابع minmax() برای ترک‌های واکنش‌گرا
• 71. استفاده از تابع repeat() و کلیدواژه‌های auto-fit و auto-fill
• 72. تراز کردن آیتم‌ها درون خانه‌ها با justify-items و align-items
• 73. تراز کردن کل شبکه Grid درون کانتینر با justify-content و align-content
• 74. تراز کردن یک آیتم خاص در Grid با justify-self و align-self
• 75. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Web Design)
• 76. استفاده از متا تگ viewport
• 77. مفهوم Media Queries و کاربرد آن
• 78. رویکرد Mobile-First در مقابل Desktop-First
• 79. نقاط شکست (Breakpoints) رایج در طراحی واکنش‌گرا
• 80. ایجاد تصاویر واکنش‌گرا با max-width
• 81. استایل‌دهی به جداول (Tables)
• 82. استایل‌دهی به فرم‌ها و ورودی‌ها
• 83. گرد کردن گوشه‌ها با border-radius
• 84. ایجاد سایه برای جعبه‌ها با box-shadow
• 85. ایجاد سایه برای متن با text-shadow
• 86. مقدمه‌ای بر Transform های دو بعدی
• 87. توابع Transform: translate(), rotate(), scale()
• 88. توابع Transform: skew() و transform-origin
• 89. مقدمه‌ای بر Transitions و ایجاد انیمیشن‌های ساده
• 90. کنترل زمان‌بندی Transitions با transition-timing-function
• 91. مقدمه‌ای بر Animations با @keyframes
• 92. کنترل انیمیشن‌ها با خصوصیت animation
• 93. متغیرها در CSS (Custom Properties)
• 94. تابع محاسباتی calc()
• 95. توابع پیشرفته min(), max(), clamp()
• 96. فیلترهای CSS: blur(), grayscale(), contrast()
• 97. حالت‌های ترکیبی (Blend Modes)
• 98. پرس‌وجوهای ویژگی (Feature Queries) با @supports
• 99. بهینه‌سازی کارایی CSS
• 100. متدولوژی‌های نام‌گذاری: BEM