logo
  • صفحه نخست
  • ویراشگر کد
logo

آموزش کدنویسی با بزرگ‌ترین وبسایت آموزشی توسعه‌ی وب؛ یادگیری گام‌به‌گام، مقالات کاربردی و تمرین‌های عملی برای علاقه‌مندان به برنامه‌نویسی.

لینک‌های سریع

  • صفحه نخست
  • ویراشگر کد
  • ورود
  • ثبت نام

دسته‌بندی‌ها

  • HTML
  • CSS
  • جاوااسکریپت
  • ری‌اکت

© 2026 گرین‌دیتا. تمامی حقوق محفوظ است.

ساخته‌شده با ❤ برای علاقه‌مندان به برنامه‌نویسی

CSS

مبانی CSS
  1. CSS چیست؟
  2. ارتباط HTML و CSS
  3. روش‌های اعمال CSS (Inline، Internal، External)
  4. Syntax، Rule، Selector، Declaration، Property و Value
  5. Comment در CSS
  6. ساختار فایل CSS و اتصال آن به HTML
  7. نحوه پردازش CSS توسط مرورگر
  8. آزمون پایان فصل: مبانی CSS
Cascade و مدل پردازش CSS
  1. مفهوم Cascade
  2. Origin و Importance
  3. Specificity
  4. Inheritance و Initial Value
  5. inherit، initial، unset، revert، revert-layer
  6. Source Order
  7. Cascade Layers و @layer
  8. آزمون پایان فصل: Cascade و مدل پردازش CSS
Selectors
  1. Type، Class، ID و Universal Selector
  2. Attribute Selector
  3. Combinatorها (Descendant، Child، Sibling)
  4. Grouping Selectors
  5. Pseudo-class
  6. Pseudo-element
  7. Structural Selectors
  8. Form-related Selectors
  9. Selectorهای تابعی :is()، :where()، :not()، :has()
  10. Specificity در Selectorهای مختلف
  11. آزمون پایان فصل ۳: Selectors
Box Model
  1. Content، Padding، Border، Margin
  2. Width و Height
  3. box-sizing: content-box و border-box
  4. Margin Collapse
  5. Overflow (overflow, overflow-x, overflow-y, overflow-wrap)
  6. اندازه‌گیری واقعی عناصر
  7. آزمون پایان فصل: Box Model
Display و Flow
  1. display: Block، Inline، Inline-block، None
  2. Normal Flow و Formatting Context
  3. visibility و opacity
  4. تفاوت display: none و visibility: hidden
  5. آزمون پایان فصل: Display و Flow
Units و Values
  1. واحدهای مطلق (px و سایر)
  2. واحدهای نسبی (%, em, rem, ex, ch)
  3. واحدهای Viewport (vw, vh, vmin, vmax, dvw, dvh, svw, svh, lvw, lvh)
  4. واحد fr
  5. واحدهای زاویه، زمان و Resolution
  6. مقایسه و انتخاب واحد مناسب
  7. آزمون پایان فصل: Units و Values
Colors
  1. Named Colors و Hexadecimal
  2. RGB و RGBA
  3. HSL و HSLA
  4. Modern Color Syntax و Alpha
  5. currentColor و color-mix()
  6. آزمون پایان فصل: Colors
Typography
  1. font-family و Web Fonts
  2. font-size، font-weight، font-style، font-stretch
  3. line-height، letter-spacing، word-spacing
  4. text-align، text-decoration، text-transform، text-indent
  5. text-overflow، white-space، word-break، hyphens
  6. text-shadow
  7. @font-face و Variable Fonts
  8. Typography Responsive
  9. آزمون پایان فصل: Typography
Backgrounds و Borders
  1. Background Color و Background Image
  2. Multiple Backgrounds، Position، Size، Repeat، Attachment
  3. Gradients (Linear، Radial، Conic)
  4. Border و Border Radius
  5. Border Image
  6. Outline و Box Shadow
  7. آزمون پایان فصل: Backgrounds و Borders
Positioning
  1. position: static و relative
  2. position: absolute و Containing Block
  3. position: fixed و sticky
  4. Offset Properties (top, right, bottom, left)
  5. z-index و Stacking Context
  6. آزمون پایان فصل: Positioning
Logical Properties
  1. مفهوم Logical Properties
  2. Block Axis و Inline Axis
  3. Logical Margin، Padding و Border
  4. Writing Modes
  5. کاربرد در طراحی چندزبانه و RTL
  6. آزمون پایان فصل ۱۱: Logical Properties
Flexbox
  1. Flex Container و Flex Item
  2. Main Axis و Cross Axis
  3. flex-direction، flex-wrap، flex-flow
  4. justify-content، align-items، align-content، align-self
  5. gap، row-gap، column-gap
  6. flex-grow، flex-shrink، flex-basis، شورت‌هند flex
  7. Order در Flexbox
  8. خطاهای رایج Flexbox
  9. آزمون پایان فصل: Flexbox
CSS Grid
  1. Grid Container و Grid Item
  2. Columns، Rows، Tracks، Grid Lines
  3. grid-template-columns، grid-template-rows
  4. Grid Areas و grid-template-areas
  5. grid-column، grid-row، grid-area
  6. fr، minmax()، repeat()، auto-fit، auto-fill
  7. min-content، max-content، fit-content()
  8. Implicit و Explicit Grid، Auto Placement
  9. Alignment (place-items، place-content، place-self)
  10. Subgrid
  11. تفاوت Grid و Flexbox
  12. آزمون پایان فصل: CSS Grid
Responsive Web Design
  1. مفهوم Responsive Design و Breakpoints
  2. Mobile First در برابر Desktop First
  3. Media Queries (@media)
  4. Responsive Typography
  5. Fluid Layout و Fluid Typography با clamp()
  6. Container Queries (@container) و واحدهای آن
  7. آزمون پایان فصل: Responsive Web Design
CSS Functions
  1. calc()، min()، max()، clamp()
  2. minmax() و repeat()
  3. var() و url()
  4. attr()، rgb()، hsl()، color-mix()
  5. توابع Transform
  6. آزمون پایان فصل ۱۵: CSS Functions
Custom Properties و CSS Variables
  1. تعریف Custom Properties و var()
  2. Fallback Values
  3. Scope و Inheritance
  4. Global و Component Variables
  5. Theme Variables و Dark Mode
  6. مدیریت Design Tokens
  7. آزمون پایان فصل: Custom Properties و CSS Variables
Pseudo-classes و Pseudo-elements
  1. حالت‌های تعامل (:hover، :focus، :focus-visible، :active)
  2. حالت‌های فرم (:checked، :disabled، :valid، :invalid)
  3. Selectorهای ساختاری (:first-child، :nth-child()، :empty)
  4. :root، :target، :is()، :where()، :not()، :has()
  5. Pseudo-elementها (::before، ::after، ::first-letter، ::selection، ::marker، ::placeholder)
  6. آزمون پایان فصل: Pseudo-classها و Pseudo-elementها
Transitions
  1. transition-property، duration، timing-function، delay
  2. شورت‌هند transition
  3. Timing Functions (cubic-bezier()، steps())
  4. طراحی Transitionهای حرفه‌ای
  5. آزمون پایان فصل: Transitions
Transforms
  1. translate، translateX، translateY، translateZ
  2. scale، rotate، skew
  3. Transform 2D و 3D
  4. Transform Origin
  5. آزمون پایان فصل (Transforms)
CSS Animations
  1. @keyframes
  2. animation-name، duration، delay، iteration-count
  3. animation-direction، fill-mode، play-state، timing-function
  4. شورت‌هند Animation و Composition
  5. Performance و Accessibility در Animation
  6. آزمون پایان فصل (Animations)
Modern CSS
  1. CSS Nesting
  2. Cascade Layers (مرور تکمیلی)
  3. Container Queries (مرور تکمیلی)
  4. Subgrid (مرور تکمیلی)
  5. Modern Color Functions
  6. aspect-ratio
  7. @supports و Feature Queries
  8. آزمون پایان فصل (Modern CSS Features)
Forms و UI Styling
  1. Styling عناصر فرم (Input، Button، Select)
  2. Checkbox و Radio
  3. Focus States و Validation States
  4. ملاحظات Accessibility در فرم‌ها
  5. آزمون پایان فصل (Forms Styling):
CSS برای Accessibility
  1. Focus Indicator و :focus-visible
  2. Contrast و خوانایی متن
  3. prefers-reduced-motion و prefers-color-scheme
  4. عدم اتکا به رنگ به‌تنهایی
  5. آزمون پایان فصل (Accessibility در CSS)
CSS و SEO
  1. Performance و Core Web Vitals
  2. Render Blocking و Critical CSS
  3. Layout Shift و Font Loading
  4. آزمون پایان فصل (Performance و Core Web Vitals)
CSS Performance
  1. حجم فایل و روش‌های بارگذاری CSS
  2. Selector Performance و Unused CSS
  3. Critical CSS و Minification
  4. Layout، Paint، Composite
  5. بهینه‌سازی Animation با transform و opacity
  6. آزمون پایان فصل (Performance)
CSS Architecture
  1. Naming Conventions و BEM
  2. Component-based CSS و Utility Classes
  3. Design Tokens و CSS Variables
  4. مدیریت فایل‌ها در پروژه‌های بزرگ
  5. جلوگیری از Specificity Wars
  6. آزمون پایان فصل (Architecture و Organization)
Debugging و DevTools
  1. Inspect Element و Styles Panel
  2. Box Model Visualization
  3. Flexbox Inspector و Grid Inspector
  4. Debugging Responsive Design
  5. آزمون پایان فصل (DevTools و Debugging)
مرورگرها و سازگاری
  1. Browser Compatibility و منابع بررسی پشتیبانی
  2. Progressive Enhancement و Graceful Degradation
  3. Feature Detection و @supports
  4. آزمون پایان فصل (Cross-browser Compatibility)
آزمون جامع دوره CSS
  1. آزمون جامع CSS

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

آزمون جامع CSS

تمرین‌ها

تمرین 1

در مدل جعبه‌ای CSS، با box-sizing: content-box، ویژگی width دقیقاً چه بخشی از جعبه رو مشخص می‌کنه؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 2

کدوم selector، هر پاراگرافی رو که مستقیماً بعد از یک h2 میاد انتخاب می‌کنه؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 3

در Cascade، وقتی دو قانون specificity یکسان دارن، کدوم برنده می‌شه؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 4

واحد rem نسبت به چه چیزی محاسبه می‌شه؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 5

کدام تابع رنگ، یکنواختی ادراکی (perceptual uniformity) داره؛ یعنی مقدار یکسان Lightness به‌واقع هم‌روشنایی به نظر می‌رسه؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 6

در Flexbox، ویژگی justify-content روی کدوم محور اثر می‌ذاره؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 7

در CSS Grid، واحد fr چه چیزی رو مشخص می‌کنه؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 8

کدام media query، بر اساس اندازه‌ی المنت والد (نه viewport) عمل می‌کنه؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 9

ویژگی CSS Custom Property (متغیر CSS) با کدام سینتکس تعریف می‌شه؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 10

کدام Pseudo-class، فقط اولین فرزند از نوع خودش رو در بین خواهر و برادرهاش انتخاب می‌کنه؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 11

ویژگی transition-timing-function چه چیزی رو کنترل می‌کنه؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 12

برای این‌که چرخش سه‌بعدی یک المنت واقعاً حس عمق داشته باشه، کدوم ویژگی باید روی والدش تنظیم بشه؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 13

در @keyframes، اگر مقدار یک ویژگی در 100% نوشته نشده باشد ولی در 50% تعریف شده باشد، مرورگر چه می‌کند؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 14

در CSS Nesting، علامت & دقیقاً جایگزین چه چیزی می‌شود؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 15

در Cascade Layers، لایه‌ای که در لیست اولیه‌ی @layer دیرتر تعریف شده باشد، نسبت به لایه‌ی زودتر چه اولویتی دارد؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 16

برای این‌که یک المنت فرزند بتواند از subgrid استفاده کند، کدام شرط الزامی است؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 17

اگر یک المنت هم width و هم height به‌صورت صریح مقداردهی شده باشند، ویژگی aspect-ratio چه رفتاری نشان می‌دهد؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 18

چرا در @supports، توصیه می‌شود ویژگی و مقدار با هم تست شوند (مثل grid-template-rows: subgrid)، نه فقط اسم ویژگی؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 19

برای حذف فلش پیش‌فرض یک select و جایگزینی آن با یک آیکون سفارشی، کدام ویژگی لازم است؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 20

چرا توصیه می‌شود به‌جای حذف کامل outline با outline: none، از یک جایگزین بصری برای حالت focus استفاده شود؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 21

طبق WCAG سطح AA، حداقل نسبت کنتراست برای متن معمولی (غیر بزرگ) چقدر است؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 22

چرا انیمیت کردن transform معمولاً پرفورمنس بهتری نسبت به left یا width دارد؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 23

چرا استفاده از @import برای تقسیم فایل‌های CSS مستقیم در مرورگر (بدون build process) معمولاً توصیه نمی‌شود؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 24

کدام ویژگی CSS به مرورگر می‌گوید بخش‌های خارج از viewport یک صفحه‌ی طولانی را تا نزدیک شدن کاربر رندر نکند؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 25

طبق قوانین استاندارد BEM، کدام کلاس درست نام‌گذاری شده؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 26

در یک سیستم design token دولایه (خام و معنایی)، چرا کامپوننت‌ها باید به لایه‌ی معنایی وصل شوند، نه مستقیم به token خام؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 27

در پنل Styles ابزارهای توسعه‌دهنده‌ی مرورگر، خط‌خوردگی (strikethrough) روی یک ویژگی به چه معناست؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 28

چرا برای دیباگ یک @container query، باید عرض المنت container تغییر کند، نه عرض کل viewport؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 29

تفاوت اصلی جهت فکری بین Progressive Enhancement و Graceful Degradation چیست؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 30

چرا تصمیم درباره‌ی استفاده از یک ویژگی جدید CSS نباید فقط بر اساس درصد «Global usage» در caniuse گرفته شود؟

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.