CSS

CSS Calculator
دالة calc في لغة CSS

ستتعرف في هذا الدرس التحكم في طول وعرض عناصر HTML بأستخدام دالة calc مع خاصية height وخاصية width في لغة CSS.

التاريخ

16 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1487

المواضيع

24
الشروحات chevron_left CSS Calculator chevron_left 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;
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات