سنگل عنصري تي ملندڙ CSS سيس ڪئين استعمال ڪريو

توهان هر عنصر هڪ سي ايس ايس ڪلاس تائين محدود ناهي.

جزياتي انداز واري شيٽ (سي ايس پي) توهان کي انهي عنصر ۾ لاڳو ڪيل صفات ۾ ڇڪڻ سان هڪ عنصر جي ظاهري کي بيان ڪرڻ جي اجازت ڏئي ٿو. اهي خاصيتون يا تو ۽ اي ID يا هڪ طبقي جا ٿي سگهن ٿا، ۽ سڀني صفات وانگر، اهي عناصر لاء مددگار مددگار شامل آهن جيڪي انهن سان ڳنڍيل آهن. ان جي بنياد تي جيڪو توهان هڪ عنصر ۾ شامل ڪيو ٿا، توهان نظريو حاصل ڪرڻ ۽ انهي عنصر ۽ ويب سائيٽ کي مڪمل طور تي محسوس ڪرڻ لاء ضروري بصري طرز کي لاڳو ڪرڻ لاء سي ايس ايس چونڊيندڙ لکين ٿا.

جڏهن ته يا ته اي سي ايس قاعدن سان گڏ انهن کي ايڪس ڪرڻ يا ڪم ڪرڻ جو ڪم لڳائڻ يا طبقن جو ڪم، جديد ويب ڊيزائن طريقن سان شناختن جي درجي جي مدد سان، ڇو ته اهي مجموعي طور تي ڪم ڪرڻ لاء گھٽ مخصوص ۽ آسان آهن. هائو، توهان اڃا تائين ڪيترائي سائيٽون ڳوليندا آهيون جيڪي IDs استعمال ڪندا آهن، پر اهي خاصيتون اڳوڻي ماضي کان وڌيڪ سست ٿي ويندا آهن جڏهن ته طبقن مٿان جديد ويب صفحن تي کليل هونديون آهن.

سي ايس ۾ اڪيلو يا گهڻن ڪلاس

اڪثر ڪيسن ۾ توهان هڪ واحد طبقي جي خاصيت کي عنصر ڏانهن تفويض ڪري سگهندا، پر توهان اصل ۾ صرف هڪ طبقي تائين محدود ناهي، اهي طريقي سان توهان جي سڃاڻپ سان گڏ آهن. جڏهن ته هڪ عنصر رڳو هڪ ID جي سڃاڻپ ڪري سگھي ٿو، توهان بلڪل ڪري هڪ عنصر ڪيترن ئي طبقن کي ڏئي سگهو ٿا، ۽ ڪجهه حالتن ۾، ائين ڪندي پنهنجو صفحو آسان انداز سان ۽ وڌيڪ لچکدار بڻائيندو!

جيڪڏهن توهان ڪيترن ئي طبقن کي عنصر ۾ تفويض ڪرڻ جي ضرورت پوندي، توهان اضافي ڪلاس شامل ڪري سگهو ٿا ۽ صرف پنهنجي وصف ۾ هڪ جاء سان الڳ ڪري سگهو ٿا.

مثال طور، هن پيراگراف ٽن درجي تي مشتمل آهي:

pullquote featured left "> ھي مضمون جا ٽڪرا آھن

ھن پيراگراف ٽئگ تي هيٺيان ٽي طبقن کي مقرر ڪري ٿو.

  • پوٽل
  • خاص
  • کاٻو

هنن ڪلاس جي هر هڪ قدر جي وچ ۾ خالي جڳهن کي نوٽيس. اهي جن جڳهون انهن کي مختلف، انفرادي طبقن جي طور تي مقرر ڪري ٿو. اهو پڻ آهي ته ڪلاس جا نالا انهن ۾ جاء نه ڪري سگهيا آهن، ڇو ته ائين ڪندي ائين ڪري جدا جدا طبقن کي مقرر ڪري ڇڏي.

مثال طور، جيڪڏهن ڪنهن جاء بغير "اڇوپوٽو-خاصيت-کاٻي" استعمال ڪيو ويندو آهي، اهو هڪ طبقو قدر ٿيندو، پر مٿي ڄاڻايل مثال، جتي اهي ٽي لفظ خلاء کان الڳ ٿي ويا آهن، انهن کي ذاتي قدرن جي طور مقرر ڪري ٿو. اهو ضروري آهي ته هن تصور کي سمجهڻ لاء جيئن توهان فيصلو ڪيو ٿا ته ڪلاس ڪئين پنهنجا ويب پيپر تي استعمال ڪرڻ لاء.

هڪ ڀيرو توهان HTML ۾ پنهنجي طبقن جي قيمت هڪ دفعو، توهان پوء اهي پنهنجو سي ايس ايس جي درجي جي حيثيت سان تفويض ڪري سگهو ٿا ۽ طرز لاڳو ڪريو جيڪي توهان شامل ڪرڻ چاهيندا. مثال طور.

.pullquote {...}
.جايل ٿيل {...}
صليب {...}

انهن مثالن ۾، سي ايس ڊي جي بيان ۽ قدرن جو جوڑوں جراثيم برعڪس اندر هوندو، جنهن ۾ اهي انداز ڪيئن مناسب چونڊيندڙ تي لاڳو ڪيا ويندا.

نوٽ - جيڪڏهن توهان هڪ ڪلاس کي هڪ مخصوص عنصر مقرر ڪيو (مثال طور، پي. بيف)، توهان اڃا به ان کي استعمال ڪري سگهو ٿا طبقن جي فهرست جي طور تي؛ جيتوڻيڪ هوشيار ٿي سگھي ٿو ته اهو صرف انهن عناصر تي اثر پوي ٿو جيڪي سي ايس ۾ بيان ڪيل آهن. ٻين لفظن ۾، پيٽلف اسٽائل صرف هن طبقي سان پيراگراف تائين لاڳو ٿينديون ڇو ته توهان جي چونڊيندڙ اصل ۾ "بائیں 'جي درجي جي قيمت سان" پيراگراف "۾ لاڳو ڪرڻ لاء چئي رهيو آهي. ان جي ابتڙ، ٻئي ٻن چونڊن ۾ مثال طور ڪجهه خاص نموني بيان نه ڪندا آهن، تنهن ڪري اهي ڪنهن به عنصر تي لاڳو ٿين ٿيون جيڪي انهن جي قدرن جي قيمت استعمال ڪن ٿيون.

گهڻن ڪلاس جا فائدا

گهڻن طبقن انهي عنصر لاء نئين انداز کي ٺاهڻ جي بغير ان عناصرن کي خاص اثر شامل ڪرڻ لاء آسان ڪري سگهون ٿا.

مثال طور، توهان کي باهه يا صحيح تڪڙو عنصر عناصر کي فلو ڪرڻ جي صلاحيت حاصل ڪرڻ چاهيندا. توهان شايد ٻه درجي ڇڏي ڇڏي ڇڏي ڇڏي ۽ صحيح صرف فلوٽ سان: ڇڏي؛ ۽ سچا: ٺيڪ؛ انهن ۾. پوء، جڏهن به توهان کي هڪ عنصر هجي ته توهان کي بطور فلوٽ ڪرڻ جي ضرورت آهي، توهان صرف پنهنجي طبقي جي فهرست ۾ "بائیں" ڪلاس کي شامل ڪيو.

جيتوڻيڪ هلڻ لاء هڪ سٺو لائن آهي. ياد رهي ته ويب معيار انداز ۽ جوڙجڪ جي ڌار ڌار ڳالهين کي ترتيب ڏيو. تعمير HTML جي ذريعي ترتيب ڏني وئي آهي جڏهن ته سي ڊي ايس ۾ انداز آهي.

جيڪڏهن توهان جي HTML دستاويز عناصر سان ڀريو ويندو آهي ته سڀئي سمورن نالا آهن جهڙوڪ "ڳاڙهو" يا "بائیں"، جيڪي ڊڪٽيٽ آهن اهي عناصر جيڪي اهي آهن انهن جي مقابلي ۾ نظر اچن ٿيون، توهان هن قطار جي جوڙجڪ ۽ انداز جي وچ ۾ آهيو. آئون هن جي غير ممڪن طبقي جا نالا تمام گهڻو حد تائين محدود ڪرڻ جي ڪوشش ڪريان.

گهڻن ڪلاس، سامونڪ، ۽ جاوا اسڪرپٽ

هڪ ٻيو فائدو ڪيترن ئي طبقن کي استعمال ڪرڻ آهي ته اهو توهان کي وڌيڪ گهراڪنيت جي صلاح ڏين ٿيون.

توهان کي اڳوڻي طبقن کي ختم ڪرڻ کان سواء جاوا سکرپٹ استعمال ڪندي موجوده عناصر ۾ نوان طبقن تي لاڳو ڪري سگهو ٿا. توهان هڪ عنصر جي سيمتيڪ کي بيان ڪرڻ لاء طبقن پڻ استعمال ڪري سگهو ٿا. ان جو مطلب اهو آهي ته توهان انهي عناصر کي بنيادي طور تي بيان ڪرڻ لاء اضافي طبقن تي شامل ڪري سگهو ٿا. اهو ڪيئن ٿيندو مائڪرو سافٽ ويئر ڪم ڪندو آهي.

گهڻن ڪلاس جي نقصان

توهان جي عناصر تي ڪيترن ئي طبقن کي استعمال ڪرڻ ۾ سڀ کان وڏو نقصان اهو آهي ته اهو انهن کي ڪجهه وقت تي سنڀالڻ ۽ انتظام ڪرڻ لاء بنا ڪنهن به ناپسند بنائي سگھي ٿو. اهو اهو طئي ڪرڻ لاء ڏکيو ٿي سگهي ٿو ته ڪهڙي شئي عنصر کي متاثر ڪري رهيا آهن ۽ جيڪڏهن ڪنهن لکت تي اثر انداز ٿي وڃي ٿي. اڄ به ڪيترائي فريم ورڪ موجود آهن، بوٽ اسٽيٽ وانگر، عناصر جي ڳري استعمال سان ڪيترن ئي طبقن سان. اهو ڪوڊ هٿ کان ٻاهر نڪري سگهي ٿو ۽ محنت سان ڪم ڪرڻ ۾ تمام گهڻي تڪڙو ٿي سگهي ٿو جيڪڏهن توهان محتاط نه آهيو.

جڏهن توهان ڪيترن ئي طبقن کي استعمال ڪندا آهيو، توهان هڪ طبقي جي انداز جي انداز ۾ پڻ وڌو ٿا ته ڪنهن ٻئي جي انداز تي مٿي بيان ڪيو هجي جيتوڻيڪ توهان هن جو ارادو نه ڪيو. انهي کان پوء هن کي اهو ڄاڻڻ ڏکيو ٿي سگهي ٿو ته توهان جي انداز کي لاڳو نه ڪيو ويو آهي جڏهن به اهو ظاهر ٿئي ته انهن کي گهرجي.

توهان کي خاصيت کان آگاهي ٿيڻ جي ضرورت آهي، حرفن سان ان جي عنصر سان لاڳو ٿئي ٿي!

اوزار کي استعمال ڪندي Chrome ۾ ويب ماسٽر اوزار، توهان وڌيڪ آساني سان ڏسي سگهو ٿا ته توهان جي ڪلاس توهان جي انداز کي متاثر ڪري رهيا آهن ۽ تڪرار واري انداز ۽ صفتن جي هن مسئلي کان بچڻ وارا.

اصل مضمون جينيفر ڪيريئن طرفان. 8/7/17 تي Jeremy Girard پاران ڏنل