ویب صفحات پر لنکس بہت عام ہیں، لیکن بہت سارے ویب ڈیزائنرز اس طاقت کو نہیں سمجھتے ہیں کہ ان کے پاس سی ایس ایس کے ساتھ ہے اور ان کے لنکس کو مؤثر طریقے سے منظم کرنا ہے. آپ ملاحظہ کردہ، ہور اور فعال ریاستوں کے ساتھ لنکس کی وضاحت کرسکتے ہیں. آپ اپنی لنکس کو زیادہ پزیز دینے کے لئے سرحدوں اور پس منظر کے ساتھ بھی کام کرسکتے ہیں یا انہیں بٹنوں یا اس سے بھی تصاویر کی طرح نظر آتے ہیں.
زیادہ سے زیادہ ویب ڈیزائنر "ایک" ٹیگ پر ایک انداز کی تعریف کرتے ہوئے شروع کرتے ہیں:
ایک {رنگ: سرخ؛ }یہ لنک کے تمام پہلوؤں کو وضع کرے گا (ہور، ملاحظہ کیا، اور فعال). ہر حصے کو علیحدہ علیحدہ کرنے کے لئے، آپ کو لنک چھسو کلاسوں کا استعمال کرنا ہوگا.
لنک پیسو کلاس
آپ کی وضاحت کر سکتے ہیں کہ چار بنیادی اقسام کی چھپی ہوئی کلاسیں ہیں:
- لنک: یہ لنک کے لئے ڈیفالٹ سٹائل ہے
- : ملاحظہ کیا - ایک لنک کے بعد کلک کیا گیا ہے
- : ہور - ایک ماؤس کے طور پر ایک لنک (پہلے سے کلک) پر لگایا جاتا ہے
- : فعال - حق کے طور پر لنک کلک کیا جا رہا ہے
لنک چھسو کلاس کی وضاحت کرنے کے لئے، اپنے سی ایس ایس کے انتخاب کنندہ میں ٹیگ کے ساتھ استعمال کریں. لہذا، بھوری رنگ کے لئے آپ کے تمام لنکس کا دورہ شدہ رنگ تبدیل کرنے کے لئے، لکھیں:
ایک: کا دورہ کیا {رنگ: سرمئی؛ }اگر آپ ایک لنک چھسو کلاس سٹائل کرتے ہیں، تو ان سب کو سٹائل کرنے کا ایک اچھا خیال ہے. اس طرح آپ غیر ملکی نتائج کی طرف سے حیران نہیں ہوں گے. لہذا اگر آپ صرف دورہ شدہ رنگ تبدیل کرنے کے لئے تبدیل کرنا چاہتے ہیں، جبکہ آپ کے لنکس کے تمام دیگر چھٹو خصوصیات سیاہ ہیں، آپ لکھتے ہیں:
ایک: لنک، ایک: ہور، ایک: فعال {رنگ: سیاہ؛ } ایک: کا دورہ کیا {رنگ: سرمئی؛ }لنک رنگ تبدیل کریں
سٹائل کے لنکس کے سب سے زیادہ مقبول طریقہ رنگ تبدیل کرنا ہے جب ماؤس اس پر چلتا ہے:
ایک {رنگ: # 00f؛ } a: ہور {رنگ: # 0f0؛ }لیکن مت بھولنا کہ آپ اس بات پر اثر انداز کر سکتے ہیں کہ کس طرح لنک لگ رہا ہے جیسے وہ اس پر کلک کر رہے ہیں: فعال ملکیت:
ایک {رنگ: # 00f؛ } ایک: فعال {رنگ: # f00؛ }یا اس لنک کے بعد آپ نے اس کا دورہ کیا ہے اس کے بعد آپ کا ملاحظہ کیا گیا: ملاحظہ کی گئی جائیداد:
ایک {رنگ: # 00f؛ } a: کا دورہ کیا {رنگ: # f0f؛ }یہ سب ایک ساتھ ڈالنے کے لئے:
ایک {رنگ: # 00f؛ } a: کا دورہ کیا {رنگ: # f0f؛ } a: ہور {رنگ: # 0f0؛ } ایک: فعال {رنگ: # f00؛ }شبیہیں یا بلٹ شامل کرنے کے لنکس پر پس منظر رکھو
آپ سجیلا پس منظر آرٹیکل کے طور پر ایک لنک پر ایک پس منظر ڈال سکتے ہیں، لیکن پس منظر کے ساتھ کھیلنے سے، آپ ایک ایسے لنک بن سکتے ہیں جو منسلک آئیکن ہے. ایک آئکن کو منتخب کریں جو تقریبا 15px سے 15px ہے، جب تک آپ کا ٹیکسٹ بڑا نہیں ہے. اس پس منظر کو ایک لنک کے ایک طرف رکھیں اور دوبارہ دوپہر کے لئے دوبارہ اختیار قائم کریں. پھر، لنک پیڈ تاکہ آئکن کو دیکھنے کے لئے بائیں یا دائیں طرف لنک کے اندر متن کافی دور تک منتقل ہوجائے.
a {padding: 0 2px 1px 15px؛ پس منظر: #fff url (ball.gif) چھوڑ دیا مرکز کوئی بار بار نہیں؛ رنگ: # c00؛ }ایک بار جب آپ کا آئکن مل گیا ہے، تو آپ لنک کو تبدیل کرنے کیلئے مختلف تصویر کو اپنے ہور، فعال، اور ملاحظہ کردہ شبیہیں کے طور پر مقرر کرسکتے ہیں:
a {padding: 0 2px 1px 15px؛ پس منظر: #fff url (ball.gif) چھوڑ دیا مرکز کوئی بار بار نہیں؛ رنگ: # c00؛ } a: ہور {پس منظر: #fff url (ball2.gif) بائیں مرکز کو دوبارہ نہیں؛ } ایک: فعال {پس منظر: #fff url (ball3.gif) بائیں مرکز کو دوبارہ نہیں؛ }بٹنوں کی طرح آپ کے روابط دیکھیں
بٹن بہت مقبول ہیں، لیکن جب تک سی ایس ایس بھی نہیں آئے، آپ کو تصاویر کا استعمال کرتے ہوئے بٹن بنانا پڑا، جس سے آپ کے صفحات کو زیادہ وقت لگۓ. خوش قسمتی سے، وہاں ایک سرحد سٹائل ہے جو سی ایس ایس کے ساتھ آسانی سے ایک بٹن کی طرح اثر پیدا کرنے میں آپ کی مدد کرسکتا ہے.
ایک {سرحد: 4px شروع بھرتی: 2px؛ ٹیکسٹ سجاوٹ: کوئی نہیں؛ } ایک: فعال {سرحد: 4px اندرونی؛ }یاد رکھیں، جب آپ شروع اور پوشیدہ شیلیوں پر رنگ ڈالتے ہیں، تو براؤزر آپ کو توقع کر سکتے ہیں جیسے آپ ان کو فراہم کرنے کی امکان نہیں ہیں. لہذا، رنگ کی سرحدوں کے ساتھ یہاں ایک فانسیر بٹن ہے:
ایک {سرحدی طرز: ٹھوس؛ سرحد چوڑائی: 1px 4px 4px 1px؛ ٹیکسٹ سجاوٹ: کوئی نہیں؛ بھرتی: 4px؛ سرحد کا رنگ: # 69f # 00f # 00f # 69f؛ }اور آپ ایک بٹن کے ہور اور فعال شیلیوں کو بھی ساتھ ساتھ متاثر کرسکتے ہیں، اس کے ساتھ ساتھ صرف ان چھسو کلاسوں کا استعمال کرتے ہیں.
ایک: لنک {سرحد سٹائل: ٹھوس؛ سرحد چوڑائی: 1px 4px 4px 1px؛ ٹیکسٹ سجاوٹ: کوئی نہیں؛ بھرتی: 4px؛ سرحد کا رنگ: # 69f # 00f # 00f # 69f؛ } a: ہور {سرحدی رنگ: #ccc؛ }