في هذا الدرس 5تصفّح المواضيع
CSS Variables
المتغيرات في لغة CSS
CSS Variables المتغيرات في لغة CSS
- في لغة CSS يمكن إنشاء متغير محفوظ بداخلة مثلا لون محدد ويمكن استدعاء هذا المتغير عدة مرات فإذا تم تغيير اللون الموجود بداخل المتغير جميع العناصر التي تم تعيين لها المتغير بشكل تلقائي يتغير لونها بلون المتغير.
- تستخدم دالة ( )var لإدراج بداخلها قيمة متغير من متغيرات CSS قيمة عنصر CSS معين ثم يمكننا بعد ذلك استخدام هذه القيمة مع عناصر اخري بعدها.
- تعد المتغيرات افضل وسيلة لعدم تكرار القيم في لغة CSS بدلاً من نسخ الألوان ونسخ القيم في كل مرة وهي افضل وسيله عند عمل أكثر من template بلون مختلف لصفحات الويب.
كيف تعمل دالة var في لغة CSS:
- يمكن أن تكون المتغيرات في لغة CSS من النوع local أو global.
- المتغيرات من النوع global يمكن أن تستخدم في أي مكان في صفحة CSS.
- المتغيرات من النوع local يمكن أن تستخدم فقط داخل نطاق declaration block الذي تم تعريف بداخله المتغير.
- عندما يتم الإعلان عن متغير من النوع global يجب أن يكون بداخل root selector: وهو يعني يمكن اختياره داخل ملف CSS بالكامل.
CSS Variables Syntax
طريقة كتابة المتغيرات في لغة CSS.
var(--name, value)
Before CSS variables
قبل المتغيرات في لغة CSS
Before CSS variables قبل المتغيرات في لغة CSS
Before CSS variables
قبل المتغيرات في لغة CSS.
body
{
background-color: #6c5ce7;
color:#ffffff;
}
h1
{
border-bottom: 2px solid #6c5ce7;
}
.container {
color: #6c5ce7;
background-color: #ffffff;
padding: 15px;
margin-top:10px;
}
button {
background-color: #6c5ce7;
color: #ffffff;
border: 1px solid var(--purple);
padding: 5px;
}
After CSS variables
بعد المتغيرات في لغة CSS
After CSS variables بعد المتغيرات في لغة CSS
After CSS variables
بعد المتغيرات في لغة CSS.
CSS overriding variables
تغير اللون مرة واحدة فقط مع المتغيرات في لغة CSS
CSS overriding variables تغير اللون مرة واحدة فقط مع المتغيرات في لغة CSS
يمكن تغيير لون template القالب بالكامل مرة واحده فقط بدلاً من تغيير الوان في جميع ملفات CSS ولجميع selectors وهذه تعد أفضل طريقة لاستخدام المتغيرات وهي تميز استخدامه في لغة CSS.
CSS overriding variables
تغير اللون مرة واحدة فقط مع المتغيرات في لغة CSS.
CSS local variable
المتغير من النوع local في لغة CSS
CSS local variable المتغير من النوع local في لغة CSS
دالة ( ) var لها مميزات تساعدنا في كتابة اكواد css فهي تساعدنا في
- تجعل الكود سهل الفهم والقراءة
- تجعل تغيير الوان العناصر اسهل من ذي قبل
Can not access local in another declaration block
لا يمكن استخدام متغير داخل declaration block أخر لأنه متغير محلي في لغة CSS.
.container {
--template: #0984e3;
color: var(--template);
background-color: var(--white);
padding: 15px;
margin-top:10px;
}
h1
{
color:var(--template);
}CSS local variable
المتغير من النوع local في لغة CSS.
.container {
--template: #0984e3;
color: var(--template);
background-color: var(--white);
padding: 15px;
margin-top:10px;
}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات8
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Variables متغيرات
- للمراجعة
- 02 Advantages مزايا
- للمراجعة
- 03 Overriding زائد / تجاوز
- للمراجعة
- 04 Using بإستخدام
- للمراجعة
- 05 Media وسائط
- للمراجعة
- 06 Class فئة
- للمراجعة
- 07 Container حاوية المحتوي
- للمراجعة
- 08 Font-Size حجم الخط
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
- 02 Var Var
- Varibles
- متغيرات
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.