الوحدات | CSS Units

CSS Units – هنتعرف فى هذا الفصل على الوحدات فى CSS وما الفروق بينهم؟ وكيفية إستخدامهم؟ مع بعض الأمثلة التوضيحية.

الوحدات – CSS Units

يحتوي CSS على عدة خيارات لاستخدام الوحدات، ووحدات مختلفة عند تحديد حجم خصائص CSS المختلفة.

تأخذ العديد من خصائص CSS قيم lengths، مثل خاصية (width – padding – margin – .. إلخ).

الطول length هو رقم متبوعًا بوحدة الطول، مثل (10px – 2rem – 5pt – .. إلخ).

تحدد وحدة CSS حجم الخاصية التي تقوم بتعيينها لعنصر أو محتواه. على سبيل المثال ، إذا أردت تعيين حجم خط font-size لفقرة ما ، فستعطيها قيمة محددة. تتضمن هذه القيمة وحدة CSS. كالتالى:

p {
  font-size: 16px;
}

في المثال السابق، font-size هو الخاصية ، 16px هي القيمة ، و px هي وحدة CSS.

أنواع وحدات الطول

هناك نوعان من وحدات الطول:

• المطلقة (absolute).
• النسبية (relative).

1. الوحدات المطلقة – Absolute units

الوحدات المطلقة لها نفس الحجم بغض النظر عن العنصر الأصلي أو حجم النافذة. هذا يعني أن الخاصية التي تم تعيين قيمة لها وحدة مطلقة ستكون بهذا الحجم عند النظر إليها على الهاتف أو على شاشة كبيرة (وكل شيء بينهما!)

فيما يلي جميع الوحدات ذات الطول المطلق:

تكون معظم القيم السابقة أكثر فائدة عند استخدامها للطباعة ، بدلاً من استخدامها كـ Viewport. على سبيل المثال ، لا نستخدم سم (cm) على الشاشة، بل القيمة الوحيدة التي ستستخدمها عادة هي بكسل (px).

2. الواحدات النسبية – Relative units

الوحدات النسبية مفيدة لتصميم المواقع المتجاوبة لأنها تتناسب مع الحجم الأصلي أو النافذة Viewport.

فى الجدول التالى بعض الوحدات النسبية الأكثر فائدة فى تطوير الويب: