کلاس اور شناخت آپ کے CSS کو بڑھانے میں مدد کریں
آج کی ویب پر عمارتوں کی ویب سائٹس کو سی ایس ایس (کیجادنگ انداز شیٹ) کی ایک گہرائی سمجھنے کی ضرورت ہے. یہ ہدایات ہیں جو آپ ویب سائٹ دیتے ہیں اس بات کا تعین کرنے کے لئے کہ براؤزر ونڈو میں ترتیبات کیسے کریں گے. آپ اپنے ایچ ٹی ایم ایل دستاویز میں "شیلیوں" کا ایک سلسلہ لاگو کرتے ہیں جو آپ کے ویب پیج کی نظر اور احساس پیدا کرے گا.
ایک دستاویز میں ان پیشکش کردہ شیلیوں کو لاگو کرنے کے بہت سے طریقوں ہیں، لیکن اس وقت میں آپ کسی دستاویز کے عناصر پر ایک سٹائل استعمال کرنا چاہتے ہیں، لیکن اس عنصر کے تمام مثال نہیں.
آپ یہ بھی ایک طرز بنانا چاہتے ہیں کہ آپ کسی دستاویز میں کئی عناصر پر لاگو کرسکتے ہیں، بغیر کسی فرد کی مثال کے لئے سٹائل کے اصول کو دوبارہ استعمال کرسکتے ہیں. ان مطلوبہ شیلیوں کو حاصل کرنے کے لئے، آپ کلاس اور ID HTML صفات استعمال کریں گے. یہ صفات عالمی صفات ہیں جو تقریبا ہر HTML ٹیگ پر لاگو کیا جا سکتا ہے .یہ مطلب ہے کہ آپ ڈویژن، پیراگراف، لنکس، فہرست یا اپنے دستاویز میں ایچ ٹی ایم ایل کے دیگر ٹکڑے ٹکڑے میں سے کسی کو اسٹائل کر رہے ہیں، آپ کلاس اور شناختی خصوصیات کو تبدیل کرسکتے ہیں. اس کام کو پورا کرنے میں آپ کی مدد کریں!
کلاس منتخب
کلاس کا انتخاب کنندہ آپ کو ایک دستاویز میں ایک ہی عنصر یا ٹیگ پر متعدد سٹائل مقرر کرنے کی اجازت دیتا ہے. مثال کے طور پر، آپ اپنے متن کے بعض حصوں کو دستاویز کے باقی متن سے مختلف رنگ میں بلایا چاہتے ہیں. یہ اشارہ شدہ حصوں ایک "انتباہ" ہوسکتی ہے جو آپ صفحے پر ترتیب دے رہے ہیں. آپ اپنے پیراگراف کو اس طرح کے کلاسوں کے ساتھ تفویض کرسکتے ہیں:
p {رنگ: # 0000ff؛ }
p.alert {رنگ: # ff0000؛ }
یہ شیلیوں کے تمام پیراگراف کا رنگ نیلے رنگ (# 0000ff) پر مقرر کرے گا، لیکن "انتباہ" کی کلاس کی خاصیت کے ساتھ کسی بھی پیراگراف بجائے سرخ (# ff0000) کے بجائے سجیلا ہو گا. یہ اس وجہ سے ہے کہ کلاس کی خاصیت میں پہلے سی ایس ایس کے قاعدہ سے زیادہ خاصیت ہے، جو صرف ٹیگ کا انتخاب کرتا ہے.
سی ایس ایس کے ساتھ کام کرتے وقت، ایک مخصوص اصول ایک مخصوص کم سے کم ایک سے زیادہ کرے گا. لہذا اس مثال میں، زیادہ عام اصول تمام پیراگراف کا رنگ مقرر کرتا ہے، لیکن دوسرا، زیادہ سے زیادہ مخصوص حکمرانی کے اوپر اوورائڈس ہے جو صرف چند پیراگراف پر ترتیب دیتا ہے.
یہاں یہ ہے کہ یہ کچھ HTML مارک اپ میں استعمال کیا جا سکتا ہے:
یہ پیراگراف نیلے رنگ میں دکھایا جائے گا، جو صفحہ کے لئے ڈیفالٹ ہے.
یہ پیراگراف بھی نیلے رنگ میں ہوگا.
اور اس پیراگراف کو سرخ میں دکھایا جائے گا کیونکہ کلاس کی خاصیت عنصر منتخب اسٹائل سے معیاری نیلے رنگ کو ختم کردیگا.
اس مثال میں، "پی.الٹ" کا انداز صرف پیراگراف عناصر پر لاگو ہوتا ہے جو "انتباہ" کلاس کا استعمال کرتا ہے. اگر آپ اس کلاس کو متعدد ایچ ٹی ایم ایل کے عناصر میں استعمال کرنا چاہتے ہیں، تو آپ آسانی سے ابتدائی طور پر ایچ ٹی ایم ایل عنصر کو ہٹا دیں گے. طرز کال (بس اس جگہ پر (.) جگہ چھوڑنے کے لئے اس بات کا یقین کریں، اس طرح:
.alert {پس منظر کا رنگ: # ff0000؛}
یہ کلاس اب کسی بھی عنصر کے لئے دستیاب ہے جو اس کی ضرورت ہے. آپ کے ایچ ٹی ایم ایل کا کوئی ٹکڑا جس میں "انتباہ" کی کلاس کی خاصیت کی قیمت ہے اب اس طرز کو مل جائے گا. ذیل میں HTML میں، ہمارے پاس ایک پیراگراف اور ایک سرخی کی سطح 2 ہے جو "انتباہ" کلاس استعمال کرتے ہیں. ان دونوں کو سرخ رنگ کے پس منظر کا رنگ پڑے گا جو ہم نے صرف دکھایا ہے.
یہ پیراگراف سرخ میں لکھا جائے گا.
اور اس H2 بھی سرخ ہو جائے گا.
آج ویب سائٹس پر، کلاسیکی صفات اکثر زیادہ عناصر پر استعمال کی جاتی ہیں کیونکہ وہ ایک مخصوصیت کے نقطہ نظر سے کام کرنے کے لئے آسان ہیں کہ شناخت ہیں. آپ کو سب سے زیادہ موجودہ ایچ ٹی ایم ایل کے صفحات کو کلاس کے صفتوں سے بھرنے کے لئے مل جائے گا، جن میں سے کچھ ایک دستاویز میں کئی مرتبہ بار بار بار بار بار بار بار بار بار دکھائے جاتے ہیں جو صرف ایک بار ظاہر ہوتے ہیں.
ID منتخب کنندگان
ID منتخب کنندہ آپ کو ٹیگ یا دیگر ایچ ٹی ایم ایل عنصر کے ساتھ مل کر بغیر کسی مخصوص انداز میں ایک نام دینے کی اجازت دیتا ہے . کہہ دو کہ آپ نے اپنے ایچ ٹی ایم ایل مارک اپ میں تقسیم کیا تھا جس میں ایک واقعہ کے متعلق معلومات شامل ہیں.
آپ اس تقسیم کو "ایونٹ" کی شناخت دے سکتے ہیں، اور پھر اگر آپ 1 پکسل وسیع سیاہ سرحد کے ساتھ تقسیم کرتے ہیں تو آپ اس طرح ایک شناختی کوڈ لکھتے ہیں:
#event {سرحد: 1px ٹھوس # 000؛ }
ID منتخبین کے ساتھ چیلنج یہ ہے کہ وہ ایچ ٹی ایم ایل دستاویز میں بار بار نہیں کیا جا سکتا. انہیں منفرد ہونا ضروری ہے (آپ اپنی سائٹ کے ایک سے زیادہ صفحات پر ایک ہی شناخت استعمال کرسکتے ہیں، لیکن صرف ایک ہی ایچ ٹی ایم ایل دستاویز میں صرف ایک بار). لہذا اگر آپ کے 3 واقعات ہیں تو یہ سب سرحد کی ضرورت ہے، آپ انہیں "ایونٹ 1"، "ایونٹ 2" اور "ایونٹ 3" اور ان میں سے ہر ایک سٹائل کی شناخت دینے کی ضرورت ہوگی. لہذا، "ایونٹ" کے پیش نظر طبقے کی خاصیت کو استعمال کرنے اور ان سب کو ایک ہی وقت میں اندازہ کرنے کے لئے بہت آسان ہو گا.
شناختی صفتوں کے ساتھ ایک اور چیلنج یہ ہے کہ ان کے طبقے کی صفات کے مقابلے میں ان کی اعلی وضاحت ہے. اس کا مطلب یہ ہے کہ اگر آپ کو سی ایس ایس کرنے کی ضرورت ہے جو پہلے سے قائم شدہ سٹائل کو ہٹانا پڑتا ہے، تو آپ ایسا کرنے کے لئے مشکل ہوسکتا ہے کہ آپ نے شناختی ID پر بھروسہ کیا ہے. اس وجہ سے یہ ہے کہ بہت سے ویب ڈویلپرز ان کے مارک اپ میں شناخت کے استعمال سے دور ہو گئے ہیں، یہاں تک کہ اگر وہ صرف ایک بار اس قدر کا استعمال کرنا چاہتے ہیں، اور اس کے بدلے تقریبا تمام شیلیوں کے لئے کم مخصوص کلاس کی خاصیت کو تبدیل کر دیا ہے.
ایک ایسا علاقہ جہاں ID کی صفات کھیل میں آتی ہے، جب آپ ایک صفحہ بنانا چاہتے ہیں جو ان صفحہ میں لنگر لنکس ہے. مثال کے طور پر، اگر آپ کے پاس پارلایکس اسٹائل کی ویب سائٹ ہے جس میں لنکس کے ساتھ ایک صفحے پر تمام مواد شامل ہوتی ہے جو اس صفحے کے مختلف حصوں میں "چھلانگ" ہے. یہ شناختی شناخت اور متن کے لنکس کا استعمال کرتے ہوئے کیا جاتا ہے جو ان لنگر کے لنکس کا استعمال کرتے ہیں.
آپ کو صرف اس خصوصیت کی قدر، # علامت سے پہلے، لنک کی href خصوصیت پر، اس طرح کی قیمت میں شامل کریں گے:
یہ لنک ہے
کلک کیا یا چھوا دیا، تو یہ لنک اس صفحے کے حصے میں چھلانگ گا جس میں یہ شناخت ہے. اگر صفحے پر کوئی عنصر اس ID کی قیمت کا استعمال نہیں کرتے تو، لنک کچھ بھی نہیں کرے گا.
یاد رکھو، اگر آپ کسی سائٹ پر ان صفحہ پر لنک بنانا چاہتے ہیں تو، شناختی خصوصیات کے استعمال کی ضرورت ہو گی، لیکن آپ اب بھی عام سی ایس ایس اسٹائل مقاصد کے لئے کلاسوں میں تبدیل کر سکتے ہیں. اس طرح میں آج صفحات کو نشان زد کرتا ہوں - میں کلاس کے انتخاب کاروں کو ہر ممکن حد تک ممکنہ طور پر استعمال کرتا ہوں اور صرف اس وقت صرف شناختی طور پر استعمال کرتا ہوں جب مجھے صرف سی ایس ایس کے لئے ہک کے طور پر کام کرنے کی ضرورت نہیں ہے بلکہ ایک صفحہ میں لنک بھی شامل ہے.
جینیفر کریین کی طرف سے اصل مضمون. 8/9/17 پر جیریمی Girard کی طرف سے ترمیم