آموزش دستور important در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش دستور important در CSS با من همراه باشید.

آموزش دستور important در CSS

Free-Learn

دستور important در CSS

با استفاده از دستور important! در CSS میتونیم تعریف کنیم که اولویت اجرای یک دستور ( یا ویژگی ) در CSS به بالاترین اولویت تبدیل شود و اولویت اجرای بقیه دستورات را لغو کند.

یعنی هرموقع خواستید ویژگی ای از CSS ( لیست کامل ویژگی های زبان CSS ) رو تحت هرشرایطی بروی یک عنصر اعمال کنید میتونید از این دستور استفاده نمایید، ولی خب استفاده زیاد از این دستور اصلا پیشنهاد نمیشه به دلایل زیر :

معایب استفاده از این دستور :

  • پایین اومدن قدرت اشکال یابی ( ممکنه جایی از این دستور استفاده کرده باشید بعد حواستون نیست و جای دیگه میخواید مثلا رنگ متن فلان شه، ولی هرکاری میکنید نمیشه چون در جای دیگه Important زدید )
  • پایین اومدن خوانایی کد
  • بستن دست خودتون در آینده برای ایجاد تغییرات

موارد استفاده از این دستور :

  • مثلا یک فایل CSS خارجی دارید و به کدهای این فایل دسترسی ندارید، ولی خب میخواید دستور CSS دلخواه خودتون بروی دستورات موجود در فایل خارجی بشیند ( یا رونویسی شود ) – مثلا در فایل خارجی رنگ متن تگ H2 آبی هست ولی خب شما میخواید قرمز باشه، پس خیلی راحت از دستور Important! استفاده میکنیم.

Free-Learn

مثال از این دستور

بفرض مثال یک تگ H2 تعریف کردیم بعد با استفاده از صفت Style اومدیم و رنگ این تگ رو قرمز کردیم :

امتحان کنید

خب صددرصد اگه مثال بالارو اجرا کنیم، میبینید که رنگ متن تگ H2 قرمز می باشد.

حال من میخوام در تگ Style دستور CSS بنویسم و دوباره بیام برای تگ H2 تعریف کنم که رنگ متنش آبی بشه. خب بنظره شما آیا رنگ متن آبی میشه؟ یا خیر؟

امتحان کنید

خب معلومه که آبی نمیشه، چون اولویت اجرای اون دستوری که درون صفت Style ( یعنی استایل درون خطی ) می باشد بیشتر از اون دستوری هست که درون تگ Style می باشد، پیشنهاد میکنم حتما آموزش اولویت بندی عناصر در CSS را مشاهده نمایید.

اینجاست که دستور important! میتونه بیاد و هرجایی که ما ازش استفاده کنیم ، اون میشه بالاترین اولویت اجرا، یعنی اگه در کلاس استفاده کنیم یا در خوده تگ ها یا صفت ها و.. در هرصورت اولویت اجرا باخودشه.

پس ما میخوایم با استفاده از دستور important! رنگ اون تگ H2 رو آبی کنیم، خیلی راحت بصورت زیر ازش استفاده میکنیم :

مثال شماره ۱ : استفاده در انتخابگر تگ

امتحان کنید

مثال شماره ۲ : استفاده در انتخابگر کلاس یا Class

امتحان کنید

مثال شماره ۳ : استفاده در انتخابگر آی دی یا ID

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب