دليل مرجعي لـ CSS

قواعد CSS @

كامل خصائص CSS

دالة CSS var()

يمكن استخدام دالة var() كقيمة لأي خاصية في العنصر. لا يمكن استخدام دالة var() كاسم خاصية أو اختصار أو أي شيء غير قيمة الخاصية. (هذا يمكن أن يؤدي إلى أخطاء لغوية أو قيم غير مرتبطة بالمتغيرات).

وظائف CSS

مثال على الإنترنت

تعريف خاصية تُدعى "--main-bg-color"، ثم استدعاء هذه الخاصية باستخدام دالة var()：

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات(oldtoolbag.com)</title>
<style>
:root {
　　--main-bg-color: coral;　　
}
#div1 {
　　background-color: var(--main-bg-color);
　　padding: 5px;　　
}
#div2 {
　　background-color: var(--main-bg-color);
　　padding: 5px;
}
#div3 {
　　background-color: var(--main-bg-color);
　　padding: 5px;
}
</style>
</head>
<body>
<h1>وظيفة var()</h1>
<div id="div1">دليل الأساسيات oldtoolbag.com - تعلم الأساسيات، لتكون قادرًا على الذهاب إلى أبعد مدى!</div>
<br>
<div id="div2">دليل الأساسيات oldtoolbag.com - تعلم الأساسيات، لتكون قادرًا على الذهاب إلى أبعد مدى!</div>
<br>
<div id="div3">دليل الأساسيات oldtoolbag.com - تعلم الأساسيات، لتكون قادرًا على الذهاب إلى أبعد مدى!</div>
</body>
</html>

اختبار لمعرفة ‹/›

التعريف والاستخدام

تُستخدم وظيفة var() لوضع قيم خاصية مخصصة، وإذا تم استخدام قيمة الخاصية في عدة أماكن، فإن هذا الأسلوب يكون مفيدًا جدًا.

الإصدار المدعوم: CSS3

تطابق المتصفح

الرقم في الجدول يُظهر إصدار أولي من المتصفح الذي يدعم هذه الوظيفة.

وظيفة
وظيفة var()	49.0	15.0	31.0	9.1	36.0

نصوص CSS

var(اسم خاصية مخصصة, القيمة)

القيمة	الوصف
اسم خاصية مخصصة	مطلوب. اسم الخاصية المخصصة، يجب أن يبدأ بـ --.
القيمة	اختياري. قيمة بديلة، تستخدم عند عدم وجود الخاصية.

مزيد من الأمثلة

مثال على الإنترنت

استخدام وظيفة var() لندعو قيم مخصصة متعددة:

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات(oldtoolbag.com)</title>
<style>
:root {
　　--main-bg-color: coral;
　　--main-txt-color: blue;　　
　　--main-padding: 15px;　　
}
#div1 {
　　background-color: var(--main-bg-color);
　　color: var(--main-txt-color);　　
　　padding: var(--main-padding);
}
#div2 {
　　background-color: var(--main-bg-color);
　　color: var(--main-txt-color);
　　padding: var(--main-padding);
}
#div3 {
　　background-color: var(--main-bg-color);
　　color: var(--main-txt-color);
　　padding: var(--main-padding);
}
</style>
</head>
<body>
<h1>وظيفة var()</h1>
<div id="div1">دليل الأساسيات oldtoolbag.com - تعلم الأساسيات، لتكون قادرًا على الذهاب إلى أبعد مدى!</div>
<br>
<div id="div2">دليل الأساسيات oldtoolbag.com - تعلم الأساسيات، لتكون قادرًا على الذهاب إلى أبعد مدى!</div>
<br>
<div id="div3">دليل الأساسيات oldtoolbag.com - تعلم الأساسيات، لتكون قادرًا على الذهاب إلى أبعد مدى!</div>
</body>
</html>

اختبار لمعرفة ‹/›

وظائف CSS

قاعدة CSS @charset وظائف CSS