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

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

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

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

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

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

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 / Cascade و مدل پردازش CSS

آزمون پایان فصل: Cascade و مدل پردازش CSS

به پایان فصل رسیدیم. تو این فصل با مفهوم Cascade و تمام لایه‌های تصمیم‌گیری‌ش آشنا شدیم: Origin و Importance، Specificity، Inheritance، Source Order و در نهایت Cascade Layers. حالا وقتشه با ۵ سؤال، میزان تسلط‌تون رو روی این مفاهیم بسنجیم.

تمرین‌ها

تمرین 1

کدام مورد جزو Origin استایل محسوب نمی‌شود؟

User Agent StylesheetAuthor StylesheetSource OrderUser Stylesheet

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

تمرین 2

اگر یک Selector شامل یک ID و یک Class باشد، و Selector دیگری شامل سه Class باشد، کدام Specificity بالاتری دارد؟

Selector با سه ClassSelector با یک ID و یک Classهر دو برابرندبستگی به Source Order دارد

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

تمرین 3

کدام Property زیر، به‌طور معمول ارث‌بری (Inheritance) نمی‌شود؟

colorfont-familymarginline-height

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

تمرین 4

اگر دو Rule با Origin، Importance و Specificity کاملاً برابر روی یک عنصر اثر بگذارند، کدام عامل تعیین‌کننده مقدار نهایی خواهد بود؟

طول نام SelectorSource Orderتعداد کاراکترهای Ruleنوع فایل CSS (Internal یا External)

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

تمرین 5

در Cascade Layers، کدام جمله درست است؟

Specificity همیشه بر ترتیب Layerها غلبه می‌کندRuleهای بدون Layer، کمترین اولویت را دارندترتیب Layerها فقط زمانی مهم است که از !important استفاده شده باشدLayerای که دیرتر تعریف شده، اولویت بالاتری نسبت به Layerهای قبلی دارد، مستقل از Specificity

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