آموزش CSS – استفاده از دستور important برای جلوگیری از هم پوشانی کدهای سی اس اس (CSS) (جلسه ۱۱)

با توجه به قوانین آبشاری سی اس اس (CSS) آخرین کدهای نوشته شده همواره اعمال می شوند. حال زمان هایی برای ما پیش می آید که نیاز داریم این قانون آبشاری کدهای سی اس اس را نقض کنیم. برای این منظور می بایست از دستور important استفاده کرد.
برای روشن شدن نحوه استفاده از این دستور، کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <meta charset="utf-8">
       <title>asrefonon</title>
       <link type="text/css" rel="stylesheet" href="css/main.css">
   </head>
   
   <body>
       <p>This is a paragraph.</p>
   </body>
</html>

همانطور که می بینیم یک تگ پاراگراف را داخل تگ <body> قرار داده ایم. حال با استفاده از کدهای سی اس اس (CSS) قصد داریم تا استایلی را برای این تگ در نظر بگیریم. برای این منظور کدهای زیر را وارد فایل مرتبط با کدهای سی اس اس (CSS) می کنیم:

p {
   color:red;
}
p {
   color:green;
}

همانطور که در کد فوق ملاحظه می شود ابتدا یک Selector از جنس p نوشته و رنگ قرمز را برای آن در نظر گرفته ایم. مجدد این Selector را نوشته و این بار رنگ سبز برای آن در نظر گرفته شده است. همانطور که پیش از این توضیح دادیم در سی اس اس (CSS) همواره آخرین کدها اعمال می شوند. بنابراین این انتظار می رود که رنگ متن پاراگراف به کار گرفته شده در این مثال سبز باشد:

css_important

اکنون اگر بخواهیم این قانون سی اس اس (CSS) را نقض کنیم، می بایست کدهای سی اس اس (CSS) خود را به صورت زیر تکمیل کنیم:

p {
   color:red !important;
}
p {
   color:green;
}

همانطور که در کد فوق ملاحظه می شود، در Selector اول که تاثیر خود را از دست داده است، پس از Value که در اینجا red است یک فاصله قرار داده سپس علامت ! را تایپ می کنیم و بلافاصله دستور important را می نویسیم و در نهایت علامت ; را قرار می دهیم. در واقع با اینکار به مرورگر دستور می دهیم که رنگ قرمز از رنگ سبز به مراتب “مهم تر” است از اینرو می بایست این رنگ را مد نظر قرار دهد:

important_applied_in_css

همانطور که در تصویر فوق ملاحظه می شود، رنگ قرمز اعمال شد.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان