سنگل عنصر پر ایک سے زیادہ سی ایس ایس کلاسوں کا استعمال کیسے کریں

آپ فی عنصر ایک سی ایس ایس کلاس تک محدود نہیں ہیں.

کیجادنگ انداز شیٹس (سی ایس ایس) آپ کو اس عنصر پر لاگو کرنے والے صفات میں ہکنگ کرکے عنصر کی ظاہری شکل کی وضاحت کرنے کی اجازت دیتا ہے. یہ خاصیت یا تو اور ID یا ایک کلاس ہوسکتی ہے اور تمام صفات کی طرح، ان عناصر کے لئے مددگار معلومات شامل ہیں جو ان سے منسلک ہیں. جس پر آپ ایک عنصر میں اضافہ کرتے ہیں اس پر منحصر ہے، آپ مطلوبہ بصری طرز کو لاگو کرنے کے لئے ایک سی ایس ایس کا انتخاب کنندہ لکھ سکتے ہیں جو نظر آتے ہیں اور اس عنصر اور ویب سائٹ کو پورے طور پر محسوس کرنے کی ضرورت ہوتی ہے.

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

سی ایس ایس میں سنگل یا ایک سے زیادہ طبقات؟

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

اگر آپ کو ایک عنصر میں ایک سے زیادہ طبقات تفویض کرنے کی ضرورت ہے، تو آپ اضافی کلاسیں شامل کرسکتے ہیں اور آپ کو اپنی خصوصیت میں آسانی سے الگ کر سکتے ہیں.

مثال کے طور پر، اس پیراگراف میں تین طبقات ہیں:

pullquote خصوصا بائیں "> یہ پیراگراف کا متن ہوگا

اس پیراگراف ٹیگ پر مندرجہ ذیل تین طبقات مقرر کرتی ہیں:

  • Pullquote
  • نمایاں
  • بائیں

ان کلاس کے اقدار میں سے ہر ایک کے درمیان خالی جگہوں کو نوٹس کریں. وہ خالی جگہیں جو ان کو مختلف، انفرادی کلاسوں کے طور پر مقرر کرتی ہیں. یہ بھی ہے کہ کلاس کے نام ان میں خالی جگہ نہیں ہیں، کیونکہ ایسا کرنے سے انہیں علیحدہ طبقات کے طور پر مقرر کیا جائے گا.

مثال کے طور پر، اگر آپ کسی جگہ کے بغیر "کلوکوٹ - نمایاں کردہ بائیں" کا استعمال کرتے ہیں تو یہ ایک کلاس کی قدر ہوگی، لیکن مندرجہ بالا مثال کے طور پر، جہاں یہ تین لفظ ایک جگہ سے الگ ہوتے ہیں، انفرادی اقدار کے طور پر مقرر کرتا ہے. اس تصور کو سمجھنے کے لئے ضروری ہے کیونکہ آپ فیصلہ کرتے ہیں کہ آپ کے ویب صفحات پر کونسی کلاس کے اقدار استعمال کیے جائیں گے.

ایک بار جب آپ HTML میں اپنی کلاس کی اقدار رکھتے ہیں، تو آپ ان کو اپنے سی ایس ایس میں کلاسز کے طور پر تفویض کر سکتے ہیں اور ان شیلیوں کو لاگو کرسکتے ہیں جنہیں آپ شامل کرنا چاہتے ہیں. مثال کے طور پر.

.pullquote {...}
.مثال شدہ {...}
پی.

ان مثالوں میں، سی ایس ایس کے اعلانات اور اقدار جوڑوں گھوبگھرالی برعکس کے اندر اندر ہوں گے، جس میں وہ کس طرح مناسب انتخاب کنندہ پر لاگو کیے جائیں گے.

نوٹ - اگر آپ کسی مخصوص عنصر پر کسی کلاس کو مقرر کرتے ہیں (مثال کے طور پر، پی بیف)، آپ اب بھی کلاسز کی ایک فہرست کے حصے کے طور پر استعمال کرسکتے ہیں؛ تاہم، اس بات سے آگاہ کریں کہ یہ صرف ان عناصر کو متاثر کرے گا جنہیں سی ایس ایس میں بیان کیا جاتا ہے. دوسرے الفاظ میں، پیٹو سٹائل صرف اس کلاس کے ساتھ پیراگراف پر لاگو ہوتا ہے کیونکہ آپ کا انتخاب کنندہ اصل میں یہ "بائیں 'کی کلاس کی قیمت کے ساتھ" پیراگراف "میں لاگو کرنے کے لئے کہہ رہا ہے. اس کے برعڪس، مثال کے طور پر دوسرے دو انتخابی کسی مخصوص عنصر کی وضاحت نہیں کرتے ہیں، لہذا وہ کسی بھی عنصر پر لاگو کریں گے جو ان کی کلاس کے اقدار کو استعمال کرتے ہیں.

ایک سے زیادہ طبقات کے فوائد

ایک سے زیادہ طبقات اس عنصر کے لئے ایک مکمل نئی طرز بنانے کے بغیر عناصر میں خاص اثرات کو شامل کرنے میں آسان بنا سکتے ہیں.

مثال کے طور پر، آپ کو بائیں یا دائیں جلدی عناصر کو فلوٹ کرنے کی صلاحیت ہو سکتی ہے. آپ بائیں طرف دو بائیں اور دائیں بائیں لکھ سکتے ہیں: بائیں؛ اور فلوٹ: دائیں؛ ان میں. اس کے بعد، جب بھی آپ کو ایک عنصر تھا تو آپ کو بائیں طرف باندھنے کی ضرورت ہوتی ہے، آپ کلاس کی فہرست میں "بائیں" کو آسانی سے کلاس میں شامل کریں گے.

تاہم، یہاں چلنے کے لئے ایک ٹھیک لائن ہے. یاد رکھیں کہ ویب معیار سٹائل اور ساخت کی علیحدگی کا تعین کرتے ہیں. سٹائل ایچ ایس ایس میں ہے جبکہ ساخت HTML کے ذریعے سنبھال لیا جاتا ہے.

اگر آپ کے ایچ ٹی ایم ایل دستاویز عناصر سے بھرا ہوا ہے تو اس کے تمام کلاس ناموں جیسے "سرخ" یا "بائیں" ہیں، جن کا نام یہ ہے کہ وہ کس طرح عناصر کو اس کے بجائے کس طرح نظر آتے ہیں، آپ اس ڈھانچے اور طرز کے درمیان کراسکتے ہیں. میں اس وجہ سے اپنے ممکنہ حد تک غیر غیر معمولی کلاس ناموں کو محدود کرنے کی کوشش کرتا ہوں.

ایک سے زیادہ طبقات، سیمنٹکس، اور جاوا اسکرپٹ

متعدد طبقات کا استعمال کرنے کا ایک اور فائدہ یہ ہے کہ یہ آپ کو بہت سارے انٹرایکٹو امکانات فراہم کرتا ہے.

آپ کو ابتدائی کلاسوں میں سے کسی کو ہٹانے کے بغیر جاوا اسکرپٹ کا استعمال کرتے ہوئے موجودہ عناصر میں نئے کلاسز لاگو کر سکتے ہیں. آپ ایک عنصر کے شعبے کی وضاحت کرنے کے لئے کلاس بھی استعمال کرسکتے ہیں. اس کا مطلب یہ ہے کہ آپ اس عنصر کو بنیادی طور پر کیا مطلب کی وضاحت کرنے کے لئے اضافی کلاسوں میں شامل کرسکتے ہیں. اس طرح مائکروفارمیٹس کیسے کام کرتا ہے.

ایک سے زیادہ طبقات کے نقصانات

آپ کے عناصر پر متعدد کلاسوں کا استعمال کرنے کا سب سے بڑا نقصان یہ ہے کہ یہ ان کو تھوڑی دیر سے ناپسندیدہ بنا سکتے ہیں. اس بات کا تعین کرنے میں مشکل ہوسکتا ہے کہ کون سی طرز ایک عنصر کو متاثر کر رہے ہیں اور اگر کوئی سکرپٹ اس پر اثر انداز کررہے ہیں. بوٹسٹریپ کی طرح آج دستیاب بہت سے فریم ورک، کئی عناصر کے ساتھ عناصر کے بھاری استعمال کرتے ہیں. اگر یہ ایرر برقرار رہے تو ہمارے ہیلپ ڈیسک سے رابطہ کریں. اس ویڈیو پر غلط استعمال کی اطلاع دیتے ہوئے ایرر آ گیا ہے. براہ مہربانی دوبارہ کوشش کریں.

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

آپ کو مخصوصیت سے آگاہ کرنے کی ضرورت ہے، یہاں تک کہ خاصیت کے ساتھ ایک عنصر پر لاگو ہوتا ہے!

کروم میں ویب ماسٹر ٹولز جیسے ایک آلے کا استعمال کرتے ہوئے، آپ آسانی سے دیکھ سکتے ہیں کہ آپ کی کلاس آپ کی طرز پر کیسے اثر انداز کر رہی ہے اور تنازعات والے شیلیوں اور صفات کی اس مسئلہ سے بچنے کے لۓ.

جینیفر کریین کی طرف سے اصل مضمون. 8/7/17 پر جیریمی Girard کی طرف سے ترمیم