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

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

عنوان دوره: CSS for Archaeology

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

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

📋 سرفصل‌های دوره (100 موضوع)

• 1. مقدمه‌ای بر CSS برای باستان‌شناسان
• 2. CSS چیست و چرا برای نمایش داده‌های باستان‌شناسی اهمیت دارد؟
• 3. نحوه افزودن CSS به یک سند HTML: داخلی، خارجی و درون‌خطی
• 4. آشنایی با ساختار یک قانون CSS: انتخابگر، اعلان، خصوصیت و مقدار
• 5. نحوه نوشتن کامنت در CSS
• 6. انتخابگرهای اصلی: انتخابگر عنصر، کلاس و ID
• 7. ترکیب انتخابگرها (Descendant, Child, Sibling)
• 8. مفهوم اولویت‌بندی (Specificity) در CSS
• 9. مفهوم ارث‌بری (Inheritance) و مقدار `inherit`
• 10. آشنایی با ابزارهای توسعه‌دهنده مرورگر (Developer Tools) برای کار با CSS
• 11. واحد‌های رنگ در CSS: نام رنگ، HEX، RGB و RGBA
• 12. خصوصیت `color` برای رنگ متن
• 13. خصوصیت `background-color` برای رنگ پس‌زمینه
• 14. استفاده از تصاویر پس‌زمینه با `background-image`
• 15. کنترل تکرار تصویر پس‌زمینه با `background-repeat`
• 16. موقعیت‌یابی تصویر پس‌زمینه با `background-position`
• 17. خصوصیت `background-attachment` برای افکت پارالاکس ساده
• 18. خاصیت خلاصه‌نویسی `background`
• 19. واحد‌های اندازه‌گیری مطلق: `px`, `pt`, `cm`
• 20. واحد‌های اندازه‌گیری نسبی: `%`, `em`, `rem`
• 21. واحد‌های اندازه‌گیری وابسته به Viewport: `vw`, `vh`
• 22. خصوصیت `font-family` و فونت‌های امن وب
• 23. استفاده از فونت‌های سفارشی با `@font-face`
• 24. خصوصیت `font-size` برای اندازه متن
• 25. خصوصیت `font-weight` برای ضخامت فونت
• 26. خصوصیت `font-style` برای سبک فونت (ایتالیک)
• 27. تراز کردن متن با `text-align`
• 28. تزئین متن با `text-decoration` (زیرخط، روخط)
• 29. تبدیل متن با `text-transform` (حروف بزرگ/کوچک)
• 30. فاصله بین خطوط با `line-height`
• 31. فاصله بین حروف با `letter-spacing`
• 32. ایجاد سایه برای متن با `text-shadow`
• 33. استایل‌دهی به لیست‌ها (برای فهرست منابع و یافته‌ها)
• 34. مقدمه‌ای بر مدل جعبه‌ای (The Box Model)
• 35. خصوصیت `width` و `height`
• 36. کنترل حداقل و حداکثر اندازه با `min-width` و `max-width`
• 37. فاصله داخلی جعبه: `padding`
• 38. خط دور جعبه: `border-style`, `border-width`, `border-color`
• 39. خاصیت خلاصه‌نویسی `border`
• 40. گرد کردن گوشه‌های جعبه با `border-radius`
• 41. فاصله خارجی جعبه: `margin`
• 42. مفهوم فروریختن حاشیه‌ها (Margin Collapsing)
• 43. تغییر مدل جعبه‌ای با `box-sizing: border-box`
• 44. کنترل سرریز محتوا با `overflow`
• 45. خصوصیت `display`: مقادیر `block`, `inline`, `inline-block`
• 46. مخفی کردن عناصر با `display: none` و `visibility: hidden`
• 47. موقعیت‌یابی (Positioning): مقدار `static` و `relative`
• 48. موقعیت‌یابی `absolute`: ایجاد لایه‌ها روی نقشه سایت
• 49. موقعیت‌یابی `fixed`: ساخت نوار ناوبری ثابت
• 50. کنترل لایه‌ها با `z-index`
• 51. موقعیت‌یابی `sticky` برای عناوین بخش‌ها
• 52. مقدمه‌ای بر چیدمان با Float (رویکرد سنتی)
• 53. پاک‌سازی Float با `clear`
• 54. مقدمه‌ای بر Flexbox: چیدمان یک‌بعدی مدرن
• 55. ایجاد یک Flex Container با `display: flex`
• 56. تنظیم جهت چیدمان با `flex-direction`
• 57. تراز کردن آیتم‌ها در محور اصلی با `justify-content`
• 58. تراز کردن آیتم‌ها در محور متقاطع با `align-items`
• 59. مدیریت شکست خط با `flex-wrap`
• 60. تراز کردن خطوط چندگانه با `align-content`
• 61. خصوصیات Flex Items: `flex-grow`
• 62. خصوصیات Flex Items: `flex-shrink`
• 63. خصوصیات Flex Items: `flex-basis`
• 64. خاصیت خلاصه‌نویسی `flex`
• 65. تغییر ترتیب آیتم‌ها با `order`
• 66. کاربرد Flexbox: ساخت گالری تصاویر آثار باستانی
• 67. مقدمه‌ای بر CSS Grid: چیدمان دوبعدی قدرتمند
• 68. ایجاد یک Grid Container با `display: grid`
• 69. تعریف ستون‌ها و ردیف‌ها با `grid-template-columns` و `grid-template-rows`
• 70. استفاده از واحد `fr` برای ستون‌های انعطاف‌پذیر
• 71. ایجاد فاصله بین آیتم‌ها با `gap`
• 72. قرار دادن آیتم‌ها در گرید با شماره خط (`grid-column`, `grid-row`)
• 73. ادغام سلول‌ها با `span`
• 74. نام‌گذاری خطوط گرید
• 75. نام‌گذاری نواحی گرید با `grid-template-areas`
• 76. کاربرد Grid: طراحی صفحه پروفایل یک محوطه باستان‌شناسی
• 77. مفهوم طراحی واکنش‌گرا (Responsive Design)
• 78. استفاده از متا تگ Viewport
• 79. رویکرد طراحی اول-موبایل (Mobile-First)
• 80. مقدمه‌ای بر Media Queries
• 81. استفاده از Breakpoint های رایج برای دستگاه‌های مختلف
• 82. ایجاد تصاویر واکنش‌گرا
• 83. چیدمان‌های واکنش‌گرا با Flexbox
• 84. چیدمان‌های واکنش‌گرا با Grid
• 85. انتخابگرهای صفت (Attribute Selectors)
• 86. شبه‌کلاس‌ها (Pseudo-classes): `:hover`, `:focus`, `:active`
• 87. شبه‌کلاس‌های ساختاری: `:first-child`, `:last-child`
• 88. شبه‌کلاس `nth-child` برای استایل‌دهی به جداول داده
• 89. شبه‌کلاس‌های فرم: `:checked`, `:disabled`, `:required`
• 90. شبه‌عناصر (Pseudo-elements): `::before` و `::after`
• 91. کاربرد `::before` و `::after`: افزودن آیکون به لیست‌ها
• 92. شفافیت عناصر با `opacity`
• 93. سایه دادن به جعبه‌ها با `box-shadow`
• 94. تبدیل‌های دوبعدی: `transform` با `translate()`
• 95. تبدیل‌های دوبعدی: `rotate()`
• 96. تبدیل‌های دوبعدی: `scale()`
• 97. انتقال‌های نرم با `transition`
• 98. انیمیشن‌های ساده با `@keyframes` و `animation`
• 99. فیلترهای CSS: `filter` (مانند `grayscale`, `blur`, `sepia`)
• 100. ترکیب حالت‌ها (Blend Modes)