آموزش نحوه اولویت بندی عناصر در CSS

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

آموزش نحوه اولویت بندی عناصر در CSS

Free-Learn

اولویت بندی عناصر در CSS

خب دوستان در این جلسه میخوام شمارو با یک مبحث خیلی مهم در CSS آشنا کنم که ان شاالله دیگه بطور کامل بدونید اولویت بندی استایل دهی عناصر در CSS چگونه می باشد.

اصلا یعنی چی این اولویت بندی : خب ببینید مثلا ما میایم بصورت داخلی ( استفاده از تگ style در قسمت head صفحه ) برای عناصرمون در CSS استایل تعریف میکنیم ، مثلا میگیم رنگ زمینه تگ P آبی باشد.

حال تو همین زمان باز مثلا من میام در فایل CSS خارجی برای همون تگ P تنظیم میکنم که رنگ زمینش قرمز باشد؟! خب حالا شما بگید کدوم دستور باید اجرا شود؟؟

خب اینجاست که بحث اولویت بندی میاد وسط، یعنی ما باید بدونیم این اولویت بندی ها یا میتونیم بگیم این قوانین در CSS چه ها هستند و بتونیم به بهترین حالت ممکن از آنها استفاده نماییم.

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

Free-Learn

نحوه اولویت بندی عناصر در CSS

بطور کلی میتونیم اولویت بندی هامون رو به ۴ دسته تقسیم کنیم یا در واقع میتونیم بگیم ۴ دسته اصلی انتخابگر داریم و به ترتیب از شماره ۱ تا ۴ اولویت بندی می شوند :

  1. استایل های درون خطی یا Inline که با استفاده از صفت Style ایجاد میشوند (اولویت اول)
  2. آی دی ها یا ID (اولویت دوم)
  3. ( کلاس ها یا Class ) و ( صفت ها یا Attributes ) و ( شبه کلاس ها یا Pseudo Classes ) (اولویت سوم)
  4. تگ ها یا عناصر (مثه تگ p,h1,div و..) و شبه عناصر یا Pseudo Elements (اولویت چهارم)

Free-Learn

نحوه محاسبه اولویت یک عنصر جهت استایل دهی در CSS

خب حالا میخوایم یه روش یا یه دستور کلی داشته باشیم برای محاسبه اینکه مثلا فلان عنصر در صفحه اولویتش چجوریه؟ آیا اولویتش بالاتر از مثلا ( بهمان ) عنصر می باشد یا خیر !

همونطور که کمی بالاتر ( منظورم اون ۴ دسته اولویت بالا می باشد ) مشاهده نمودید اولویت اول با صفت Style می باشد بعدش با ID ها و بعد از اون کلاس ها و در نهایت خوده تگ ها ( یا عناصر ).

یه روشی اومدن گذاشتن برای محاسبه این اولویت بندی که این روش به اینصورت می باشد: ما برای صفت Style عدد ۱۰۰۰ رو در نظر میگیریم و عدد ۱۰۰ برای ID و عدد ۱۰ برای صفات، کلاس ها و شبه کلاس ها و عدد ۱ برای تگ ها و شبه عناصر.

عنصر اولویت دار ارزش عددی
صفت Style ۱۰۰۰
صفت ID ۱۰۰
صفت Class ۱۰
انتخابگر صفت ۱۰
شبه کلاس ها ۱۰
تگ ها ۱
شبه عناصر ۱

حالا مثلا ما یسری دستور داریم که میخوایم با استفاده از اعداد بالا مشخص کنیم که اولویت اول با کدام عنصر می باشد، پس اول دستورات زیر رو داریم :

در بخش A ما یک تگ داریم به اسم H1 اونجاهم خب گفتیم که ارزش تگ ها عدد ۱ می باشد، پس فعلا یه ۱ میزاریم کنار، بعدش در بخش B ما یه ID داریم به اسم test# و یه تگ به اسم H1 .

خب گفتیم ارزش ID چقده؟ گفتیم ۱۰۰ و ارزش هر تگ ۱ پس جمع بخش B میشه ۱۰۱ و میریم تا بخش C رو بررسی کنیم، تو بخش C داخلی ترین دستور صفت Style هست اونم که گفتیم ارزشش ۱۰۰۰ هست.

پس به اینصورت داریم :

  • جمع کل ارزش بخش A میشه ۱
  • جمع کل ارزش بخش B میشه ۱۰۱
  • ارزش صفت Style موجود در بخش C هم میشه ۱۰۰۰ ،خب دیگه اولویت مون معلوم شد

خب حالا کدوم از همه بیشتره؟! خب معلومه بخش C ، پس اولویت اجرای دستورات اول با بخش C می باشد.

Free-Learn

مثال هایی که نشان دهنده اولویت عناصر در صفحه می باشد

مثال شماره ۱ : استفاده از صفت Style و CSS داخلی

امتحان کنید

مثال شماره ۲ : استفاده از صفت Style و CSS خارجی ( محتویات فایل CSS خارجی را مشاهده نمایید )

امتحان کنید

مثال شماره ۳ : نحوه اولویت بندی در زمانیکه چند دستور دقیقا شبه همدیگه در یک مکان قرار میگیرند.

امتحان کنید

Free-Learn

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