CSS/percentage

نوع البيانات <percentage> في CSS يستعمل لتمثيل النسب المئوية، إذ يقبل عددٌ كبيرٌ من خاصيات CSS القيمَ كنسبٍ مئوية، وتُستخدَم عادةً لتعريف أحد الأبعاد نسبةً إلى أبعاد العنصر الأب. أمثلة عن الخاصيات التي تقبل نوع البيانات <percentage>: الخاصية width و margin و padding و font-size.

ملاحظة: لا يمكن وراثة إلا القيم المحسوبة، أي حتى لو استخدمنا نسبةً مئويةً في إحدى خاصيات العنصر الأب، لكن ستورَّث القيمة الحقيقة (أي ستكون القيمة الحقيقة المحسوبة للخاصية width هي بالبكسل) ولن تورَّث النسب المئوية.

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الرئيسي	1.0	1.0	مدعومة	مدعومة	1.0

الشكل العام

تتألف النسب المئوية من قيمةٍ عدديةٍ <number> تتبعها رمز النسبة المئوية %، وكما في جميع واحدات CSS، لا يجوز وضع فراغ بين الرمز والقيمة العددية.

أمثلة

مثال عن استخدام نسب مئوية مع الخاصيتين width و margin-left:

<div style="background-color: #39E;"> 
  <div style="width:50%; margin-left:20%; background-color: orange;">
    Width: 50%, Left margin: 20%
  </div> 
  <div style="width:30%; margin-left:60%; background-color: salmon;">
    Width: 30%, Left margin: 60%
  </div> 
</div>

مثال عن استخدام الخاصية font-size:

<div style="font-size: 18px;">
  <p>Full size text (18px)</p>
  <p><span style="font-size: 50%;">50%</span></p>
  <p><span style="font-size: 200%;">200%</span></p>
</div>

انظر أيضًا

• صفحة الخاصية box-sizing التي تُستخدم لتعديل النموذج الصندوقي الافتراضي.
• صفحة الخاصية height التي تُحدِّد ارتفاع العناصر.
• صفحة الخاصية width التي تُحدِّد عرض العناصر.
• صفحة الخاصية padding التي تضبط الحاشية (padding) في الأطراف الأربعة للعنصر.
• صفحة الخاصية margin التي تضبط الهوامش في الأطراف الأربعة للعنصر.

مصادر ومواصفات

• مواصفة CSS Values and Units Module Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.