دروس CSS

الصفحة الرئيسية لـ CSS مقدمة CSS بنية CSS محددات CSS كيفية استخدام CSS تعليقات CSS ألوان CSS خلفيات CSS حدود CSS هوامش CSS حشوة CSS ارتفاع / عرض CSS نموذج مربع CSS مخطط CSS نص CSS خطوط CSS أيقونات CSS روابط CSS قوائم CSS جداول CSS عرض CSS أقصى عرض لـ CSS موقف CSS CSS Z- الفهرس تجاوز CSS تعويم CSS كتلة مضمنة CSS محاذاة CSS موحد CSS فئة CSS الزائفة عنصر زائف لـ CSS تعتيم CSS شريط التنقل CSS القوائم المنسدلة CSS معرض صور CSS صور CSS العفاريت محددات CSS Attr نماذج CSS عدادات CSS تخطيط موقع الويب CSS وحدات CSS خصوصية CSS CSS! مهم وظائف الرياضيات CSS

CSS متقدم

زوايا مستديرة CSS صور الحدود CSS خلفيات CSS ألوان CSS الكلمات الأساسية الملونة CSS تدرجات CSS ظلال CSS تأثيرات نص CSS خطوط الويب CSS تحويلات CSS 2D تحويلات CSS ثلاثية الأبعاد انتقالات CSS الرسوم المتحركة CSS تلميحات CSS صور نمط CSS انعكاس صورة CSS كائن CSS مناسب موضع كائن CSS اخفاء CSS أزرار CSS ترقيم صفحات CSS أعمدة CSS المتعددة واجهة مستخدم CSS متغيرات CSS تحجيم صندوق CSS استعلامات وسائط CSS أمثلة على CSS MQ فليكس بوكس ​​CSS

استجابة CSS

مقدمة RWD منفذ عرض RWD عرض شبكة RWD استعلامات وسائط RWD صور RWD مقاطع فيديو RWD أطر RWD قوالب RWD

شبكة CSS

مقدمة الشبكة حاوية الشبكة عنصر الشبكة

CSS SASS

دروس SASS

أمثلة CSS

قوالب CSS أمثلة CSS اختبار المغلق تمارين CSS شهادة CSS

مراجع CSS

مرجع CSS محددات CSS وظائف CSS CSS المرجعي Aural الخطوط الآمنة للويب CSS متحرك CSS وحدات CSS محول CSS PX-EM ألوان CSS قيم ألوان CSS القيم الافتراضية لـ CSS دعم مستعرض CSS

متغيرات تجاوز CSS


تجاوز المتغير العام بالمتغير المحلي

تعلمنا من الصفحة السابقة أنه يمكن الوصول إلى المتغيرات العامة / استخدامها من خلال المستند بأكمله ، بينما يمكن استخدام المتغيرات المحلية فقط داخل المحدد حيث يتم التصريح عنها.

انظر إلى المثال من الصفحة السابقة:

مثال

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

في بعض الأحيان نريد تغيير المتغيرات فقط في قسم معين من الصفحة.

افترض أننا نريد لونًا مختلفًا من اللون الأزرق لعناصر الأزرار. بعد ذلك ، يمكننا إعادة إعلان المتغير --blue داخل محدد الزر. عندما نستخدم var (- blue) داخل هذا المحدد ، فإنه سيستخدم قيمة المتغير المحلي --blue المُعلن عنها هنا.

نرى أن المتغير المحلي --blue سيتجاوز المتغير global --blue لعناصر الزر:

مثال

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  --blue: #0000ff; /* local variable will override global */
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}



أضف متغير محلي جديد

إذا كان المتغير سيستخدم مكانًا واحدًا فقط ، فيمكننا أيضًا الإعلان عن متغير محلي جديد ، مثل هذا:

مثال

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  --button-blue: #0000ff; /* new local variable */
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}


دعم المتصفح

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم var()الوظيفة بشكل كامل.

Function
var() 49.0 15.0 31.0 9.1 36.0

وظيفة CSS var ()

Property Description
var() Inserts the value of a CSS variable