این آموزش در تاریخ ۱۴۰۰/۱۰/۱۶ آپدیت شده است.
آموزش نحوه اولویت بندی عناصر در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه اولویت بندی عناصر در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه اولویت بندی عناصر در CSS
اصلا یعنی چی این اولویت بندی : بطور کلی یعنی اگه ما همزمان چندین دستور CSS برای یک تگ نوشته بودیم ، کدام دستور بروی تگ اعمال بشه، اینو بهش میگیم اولویت بندی.
بفرض مثال من برای تگ H2 با استفاده از صفت Style ( درون خوده تگ ) رنگ متن آبی براش مشخص کردم بعد دوباره همزمان در قسمت Head صفحه اومدم و براش رنگ متن قرمز تعریف میکنیم، خب الان کدومش باید اعمال بشه!؟ تموم شد رفت این میشه اولویت بندی
بطور کلی میتونیم اولویت بندی هامون رو به ۴ دسته کلی تقسیم کنیم :
- استفاده از صفت 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> |
مثال شماره ۴ : استفاده از دستور important! ( همه اولویت هارو لغو میکنه و میگه فقط خودم باید اجرا بشم )
یعنی هرکجا از این دستور important استفاده کنید، دیگه کاری به اولویت بندی نداره و همون دستوری که داخلش از important استفاده کردید همونم اجرا میشه
|
1 2 3 4 5 6 7 |
<style> h2{ color:red !important; } </style> |
Free-Learn
نکات و توضیحات
- دستور important یکمی لجبازه و باید حواستون بهش باشه، مثلا یجایی از important استفاده شده و بعد دوباره شما در جای دیگه دارید سعی میکنید یه چیزی رو تغییر بدید ولی نمیزاره تغییرات شما اعمال بشه چون از important استفاده شده.
