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

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

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

عنوان دوره: دوره CSS for Browser Extensions

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

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

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

• 1. مقدمه‌ای بر CSS و کاربرد آن در مرورگرها
• 2. ساختار کلی فایل‌های CSS
• 3. انتخابگرهای پایه در CSS (تگ، کلاس، آیدی)
• 4. نحو دستورات CSS و خاصیت‌ها
• 5. مقادیر و واحدهای اندازه‌گیری در CSS
• 6. رنگ‌ها در CSS: نام‌ها، مقادیر هگزادسیمال و RGB
• 7. فونت‌ها: انتخاب، بارگذاری و استایل‌دهی
• 8. قواعد فونت: وزن، اندازه و سبک
• 9. فضای خالی در CSS: مارجین، پدینگ و بوردر
• 10. مدل جعبه‌ای (Box Model) در CSS
• 11. نمایش عناصر: بلاک، اینلاین و اینلاین-بلاک
• 12. خاصیت `display` و کاربردهای آن
• 13. خاصیت `position` و انواع آن (static, relative, absolute, fixed, sticky)
• 14. لایه‌بندی با `float` و `clear`
• 15. مقدمه‌ای بر Grid Layout در CSS
• 16. ساختارهای اساسی Grid
• 17. تعریف سطرها و ستون‌ها در Grid
• 18. فضای بین آیتم‌های Grid
• 19. هم‌راستایی آیتم‌ها در Grid
• 20. Grid Template Areas
• 21. مقدمه‌ای بر Flexbox در CSS
• 22. محور اصلی و فرعی در Flexbox
• 23. خاصیت `justify-content`
• 24. خاصیت `align-items`
• 25. خاصیت `flex-wrap`
• 26. خاصیت `flex-grow`, `flex-shrink`, `flex-basis`
• 27. سفارش‌دهی آیتم‌ها در Flexbox
• 28. استفاده از Flexbox برای لایه‌بندی
• 29. مفهوم واحد `em` و `rem`
• 30. واحد `vw` و `vh`
• 31. واحد درصد (%)
• 32. رسپانسیو کردن طرح‌ها با Media Queries
• 33. استفاده از Media Queries برای اندازه‌های مختلف صفحه
• 34. طراحی Mobile-First
• 35. طراحی Desktop-First
• 36. سازگاری با مرورگرهای مختلف
• 37. نکات بهینه‌سازی CSS برای افزونه‌های مرورگر
• 38. ساختار فایل‌های CSS افزونه مرورگر
• 39. ارتباط CSS با فایل‌های JavaScript در افزونه
• 40. انتخابگرهای پیشرفته در CSS
• 41. انتخابگرهای صفتی
• 42. انتخابگرهای شبه‌کلاس (Pseudo-classes)
• 43. انتخابگرهای شبه‌عنصر (Pseudo-elements)
• 44. قواعد `::before` و `::after`
• 45. استفاده از `calc()` در CSS
• 46. متغیرهای CSS (Custom Properties)
• 47. نحو تعریف و استفاده از متغیرها
• 48. تغییر مقادیر متغیرها
• 49. انتقال‌ها (Transitions) در CSS
• 50. خاصیت `transition-property`
• 51. خاصیت `transition-duration`
• 52. خاصیت `transition-timing-function`
• 53. خاصیت `transition-delay`
• 54. انیمیشن‌ها (Animations) در CSS
• 55. تعریف `keyframes`
• 56. خاصیت `animation-name`
• 57. خاصیت `animation-duration`
• 58. خاصیت `animation-timing-function`
• 59. خاصیت `animation-iteration-count`
• 60. خاصیت `animation-direction`
• 61. خاصیت `animation-fill-mode`
• 62. استفاده از انیمیشن‌ها برای بهبود تجربه کاربری
• 63. مفاهیم دسترسی‌پذیری (Accessibility) در CSS
• 64. طراحی با کنتراست مناسب
• 65. استفاده از فونت‌های خوانا
• 66. پشتیبانی از ناوبری با کیبورد
• 67. قواعد `z-index` و مدیریت اولویت لایه‌ها
• 68. مدیریت تصاویر در CSS
• 69. خاصیت `background-image`
• 70. خاصیت `background-repeat`
• 71. خاصیت `background-position`
• 72. خاصیت `background-size`
• 73. استفاده از SVG در CSS
• 74. تکنیک‌های پیشرفته لایه‌بندی
• 75. پرهیز از `float` در لایه‌بندی‌های پیچیده
• 76. استفاده از Grid و Flexbox به صورت ترکیبی
• 77. بررسی و اشکال‌زدایی CSS با ابزارهای مرورگر
• 78. استفاده از DevTools مرورگر
• 79. بررسی سلسله مراتب CSS
• 80. شناسایی مشکلات رندرینگ
• 81. مدیریت CSS در پروژه‌های بزرگ
• 82. روش‌های سازماندهی کد CSS
• 83. استفاده از پیش‌پردازنده‌ها (مانند Sass/Less - رویکرد کلی)
• 84. اصول طراحی واکنش‌گرا (Responsive Design)
• 85. تست طرح‌بندی در دستگاه‌های مختلف
• 86. بهینه‌سازی عملکرد CSS
• 87. کاهش حجم فایل CSS
• 88. حذف کدهای بلااستفاده
• 89. نکات امنیتی مرتبط با CSS در افزونه‌ها
• 90. جلوگیری از حملات XSS از طریق CSS (محدود)
• 91. ملاحظات شرعی در طراحی رابط کاربری (با تمرکز بر پوشش و حجاب)
• 92. اصول پوشش مناسب و غیرمغایر با موازین شرعی در طراحی رابط کاربری
• 93. استفاده از رنگ‌ها و طرح‌های متناسب با فرهنگ ایرانی-اسلامی
• 94. پرهیز از نمایش غیرمتعارف تصاویر و نمادها
• 95. ملاحظات فرهنگی در انتخاب فونت و سبک نوشتاری
• 96. طراحی رابط کاربری سازگار با آموزه‌های خانواده ایرانی-اسلامی
• 97. نکات پایانی و جمع‌بندی مباحث CSS برای افزونه‌ها
• 98. تکنیک‌های خلاقانه در CSS برای افزونه‌های مرورگر
• 99. آخرین روندها و نوآوری‌ها در CSS
• 100. پاسخ به سوالات متداول در زمینه CSS افزونه‌ها