ລິ້ງຄ໌ທີ່ເປັນປະໂຫຍດຫຼາຍໃນຫນ້າເວັບ, ແຕ່ຜູ້ອອກແບບເວັບບໍ່ໄດ້ຮັບຮູ້ເຖິງອໍານາດທີ່ພວກເຂົາມີກັບ CSS ເພື່ອຈັດການແລະຈັດການເຊື່ອມຕໍ່ຂອງພວກເຂົາຢ່າງມີປະສິດທິຜົນ. ທ່ານສາມາດກໍານົດການເຊື່ອມຕໍ່ທີ່ມີການຢ້ຽມຢາມ, ສະພາບອາກາດ, ແລະກິດຈະກໍາຕ່າງໆ. ນອກນັ້ນທ່ານຍັງສາມາດເຮັດວຽກຮ່ວມກັບຊາຍແດນແລະພື້ນຫລັງເພື່ອໃຫ້ການເຊື່ອມຕໍ່ຂອງທ່ານຫຼາຍ pizzaz ຫຼືເຮັດໃຫ້ພວກເຂົາຄ້າຍຄືປຸ່ມຫຼືພາບຕ່າງໆ.
ນັກອອກແບບເວັບສ່ວນໃຫຍ່ເລີ່ມອອກໂດຍການກໍານົດແບບລົງເທິງແທັກ "a":
a {color: red }ນີ້ຈະ ສະທ້ອນທຸກດ້ານຂອງການເຊື່ອມໂຍງ (hover, ໄດ້ໄປຢ້ຽມຢາມແລະເຮັດວຽກ). ເພື່ອໃຫ້ແຕ່ລະພາກແຍກກັນ, ທ່ານຕ້ອງໃຊ້ການເຊື່ອມຕໍ່ແບບ pseudo-classes.
Link Pseudo-Classes
ມີສີ່ປະເພດພື້ນຖານຂອງການເຊື່ອມຕໍ່ແບບ pseudo-classes ທີ່ທ່ານສາມາດກໍານົດ:
- : link - ນີ້ແມ່ນຮູບແບບເລີ່ມຕົ້ນສໍາລັບການເຊື່ອມຕໍ່
- : ໄດ້ໄປຢ້ຽມຢາມ - ຫຼັງຈາກການເຊື່ອມຕໍ່ໄດ້ຖືກຄລິກ
- : hover - ເປັນຫນູແມ່ນ poised ໃນໄລຍະການເຊື່ອມຕໍ່ໃດຫນຶ່ງ (pre-click)
- : active - right as link is being clicked
ເພື່ອກໍານົດການເຊື່ອມຕໍ່ pseudo-class, ໃຫ້ໃຊ້ມັນກັບແທັກໃນ ຕົວເລືອກ CSS ຂອງທ່ານ. ດັ່ງນັ້ນ, ເພື່ອປ່ຽນສີທີ່ໄດ້ໄປຢ້ຽມຢາມຂອງການເຊື່ອມຕໍ່ທັງຫມົດຂອງທ່ານກັບສີຂີ້ເຖົ່າ, ຂຽນ:
a: visited {color: gray }ຖ້າທ່ານສະໄຕແບບດຽວກັບການເຊື່ອມໂຍງ, ມັນເປັນການຄິດທີ່ດີທີ່ຈະໃຫ້ພວກເຂົາເຂົ້າໃຈ. ວິທີທີ່ທ່ານຈະບໍ່ໄດ້ຮັບຄວາມປະຫລາດໃຈໂດຍຜົນໄດ້ຮັບພາຍນອກ. ດັ່ງນັ້ນ, ຖ້າທ່ານພຽງແຕ່ຕ້ອງການປ່ຽນສີທີ່ເຂົ້າມາຫາສີຂີ້ເຖົ່າ, ໃນຂະນະທີ່ຄຸນສົມບັດ pseudo - ຄຸນສົມບັດອື່ນໆຂອງການເຊື່ອມຕໍ່ຂອງທ່ານຍັງມີສີດໍາ, ທ່ານຕ້ອງຂຽນວ່າ:
a: link, a: hover, a: active {color: black } a: visited {color: gray }ປ່ຽນສີລິ້ງ
ວິທີການທີ່ນິຍົມຫລາຍທີ່ສຸດກັບການເຊື່ອມຕໍ່ຂອງແບບແມ່ນເພື່ອປ່ຽນສີໃນເວລາທີ່ຫນູຫນີໄປກວ່າມັນ:
a {color: # 00f } a: hover {color: # 0f0 }ແຕ່ຢ່າລືມວ່າທ່ານສາມາດສົ່ງຜົນກະທົບຕໍ່ວິທີການເຊື່ອມຕໍ່ດັ່ງທີ່ພວກເຂົາກໍາລັງຄລິກໃສ່ມັນດ້ວຍ: ຊັບສິນທີ່ໃຊ້ງານ:
a {color: # 00f } a: active {color: # f00 }ຫຼືວິທີການເຊື່ອມຕໍ່ຫຼັງຈາກທີ່ທ່ານໄດ້ໄປຢ້ຽມຢາມມັນດ້ວຍ: ຊັບສິນໄປຢ້ຽມຢາມ:
a {color: # 00f } a: visited {color: # f0f }ເພື່ອເຮັດໃຫ້ມັນທັງຫມົດຮ່ວມກັນ:
a {color: # 00f } a: visited {color: # f0f } a: hover {color: # 0f0 } a: active {color: # f00 }ໃສ່ພື້ນຫລັງເທິງລິ້ງເພື່ອເພີ່ມໄອຄອນຫລືບັ້ງໄຟ
ທ່ານສາມາດສ້າງພື້ນຫລັງກ່ຽວກັບການເຊື່ອມຕໍ່ເຊັ່ນໃນບົດເລື່ອງພື້ນຫລັງທີ່ສວຍງາມ, ແຕ່ໂດຍການຫຼີ້ນກັບພື້ນຫລັງພຽງເລັກນ້ອຍ, ທ່ານສາມາດສ້າງລິ້ງທີ່ມີໄອຄອນທີ່ກ່ຽວຂ້ອງ. ເລືອກຮູບສັນຍາລັກທີ່ມີຂະຫນາດນ້ອຍ, ປະມານ 15px ໂດຍ 15px, ເວັ້ນເສຍແຕ່ວ່າຂໍ້ຄວາມຂອງທ່ານຂະຫນາດໃຫຍ່. ວາງພື້ນຖານໄປຫາຫນຶ່ງຂ້າງຂອງການເຊື່ອມໂຍງແລະຕັ້ງຄ່າຕົວເລືອກເຮັດຊ້ໍາຄືນຄືນໃຫມ່. ຫຼັງຈາກນັ້ນ, padd ເຊື່ອມຕໍ່ດັ່ງນັ້ນຂໍ້ຄວາມພາຍໃນລິ້ງຄ໌ແມ່ນຍ້າຍໄປໄກພຽງພໍໃນຊ້າຍຫຼືຂວາເພື່ອເບິ່ງຮູບສັນຍາລັກ.
{padding: 0 2px 1px 15px ພື້ນຫລັງ: #fff url (ball.gif) ສູນກາງຊ້າຍ no-repeat; ສີ: # c00; }ເມື່ອທ່ານໄດ້ icon ຂອງທ່ານ, ທ່ານສາມາດຕັ້ງຮູບພາບທີ່ແຕກຕ່າງກັນເປັນຮູບສັນຍາລັກຂອງທ່ານ, ການເຄື່ອນໄຫວແລະການເຂົ້າຊົມເພື່ອເຮັດໃຫ້ການປ່ຽນແປງການເຊື່ອມຕໍ່:
{padding: 0 2px 1px 15px ພື້ນຫລັງ: #fff url (ball.gif) ສູນກາງຊ້າຍ no-repeat; ສີ: # c00; } a: hover {background: #fff url (ball2.gif) left center no-repeat } a: active {background: #fff url (ball3gif) left center no-repeat }ເຮັດໃຫ້ການເຊື່ອມຕໍ່ຂອງທ່ານຄ້າຍຄືກັບປຸ່ມ
ປຸ່ມທີ່ມີຄວາມນິຍົມຫຼາຍ, ແຕ່ຈົນກ່ວາ CSS ມາພ້ອມກັນ, ທ່ານຕ້ອງສ້າງປຸ່ມທີ່ ໃຊ້ຮູບພາບ , ເຊິ່ງເຮັດໃຫ້ຫນ້າຂອງທ່ານໃຊ້ເວລາດົນກວ່າທີ່ຈະໂຫລດ. ໂຊກດີ, ມີແບບຊາຍແດນທີ່ສາມາດຊ່ວຍໃຫ້ທ່ານສ້າງຜົນກະທົບປຸ່ມຄ້າຍຄືກັນຢ່າງງ່າຍດາຍດ້ວຍ CSS.
{border: 4px outset padding: 2px text-decoration: none } a: active {border: 4px inset }ຫມາຍເຫດ, ເມື່ອທ່ານໃສ່ສີໃນຕອນເລີ່ມຕົ້ນແລະຮູບແບບ inset, ຕົວທ່ອງເວັບບໍ່ມີແນວໂນ້ມທີ່ຈະເຮັດໃຫ້ມັນຕາມທີ່ທ່ານອາດຈະຄາດຫວັງ. ດັ່ງນັ້ນ, ນີ້ແມ່ນປຸ່ມທີ່ມີສີສັນທີ່ມີເສັ້ນຂອບສີ:
{border-style: solid width-width: 1px 4px 4px 1px; text-decoration: none padding: 4px border-color: # 69f # 00f # 00f # 69f; }ແລະທ່ານສາມາດສົ່ງຜົນກະທົບຕໍ່ຮູບແບບການເປີດຕົວແລະການເຄື່ອນໄຫວຂອງປຸ່ມເຊື່ອມຕໍ່ປຸ່ມດຽວກັນ, ພຽງແຕ່ໃຊ້ pseudo-classes:
a: link {border-style: solid width-width: 1px 4px 4px 1px; text-decoration: none padding: 4px border-color: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc }