ڪلاس ۽ شناختن جي مدد سان توهان جي سي ايس ڊي وڌايو
عمارتن جي ويب سائيٽن تي اڄ جي ويب جي ڏاڍي گنجائش CSS سي (Cascading Style Sheets) جي ضرورت آهي. اهي هدايتون آهن ته توهان برائوزر ونڊو ۾ ترتيب ڪيئن ترتيب ڏيندو اهو ويب سائيٽ ڏيو. توهان پنهنجي HTML دستاويزن ڏانهن "شالي" جي هڪ سيريز لاڳو ڪريو جيڪا توهان جي ويب پيج جي نظر ۽ محسوس پيدا ڪندي.
ڪجھ دستاويز ۾ ڏنل پيش ڪيل طرزن کي لاڳو ڪرڻ جا ڪيترائي طريقا آهن، پر توهان کي دستاويز جي صرف ڪجهه عناصر تي طرز جو استعمال ڪرڻ چاهين ٿا، پر انهي عنصر جي سڀني مثال نه.
توهان پڻ اهو انداز ٺاهي سگھي ٿو ته توهان هڪ دستاويزن ۾ ڪيترن ئي عنصر تي لاڳو ڪري سگهو ٿا، بغير هر هڪ مثال جي لاء اندازي واري اصول کي ٻيهر ڏئي سگھن ٿا. انهن گهربل اندازن حاصل ڪرڻ لاء، توهان کي ڪلاس ۽ ID HTML خاصيتون استعمال ڪنداسين. اهي خاصيتون عالمي جزا آهن جيڪي تقريبا هر HTML ٽاڪين تي لاڳو ڪري سگهن ٿيون. مطلب اهو آهي ته توهان پنهنجي دستاويز ۾ ڊويزن، پيراگراف، لنڪس، لسٽ يا HTML جي ڪنهن ٻئي ميز کي اسٽائل ڪرڻ چاهيو ٿا، ته توهان طبقي ۽ شناخت صفتن ڏانهن رخ ڪري سگهو ٿا. توهان جي هن ڪم کي مڪمل ڪرڻ ۾ مدد ڪريو!
ڪلاس منتخب ڪندڙن
طبقي منتخب ڪندڙ توهان کي دستاويزن ۾ ساڳي عنصر يا ٽيگ ڏانهن مختلف شاليز سيٽ ڪرڻ جي اجازت ڏئي ٿي. مثال طور، توهان شايد توهان جي متن جي ڪجهه حصن کي مختلف رنگ ۾ ڏنل دستاويز ۾ ڏنل متن مان ڪڍي سگهو ٿا. اهي نمايان ٿيل حصا هڪ "خبرداري" ڪري سگهي ٿو جيڪو توهان صفحي تي ترتيب ڏنو آهي. توھان پنھنجي پيراگراف کي ڪئين طرح ھن سان تفريح ڪري سگھو ٿا:
p {رنگ: # 0000ff؛ }
پي ايلالٽ {رنگ: # ff0000؛ }
اهي نمونن سڀني پيراگرافن جو رنگ نيري (# 0000ff) سيٽ ڪري ڇڏيندو، پر "انتباط" جي صنف خاصيت سان कुनै पनि अनुच्छेदको बदमाई लाल (# ff0000) को बजाए. اهو ئي سبب آهي ته طبقي جي خاصيت هڪ اعلي مخصوصيت جي پهرين CSS قاعدن کان وڌيڪ آهي، جيڪا صرف هڪ ٽيگ چونڊيندڙ آهي.
جڏهن سي ايس ايس سان ڪم ڪندي، هڪ وڌيڪ مخصوص قاعدن کي گهٽ مخصوص هڪ کان مٿي ڪنداسين. تنهن ڪري هن مثال ۾، وڌيڪ عام حڪمراني سڀني پيراگراف جي رنگ کي ترتيب ڏئي ٿو، پر سيڪنڊن جي ڀيٽ ۾ ٻيو، صرف مخصوص مخصوص اصول جيڪي فقط ڪجهه پيراگراف تي ترتيب ڏين ٿيون.
هتي اهو آهي ته هي ڪجهه HTML مارڪ اپ ۾ استعمال ٿي سگهي ٿو:
ھن پيراگراف نيري ۾ ڏيکاري ويندي، جيڪا صفحي لاء ڊفالٽ آھي.
ھي پيراگراف پڻ نيري ۾ ھجي.
۽ اهو پيراگراف طبقاتي صفتن کان پوء ڳاڙهي ۾ ڏيکاري ها ها عنصر منتخب اسٽائل کان معيار نيري رنگ کي مٿي ڪري ڇڏيندو.
انهي مثال ۾، "پي.الٽ" جو انداز صرف پيراگراف عناصر تي لاڳو ٿئي ٿو جيڪو "انتباہ" جي صنف استعمال ڪري ٿو. اگر توهان ڪيتريون ئي HTML عناصر ۾ اها صنف استعمال ڪرڻ چاهيندا آهيو، تو صرف توهان شروعاتي طور تي شروعاتي HTML عنصر کي ختم ڪري سگھو ٿا. اسلوب ڪال (صرف ان دور کي ختم ڪرڻ جو يقين رکڻو آهي (.) جڳهه تي)، جهڙوڪ:
.alert {پس منظر-رنگ: # ff0000؛}
هي طبقي هاڻي ڪنهن به عنصر وٽ موجود آهي جيڪا ان جي ضرورت آهي. توهان جي HTML جو ڪو به ٽڪرو جيڪو "انتباہ" جي صنف خاصيت جي قيمت تي آهي هاڻي اهو انداز ٿيندو. ھيٺ ڏنل HTML ۾، اسان وٽ ھڪ پيراگراف ۽ ھڪ سرنگ سطح 2 آھي جيڪي "خبرداري" طبقي کي استعمال ڪن ٿا. هنن ٻنهي جا ڪجهه ئي ڳاڙهو رنگ سي ڊي تي ٻڌل آهن جيڪي اسان صرف ظاهر ڪيا آهن.
ھن پيراگراف ڳاڙھي ۾ لکيل ھوندو.
۽ ھي h2 پڻ ڳاڙھي ڇڏي.
اڄ ويب سائيٽن تي، طبقاتي خاصيتون اڪثر اڪثر عناصر تي استعمال ڪيا ويا آهن ڇاڪاڻ ته اهي مخصوصيت جي نقطي نظر سان ڪم ڪرڻ ۾ آسان آهن ته شناخت آهن. توهان تمام گهڻيون موجوده HTML صفحن کي طبقاتي صفتن سان ڀريو ويندو، جن مان ڪجھ هڪ دستاويز ۾ ڪيترائي ڀيرا بار بار آهن ۽ ٻيا جيڪي صرف هڪ ڀيرو ظاهر ٿيندا آهن.
شناخت چونڊيندڙ
ID منتخب ڪندڙ توهان کي ڪنهن ٽيبل يا ٻين HTML عنصر سان اتحاد ڪرڻ بغير ڪنهن مخصوص انداز ۾ نالو ڏيڻ جي اجازت ڏئي ٿو. چوندا آھن توھان توھان پنھنجي HTML مارڪ اپ ۾ ڊويزن ڪيو جنھن ۾ ھڪڙي واقعي بابت معلومات شامل آھي.
توھان ھي ڊويزن کي "واقعي" جي شناخت واري شناخت ڏئي سگھو ٿا، ۽ پوء جيڪڏھن ھڪڙي ڪاپيل ويڪر ڪاروڊ سرحد سان گڏ ڊويزن ڪوڊ ڪرڻ چاھيو ٿا جيڪو ھڪڙو ڪوڊ ڪوڊ لکيو آھي جھڙوڪ:
#event {سرحد: 1px مضبوط # 000؛ }
شناخت چونڊيندڙن سان چئلينج اهو آهي ته اهي هڪ HTML دستاويزن ۾ بار بار نٿا ڪري سگهن. اهي منفرد هجي (توهان ساڳيا سڃاڻپ توهان جي سائيٽ جي ڪيترن ئي صفحن تي استعمال ڪري سگهو ٿا، پر صرف هڪ دفعو هر فرد ۾ HTML دستاويز). تنهن ڪري جيڪڏهن توهان 3 واقعا هوندا هئا ته هي سرحد سڀني کي گهربل هجي، توهان کي "Event1"، "event2" ۽ "event3" ۽ ان مان هر انداز جي سڃاڻپ ڪرڻ جي ضرورت پوندي. تنهن ڪري، مان "واقعي" جي شروعاتي صنف جي خاصيت کي استعمال ڪرڻ ۾ تمام گهڻو آسان آهي ۽ انهن سڀني کي هڪ ئي انداز ۾ اندازو لڳايو.
شناخت صفتن سان هڪ ٻيو چئلينج اهو آهي ته انهن وٽ طبقي صفات کان وڌيڪ وضاحت آهي. ان جو مطلب اهو آهي ته جيڪڏهن توهان وٽ ايس ڊي ايس جي ضرورت آهي جيڪا اڳئين قائم ٿيل طرز جي مٿان اوچيڊل هوندي آهي، اهو توهان کي ايڏو ڏکيو آهي ته ايئن ڪرڻ ڏکيو ٿي سگهي ٿو. اهو ئي سبب آهي ته ڪيترن ئي ويب ڊولپرز انهن جي مارڪپ ۾ شناخت استعمال ڪرڻ کان روڪي ڇڏيو آهي، جيتوڻيڪ اهي صرف هڪ قيمت استعمال ڪرڻ جو ارادو ڪن ٿا، ۽ بدران تقريبا سڀني اندازن لاء گهٽ مخصوص مخصوص صنف خصوصيتن ڏانهن موٽيو آهي.
ھڪڙو علائقو جتي شناخت خاصيتون راند ۾ اينديون آھن، جڏھن توھان ھڪڙو صفحو ٺاھيو ٿا جيڪو ان صفحي ۾ لنگر لنڪس آھي. مثال طور، جيڪڏهن توهان وٽ هڪ پارلاڪس انداز جي ويب سائيٽ آهي جنهن ۾ هڪ واحد پيج تي تمام مواد شامل آهي جيڪا انهي صفحي جي مختلف حصن ڏانهن "جمپ" کي. اهو ايٽ صفتن ۽ ٽيڪسٽ لنڪس استعمال ڪري رهيو آهي جيڪي اهي لنگر لنڪ استعمال ڪندا آهن.
توهان کي بس سان منسوب ٿيل قدر جي قيمت شامل ڪري ڇڏي، # علامت کان اڳ، لنڪ جي مظاهرو وصفن جهڙوڪ هن ريت:
ھي ڪڙي آھي
جڏهن ڪلڪ ڪيو يا چڪي ويو، اهو لنڪ هن صفحي جي حصي تي ٽپو ڪندو، جيڪا هن اي ٽي صفت آهي. جيڪڏهن صفحي تي ڪوبه عنصر هن ID ويليو استعمال نه ڪيو، اهو ڪڙي ڪجھ به نه ڪندو هوس.
ياد رکو، جيڪڏهن توهان سائيٽ تي ان-لنڪ ڪنيڪشن ٺاهڻ چاهيو ٿا، ID جي صفتن جي استعمال جي ضرورت هوندي، پر توهان اڃا تائين عام سي ايس جي اسٽائلنگ مقصدن لاء طبقن ڏانهن رخ ڪري سگهو ٿا. اهو ڪيئن اڄ صفحن کي ڇڪايو ويو آهي. آئون گهڻو ڪري ممڪن طبقاتي چونڊيو استعمال ڪندا هئا ۽ صرف انهن جي سڃاڻپ کي تبديل ڪندا هجون، جڏهن مون کي ضرورت ناهي ته صرف ايس ايس ايس لاء ٿلهو آهي، پر ان کي هڪ پيج جي لنڪ جي طور تي.
اصل مضمون جينيفر ڪيريئن طرفان. 8/9/17 تي Jeremy Girard پاران ڏنل