Linklar veb-sahifalarda juda ko'p uchraydi, biroq ko'pgina veb-dizaynerlar CSS- ga ega bo'lgan kuchlarni o'zlarining aloqalarini samarali boshqarish va boshqarishda qo'llashadi. Siz tashrif buyurgan, hover va faol holatlar bilan bog'lanishni belgilashingiz mumkin. Shuningdek, chekka va orqa qismlar bilan ishoratlaringizni yanada ko'proq pizzaz berishingiz yoki ularni tugma yoki hatto tasvirlar kabi qilishlariga yordam berishingiz mumkin.
Ko'pincha veb-dizaynerlar "a" tegida uslubni belgilab olish bilan boshlanadi:
{rangi: qizil; }Bu havolaning barcha tomonlarini targ'ib qiladi (hover, visitor va faol). Har bir qismni alohida-alohida tarjima qilish uchun, siz soxta sinflarni ishlatishingiz kerak.
Link psixologik-sinflar
Siz aniqlay oladigan aloqa pseudo-sinflarining to'rtta asosiy turi mavjud:
- : Link - bu havola uchun standart uslub
- : tashrif buyurilgan - bog'lanish tugagandan so'ng
- : hover - sichqoncha sifatida bog'lanish (oldindan bosish)
- : faol - bog'lanish tıklandığında o'ng
Bog'cha pseudo-sinfini aniqlash uchun uni CSS tanlagichidagi yorliq bilan ishlating. Shunday qilib, barcha havolalaringizning ranglarini kul rangga o'zgartirish uchun quyidagilarni yozing:
a: tashrif buyurilgan {rangi: kulrang; }Agar siz bir bog'lovchi soxta sinfni tarbiyalamoqchi bo'lsangiz, ularni barchasini tarbiyalash yaxshi bo'ladi. Shunday qilib siz boshqa natijalar bilan hayron bo'lmaysiz. Shunday qilib agar siz faqat tashrif buyurgan rangi kul rangga o'zgartirishni xohlasangiz, ulanishlaringizning barcha boshqa pseudo-xususiyatlari qora bo'lib qoladi, shuning uchun quyidagini yozishingiz mumkin:
a: havola, a: hover, a: faol {rangi: qora; } a: tashrif buyurilgan {rangi: kulrang; }Ulanish ranglarini o'zgartiring
Uslublar bilan bog'lanishning eng mashhur usuli - sichqoncha ustiga surilgan rangni o'zgartirish:
{rangi: # 00f; } a: hover {color: # 0f0; }Shuni unutmangki, siz linkni ular bilan bog'langanidek qanday ko'rinishini ta'sir qilishi mumkin: activ property:
{rangi: # 00f; } a: faol {rangi: # f00; }Yoki ushbu havola quyidagi tashrif buyurganingizdan so'ng qanday ko'rinishi mumkin: visit property:
{rangi: # 00f; } a: tashrif buyurilgan {color: # f0f; }Hammasini birlashtirish uchun:
{rangi: # 00f; } a: tashrif buyurilgan {color: # f0f; } a: hover {color: # 0f0; } a: faol {rangi: # f00; }Belgilar yoki bullet qo'shish uchun havolalarga fonlarni joylashtiring
Siz fonni "Chiroyli fon" maqolasidagi kabi fonga qo'yishingiz mumkin, biroq fon bilan biroz o'ynashingiz bilan bog'liq ikonka ega bo'lgan havola yaratishingiz mumkin. Sizning matningiz katta bo'lmasa, 15px atrofida kichik belgini tanlang. Orqa fonni havolaning bir tomoniga joylashtiring va takrorlash variantini takrorlashni o'rnating. So'ngra, havola ostidagi matnning belgini ko'rish uchun chap yoki o'ngga etarlicha bo'ylab harakatlanishini ta'minlang.
a {padding: 0 2px 1px 15px; Orqa fon: #fff url (ball.gif) left center no-repeat; rang: # c00; }Belgini olganingizdan so'ng, havolani o'zgartirish uchun havolani, faolni va tashrif buyurgan belgilar bilan boshqa tasvirni o'rnatishingiz mumkin:
a {padding: 0 2px 1px 15px; Orqa fon: #fff url (ball.gif) left center no-repeat; rang: # c00; } a: hover {fon: #fff url (ball2.gif) chap-markazga qaytarilmaydi; } a: faol {fon: #fff url (ball3.gif) left center no-repeat; }Sizning linklaringiz tugma kabi ko'rinadi
Tugmalar juda mashhur, biroq CSS kelgunga qadar siz rasmlarni ishlatib tugmalar yaratishingiz kerak. Yaxshiyamki, CSS bilan osongina tugmacha effekt yaratish uchun chegara uslubi mavjud.
{border: 4px boshlanishi; to'ldirish: 2px; matnni bezash: yo'q; } a: faol {border: 4px ichki; }Eslatib o'tamiz, ranglarni boshdan-oxirga va ichki jihozlarga joylashtirganingizda brauzerlar siz kutganingizdek ularni yaratishga imkon bermaydi. Xullas, bu erda rangli chegara bilan qiziqarli tugma bor:
{border-style: solid; border-width: 1px 4px 4px 1px; matnni bezash: yo'q; to'ldirish: 4px; border-color: # 69f # 00f # 00f # 69f; }Va tugmachalar havolasini yoqish va faol uslublarga ta'sir qilishingiz mumkin, faqat shu pseudo-sinflarni ishlatishingiz mumkin:
a: bog'lanish {border-style: solid; border-width: 1px 4px 4px 1px; matnni bezash: yo'q; to'ldirish: 4px; border-color: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }