الفرق بين المراجعتين لصفحة: «CSS/percentage»

مراجعة 15:43، 28 يناير 2018

نوع البيانات <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>

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

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

@@ سطر 46: / سطر 46: @@
 * مواصفة ‎[http://www.w3.org/TR/CSS2/syndata.html#percentage-units CSS Level 2 (Revision 1)‎].
 * مواصفة [http://www.w3.org/TR/CSS1/#percentage-units CSS Level 1].
-[[تصنيف:CSS]]
+[[تصنيف:CSS|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Data Type]]
+[[تصنيف:CSS Data Type|{{SUBPAGENAME}}]]