فلش‌کارت‌های آموزشی CSS for Question Answering Systems

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

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

عنوان دوره: دوره CSS for Question Answering Systems

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

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

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

• 1. مقدمه‌ای بر CSS و نقش آن در وب
• 2. CSS چیست و چرا برای سیستم‌های پرسش و پاسخ حیاتی است؟
• 3. روش‌های افزودن CSS به یک صفحه: Inline, Internal, External
• 4. آشنایی با ساختار یک قانون CSS (Selector, Declaration, Property, Value)
• 5. کامنت‌گذاری در CSS
• 6. معرفی انتخابگرهای اصلی (Element, Class, ID)
• 7. انتخابگرهای ترکیبی (Descendant, Child, Adjacent Sibling, General Sibling)
• 8. گروه‌بندی انتخابگرها
• 9. انتخابگرهای ویژگی (Attribute Selectors)
• 10. آشنایی با شبه-کلاس‌ها (Pseudo-classes) مانند :hover
• 11. کار با شبه-کلاس‌های مربوط به فرم‌ها (:focus, :checked, :disabled)
• 12. شبه-کلاس‌های ساختاری (:first-child, :last-child, :nth-child)
• 13. آشنایی با شبه-المان‌ها (Pseudo-elements) مانند ::before و ::after
• 14. مفهوم آبشاری بودن (Cascade) در CSS
• 15. اولویت و وزن انتخابگرها (Specificity)
• 16. مفهوم وراثت (Inheritance)
• 17. کلمه کلیدی !important و خطرات استفاده از آن
• 18. واحدهای اندازه‌گیری مطلق (px, pt) و نسبی (em, rem, %, vw, vh)
• 19. مدل جعبه‌ای (Box Model): محتوا، Padding, Border, Margin
• 20. خاصیت box-sizing: content-box در مقابل border-box
• 21. تنظیم عرض و ارتفاع المان‌ها (width, height)
• 22. کار با Padding
• 23. کار با Border و استایل‌های مختلف آن
• 24. کار با Margin و مفهوم Margin Collapsing
• 25. خاصیت display: block, inline, inline-block
• 26. پنهان کردن المان‌ها با display: none و visibility: hidden
• 27. مفهوم چیدمان (Layout) در CSS
• 28. چیدمان با Position: static, relative
• 29. چیدمان با Position: absolute
• 30. چیدمان با Position: fixed و Position: sticky
• 31. کنترل لایه‌ها با z-index
• 32. مقدمه‌ای بر Flexbox و کاربرد آن در رابط کاربری پرسش و پاسخ
• 33. ایجاد یک Flex Container با display: flex
• 34. کنترل جهت چیدمان با flex-direction
• 35. شکستن خطوط با flex-wrap
• 36. تراز افقی آیتم‌ها با justify-content
• 37. تراز عمودی آیتم‌ها با align-items
• 38. تراز خطوط چندگانه با align-content
• 39. ویژگی‌های Flex Items: flex-grow, flex-shrink, flex-basis
• 40. کنترل ترتیب آیتم‌ها با order
• 41. مقدمه‌ای بر CSS Grid Layout
• 42. ایجاد یک Grid Container با display: grid
• 43. تعریف ستون‌ها و ردیف‌ها با grid-template-columns و grid-template-rows
• 44. واحد fr در Grid
• 45. ایجاد فاصله بین آیتم‌ها با gap
• 46. مکان‌یابی آیتم‌ها در Grid با grid-column و grid-row
• 47. استفاده از grid-template-areas برای چیدمان‌های پیچیده
• 48. رنگ‌ها در CSS: کلمات کلیدی، HEX, RGB, RGBA, HSL, HSLA
• 49. تنظیم رنگ متن با color
• 50. تنظیم رنگ پس‌زمینه با background-color
• 51. استفاده از تصاویر پس‌زمینه (background-image)
• 52. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 53. استایل‌دهی به فونت‌ها با font-family و فونت‌های امن وب
• 54. افزودن فونت‌های سفارشی با @font-face
• 55. تنظیم اندازه فونت با font-size
• 56. تنظیم ضخامت فونت با font-weight
• 57. استایل‌دهی به متن با font-style و text-decoration
• 58. تراز کردن متن با text-align
• 59. تنظیم فاصله بین خطوط با line-height
• 60. تنظیم فاصله بین حروف و کلمات
• 61. کنترل سرریز متن با text-overflow: ellipsis
• 62. استایل‌دهی به لینک‌ها و حالت‌های مختلف آن (:link, :visited, :hover, :active)
• 63. استایل‌دهی به لیست‌های مرتب و نامرتب
• 64. طراحی کادر ورودی سوال (Input Box)
• 65. استایل‌دهی به Placeholder در کادر ورودی
• 66. طراحی دکمه ارسال سوال (Submit Button)
• 67. استایل‌دهی به حالت‌های مختلف دکمه (hover, active, focus, disabled)
• 68. طراحی کانتینر اصلی مکالمه
• 69. تفکیک استایل پیام کاربر از پاسخ سیستم
• 70. ایجاد افکت حباب گفتگو (Chat Bubble)
• 71. استایل‌دهی به بلاک‌های کد (`<pre>` و `<code>`) در پاسخ‌ها
• 72. افزودن دکمه "کپی کد" به بلاک‌های کد
• 73. استایل‌دهی به نقل‌قول‌ها (Blockquotes) برای نمایش منابع
• 74. طراحی جداول برای نمایش داده‌های ساختاریافته در پاسخ‌ها
• 75. ساخت نشانگر در حال تایپ (Typing Indicator) با انیمیشن CSS
• 76. طراحی نشانگر بارگذاری (Spinner/Loader)
• 77. استایل‌دهی به دکمه‌های بازخورد (لایک/دیسلایک)
• 78. طراحی بخش نمایش منابع و لینک‌های مرتبط
• 79. طراحی سایدبار تاریخچه مکالمات
• 80. سفارشی‌سازی اسکرول‌بار کانتینر مکالمه
• 81. مقدمه‌ای بر طراحی واکنش‌گرا (Responsive Design)
• 82. استفاده از متا تگ Viewport
• 83. مفهوم Media Queries
• 84. رویکرد Mobile-First در طراحی واکنش‌گرا
• 85. پیاده‌سازی چیدمان واکنش‌گرا برای رابط کاربری پرسش و پاسخ
• 86. مقدمه‌ای بر Transition ها برای ایجاد افکت‌های نرم
• 87. کنترل خصوصیات و زمان‌بندی Transition ها
• 88. مقدمه‌ای بر انیمیشن‌ها با @keyframes
• 89. کنترل انیمیشن‌ها (animation-name, duration, iteration-count)
• 90. ایجاد افکت‌های سه‌بعدی و دوبعدی با transform
• 91. سایه‌زنی جعبه‌ها و متون با box-shadow و text-shadow
• 92. گرد کردن گوشه‌ها با border-radius
• 93. استفاده از گرادیان‌های خطی و شعاعی برای پس‌زمینه
• 94. متغیرهای CSS (Custom Properties) و کاربرد آن در تم‌سازی
• 95. پیاده‌سازی تم روشن و تاریک (Light/Dark Mode)
• 96. استفاده از تابع ()calc برای محاسبات دینامیک
• 97. مفهوم BEM برای نام‌گذاری کلاس‌ها و سازماندهی کد
• 98. سازماندهی فایل‌های CSS برای پروژه‌های بزرگ
• 99. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS
• 100. ملاحظات دسترسی‌پذیری (Accessibility) در CSS