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

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

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

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

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

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

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

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

CSS

مبانی CSS

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

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

مفهوم Cascade
Origin و Importance
Specificity
Inheritance و Initial Value
inherit، initial، unset، revert، revert-layer
Source Order
Cascade Layers و @layer
آزمون پایان فصل: Cascade و مدل پردازش CSS

Selectors

Type، Class، ID و Universal Selector
Attribute Selector
Combinatorها (Descendant، Child، Sibling)
Grouping Selectors
Pseudo-class
Pseudo-element
Structural Selectors
Form-related Selectors
Selectorهای تابعی :is()، :where()، :not()، :has()
Specificity در Selectorهای مختلف
آزمون پایان فصل ۳: Selectors

Box Model

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

Display و Flow

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

Units و Values

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

Colors

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

Typography

font-family و Web Fonts
font-size، font-weight، font-style، font-stretch
line-height، letter-spacing، word-spacing
text-align، text-decoration، text-transform، text-indent
text-overflow، white-space، word-break، hyphens
text-shadow
@font-face و Variable Fonts
Typography Responsive
آزمون پایان فصل: Typography

Backgrounds و Borders

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

Positioning

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

Logical Properties

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

Flexbox

Flex Container و Flex Item
Main Axis و Cross Axis
flex-direction، flex-wrap، flex-flow
justify-content، align-items، align-content، align-self
gap، row-gap، column-gap
flex-grow، flex-shrink، flex-basis، شورت‌هند flex
Order در Flexbox
خطاهای رایج Flexbox
آزمون پایان فصل: Flexbox

CSS Grid

Grid Container و Grid Item
Columns، Rows، Tracks، Grid Lines
grid-template-columns، grid-template-rows
Grid Areas و grid-template-areas
grid-column، grid-row، grid-area
fr، minmax()، repeat()، auto-fit، auto-fill
min-content، max-content، fit-content()
Implicit و Explicit Grid، Auto Placement
Alignment (place-items، place-content، place-self)
Subgrid
تفاوت Grid و Flexbox
آزمون پایان فصل: CSS Grid

Responsive Web Design

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

CSS Functions

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

Custom Properties و CSS Variables

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

Pseudo-classes و Pseudo-elements

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

Transitions

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

Transforms

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

CSS Animations

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

Modern CSS

CSS Nesting
Cascade Layers (مرور تکمیلی)
Container Queries (مرور تکمیلی)
Subgrid (مرور تکمیلی)
Modern Color Functions
aspect-ratio
@supports و Feature Queries
آزمون پایان فصل (Modern CSS Features)

Forms و UI Styling

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

CSS برای Accessibility

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

CSS و SEO

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

CSS Performance

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

CSS Architecture

Naming Conventions و BEM
Component-based CSS و Utility Classes
Design Tokens و CSS Variables
مدیریت فایل‌ها در پروژه‌های بزرگ
جلوگیری از Specificity Wars
آزمون پایان فصل (Architecture و Organization)

Debugging و DevTools

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

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

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

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

آزمون جامع CSS

CSS / Colors

آزمون پایان فصل: Colors

به پایان فصل هفتم رسیدیم. تو این فصل با روش‌های مختلف تعریف رنگ در CSS آشنا شدیم: Named Colors و Hexadecimal، RGB و RGBA، HSL و HSLA، Syntax مدرن رنگی و کانال Alpha، و در نهایت دو ابزار پویا یعنی currentColor و color-mix(). حالا وقتشه با ۵ سؤال، میزان تسلط‌تون رو بسنجیم.

تمرین‌ها

تمرین 1

کد Hexadecimal کوتاه‌شده #0f8 دقیقاً معادل کدام کد شش‌رقمی است؟

#00ff88#0f0f88#000f88#0ff088

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

تمرین 2

در تابع rgba(0, 100, 200, 0.2)، عدد ۰.۲ در چه بازه‌ای معنا دارد؟

بین ۰ تا ۱۰۰بین ۰ تا ۲۵۵بین ۰ تا ۱بین ۰ تا ۳۶۰

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

تمرین 3

در مدل رنگی HSL، برای تیره‌تر یا روشن‌تر کردن یک رنگ پایه بدون تغییر نوع آن، کدام مقدار باید تغییر کند؟

HueSaturationLightnessهر سه مقدار به‌طور هم‌زمان

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

تمرین 4

کدام گزینه، تفاوت اصلی Syntax مدرن رنگی (مثل rgb(255 0 0 / 0.5)) با Syntax قدیمی را به‌درستی بیان می‌کند؟

Syntax مدرن اصلاً از شفافیت پشتیبانی نمی‌کنددر Syntax مدرن، مقادیر با فاصله جدا می‌شوند و Alpha با یک اسلش در همان تابع اصلی می‌آیدSyntax مدرن فقط برای HSL قابل استفاده است، نه RGBSyntax قدیمی دیگر در هیچ مرورگری کار نمی‌کند

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

تمرین 5

کلیدواژه currentColor دقیقاً به چه مقداری اشاره دارد؟

یک رنگ ثابت و از پیش تعریف‌شده در استاندارد CSSمقدار فعلی Property به اسم color همان عنصررنگ پیش‌فرض مرورگر برای تمام عناصررنگ پس‌زمینه صفحه html

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