این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش نحوه اولویت بندی عناصر در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه اولویت بندی عناصر در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه اولویت بندی عناصر در CSS
اصلا یعنی چی این اولویت بندی : بطور کلی یعنی اگه ما همزمان چندین دستور CSS برای یک تگ نوشته بودیم ، کدام دستور بروی تگ اعمال بشه، اینو بهش میگیم اولویت بندی.
بفرض مثال من برای تگ H2 با استفاده از صفت Style ( درون خوده تگ ) رنگ متن آبی براش مشخص کردم بعد دوباره همزمان در تگ Style صفحه اومدم و براش رنگ متن قرمز تعریف میکنیم، خب الان کدومش باید اعمال بشه!؟ تموم شد رفت این میشه اولویت بندی
بطور کلی میتونیم اولویت بندی هامون رو به ۴ دسته کلی تقسیم کنیم :
- استفاده از صفت Style درون تگ (اولویت اول)
- استفاده از ID (اولویت دوم)
- کلاس ها و صفت ها و شبه کلاس ها (اولویت سوم)
- خوده تگ ها و شبه عناصر (اولویت چهارم)
Free-Learn
نحوه محاسبه اولویت یک تگ در CSS
خب حالا میخوایم یه روش یا یه دستور کلی داشته باشیم برای محاسبه اینکه مثلا فلان عنصر در صفحه اولویتش چجوریه؟ آیا اولویتش بالاتر از مثلا ( بهمان ) عنصر می باشد یا خیر !
همونطور که کمی بالاتر ( منظورم اون ۴ دسته اولویت بالا می باشد ) مشاهده نمودید اولویت اول با صفت Style می باشد بعدش با ID ها و بعد از اون کلاس ها و در نهایت خوده تگ ها ( یا عناصر )
یه روشی اومدن گذاشتن برای محاسبه این اولویت بندی که این روش به اینصورت می باشد:
- عدد ۱۰۰۰ برای صفت Style
- عدد ۱۰۰ برای ID
- عدد ۱۰ برای صفات، کلاس ها و شبه کلاس ها
- عدد ۱ برای تگ ها و شبه عناصر
| عنصر اولویت دار | ارزش عددی |
|---|---|
| صفت Style | ۱۰۰۰ |
| انتخابگر ID | ۱۰۰ |
| انتخابگر Class | ۱۰ |
| انتخابگر صفت | ۱۰ |
| انتخابگر شبه کلاس | ۱۰ |
| انتخابگر تگ ها | ۱ |
| انتخابگر شبه عناصر | ۱ |
حالا مثلا ما یسری دستور داریم که میخوایم با استفاده از اعداد بالا مشخص کنیم که اولویت اول با کدام عنصر می باشد، پس اول دستورات زیر رو داریم :
|
1 2 3 4 5 |
A: h2 { color:red } B: h2#test { color:green } C: <h2 id="test" style="color:blue;">Free-Learn.ir</h2> |
در بخش A ما یک تگ داریم به اسم H2 که گفتیم ارزش تگ ها میشه ۱، پس فعلا یه ۱ میزاریم کنار، بعدش در بخش B ما یه ID داریم به اسم test# که ارزش اینم ۱۰۰ هست
میریم تا بخش C رو بررسی کنیم، تو بخش C از صفت Style استفاده شده و اونم که گفتیم ارزشش ۱۰۰۰ هست، تموم شد رفت ( پس الان اولویت اول در اجرای دستورات بالا متعلق به بخش C می باشد ) ( یعنی رنگ متن تگ h2 میشه آبی )
Free-Learn
مثال از اولویت اجرای دستورات CSS
مثال شماره ۱ : استفاده از صفت Style و CSS داخلی
با استفاده از صفت Style گفتیم رنگ متن آبی باشه بعد دوباره همزمان در تگ Style گفتیم رنگش قرمز باشه ( دیگه باید بدونید اولویت اجرا با کدونه )
|
1 2 3 4 5 |
<body> <h2 style="color:blue;">سایت آموزشی فری لرن</h2> </body> |
مثال شماره ۲ : استفاده از تگ Style و CSS خارجی ( محتویات فایل CSS خارجی رو مشاهده نمایید )
در تگ Style گفتیم رنگ متن آبی باشه بعد دوباره همزمان در فایل CSS خارجی گفتیم رنگش قرمز باشه ( اولویت اجرای دستورات با تگ Style می باشد )
|
1 2 3 4 5 6 7 8 |
<style> h2{ color:blue; text-align:center; } </style> |
مثال شماره ۳ : نحوه اولویت اجرای دستورات ،وقتی چندین دستور دقیقا شبیه همدیگه باشن
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> h2{ background-color:blue; color:#fff; } h2{ background-color:red; color:#fff; } h2{ background-color:yellow; color:#000; } </style> |
Free-Learn
دستور important! در CSS
با استفاده از این دستور میتونیم تعریف کنیم که اولویت اجرای یک ویژگی در CSS به بالاترین اولویت تبدیل شود و اولویت اجرای بقیه دستورات را لغو کند.
یعنی هرموقع خواستید ویژگی ای از CSS ( لیست کامل ویژگی های زبان CSS ) رو تحت هرشرایطی بروی یک عنصر اعمال کنید میتونید از این دستور استفاده نمایید.
دستور important! دیگه همه اولویت هارو لغو میکنه و فقط خودش اجرا میشه، یعنی هرکجا از این دستور important استفاده کنید، دیگه کاری به اولویت بندی نداره و همون دستوری که داخلش از important استفاده کردید همونم اجرا میشه
|
1 2 3 4 5 6 7 |
<style> h2{ color:red !important; } </style> |
Free-Learn
نکات و توضیحات
- دستور important یکمی لجبازه و باید حواستون بهش باشه، مثلا یجایی از important استفاده شده و بعد دوباره شما در جای دیگه دارید سعی میکنید یه چیزی رو تغییر بدید ولی نمیزاره تغییرات شما اعمال بشه چون از important استفاده شده.
- دستور important اگه استفاده شه حتی اولویت صفت style رو هم ازش میگیره و خودش اجرا میشه.
