ڪئين انداز سان سي ايس ڊي سان ڪڙيون

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

گهڻن ڊي ڊزائنر "هڪ" ٽيگ تي هڪ انداز جي وضاحت ڪندي شروع ڪري ٿو:

هڪ {رنگ: ڳاڙهو؛ }

اهو ڪڙي جي سڀني فڪر کي پورو ڪندو (هور، دورو ڪيو، ۽ فعال). انداز ۾ هر حصو الڳ الڳ ڪرڻ لاء، توهان لنڪ شيسوڊو-ڪلاس استعمال ڪرڻ گهرجن.

ڪڙي پيسودو ڪلاس

هتي چار بنيادي قسم جا لنڪ موصوف ڪلاس جيڪي توهان بيان ڪري سگھو ٿا:

• : لنڪ - اهو لنڪ لاء ڊفالٽ انداز آهي
• : گهمڻ کانپوء هڪ ڪڙي ڪلڪ ڪيو ويو آهي
• : hover - انهي جو مائڪرو هڪ ڪڙي تي اڏيل آهي (پري-ڪلڪ)
• : فعال، سڄي ڪڙي سان ڳنڍيل ٽڪيل کي ڪلڪ ڪيو وڃي ٿو

لنڪ پيسودو ڪلاس کي بيان ڪرڻ لاء، پنهنجي سي ايس ايس چونڊ ۾ ٽيگ سان استعمال ڪريو. تنهن ڪري، توهان جي سڀني ڪٽنب واري سائيز واري رنگ واري تبديلي تبديل ڪرڻ لاء، لکڻ لاء:

هڪ: ڪيو ويو آهي رنگ: ڳاڙهو؛ }

جيڪڏهن توهان هڪڙي ڪڙي جي تخليقي انداز جو اندازو آهي، اهو انهن سڀني کي انداز ڪرڻ لاء سٺو خيال آهي. انهي طريقي سان توهان کي ٻاهرين نتيجا کان حيران نه ڪيو ويندو. تنهن ڪري جيڪڏهن توهان چاهيو ويو ته دورو ٿيل رنگ تبديل ڪرڻ چاهيندا هئاسين، جڏهن توهان جي لنڪ جي ٻين سڀني سسودو خاصيتن کي ڪارو رهندو، توهان لکي سگهو ٿا:

هڪ: ڪڙي، هڪ: هور، هڪ: فعال {رنگ: ڪارو؛ } a: ڏٺو ويو: رنگ؛ ڳاڙھو؛ }

ڪڙي جو رنگ تبديل ڪريو

سڀ کان وڌيڪ مشهور انداز انداز جي لنڪ رنگ کي تبديل ڪرڻ آهي جڏهن ماهي هن کي ختم ڪري ٿو:

a {رنگ: # 00f؛ } a: hover {رنگ: # 0f0؛ }

پر اهو نه وساريندو ته توهان متاثر ڪري سگهو ٿا ڪئين ڪئين ظاهر آهي اهي ان سان ڪلڪ ڪري رهيا آهن: فعال ملڪيت:

a {رنگ: # 00f؛ } a: active {رنگ: # f00؛ }

يا ڪئين لنڪ ڏسڻ کانپوء توهان ان سان دورو ڪيو آهي: هتي آيو آهي جائزو:

a {رنگ: # 00f؛ } a: دورو ڪيو ويو <رنگ: # f0f؛ }

سڀني کي گڏجي رکڻ لاء:

a {رنگ: # 00f؛ } a: دورو ڪيو ويو <رنگ: # f0f؛ } a: hover {رنگ: # 0f0؛ } a: active {رنگ: # f00؛ }

شبيب يا بلٽ شامل ڪرڻ لاء لنڊن تي پس منظر ڏيو

توهان لنڪ تي پس منظر پس منظر پس منظر مضمون ۾ ڪري سگهو ٿا، پر ٿورو پس منظر سان راند ڪندي، توهان هڪ جڙيل ٺاهي سگهو ٿا جيڪو لاڳاپيل آئکن آهي. هڪ آئوٽ چونڊيو جيڪو ننڍڙو آهي، 15px جي 15 فوڪس کان، جيستائين توهان جو ٽيڪسٽ وڏو آهي. پسمنظر جي پس منظر جي هڪ پاسي ڏانهن جڳهه کي رکو ۽ ٻيهر ورجائي ڪرڻ جو اختيار مقرر نه ڪيو. ان کان پوء، لنڪ کي پيڊ ڪيو ته اهو ڳنڍيل لنڪ جي اندر منتقل ڪيو ويو آهي ڪافي جي کاٻي طرف کاٻي پاسي کي کاٻي پاسي ڏسڻ لاء.

a {padding: 0 2px 1px 15px؛ پس منظر: # ايفف يو آر ايل (ball.gif) بائیں مرڪز ڪو-ورڻو؛ رنگ: # c00؛ }

هڪ دفعو توهان پنهنجو آئوٽ حاصل ڪيو، توهان ڪڙي تبديلي ٺاهڻ لاء توهان جي هور، فعال، ۽ دورو ڪيل آئونٽن وانگر مختلف تصوير سيٽ ڪري سگهو ٿا.

a {padding: 0 2px 1px 15px؛ پس منظر: # ايفف يو آر ايل (ball.gif) بائیں مرڪز ڪو-ورڻو؛ رنگ: # c00؛ } a: hover {background: #fff url (ball2.gif) بائیں مرڪز no-repeat؛ } a: active {background: #fff url (ball3.gif) ڇڏي ويو مرڪز no-repeat؛ }

پنھنجي لنڪ کي ڏسو بٽڻ وانگر ڏس

Buttons تمام مقبول آهن، پر اي ايس ايس سان گڏ آيا، توهان تصويرن جي استعمال ڪندي بٽڻ ٺاهي ها، جنهن جي توهان جا صفحا گهڻي وقت تائين وٺن ٿا. خوش قسمت، اتي سرحد جو انداز آهي، جيڪا توهان جي بٽڻ وانگر هڪ سسٽم وانگر آساني سان پيدا ڪرڻ ۾ مدد ڪري سگھي ٿي.

a {سرحد: 4px شروعات؛ لڳايل: 2px؛ لکت جي سجاڳي: ٻيو؛ } a: active {border: 4px inset؛ }

نوٽ، جڏهن توهان شروعات تي رنگن ۽ اندازن کي ڇڪايو، برائوزر انهن جي رونق ٿيڻ جي جيترو ممڪن ناهي جيترو توهان جي توقع هجي. تنهن ڪري، هتي هڪ فينئرئر بٽڻ سان رنگين سرحدن سان.

a {border-style: solid؛ سرحد جي چوٽي: 1px 4px 4px 1px؛ لکت جي سجاڳي: ٻيو؛ گنجائش: 4px؛ سرحد رنگ: # 69f # 00f # 00f # 69f؛ }

۽ توهان هڪ بٽڻ جي هور ۽ فعال شاليز تي ڳنڍيل طريقي سان ڳنڍيل آهي، صرف اهي اهي موسو-طبقن کي استعمال ڪن ٿا.

a: لنڪ {سرحد وارو: مضبوط؛ سرحد جي چوٽي: 1px 4px 4px 1px؛ لکت جي سجاڳي: ٻيو؛ گنجائش: 4px؛ سرحد رنگ: # 69f # 00f # 00f # 69f؛ } a: hover {border-color: #ccc؛ }