انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 55
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,728
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

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.

HTML 
width:calc(expression);

CSS calc() values

قيم دالة calc في لغة CSS.

HTML 
calc(<length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer>)

CSS calc percentage and piexel دالة calc مع النسب المئوية ووحده بيكسل في لغة CSS

تًستخدم دالة calc في لغة CSS مع الأرقام بالعمليات الحسابية المًختلفة الطرح أو القسمة أو الضرب أو الجمع.

CSS calc percentage minus piexel

دالة calc مع النسب المئوية ووحدة pixel مع الطرح في لغة CSS.

HTML 
p 
{
  width: calc(100% - 50px);
  border: 1px solid red;
}
جرّب بنفسك

CSS calc percentage plus piexel

دالة calc مع النسب المئوية ووحدة pixel مع الجمع في لغة CSS.

HTML 
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.

HTML 
p 
{
  font-size: calc(1em * 2);
  border: 1px solid red;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…