سی ای ایس کا کھوج - خاصیت

مخصوصیت کیا ہے؟

اگر کسی عناصر پر دو یا زیادہ متعارض سی ایس ایس رولز موجود ہیں تو براوزر کچھ اصولوں کا پیروی کرکے سخت ترین رول کو چنے کا فیصلہ کرتا ہے اور اس کا استعمال کرتا ہے。

خصوصیت (specificity) کو اسکور/درجہ کے طور پر دیکھنا، عناصر پر کس سائٹل دلیلی کا استعمال کیا جانا چاہئے یا نہیں، یہ طے کرتا ہے。

عمومی چناؤگر (*) نچلے خاصیت کا حامل ہوتا ہے، جبکہ آئی ڈی چناؤگر کا خاصیت کا درجہ بلند ہوتا ہے!

توجہ:یہ خاصیت، سی ایس ایس رولز کی وجہ سے کچھ عناصر پر ناپسندیدار ہونے کا عام وجہ ہے، جو آپ کو اس کا استعمال ہونا چاہئے لگتا ہو。

خصوصیت کی ترجیحی درجہ

هر انتخاب کنندگان کو خاصیت کی ترجیحی درجہ میں اپنا مقام ہوتا ہے، نیچے درج کردہ چار زمرے کا تعین کیا جاتا ہے، جو انتخاب کنندگان کی خاصیت کی ترجیحی درجہ کی سطح کا تعین کرتی ہیں:

این لائن استایل - این لائن (این لائن) استایل مستقیماً تزئین کی جانے والے عنصر پر متصل کی جائیں، مثلاً <h1 style="color: #ffffff;">۔

آئی ڈی - آئی ڈی ویب پیج کی عنصر کا منفرد نشانگار ہیں، مثلاً #navbar。

کلاس، خاصیت اور پسیو - اس زمرے میں .classes، [attributes] اور پسیو شامل ہیں، مثلاً :hover، :focus وغیرہ。

عناصر اور پسیو - اس زمرے میں عنصر کی نام اور پسیو شامل ہیں، مثلاً h1، div، :before اور :after。

خصوصیت کی حساب کیسے کی جائے؟

آپ کو خاصیت کی حساب کا طریقہ یاد رکھیئن!

0 سے شروع کرکے، style کی خاصیت میں 1000، کسی آئی ڈی میں 100، کسی خاصیت، کلاس یا پسیو کی خاصیت میں 10، کسی عنصر کی نام یا پسیو کی خاصیت میں 1 اضافہ کریئن۔

اس کا نظارہ کریئن:

مثال

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • A کی خاصیت 1 ہے (ایک عنصر)
  • B کی خاصیت 101 ہے (ایک آئی ڈی استعمال اور ایک عنصر)
  • C کی خاصیت 1000 ہے (این لائن استایل)

چونکہ 1 < 101 < 1000، لہذا تیسرا قاعدہ (C) زیادہ خاصیت کا حامل ہے، لہذا اس کا استعمال کیا جائے گا。

خصوصیت کی قوانین 1:

خصوصیت کی ترجیح کی صورت میں: جدیدترین قاعدہ اہم ہوگا - اگر کسی قاعدے کو کسٹم کسٹم کی فائل میں دو بار لکھا جائے تو کسٹم کی فائل میں بعد میں لکھا گئی قاعدہ زیادہ قریب عنصر کی تزئین کی جائے گی، لہذا اس کا استعمال کیا جائے گا:

مثال

h1 {background-color: yellow;}
h1 {background-color: red;}

آزمایش کنید

بعدی قاعدہ ہمیشہ استعمال کی جائے گی。

خصوصیت کی قوانین 2:

آئی ڈی انتخاب کنندگان کی خاصیت کی ترجیح کی حامل استایل کا پائیدار استایل سے زیادہ ہیں - اس کا نظارہ کریئن:

مثال

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

آزمایش کنید

پہلا قاعدہ دوسرے دو کے ساتھ کی نسبت میں زیادہ خاص ہے، لہذا اس کا استعمال کیا جائے گا。

خصوصیت کی قوانین 3:

مقابلہ انتخاب کنندگان ایک واحد عنصر انتخاب کنندگان سے زیادہ خاص ہیں - انضمامی استایل شیئت انضمامی عنصر کے قریب تھیں، لہذا اس صورت میں:

مثال

مزید کسٹم کی فائل سے آیا:

#content h1 {background-color: red;}

در فایل HTML:

<style>
#content h1 {
  background-color: yellow;
}
</style>

بعدی را اعمال می‌کند.

قوانین خاصیت 4:

انتخاب‌گر کلاسی می‌تواند هر تعداد انتخاب‌گر عناصر را شکست دهد - انتخاب‌گر کلاسی (مثل .intro که h1، p، div و غیره را شکست می‌دهد):

مثال

.intro {background-color: yellow;}
h1 {background-color: red;}

آزمایش کنید

علاوه بر این،انتخاب‌گر عمومی و خاصیت ارث‌برداری 0 دارند - خاصیت *،body * و شبیه آن‌ها 0 دارند. خاصیت ارث‌برداری نیز 0 است.