الكورس

Advertisements

الوحدات | 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.

بالنسبة لبعض خصائص CSS ، يُسمح بالأطوال السالبة.


 

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

 

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

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

 


 

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

 

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

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

الوحدةالوصفما يعادل
pxبكسل (pixel)96÷1 من 1 بوصة (96px = 1inch)
ptنقطة/درجة (point) 72÷1 من 1 بوصة (72pt = 1inch)
pcبيكا (pica)1pc = 12pt
inبوصة (inch)1in = 96px = 2.54cm
cmسنتيمتر (centimeter) 1cm = 96px÷2.54
mmملليمتر (millimeter) 1mm = 1÷10 من 1cm
Qربع ملليمتر (Quarter-millimeter)1Q = 1÷40 من 1cm

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

يمكن أن تكون الوحدات المطلقة أقل تفضيلًا للمواقع المتجاوبة لأنها لا تتغير عندما يتغير حجم الشاشة.


 

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

 

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

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

الوحدةالوصف
%مرتبط بقيمة العنصر الأصلي لتلك الخاصية.
emمتعلق بحجم الخط font-size الحالي للعنصر.
exمتناسب مع ارتفاع الحرف الصغير “x” للخط الحالي.
chعدد الأحرف (حرف واحد = عرض الخط الحالي).
remمتعلق بحجم خط font-size الجذر (أو root)، مثل عنصر <html>. و “rem = “root em
vwنسبي مع عرض الـ viewport. و 1vw = 1÷100 من عرض الـ viewport
vh نسبي مع إرتفاع الـ viewport. و 1vh = 1÷100 من عرض الـ viewport
vminنسبي مع البُعد الأصغر لإطار العرض viewport. و 1vmin = 1÷100 من البُعد الأصغر لإطار العرض.
vmax نسبي مع البُعد الأكبر لإطار العرض viewport. و 1vmax = 1÷100 من البُعد الأصغر لإطار العرض.



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements