ຮຽນຮູ້ກ່ຽວກັບການນໍາພາໃນການອອກແບບເວັບໄຊຕ໌

ການອອກແບບເວັບໄດ້ສະເຫມີການຢືມຜູ້ໃຫຍ່ແລະຄໍານິຍາມຈາກໂລກຂອງການອອກແບບຮູບພາບແລະການພິມ. ນີ້ແມ່ນຄວາມຈິງໂດຍສະເພາະໃນເວລາທີ່ມັນກ່ຽວກັບ typography ເວັບ ແລະວິທີການທີ່ພວກເຮົາໄດ້ຮັບຕົວອັກສອນໃນຫນ້າເວັບຂອງພວກເຮົາ. ການປຽບທຽບເຫຼົ່ານີ້ແມ່ນບໍ່ສະເຫມີໄປ 1 ກັບ 1 ການແປ, ແຕ່ທ່ານແນ່ນອນສາມາດເບິ່ງບ່ອນໃດຫນຶ່ງລະບຽບວິໄນໄດ້ຮັບຜົນກະທົບອື່ນໆ. ນີ້ແມ່ນເຫັນໄດ້ໂດຍສະເພາະໃນເວລາທີ່ທ່ານພິຈາລະນາຄວາມສໍາພັນລະຫວ່າງແບບອັກສອນແບບດັ້ງເດີມ "ຊັ້ນນໍາ" ແລະຄຸນສົມບັດ CSS ທີ່ເອີ້ນວ່າ "line-height".

ຈຸດປະສົງຂອງການນໍາພາ

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

ນໍາພາໃນການອອກແບບເວັບໄຊຕ໌

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

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

ຂອງເວັບໄຊທ໌ຂອງທ່ານ , ທ່ານສາມາດເຮັດໄດ້ດັ່ງນີ້:

ຕົ້ນຕໍ p {line-height: 1.5; }

ນີ້ຈະເປັນເວລາ 1.5 ເທົ່າກັບລະດັບເສັ້ນປະກະຕິໂດຍອີງຕາມຂະຫນາດຕົວອັກສອນເລີ່ມຕົ້ນຂອງຫນ້າ (ເຊິ່ງເປັນປົກກະຕິ 16px).

ໃນເວລາທີ່ຈະນໍາໃຊ້ເສັ້ນສູງ

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

ເມື່ອບໍ່ໃຫ້ໃຊ້ເສັ້ນສູງ

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

ຖ້າທ່ານຕ້ອງການເພີ່ມພື້ນທີ່ພາຍໃຕ້ອົງປະກອບຂອງຂໍ້ຄວາມບາງຢ່າງ, ທ່ານຈະນໍາໃຊ້ຂອບເຂດຫຼືການເຄືອບ. ຍ້ອນກັບກັບຕົວຢ່າງ CSS ທີ່ຜ່ານມາພວກເຮົາໄດ້ນໍາໃຊ້, ພວກເຮົາສາມາດເພີ່ມນີ້:

ຕົ້ນຕໍ p {line-height: 1.5; ຂອບ - ລຸ່ມ: 24px; }

ນີ້ຍັງຄົງມີລະດັບຄວາມສູງລະດັບ 1.5 ລະຫວ່າງເສັ້ນຂອງຂໍ້ຄວາມສໍາລັບຫນ້າເວັບຂອງຫນ້າເວັບ (ສ່ວນທີ່ຢູ່ໃນອົງປະກອບ

). ວັກດຽວກັນເຫຼົ່ານີ້ກໍ່ຈະມີ 24 ພອດຂອງຊ່ອງຫວ່າງພາຍໃຕ້ແຕ່ລະຄົນ, ເຊິ່ງສາມາດເຮັດໃຫ້ມີການເປີດເຜີຍພາບທີ່ອະນຸຍາດໃຫ້ຜູ້ອ່ານສາມາດກໍານົດວັກຫນຶ່ງໄດ້ງ່າຍແລະເຮັດໃຫ້ການອ່ານເວັບໄຊທ໌ງ່າຍກວ່າ. ນອກນັ້ນທ່ານຍັງສາມາດນໍາໃຊ້ຄຸນສົມບັດ padding ແທນ margins ທີ່ນີ້:

ຕົ້ນຕໍ p {line-height: 1.5; padding bottom: 24px; }

ໃນເກືອບທັງຫມົດກໍລະນີ, ນີ້ຈະສະແດງດຽວກັນກັບ CSS ກ່ອນຫນ້ານີ້.

ບອກວ່າທ່ານຕ້ອງການເພີ່ມຊ່ອງຫວ່າງພາຍໃນບັນຊີລາຍການທີ່ຢູ່ພາຍໃນບັນຊີລາຍຊື່ທີ່ມີ "ເມນູການບໍລິການ", ທ່ານຈະໃຊ້ຂອບຂອບຫຼື padding ເພື່ອເຮັດແນວນັ້ນ, ບໍ່ແມ່ນເສັ້ນສູງ. ດັ່ງນັ້ນນີ້ຈະເຫມາະສົມ.

service-menu li { ທ່ານພຽງແຕ່ໃຊ້ເສັ້ນສູງນີ້ຖ້າທ່ານຕ້ອງການກໍານົດໄລຍະຫ່າງຂອງຂໍ້ຄວາມພາຍໃນບັນຊີລາຍການດ້ວຍຕົນເອງ, ສົມມຸດວ່າພວກເຂົາເຈົ້າມີໄລຍະຍາວຂອງຂໍ້ຄວາມທີ່ສາມາດດໍາເນີນການໄດ້ຫຼາຍເສັ້ນສໍາລັບແຕ່ລະຈຸດ bullet.