ہر چیز جو آپ کو سی ایس ایس سلیکٹرز کے بارے میں جاننے کی ضرورت ہے

یہ مضمون ایک دلچسپ اور ایک اہم عنوان سامنے لایا ہے جس کے نام سے جانا جاتا ہے مددگار عملی مظاہرے کے ساتھ سلیکٹرز اور اس کی پیروی کرتے ہیں۔ اس مضمون میں مندرجہ ذیل نکات کا احاطہ کیا جائے گا ،

• اسٹائل HTML عناصر
• سی ایس ایس سلیکٹرز
• سی ایس ایس آئی ڈی سلیکٹر
• سی ایس ایس کلاس سلیکٹر
• سی ایس ایس یونیورسل سلیکٹر
• سی ایس ایس گروپ سلیکٹرز

تو آئیے ہم شروع کریں ،

اسٹائل HTML عناصر

آئیے سمجھتے ہیں کہ سی ایس ایس سلیکٹرز کے پاس جانے سے پہلے سی ایس ایس کیا ہے۔ اگر ایچ ٹی ایم ایل کو کنکال سمجھا جائے ، تو سی ایس ایس (کاسکیڈنگ اسٹائل شیٹس) پٹھوں اور جلد کی طرح ہے۔ دماغ جاوا اسکرپٹ ہے۔ لہذا ، کسی ویب صفحے کے لئے ، سی ایس ایس طرزیں بنیادی طور پر ترتیب اور ڈیزائن ہیں۔ تصاویر اور پوزیشن کی پوزیشننگ سے لے کر فونٹ کے سائز اور پس منظر کے رنگ تک ، سی ایس ایس کنٹرول کرتا ہے کہ کسی برائوزر میں HTML عناصر کیسا نظر آتا ہے۔

آپ سی ایس ایس کو بہتر طور پر سمجھ سکتے ہیں ، اگر آپ کو سی ایس ایس سلیکٹرز کیا ہیں اس پر اچھی طرح سے گرفت ہو۔ یہ سلیکٹرز آپ کو مخصوص HTML عناصر کو نشانہ بنانے دیتے ہیں تاکہ آپ ان پر صحیح انداز کا اطلاق کرسکیں۔

آئیے ہم یہ سمجھیں کہ ہم HTML عناصر کو کس طرح منتخب کرسکتے ہیں ،

عناصر کو کیسے منتخب کریں؟

کہتے ہیں ، آپ چاہتے ہیں کہ ایک مخصوص سرخی کسی ویب صفحے کے باقی مشمولات سے مختلف ہو۔ اب ، سی ایس ایس سلیکٹرز کا استعمال کرتے ہوئے آپ اس HTML عنصر کو مختلف انداز کے انداز میں نشانہ بنا سکتے ہیں۔ سی ایس ایس سلیکٹرز ان عناصر کی وضاحت میں مدد کرتے ہیں جس کے لئے سی ایس ایس کے قواعد کا ایک مخصوص سیٹ لاگو ہوتا ہے۔ سی ایس ایس سلیکٹرز کی مختلف اقسام ہیں جو آپ کو ان عناصر کا خاص طور پر انتخاب کرنے دیتی ہیں جن کی آپ طرز سازی کرنا چاہتے ہیں۔ آپ پورے ویب پیج کو عمومی اسٹائل دے سکتے ہیں ، اور پھر صفحے کے دوسرے عناصر کو اسٹائل کرنے کے لئے اپنا طریقہ کار کرسکتے ہیں۔

سلیکٹرز سی ایس ایس اصول کا ایک حصہ ہیں ، اور یہ سلیکٹرز سی ایس ایس بلاکس کے اعلان سے عین قبل آتے ہیں۔ بہتر تفہیم کے ل you ، آپ نیچے دی گئی تصویر کا حوالہ دے سکتے ہیں۔

سی ایس ایس سلیکٹرز مضمون کے ساتھ آگے بڑھ رہے ہیں

سی ایس ایس سلیکٹرز

یہ سلیکٹر آپ کو اس کے نام سے HTML عنصر منتخب کرنے دیتا ہے۔

ذیل میں کوڈ پر غور کریں:

p {متن کی سیدھ میں: مرکز کا رنگ: مینجٹا}
یہ انداز ہر پیراگراف پر لاگو ہوگا۔
 
پیراگراف 1
 
پیراگراف 2
 

اس کوڈ سے آپ کو درج ذیل آؤٹ پٹ ملے گا:

یہ انداز ہر پیراگراف پر لاگو ہوگا

پیراگراف 1

پیراگراف 2

مذکورہ کوڈ میں ، HTML عناصر کو درمیان سے منسلک کیا گیا ہے اور اس کا رنگ 'مینجینٹا' ہے۔

سی ایس ایس سلیکٹرز مضمون کے ساتھ آگے بڑھ رہے ہیں

سی ایس ایس آئی ڈی سلیکٹر

کسی HTML عنصر کی ID وصف کو منتخب کرکے ، آپ اس مخصوص عنصر کو منتخب کرسکتے ہیں۔ چونکہ ID کسی صفحے کے لئے منفرد ہے ، لہذا آپ ID صفت کا استعمال کرکے صحیح عنصر منتخب کرسکتے ہیں۔

سیلینیم میں کلیدی لفظ سے چلنے والا فریم ورک

آپ اس عنصر کی شناخت کے بعد '#' استعمال کرکے HTML عنصر منتخب کرسکتے ہیں۔ مثال کے طور پر ، '# پہلا نام' عنصر کو منتخب کرتا ہے جہاں ID 'پہلا نام' ہے۔

درج ذیل کوڈ پر غور کریں:

# پیرا 1 {ٹیکسٹ - سیدھ کریں: مرکز کا رنگ: اورینج}
ہیلو ورلڈ
 
یہ پیراگراف متاثر نہیں ہوگا۔
 

مندرجہ بالا کوڈ کے لئے آؤٹ پٹ ہے:

ہیلو ورلڈ

یہ پیراگراف متاثر نہیں ہوگا۔

جیسا کہ آپ مندرجہ بالا آؤٹ پٹ میں دیکھ سکتے ہیں ، id = ”para1 including شامل کرکے ، ہم اس عنصر کا رنگ سنتری میں تبدیل کرنے میں کامیاب ہوگئے۔ دوسرا عنصر جس میں یہ نہیں ہوتا وہ متاثر نہیں رہتا ہے۔

سی ایس ایس سلیکٹرز مضمون کے ساتھ آگے بڑھ رہے ہیں

سی ایس ایس کلاس سلیکٹر

کلاس سلیکٹر کا استعمال کرتے ہوئے ، آپ HTML عناصر کا انتخاب کرسکتے ہیں جن میں ایک خاص طبقاتی وصف ہے۔ آپ کلاس کا نام کے بعد ایک مدت (مکمل اسٹاپ علامت) کا استعمال کرتے ہوئے سلیکٹر کی وضاحت کرسکتے ہیں۔ مثال کے طور پر .intro ایسے عناصر کا انتخاب کرتا ہے جہاں کلاس “انٹرو” ہوتا ہے۔ ایک چیز کو دھیان میں رکھیں کہ آپ کبھی بھی کلاس کا نام کسی نمبر کے ساتھ شروع نہیں کرسکتے ہیں۔

درج ذیل کوڈ پر غور کریں:

.سنٹر {ٹیکسٹ - سیدھ کریں: مرکز کا رنگ: گلابی}
یہ سرخی گلابی اور درمیان منسلک ہے۔
 
یہ پیراگراف گلابی اور درمیان منسلک ہے۔
 
 
 

مندرجہ بالا کوڈ کی پیداوار ہے:

یہ سرخی گلابی اور درمیان منسلک ہے۔

یہ پیراگراف گلابی اور درمیان منسلک ہے۔

آپ کسی خاص عنصر کے لئے سی ایس ایس کلاس سلیکٹرز استعمال کرسکتے ہیں۔ اگر آپ چاہتے ہیں کہ صرف ایک مخصوص عنصر کو اسٹائل کیا جائے ، تو آپ کلاس سلیکٹر کے ساتھ عنصر کا نام بھی استعمال کرسکتے ہیں۔

مثال کے طور پر ، درج ذیل کوڈ پر غور کریں:

p.center {Text-سیدھ کریں: مرکز کا رنگ: گلابی}
یہ عنوان متاثر نہیں ہوا ہے
 
یہ پیراگراف گلابی اور درمیان منسلک ہے۔
 
 
 

مندرجہ بالا کوڈ کی پیداوار ہے:

ایس کیو ایل ورک ورک بینچ کا استعمال کیسے کریں

یہ عنوان متاثر نہیں ہوا ہے

یہ پیراگراف گلابی اور درمیان منسلک ہے۔

جیسا کہ آپ آؤٹ پٹ میں دیکھ سکتے ہیں ، ہیڈنگ H2 اسٹائل سے متاثر نہیں ہوتا ہے۔ چونکہ ہم نے 'p.center' متعین کیا ہے ، لہذا صرف پیراگراف اس انداز سے متاثر ہوتا ہے۔

اس سی ایس ایس سلیکٹرز مضمون کے ساتھ آگے بڑھ رہے ہیں ،

سی ایس ایس یونیورسل سلیکٹر

اس قسم کے سلیکٹر کو وائلڈ کارڈ کے کردار کے طور پر سمجھا جاسکتا ہے جو صفحے کے تمام عناصر کو منتخب کرتا ہے۔ اس صفحے پر موجود تمام عناصر کو منتخب کرتا ہے ، اور اسے '*' کے ذریعہ متعین کیا جاتا ہے۔

مثال کے طور پر ، ذیل کے کوڈ پر غور کریں:

* {رنگ: گہرا گہرا فونٹ سائز: 30px}
یہ ایک امتحان ہے (چھوٹا فونٹ)
 
یہ ایک پیراگراف ہے۔
 

مندرجہ بالا کوڈ کے لئے آؤٹ پٹ ہے:

ہیلو ورلڈ

یہ ایک امتحان ہے (چھوٹا فونٹ)

یہ ایک پیراگراف ہے۔

جیسا کہ آپ آؤٹ پٹ میں دیکھ سکتے ہیں ، گروپ کے سلیکٹر کے استعمال سے طے شدہ تمام عناصر کی طرز کی ایک ہی طرز ہوتی ہے۔

یہ ہمیں اس مضمون کے آخر تک پہنچاتا ہے۔

ہمارے چیک کریں جو انسٹرکٹر کی زیر قیادت براہ راست تربیت اور حقیقی زندگی کے منصوبے کے تجربے کے ساتھ آتا ہے۔ یہ تربیت آپ کو بیک اینڈ اور فرنٹ اینڈ ویب ٹیکنالوجیز کے ساتھ کام کرنے کی مہارت میں مہارت حاصل کرتی ہے۔ اس میں ویب ڈویلپمنٹ ، jQuery ، انجولر ، نوڈ جے ایس ، ایکسپریس جے ایس ، اور مونگو ڈی بی کی تربیت شامل ہے۔

ہمارے لئے ایک سوال ہے؟ برائے کرم مضمون کے تبصرے سیکشن میں اس کا تذکرہ کریں اور ہم آپ کو واپس ملیں گے۔