الوحدات في CSS
أنت تعرف بالفعل كيف تكتب تصريحًا مثل color: teal. خصائص الحجم تحتاج فكرة ثانية: كم يبلغ الحجم. font-size: 16 وحده غير صالح لمعظم خصائص الطول — يحتاج المتصفح إلى وحدة ليفهم ماذا تعني «16».
ما هي وحدات CSS؟
وحدات CSS هي نهايات القياس الملحقة بقيم الطول — مثل px و rem و % و vw و vh. الوحدات المطلقة تبقى بنفس الحجم بغض النظر عن الأب. الوحدات النسبية تتناسب مع شيء آخر: خط العنصر أو خط الجذر أو حجم الأب أو إطار العرض (viewport).
المطلق مقابل النسبي في لمحة
استخدم هذا الجدول كخريطة. لست بحاجة لكل وحدة في اليوم الأول — تعرّف على العائلات ثم درّب الوحدات اليومية.
📊 وحدات طول CSS الشائعة
| الوحدة | العائلة | الاستخدام المعتاد |
|---|---|---|
| px | مطلقة (بكسل الشاشة) | الحدود، ضبط الأيقونات، خطوط 1px |
| rem | نسبية لخط الجذر | نص الصفحة والمسافات المتسقة |
| em | نسبية لخط العنصر نفسه | حشو ينمو مع النص المحلي |
| % | نسبية لحجم الأب | عروض مرنة داخل الحاوية |
| vw | نسبية لعرض إطار العرض | أقسام بعرض كامل (بحذر) |
| vh | نسبية لارتفاع إطار العرض | ارتفاع البطل، لوحات ملء الشاشة |
البكسل (px)
px وحدة مطلقة على الشاشة. متوقعة للحدود الرفيعة والتفاصيل الثابتة الصغيرة. أقل مثالية كوحدة وحيدة لكل الطباعة في موقع متجاوب، لأنها لا تتناسب تلقائيًا مع تفضيل خط الجذر لدى المستخدم كما يفعل rem.
أحجام بكسل لحدود البطاقة
css.card {
border: 1px solid #cbd5e1;
border-radius: 8px;
width: 320px;
}متى يتألق px بعد
فضّل px للحدود الرفيعة وإزاحات الظل وعناصر واجهة صغيرة تريد حافة بصرية ثابتة. فضّل الوحدات النسبية عندما يجب أن يتنفس التصميم مع حجم الخط أو عرض الحاوية.
rem و em
rem نسبية لحجم خط عنصر الجذر (عادةً <html>). em نسبية لحجم خط العنصر الحالي (أو الأب حسب الخاصية). للمبتدئين، rem افتراض أكثر أمانًا لـ font-size وكثير من المسافات لأنها تبقى متسقة عبر العناصر المتداخلة.
طباعة نسبية للجذر مع rem
csshtml {
font-size: 100%; /* often 16px in browsers */
}
.lead {
font-size: 1.25rem; /* ~20px if root is 16px */
margin-bottom: 0.75rem;
}em في جملة واحدة
استخدم em عندما تريد أن تتناسب القيمة مع الخط المحلي — مثل حشو ينمو إذا كبر نص ذلك المكوّن. إذا تضاعفت قيم em المتداخلة وبدا الحجم «هاربًا»، حوّل تلك الأحجام إلى rem.
النسب المئوية (%)
النسبة المئوية نسبية لقياس الأب. مع width: 50% يستهدف العنصر نصف عرض الأب (عندما يكون للأب عرض معرّف). النسب أداة كلاسيكية للتخطيطات المرنة داخل الحاوية.
عرض مرن بالنسبة المئوية
css.sidebar {
width: 30%;
}
.main {
width: 70%;
}وحدات إطار العرض (vw و vh)
1vw تساوي 1٪ من عرض إطار العرض؛ و1vh تساوي 1٪ من ارتفاعه. قوية لأقسام البطل بملء الشاشة، وسهلة الإفراط — النص المقاس بـ vw وحده قد يصبح غير مقروء على شاشات واسعة جدًا أو ضيقة جدًا.
ارتفاع إطار العرض لقسم البطل
css.hero {
min-height: 80vh;
padding: 2rem;
}عادة اختيار افتراضية
عادة عملية للبداية: rem لأحجام الخط ومعظم المسافات العمودية، و% أو أدوات تخطيط مرنة (لاحقًا: Flexbox/Grid) للعروض، وpx للحدود والتفاصيل الثابتة الدقيقة. راجع وحدات إطار العرض عند بناء أقسام بعرض كامل — لا لكل هامش.
جرّبها بنفسك
- أنشئ قاعدة
.cardمعwidth: 80%وmax-width: 24remوborder: 1px solid #94a3b8. - عيّن
.card h2 { font-size: 1.5rem; }وفقرة قصيرة عند1rem. - أضف قسمًا
.banner { min-height: 40vh; }فوق البطاقة. - غيّر حجم نافذة المتصفح وعدّل
html { font-size: … }لتشعر كيف تستجيب%وvhوremبشكل مختلف. - اختياري: حوّل العنوان إلى
1.5emداخل.cardولاحظ إن فاجأك التحجيم المتداخل.
أخطاء شائعة
- كتابة
font-size: 16بلا وحدة — غير صالح للطول في CSS القياسي - استخدام
pxفقط لكل الخطوط في موقع يجب أن يحترم تكبير/تفضيلات المستخدم - تداخل كثير من أحجام
emحتى يصبح النص ضخمًا أو ضئيلًا - ضبط نص الجسم بـ
vwوحده فتنفجر الأسطر على الشاشات الكبيرة - افتراض أن ارتفاع
%يعمل بينما الأب بلا ارتفاع صريح
ملخص
- قيم الطول تحتاج عادةً وحدة (
pxوremو%وvw…) - المطلقة ثابتة؛ النسبية تتناسب مع الخط أو الأب أو إطار العرض
- فضّل
remللطباعة و%/أنظمة التخطيط للعروض وpxللحدود الدقيقة emيتناسب مع الخط المحلي؛ وvw/vhمع إطار العرض- طابق الوحدة مع المهمة — لا تفرض وحدة واحدة في كل مكان
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى