CSS Syllabus

حتماً ✅
در ادامه ترجمه فارسی سرفصل (Syllabus) زبان CSS را برایت آورده‌ام.

🎨 سرفصل آموزش CSS (Cascading Style Sheets)

1. مقدمه‌ای بر CSS

• CSS چیست و چرا استفاده می‌شود؟
• تفاوت بین HTML و CSS
• انواع روش‌های اضافه کردن CSS به HTML
  • Inline CSS (درون‌خطی)
  • Internal CSS (داخلی)
  • External CSS (خارجی)
• ساختار یک قانون (Rule) در CSS:
  • Selector (انتخاب‌گر)
  • Property (ویژگی)
  • Value (مقدار)

2. انتخاب‌گرها (Selectors)

• انتخاب‌گر تگ (Tag Selector)
• انتخاب‌گر کلاس (Class Selector)
• انتخاب‌گر شناسه (ID Selector)
• انتخاب‌گرهای گروهی و ترکیبی
• انتخاب‌گرهای فرزند و تودرتو
• انتخاب‌گرهای ویژگی (Attribute Selectors)
• شبه‌کلاس‌ها (Pseudo-classes) مانند :hover, :focus, :active
• شبه‌عناصر (Pseudo-elements) مانند ::before, ::after

3. رنگ‌ها و پس‌زمینه‌ها

• رنگ‌ها (RGB، HEX، HSL)
• تصویر پس‌زمینه (background-image)
• تکرار، موقعیت و اندازه پس‌زمینه
• شفافیت (opacity) و فیلترها

4. متن و فونت‌ها

• ویژگی‌های متن:
  • color, text-align, text-decoration, text-transform, text-indent
• ویژگی‌های فونت:
  • font-family, font-size, font-weight, font-style
• فونت‌های وب (Web Fonts)
• استفاده از Google Fonts

5. جعبه (Box Model)

• مفهوم مدل جعبه‌ای (Box Model)
• margin, border, padding, content
• تفاوت بین border-box و content-box
• سایه‌دار کردن جعبه‌ها (box-shadow)
• گرد کردن گوشه‌ها (border-radius)

6. چیدمان (Layout)

• ویژگی display: block, inline, inline-block, none
• ویژگی position: static, relative, absolute, fixed, sticky
• z-index و ترتیب لایه‌ها
• float و clear
• overflow

7. Flexbox

• مفهوم Flex Container و Flex Items
• ویژگی‌های اصلی Flexbox:
  • display: flex
  • justify-content
  • align-items
  • flex-direction
  • flex-wrap
  • align-content
  • order و flex-grow, flex-shrink, flex-basis

8. Grid Layout

• display: grid
• تعریف سطرها و ستون‌ها (grid-template-rows, grid-template-columns)
• فاصله شبکه (gap)
• ادغام سلول‌ها (grid-row, grid-column)
• ترازبندی (justify-items, align-items, place-items)

9. انتقال‌ها (Transitions) و انیمیشن‌ها (Animations)

• ویژگی transition (مدت، نوع حرکت، تأخیر)
• ایجاد انیمیشن با @keyframes
• ویژگی‌های animation-name, animation-duration, animation-timing-function, animation-iteration-count

10. رسانه‌ها و واکنش‌گرایی (Responsive Design)

• مفهوم طراحی واکنش‌گرا
• واحدهای نسبی (%, em, rem, vh, vw)
• Media Queries
• طراحی برای موبایل، تبلت و دسکتاپ
• مفهوم Breakpoints

11. CSS Variables و Custom Properties

• تعریف متغیرها با --
• استفاده با var()
• دامنه متغیرها (Global و Local)

12. ابزارها و تکنیک‌های پیشرفته

• CSS Frameworks (مانند Bootstrap, Tailwind CSS)
• Preprocessors (مانند SASS و LESS)
• مرورگر DevTools برای تست و خطایابی
• انیمیشن‌های سه‌بعدی و ترنزیشن‌های پیچیده
• CSS Grid و Flexbox در پروژه‌های واقعی