CSS The !important Rule
-
تستخدم هذه الخاصية لإعطاء أولوية property/value بحيث يتم تطبيق هذه الخصائص التي تحتوي على important! ولن يتم تطبيق غيرها.
تمام نشوف امثلة كيف ممكن نستخدم هذه الخاصية
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-size: 1cm;
color:red;
}
.p2 {
font-size: 10mm;
color:yellow;
}
.p3 {
font-size: 0.5in;
color:black;
}
.p4 {
font-size: 10pt;
color:blue;
}
.p5 {
font-size: 1pc;
color:rgb(190, 137, 137);
}
p{
color: green !important;
}
</style>
</head>
<body>
<p class="p1">1 CM Units</p>
<p class="p2">1 mm </p>
<p class="p3">0.5 in Units</p>
<p class="p4">0.5 pt Units</p>
<p class="p5">0.5 pc Units</p>
</body>
</html>
شغل الصفحة وشوف النتيجة:
لاحظ ان تم تطبيق اللون الأخضر على جميع <p> رغم أضافة لون مختلف لكل واحد في الخصائص والسبب في ذلك يعود للكود:
p{
color: green !important;
}لان استخدمنا ;important! مع <p> فتكون الأولوية لهذه الخصائص
ملاحظة في حال استخدام ;important! لمجموعة element ينطبق عليها هذه الخصائص لن يتم تطبيق الأولوية في هذه الحالة تتساوى جميعها في الأولوية، ولا ينصح بهذه الطريقة لانها تجعل CSS في حيره بتطبيق الاكواد وخاصة في الملفات الكبيرة
في المثال السابق ماذا لم اضفنا important! لجميع class
عدل الكود السابق الى :
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-size: 1cm;
color:red!important;;
}
.p2 {
font-size: 10mm;
color:yellow !important;;
}
.p3 {
font-size: 0.5in;
color:black !important;;
}
.p4 {
font-size: 10pt;
color:blue !important;;
}
.p5 {
font-size: 1pc;
color:rgb(190, 137, 137)!important;;
}
p{
color: green !important;
}
</style>
</head>
<body>
<p class="p1">1 CM Units</p>
<p class="p2">1 mm </p>
<p class="p3">0.5 in Units</p>
<p class="p4">0.5 pt Units</p>
<p class="p5">0.5 pc Units</p>
</body>
</html>
شغل الصفحة وشوف النتيجة :
اترك تعليقك