ວິທີການປ່ຽນການເຊື່ອມໂຍງພາຍໃຕ້ຫນ້າເວັບ

ລົບລິ້ງດ້ານລຸ່ມຫຼືສ້າງ Dotted Dashed, ຫຼື Double Underlined Links

ໂດຍຕົວຢ່າງ, ຕົວທ່ອງເວັບເວັບໄຊຕ໌ທີ່ມີຄໍເຕົ້າໄຂ່ທີ່ CSS ບາງຢ່າງທີ່ພວກເຂົາໃຊ້ກັບອົງປະກອບ HTML ສະເພາະ. ຖ້າທ່ານບໍ່ສາມາດຂຽນຂໍ້ມູນແບບນີ້ຕໍ່ກັບແບບຟອມຂອງເວັບໄຊທ໌ຂອງທ່ານເອງໄດ້, ຫຼັງຈາກນັ້ນມັນຈະຖືກນໍາໃຊ້. ສໍາລັບ hyperlinks, ແບບສະແດງແບບເລີ່ມຕົ້ນແມ່ນວ່າຂໍ້ຄວາມໃດຫນຶ່ງທີ່ເຊື່ອມໂຍງຈະເປັນສີຟ້າແລະຖືກເນັ້ນຫນັກ. ຕົວທ່ອງເວັບເຮັດແບບນີ້ດັ່ງນັ້ນຜູ້ເຂົ້າຊົມເວັບໄຊທ໌ນີ້ສາມາດເບິ່ງຂໍ້ຄວາມທີ່ຖືກເຊື່ອມໂຍງໄດ້ຢ່າງງ່າຍດາຍ. ຜູ້ອອກແບບເວັບໄຊຕ໌ຫຼາຍຄົນບໍ່ສົນໃຈສໍາລັບຮູບແບບຕ່າງໆໃນຕອນຕົ້ນ, ໂດຍສະເພາະແມ່ນຜູ້ທີ່ເນັ້ນຫນັກໃສ່. ຂໍຂອບໃຈ, CSS ເຮັດໃຫ້ມັນງ່າຍທີ່ຈະປ່ຽນແປງລັກສະນະຂອງຜູ້ທີ່ເນັ້ນຫນັກຫຼືເອົາໃຫ້ເຂົາເຈົ້າຫມົດ.

ການຖອດລະຫັດຕາມເສັ້ນທາງຂໍ້ຄວາມອອກ

ຂໍ້ຄວາມທີ່ເຂົ້າໃຈສາມາດທ້າທາຍຫຼາຍທີ່ຈະອ່ານຂໍ້ຄວາມທີ່ບໍ່ໄດ້ຖືກເນັ້ນຫນັກ. ນອກຈາກນັ້ນ, ນັກອອກແບບຫຼາຍຄົນກໍ່ບໍ່ສົນໃຈລັກສະນະຂອງການເຊື່ອມໂຍງຂໍ້ຄວາມ. ໃນກໍລະນີເຫຼົ່ານີ້, ທ່ານອາດຈະຕ້ອງການລຶບລ້າງບັນດາຂໍ້ຫ້າມເຫລົ່ານີ້ຢ່າງສົມບູນ.

ເພື່ອລຶບຂໍ້ມູນຈາກການເຊື່ອມໂຍງຂໍ້ຄວາມ, ທ່ານຈະໃຊ້ຄຸນສົມບັດ CSS-decoration. ນີ້ແມ່ນ CSS ທີ່ທ່ານຈະຂຽນເພື່ອເຮັດສິ່ງນີ້:

{text-decoration: none }

ດ້ວຍເສັ້ນຫນຶ່ງຂອງ CSS, ທ່ານຈະລຶບຂໍ້ຄວາມຈາກຂໍ້ຄວາມທັງຫມົດ. ເຖິງແມ່ນວ່ານີ້ແມ່ນແບບທົ່ວໆໄປ (ມັນໃຊ້ຕົວເລືອກອົງປະກອບ), ມັນຍັງມີຄວາມສະເພາະຫຼາຍກວ່າແບບຕົວທ່ອງເວັບທີ່ບໍ່ຖືກຕ້ອງ. ເນື່ອງຈາກວ່າຄໍເຕົ້າໄຂ່ທີ່ເລີ່ມຕົ້ນເຫຼົ່ານີ້ແມ່ນສິ່ງທີ່ສ້າງຄວາມເຄັ່ງຄັດເພື່ອເລີ່ມຕົ້ນດ້ວຍ, ນັ້ນແມ່ນສິ່ງທີ່ທ່ານຕ້ອງການສໍາເລັດຮູບ.

ການລະມັດລະວັງກ່ຽວກັບການຖອນກໍານົດ

ຢ່າງເຫັນໄດ້ຊັດ, ການກໍາຈັດບັນດາຂໍ້ກໍານົດທີ່ແນ່ນອນອາດແມ່ນສິ່ງທີ່ທ່ານຕ້ອງການສໍາເລັດ, ແຕ່ທ່ານຄວນຈະລະມັດລະວັງເມື່ອທ່ານເຮັດເຊັ່ນນີ້. ບໍ່ວ່າທ່ານຢາກເບິ່ງເສັ້ນທາງເຊື່ອມຕໍ່ຫລືບໍ່, ທ່ານບໍ່ສາມາດໂຕ້ຖຽງວ່າມັນເຮັດໃຫ້ມັນຊັດເຈນກ່ຽວກັບຂໍ້ຄວາມທີ່ຖືກເຊື່ອມໂຍງແລະບໍ່ແມ່ນ. ຖ້າທ່ານເອົາໃຈໃສ່ເບື້ອງລຸ່ມຫຼືປ່ຽນສີທີ່ເຊື່ອມໂຍງສີຟ້າແບບເດີມ, ທ່ານຄວນໃຫ້ແນ່ໃຈວ່າທ່ານແທນທີ່ດ້ວຍຮູບແບບທີ່ຍັງອະນຸຍາດໃຫ້ຂໍ້ຄວາມທີ່ເຊື່ອມໂຍງໂດດເດັ່ນ. ນີ້ຈະເຮັດໃຫ້ມີປະສົບການທີ່ຫນ້າສົນໃຈຫຼາຍສໍາລັບນັກທ່ອງທ່ຽວຂອງເວັບໄຊທ໌ຂອງທ່ານ.

ບໍ່ເນັ້ນໃສ່ການບໍ່ເຊື່ອມຕໍ່

ຄວາມລະມັດລະວັງກ່ຽວກັບການເຊື່ອມຕໍ່ແລະເນັ້ນຫນັກອີກ, ບໍ່ເນັ້ນຂໍ້ຄວາມທີ່ບໍ່ແມ່ນການເຊື່ອມຕໍ່ເປັນວິທີການເນັ້ນຫນັກໃສ່ມັນ. ປະຊາຊົນໄດ້ຄາດຫວັງວ່າຂໍ້ຄວາມທີ່ຖືກເນັ້ນຫນັກຈະເປັນການເຊື່ອມໂຍງ, ດັ່ງນັ້ນຖ້າທ່ານເນັ້ນຫນັກເນື້ອໃນເພື່ອເພີ່ມຄວາມເນັ້ນຫນັກ (ແທນທີ່ຈະເຮັດໃຫ້ມັນມີຄວາມຫນາແຫນ້ນຫຼືປັບມັນ), ທ່ານສົ່ງຂໍ້ຄວາມທີ່ຜິດພາດແລະຈະເຮັດໃຫ້ຜູ້ໃຊ້ສັບສົນ.

ປ່ຽນແປ້ນຢູເຣນກັບຈຸດຫຼືເສັ້ນຜ່າສູນກາງ

ຖ້າທ່ານຕ້ອງການໃຫ້ໂຄສະນາຂໍ້ຄວາມຂອງທ່ານເນັ້ນຫນັກ, ແຕ່ປ່ຽນແບບຂອງສິ່ງທີ່ຖືກເນັ້ນຈາກການຊອກຫາແບບ Default, ເຊິ່ງເປັນເສັ້ນ "soldi", ທ່ານກໍ່ສາມາດເຮັດໄດ້ເຊັ່ນກັນ. ແທນທີ່ຈະເສັ້ນແຂງນັ້ນ, ທ່ານສາມາດໃຊ້ຈຸດເພື່ອເນັ້ນໃສ່ການເຊື່ອມຕໍ່ຂອງທ່ານ. ເພື່ອເຮັດສິ່ງນີ້, ທ່ານຍັງຈະລຶບລວງເອົາໃຈໃສ່, ແຕ່ທ່ານຈະແທນທີ່ມັນມີຄຸນສົມບັດແບບຊາຍແດນລຸ່ມ:

{text-decoration: none ຂອບດ້ານລຸ່ມ: 1px dotted; }

ນັບຕັ້ງແຕ່ທ່ານໄດ້ໂຍກຍ້າຍອອກຂໍ້ກໍານົດມາດຖານ, ຈຸດຫນຶ່ງແມ່ນຈຸດດຽວທີ່ປາກົດ.

ທ່ານສາມາດເຮັດສິ່ງດຽວກັນທີ່ຈະໄດ້ຮັບການຂີ້ຕົວະ. ພຽງແຕ່ດັດແປງແບບຊາຍແດນ - ລຸ່ມເພື່ອ dashed:

{text-decoration: none border-bottom: 1px dashed; }

ປ່ຽນສີເບື້ອງລຸ່ມ

ວິທີການອື່ນທີ່ຈະດຶງດູດຄວາມສົນໃຈກັບການເຊື່ອມຕໍ່ຂອງທ່ານແມ່ນເພື່ອປ່ຽນສີຂອງສີຂຽວ. ພຽງແຕ່ໃຫ້ແນ່ໃຈວ່າສີເຫມາະກັບ ໂຄງການສີ ຂອງທ່ານ.

{text-decoration: none ຂອບດ້ານລຸ່ມ: 1px ສີແດງແຂງ; }

Double Underlines

trick ທີ່ຈະນໍາໃຊ້ຂໍ້ກໍານົດ double ແມ່ນວ່າທ່ານຕ້ອງມີການປ່ຽນແປງຂອບຂອງຂອບ. ຖ້າທ່ານສ້າງຂອບເຂດກວ້າງ 1px, ທ່ານຈະຈົບລົງດ້ວຍແຖບສີແດງທີ່ມີລັກສະນະຄ້າຍຄືເບື້ອງດຽວ.

{text-decoration: none ດ້ານລຸ່ມ: 3px double; }

ນອກນັ້ນທ່ານຍັງສາມາດນໍາໃຊ້ບັນດາຂໍ້ກໍານົດທີ່ມີຢູ່ແລ້ວເພື່ອສ້າງລາຍລະອຽດສອງຢ່າງດ້ວຍລັກສະນະອື່ນໆເຊັ່ນ: ຫນຶ່ງໃນສາຍທີ່ຖືກຈຸດໆ:

{border-bottom: 1px double; }

ບໍ່ລືມປະເທດເຊື່ອມຕໍ່

ທ່ານສາມາດເພີ່ມຮູບແບບຊາຍແດນ - ລຸ່ມກັບການເຊື່ອມຕໍ່ຂອງທ່ານຢູ່ໃນລັດຕ່າງໆເຊັ່ນ: hover,: active, or: visited. ນີ້ສາມາດສ້າງປະສົບການແບບ "rollover" ງາມສໍາລັບນັກທ່ອງທ່ຽວໃນເວລາທີ່ທ່ານນໍາໃຊ້ຊັ້ນຮຽນ pseudo "hover". ເພື່ອເຮັດໃຫ້ເສັ້ນລວງຕາສອງຈຸດທີ່ປາກົດຢູ່ໃນເວລາທີ່ທ່ານເລື່ອນໃສ່ການເຊື່ອມຕໍ່:

{text-decoration: none } a: hover {border-bottom: 1px dotted; }

ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ແກ້ໄຂໂດຍ Jeremy Girard