CSS

مبانی CSS

1. 1. روش‌های اعمال CSS (Inline، Internal، External)
2. 2. CSS چیست؟
3. 3. ارتباط HTML و CSS
4. 4. Syntax، Rule، Selector، Declaration، Property و Value
5. 5. Comment در CSS
6. 6. ساختار فایل CSS و اتصال آن به HTML
7. 7. نحوه پردازش CSS توسط مرورگر
8. 8. آزمون پایان فصل: مبانی CSS

Cascade و مدل پردازش CSS

1. 1. مفهوم Cascade
2. 2. Origin و Importance
3. 3. Specificity
4. 4. Inheritance و Initial Value
5. 5. inherit، initial، unset، revert، revert-layer
6. 6. Source Order
7. 7. Cascade Layers و @layer

Selectors

1. 1. Type، Class، ID و Universal Selector
2. 2. Attribute Selector
3. 3. Combinatorها (Descendant، Child، Sibling)
4. 4. Grouping Selectors
5. 5. Pseudo-class
6. 6. Pseudo-element
7. 7. Structural Selectors

Box Model

1. 1. Content، Padding، Border، Margin
2. 2. Width و Height
3. 3. box-sizing: content-box و border-box
4. 4. Margin Collapse
5. 5. Overflow (overflow, overflow-x, overflow-y, overflow-wrap)
6. 6. اندازه‌گیری واقعی عناصر
7. 7. آزمون پایان فصل: Box Model

Display و Flow

1. 1. display: Block، Inline، Inline-block، None
2. 2. Normal Flow و Formatting Context
3. 3. visibility و opacity
4. 4. تفاوت display: none و visibility: hidden
5. 5. آزمون پایان فصل: Display و Flow

Units و Values

1. 1. واحدهای Viewport (vw, vh, vmin, vmax, dvw, dvh, svw, svh, lvw, lvh)
2. 2. واحدهای مطلق (px و سایر)
3. 3. واحدهای نسبی (%, em, rem, ex, ch)
4. 4. واحد fr
5. 5. واحدهای زاویه، زمان و Resolution
6. 6. مقایسه و انتخاب واحد مناسب
7. 7. آزمون پایان فصل: Units و Values

Colors

1. 1. Named Colors و Hexadecimal
2. 2. RGB و RGBA
3. 3. HSL و HSLA
4. 4. Modern Color Syntax و Alpha
5. 5. currentColor و color-mix()
6. 6. آزمون پایان فصل: Colors

Typography

1. 1. font-family و Web Fonts
2. 2. font-size، font-weight، font-style، font-stretch
3. 3. line-height، letter-spacing، word-spacing
4. 4. text-align، text-decoration، text-transform، text-indent
5. 5. text-overflow، white-space، word-break، hyphens
6. 6. text-shadow
7. 7. @font-face و Variable Fonts

Backgrounds و Borders

1. 1. Background Color و Background Image
2. 2. Multiple Backgrounds، Position، Size، Repeat، Attachment
3. 3. Gradients (Linear، Radial، Conic)
4. 4. Border و Border Radius
5. 5. Border Image
6. 6. Outline و Box Shadow
7. 7. آزمون پایان فصل: Backgrounds و Borders

Positioning

1. 1. position: static و relative
2. 2. position: absolute و Containing Block
3. 3. position: fixed و sticky
4. 4. Offset Properties (top, right, bottom, left)
5. 5. z-index و Stacking Context
6. 6. آزمون پایان فصل: Positioning

Logical Properties

1. 1. مفهوم Logical Properties
2. 2. Block Axis و Inline Axis
3. 3. Logical Margin، Padding و Border
4. 4. Writing Modes
5. 5. کاربرد در طراحی چندزبانه و RTL
6. 6. آزمون پایان فصل ۱۱: Logical Properties

Flexbox

1. 1. flex-direction، flex-wrap، flex-flow
2. 2. Main Axis و Cross Axis
3. 3. Flex Container و Flex Item
4. 4. justify-content، align-items، align-content، align-self
5. 5. gap، row-gap، column-gap
6. 6. flex-grow، flex-shrink، flex-basis، شورت‌هند flex
7. 7. Order در Flexbox

CSS Grid

1. 1. Grid Container و Grid Item
2. 2. Columns، Rows، Tracks، Grid Lines
3. 3. grid-template-columns، grid-template-rows
4. 4. Grid Areas و grid-template-areas
5. 5. fr، minmax()، repeat()، auto-fit، auto-fill
6. 6. min-content، max-content، fit-content()
7. 7. Implicit و Explicit Grid، Auto Placement

Responsive Web Design

1. 1. مفهوم Responsive Design و Breakpoints
2. 2. Mobile First در برابر Desktop First
3. 3. Media Queries (@media)
4. 4. Responsive Typography
5. 5. Fluid Layout و Fluid Typography با clamp()
6. 6. Container Queries (@container) و واحدهای آن
7. 7. آزمون پایان فصل: Responsive Web Design

CSS Functions

1. 1. calc()، min()، max()، clamp()
2. 2. minmax() و repeat()
3. 3. var() و url()
4. 4. attr()، rgb()، hsl()، color-mix()
5. 5. توابع Transform
6. 6. آزمون پایان فصل ۱۵: CSS Functions

Custom Properties و CSS Variables

1. 1. Fallback Values
2. 2. Scope و Inheritance
3. 3. Global و Component Variables
4. 4. Theme Variables و Dark Mode
5. 5. مدیریت Design Tokens
6. 6. آزمون پایان فصل: Custom Properties و CSS Variables
7. 7. تعریف Custom Properties و var()

Pseudo-classes و Pseudo-elements

1. 1. حالت‌های تعامل (:hover، :focus، :focus-visible، :active)
2. 2. حالت‌های فرم (:checked، :disabled، :valid، :invalid)
3. 3. Selectorهای ساختاری (:first-child، :nth-child()، :empty)
4. 4. Pseudo-elementها (::before، ::after، ::first-letter، ::selection، ::marker، ::placeholder)
5. 5. آزمون پایان فصل: Pseudo-classها و Pseudo-elementها
6. 6. :root، :target، :is()، :where()، :not()، :has()

Transitions

1. 1. transition-property، duration، timing-function، delay
2. 2. شورت‌هند transition
3. 3. Timing Functions (cubic-bezier()، steps())
4. 4. طراحی Transitionهای حرفه‌ای
5. 5. آزمون پایان فصل: Transitions

Transforms

1. 1. translate، translateX، translateY، translateZ
2. 2. scale، rotate، skew
3. 3. Transform 2D و 3D
4. 4. Transform Origin
5. 5. آزمون پایان فصل (Transforms)

CSS Animations

1. 1. @keyframes
2. 2. animation-name، duration، delay، iteration-count
3. 3. animation-direction، fill-mode، play-state، timing-function
4. 4. شورت‌هند Animation و Composition
5. 5. Performance و Accessibility در Animation
6. 6. آزمون پایان فصل (Animations)

Modern CSS

1. 1. CSS Nesting
2. 2. Cascade Layers (مرور تکمیلی)
3. 3. Container Queries (مرور تکمیلی)
4. 4. Subgrid (مرور تکمیلی)
5. 5. Modern Color Functions
6. 6. aspect-ratio
7. 7. @supports و Feature Queries
8. 8. آزمون پایان فصل (Modern CSS Features)

Forms و UI Styling

1. 1. Styling عناصر فرم (Input، Button، Select)
2. 2. Checkbox و Radio
3. 3. Focus States و Validation States
4. 4. ملاحظات Accessibility در فرم‌ها
5. 5. آزمون پایان فصل (Forms Styling):

CSS برای Accessibility

1. 1. Focus Indicator و :focus-visible
2. 2. Contrast و خوانایی متن
3. 3. prefers-reduced-motion و prefers-color-scheme
4. 4. عدم اتکا به رنگ به‌تنهایی
5. 5. آزمون پایان فصل (Accessibility در CSS)

CSS و SEO

1. 1. Performance و Core Web Vitals
2. 2. Render Blocking و Critical CSS
3. 3. Layout Shift و Font Loading
4. 4. آزمون پایان فصل (Performance و Core Web Vitals)

CSS Performance

1. 1. حجم فایل و روش‌های بارگذاری CSS
2. 2. Selector Performance و Unused CSS
3. 3. Critical CSS و Minification
4. 4. Layout، Paint، Composite
5. 5. بهینه‌سازی Animation با transform و opacity
6. 6. آزمون پایان فصل (Performance)

معماری CSS

1. 1. Naming Conventions و BEM
2. 2. Component-based CSS و Utility Classes
3. 3. Design Tokens و CSS Variables
4. 4. مدیریت فایل‌ها در پروژه‌های بزرگ
5. 5. جلوگیری از Specificity Wars

Debugging و DevTools

1. 1. Inspect Element و Styles Panel
2. 2. Box Model Visualization
3. 3. Flexbox Inspector و Grid Inspector
4. 4. Debugging Responsive Design
5. 5. آزمون پایان فصل (DevTools و Debugging)

مرورگرها و سازگاری

1. 1. Browser Compatibility و منابع بررسی پشتیبانی
2. 2. Progressive Enhancement و Graceful Degradation
3. 3. Feature Detection و @supports
4. 4. آزمون پایان فصل (Cross-browser Compatibility)

آزمون جامع دوره CSS

1. 1. آزمون جامع CSS