CSS القاعدة المهمة!
ما هو! المهم؟
تُستخدم !importantالقاعدة في CSS لإضافة أهمية إلى خاصية / قيمة أكثر من المعتاد.
في الواقع ، إذا استخدمت !importantالقاعدة ، فستتجاوز جميع قواعد التصميم السابقة لتلك الخاصية المحددة على هذا العنصر!
دعونا ننظر على سبيل المثال:
مثال
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
شرح المثال
في المثال أعلاه. ستحصل جميع الفقرات الثلاث على لون خلفية أحمر ، على الرغم من أن محدد المعرف ومحدد الفئة لهما خصوصية أعلى. !importantتتجاوز القاعدة الخاصية
background-colorفي كلتا الحالتين.
هام حول!
الطريقة الوحيدة لتجاوز !important
قاعدة هي تضمين !important
قاعدة أخرى في إعلان بنفس الخصوصية (أو أعلى) في شفرة المصدر - وهنا تبدأ المشكلة! هذا يجعل كود CSS محيرًا وسيكون تصحيح الأخطاء صعبًا ، خاصة إذا كان لديك ورقة أنماط كبيرة!
هنا قمنا بإنشاء مثال بسيط. ليس من الواضح تمامًا ، عندما تنظر إلى كود مصدر CSS ، ما هو اللون الأكثر أهمية:
مثال
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
نصيحة: من الجيد معرفة !important
القاعدة ، فقد تراها في بعض التعليمات البرمجية المصدر لـ CSS. ومع ذلك ، لا تستخدمه إلا إذا كنت مضطرًا لذلك.
ربما استخدام واحد أو اثنين من الاستخدامات العادلة! مهم
طريقة واحدة للاستخدام !importantهي إذا كان عليك تجاوز نمط لا يمكن تجاوزه بأي طريقة أخرى. قد يكون هذا إذا كنت تعمل على نظام إدارة المحتوى (CMS) ولا يمكنك تحرير كود CSS. ثم يمكنك تعيين بعض الأنماط المخصصة لتجاوز بعض أنماط CMS.
هناك طريقة أخرى للاستخدام !importantوهي: افترض أنك تريد مظهرًا خاصًا لجميع الأزرار على الصفحة. هنا ، تم تصميم الأزرار بلون خلفية رمادية ونص أبيض وبعض المساحة المتروكة والحدود:
مثال
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
يمكن أن يتغير مظهر الزر في بعض الأحيان إذا وضعناه داخل عنصر آخر بخصوصية أعلى ، وتعارضت الخصائص. هذا مثال على ذلك:
مثال
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
"لإجبار" جميع الأزرار على الحصول على نفس المظهر ، بغض النظر عن السبب ، يمكننا إضافة !important
القاعدة إلى خصائص الزر ، مثل هذا:
مثال
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}