جاري التحميل...

الدليل الكامل لوحدات CSS

يقدم هذا الدليل المرجعي الشامل لجميع وحدات CSS مرجعًا عمليًا للمطورين للتحكم الدقيق في التخطيط والطباعة والألوان والتصميم التفاعلي. يتيح للمطورين الاطلاع السريع على كل وحدة، وفهم استخدامها الأمثل مع أمثلة واقعية لتطبيقها في مشاريع حقيقية. يغطي الدليل جميع أنواع الوحدات: الطول المطلق، الطول النسبي، وحدات العرض، وحدات الاستعلام الحاوية، النسب المئوية، الزوايا، الوقت، التردد، الدقة، الألوان، الوظائف، ووحدات الشبكة (Grid). تم تنظيم الوحدات حسب الفئة لتسهيل البحث السريع والرجوع إليها خلال تطوير واجهات مرنة وقابلة للتوسع ومتوافقة مع جميع الأجهزة والمتصفحات الحديثة.

📊 Absolute Length Units

Unit Description Conversion Example Use Cases Browser Support
px بكسل - بكسلات الجهاز 1px = 1/96 inch width: 300px تصميم الشاشات، الحدود، الظلال جميع المتصفحات
cm سنتيمتر 1cm = 37.8px margin: 2cm طباعة، القياسات الفيزيائية جميع المتصفحات
mm ملليمتر 1mm = 3.78px border: 1mm solid الوسائط المطبوعة، القياسات الدقيقة جميع المتصفحات
in بوصة 1in = 96px page-break-after: 2in تصاميم الطباعة، القياسات الكبيرة جميع المتصفحات
pt نقطة 1pt = 1.33px font-size: 12pt الطباعة، النصوص جميع المتصفحات
pc بيكا 1pc = 16px line-height: 1.5pc الطباعة، أعمدة النص جميع المتصفحات
Q ربع مليمتر 1Q = 0.25mm margin: 4Q تصاميم الطباعة الدقيقة جدًا المتصفحات الحديثة

📊 Relative Length Units

Unit Description Relative To Example Use Cases Browser Support
em وحدة em حجم خط العنصر الأب font-size: 1.2em الطباعة، المسافات النسبية للنص جميع المتصفحات
rem الوحدة الجذرية em حجم خط العنصر الجذر margin: 2rem مسافات ثابتة، تخطيطات قابلة للتوسع IE9+
ex ارتفاع الحرف x ارتفاع حرف x الصغير في الخط الحالي line-height: 2ex الطباعة، المحاذاة الرأسية جميع المتصفحات
ch عرض الحرف عرض الرقم '0' في الخط الحالي width: 40ch حاويات النصوص، خطوط monospaced IE9+
cap ارتفاع الحروف الكبيرة ارتفاع الحروف الكبيرة في الخط margin-top: 1cap الطباعة، المسافات الرأسية المتصفحات الحديثة
ic حرف صيني/ياباني عرض الحروف الصينية/اليابانية width: 20ic الطباعة في شرق آسيا المتصفحات الحديثة
lh ارتفاع السطر ارتفاع سطر العنصر margin: 1lh الإيقاع الرأسي، المسافات المتصفحات الحديثة
rlh ارتفاع السطر الجذر ارتفاع السطر للعنصر الجذر padding: 0.5rlh المسافات الرأسية الموحدة المتصفحات الحديثة

📊 Viewport Units

Unit Description Calculation Example Use Cases Browser Support
vw عرض النافذة 1% من عرض النافذة width: 50vw تخطيطات كاملة العرض، تصميم متجاوب IE9+
vh ارتفاع النافذة 1% من ارتفاع النافذة height: 100vh أقسام كاملة الارتفاع، مناطق هيرو IE9+
vmin أصغر بعد للنافذة 1% من أصغر بعد للنافذة font-size: 4vmin عناصر مربعة، الطباعة المتجاوبة IE9+
vmax أكبر بعد للنافذة 1% من أكبر بعد للنافذة width: 50vmax تصاميم متجاوبة، تصميم تكييفي IE9+
vi محوري النافذة 1% من البعد المحوري للنافذة padding: 2vi الخصائص المنطقية، تخطيطات دولية المتصفحات الحديثة
vb كتلة النافذة 1% من البعد العمودي للنافذة margin: 3vb الكتل في الاتجاه العمودي، أوضاع الكتابة المتصفحات الحديثة
dvw عرض النافذة الديناميكي 1% من العرض الديناميكي width: 100dvw تصاميم الهواتف، التعامل مع شريط العنوان المتصفحات الحديثة
dvh ارتفاع النافذة الديناميكي 1% من الارتفاع الديناميكي height: 100dvh واجهة كاملة الارتفاع على الهواتف المتصفحات الحديثة
lvw عرض النافذة الكبير 1% من العرض الكبير max-width: 90lvw تصاميم الهواتف، عرض واجهة المتصفحات الحديثة
lvh ارتفاع النافذة الكبير 1% من الارتفاع الكبير min-height: 100lvh تصاميم الهواتف، الحد الأقصى للنافذة المتصفحات الحديثة
svw عرض النافذة الصغير 1% من العرض الصغير width: 100svw تصاميم الهواتف، إخفاء واجهة المتصفحات الحديثة
svh ارتفاع النافذة الصغير 1% من الارتفاع الصغير height: 100svh تصاميم الهواتف، الحد الأدنى للنافذة المتصفحات الحديثة

📊 Container Query Units

Unit Description Calculation Example Use Cases Browser Support
cqw عرض الاستعلام الحاوي 1% من عرض الحاوية width: 50cqw تصميم متجاوب على مستوى الحاويات المتصفحات الحديثة
cqh ارتفاع الاستعلام الحاوي 1% من ارتفاع الحاوية height: 80cqh تخطيطات الحاوية المتصفحات الحديثة
cqi المحوري الاستعلام الحاوي 1% من البعد المحوري للحاوية padding: 2cqi تخطيطات الحاوية المنطقية المتصفحات الحديثة
cqb الكتلي الاستعلام الحاوي 1% من البعد العمودي للحاوية margin: 1cqb قياس الحاوية في الاتجاه العمودي المتصفحات الحديثة
cqmin أصغر بعد للحاوية 1% من أصغر بعد للحاوية font-size: 3cqmin الطباعة النسبية للحاويات المتصفحات الحديثة
cqmax أكبر بعد للحاوية 1% من أكبر بعد للحاوية border-radius: 2cqmax تخصيص الحاوية المتصفحات الحديثة

📊 Percentage Units

Unit Description Relative To Example Use Cases Browser Support
% النسبة المئوية الخاصية المطابقة للعنصر الأب width: 50% تصاميم مرنة، تصميم متجاوب جميع المتصفحات

📊 Angle Units

Unit Description Conversion Example Use Cases Browser Support
deg درجة 360deg = دائرة كاملة transform: rotate(45deg) الدوارات، التدرجات جميع المتصفحات
grad جراديان 400grad = دائرة كاملة transform: rotate(100grad) الحسابات الرياضية، التدرجات جميع المتصفحات
rad راديان 2π rad = دائرة كاملة transform: rotate(1.57rad) التحويلات الرياضية جميع المتصفحات
turn دورة كاملة 1turn = دائرة كاملة transform: rotate(0.25turn) دوارات بسيطة، الرسوم المتحركة IE9+

📊 Time Units

Unit Description Conversion Example Use Cases Browser Support
s ثواني 1s = 1000ms transition-duration: 2s الرسوم المتحركة، الانتقالات جميع المتصفحات
ms مللي ثانية 1000ms = 1s animation-delay: 500ms توقيت دقيق، الرسوم السريعة جميع المتصفحات

📊 Frequency Units

Unit Description Conversion Example Use Cases Browser Support
Hz هرتز 1Hz = دورة في الثانية غير شائع الاستخدام في CSS خصائص صوتية مستقبلية محدود
kHz كيلوهرتز 1kHz = 1000Hz غير شائع الاستخدام في CSS خصائص صوتية مستقبلية محدود

📊 Resolution Units

Unit Description Definition Example Use Cases Browser Support
dpi نقاط لكل بوصة نقاط في البوصة الفيزيائية @media (min-resolution: 300dpi) شاشات عالية الدقة، الطباعة IE9+
dpcm نقاط لكل سنتيمتر نقاط في السنتيمتر @media (min-resolution: 118dpcm) قياسات مترية، الطباعة IE9+
dppx نقاط لكل بكسل CSS بكسلات الجهاز لكل بكسل CSS @media (min-resolution: 2dppx) شاشات Retina، نسبة البكسل IE9+
x اختصار dppx نفس dppx @media (min-resolution: 2x) شاشات Retina، كتابة مبسطة المتصفحات الحديثة

📊 Color Units

Unit Description Format Example Use Cases Browser Support
\# هيكس #RRGGBB أو #RGB color: #ff0000 صيغة الألوان الأساسية جميع المتصفحات
rgb() وظيفة RGB rgb(r, g, b) color: rgb(255, 0, 0) تحكم دقيق بالألوان جميع المتصفحات
rgba() RGB مع الشفافية rgba(r, g, b, a) background: rgba(255, 0, 0, 0.5) ألوان شفافة IE9+
hsl() وظيفة HSL hsl(h, s%, l%) color: hsl(0, 100%, 50%) اختيار ألوان بديهي IE9+
hsla() HSL مع الشفافية hsla(h, s%, l%, a) background: hsla(0, 100%, 50%, 0.5) ألوان شفافة HSL IE9+
hwb() HWB hwb(h w% b%) color: hwb(0 0% 0%) نموذج ألوان بديل المتصفحات الحديثة
lab() Lab lab(l a b) color: lab(50% 20 -30) فضاء ألوان إدراكي المتصفحات الحديثة
lch() LCH lch(l c h) color: lch(50% 40 180) فضاء ألوان LCH أسطواني المتصفحات الحديثة
oklab() OKLab oklab(l a b) color: oklab(0.5 0.2 -0.3) فضاء ألوان محسّن المتصفحات الحديثة
oklch() OKLCH oklch(l c h) color: oklch(0.5 0.4 180) فضاء ألوان LCH محسّن المتصفحات الحديثة
color() وظيفة color color(space r g b) color: color(display-p3 1 0 0) مساحات ألوان واسعة المتصفحات الحديثة

📊 Function Units

Unit Description Calculation Example Use Cases Browser Support
calc() حساب رياضي دمج وحدات مختلفة width: calc(100% - 20px) حسابات مختلطة للوحدات IE9+
min() القيمة الصغرى إرجاع أصغر قيمة width: min(100px, 50%) قيود تصميم متجاوب المتصفحات الحديثة
max() القيمة الكبرى إرجاع أكبر قيمة width: max(200px, 50%) الحد الأدنى المتجاوب المتصفحات الحديثة
clamp() تثبيت القيمة clamp(min, preferred, max) font-size: clamp(1rem, 4vw, 2rem) طباعة متجاوبة مع حدود المتصفحات الحديثة
attr() قيمة HTML استخدام قيمة السمة width: attr(data-width px) القيم الديناميكية من HTML دعم محدود
var() متغير CSS استخدام خاصية مخصصة color: var(--main-color) المتغيرات في CSS IE11+ جزئي، المتصفحات الحديثة

📊 Grid Units

Unit Description Definition Example Use Cases Browser Support
fr وحدة الكسر جزء من المساحة المتاحة grid-template-columns: 1fr 2fr تصاميم CSS Grid، أعمدة مرنة IE10+ مع -ms-

Quick Examples

css
CSS Code 
/* مزج الوحدات المطلقة والنسبية */
.container {
width: calc(100vw - 2rem);
max-width: 1200px;
padding: 1em 5%;
}

/* الطباعة المتجاوبة مع clamp */
.heading {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.2;
margin-bottom: 1em;
}

/* وحدات العرض للشاشات الكاملة */
.hero {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
}

/* وحدات الاستعلام الحاوية لتصميم المكونات */
.card {
width: 100cqw;
padding: 2cqi;
font-size: clamp(0.875rem,

3cqw, 1.25rem);
}

/* CSS Grid مع وحدات الكسور */
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr 2fr;
gap: 1rem;
}

أفضل الممارسات والنصائح:
استخدم الوحدات النسبية (rem, em, %) لتصميمات قابلة للتوسع وسهلة الوصول. فضل استخدام rem على em لضمان اتساق المسافات عبر التصميم. استخدم وحدات العرض (vw, vh) بحذر لأنها لا تأخذ شريط التمرير بعين الاعتبار. فكر في استخدام clamp() للطباعة المتجاوبة بسلاسة. امزج الوحدات بحكمة مع calc() لتصاميم معقدة متجاوبة. استخدم px للحدود والظلال والعناصر الزخرفية. اختبر وحدات الاستعلام الحاوية في المتصفحات المدعومة قبل الإنتاج. استخدم وحدات fr في CSS Grid لتخطيطات مرنة وسهلة الفهم. كن على دراية بدعم المتصفحات للوحدات الحديثة مثل dvh, lvh, svh. فكر في استخدام الوحدات المنطقية (vi, vb) لتخطيطات دولية. استخدم HSL/HSB لتسهيل تعديل الألوان. دائمًا قدم بدائل للوحدات الحديثة للمتصفحات القديمة. اختبر مزيج الوحدات عبر مختلف الأجهزة وأحجام الشاشات.

🧠 اختبر معرفتك

جاهز للبدء

Reference Knowledge Check

اختبار معرفتك بوحدات CSS واستخداماتها.

❓
3
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 62 من 65
Css درس تعليمي