CSS Calculator
دالة calc في لغة CSS
ستتعرف في هذا الدرس التحكم في طول وعرض عناصر HTML بأستخدام دالة calc مع خاصية height وخاصية width في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Calculator
دالة calc في لغة CSS
</>
CSS Calculator
دالة calc في لغة CSS
تستخدم دالة ()calc لتمكنك من عمل عمليات حسابية للخصائص التي لها قيم [ <length>, <frequency>, <angle>, <time>, <percentage>, <number>,<integer> ] [ أرقام صحيحة - نسب مئوية % - وقت - وحدات px,em,cm - تكرار - زاويا ].
العمليات الحسابية التي يتم استخدامها مع دالة ()calc في لغة CSS:
- + Addition الجمع.
- + Subtraction الطرح.
- * Multiplication الضرب ويجب علي الأقل عامل واحد يجب أن يكون رقم.
- / Division القسمة.
CSS calc() syntax
طريقة كتابة دالة ()calc في لغة CSS.
width:calc(expression);
CSS calc() values
قيم دالة calc في لغة CSS.
calc(<length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer>)
هام
- القيم التي تُكتب بداخل دالة ()calc يمكن أن تقون أرقام ويمكن أن تستخدم للقيمة الثانية وحدات مختلفة فعلي سبيل المثال يمكن أن تجمع أو تطرح رقم بوحدة بيكسل من رقم بالنسبه المئوية.
- يجب أن تكون العوامل الحسابية مُحاطة بمسفات بداخل دالة calc في لغة CSS علي سبيل المثال (10px - 5px).
</>
CSS calc percentage and piexel
دالة calc مع النسب المئوية ووحده بيكسل في لغة CSS
تًستخدم دالة calc في لغة CSS مع الأرقام بالعمليات الحسابية المًختلفة الطرح أو القسمة أو الضرب أو الجمع.
CSS calc percentage minus piexel
دالة calc مع النسب المئوية ووحدة pixel مع الطرح في لغة CSS.
p { width: calc(100% - 50px); border: 1px solid red; }
CSS calc percentage plus piexel
دالة calc مع النسب المئوية ووحدة pixel مع الجمع في لغة CSS.
p { width: calc(30% + 100px); border: 1px solid red; }
</>
CSS calc em and integer
دالة calc مع وحدة em مع الأرقام في لغة CSS
تًستخدم دالة calc في لغة CSS مع الأرقام بالعمليات الحسابية المًختلفة الطرح أو القسمة أو الضرب أو الجمع.
CSS calc em multiplication integer
دالة calc وحدة em مع أرقام صحيحة مع الضرب في لغة CSS.
p { font-size: calc(1em * 2); border: 1px solid red; }