ວິທີການໃຊ້ HTML ແລະ CSS ເພື່ອສ້າງ Tabs ແລະ Spacing

ເບິ່ງວິທີການພື້ນທີ່ສີຂາວໃນ HTML ຖືກຮັບການປິ່ນປົວໂດຍຕົວທ່ອງເວັບ

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

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

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

Spacing in Print

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

ເປັນຫຍັງຄົນສ່ວນຫນຶ່ງໃຊ້ Tabs?

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

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

ການນໍາໃຊ້ CSS ເພື່ອສ້າງ Tab HTML ແລະ Spacing

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

ຖ້າທ່ານກໍາລັງພະຍາຍາມໃຊ້ ແຖບ ເພື່ອສ້າງຄໍລໍາຂອງຂໍ້ຄວາມ, ທ່ານສາມາດນໍາໃຊ້ອົງປະກອບ

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

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

ຮຸ້ນ, Padding, ແລະ Text-Indent

ວິທີການທົ່ວໄປທີ່ສຸດເພື່ອສ້າງຊ່ອງຫວ່າງດ້ວຍ CSS ແມ່ນການໃຊ້ຮູບແບບ CSS ຫນຶ່ງຕໍ່ໄປນີ້:

ຕົວຢ່າງເຊັ່ນ, ທ່ານສາມາດດັດແປງແຖວທໍາອິດຂອງວັກຄືແຖບທີ່ມີ CSS ຕໍ່ໄປນີ້ (ສັງເກດວ່ານີ້ຄາດວ່າວັກຂອງທ່ານມີຄຸນລັກສະນະຊັ້ນຂອງ "ທໍາອິດ" ທີ່ຕິດຢູ່ກັບມັນ):

pfirst {
text-indent: 5em
}

ຕົວຢ່າງນີ້ຈະຖືກດັດແປງກ່ຽວກັບ 5 ຕົວອັກສອນ.

ນອກນັ້ນທ່ານຍັງສາມາດໃຊ້ຄຸນສົມບັດ margin ຫຼື padding ໃນ CSS ເພື່ອເພີ່ມຊ່ອງຫວ່າງໄປທາງເທິງ, ດ້ານລຸ່ມ, ຊ້າຍ, ຫຼືຂວາ (ຫຼືການປະສົມປະສານຂອງສອງດ້ານ) ຂອງອົງປະກອບ. ໃນທີ່ສຸດ, ທ່ານສາມາດບັນລຸປະເພດໃດໆທີ່ຕ້ອງການໂດຍການຫັນໄປຫາ CSS.

ການເຄື່ອນຍ້າຍຂໍ້ຄວາມຫຼາຍກວ່າຫນຶ່ງຊ່ອງໂດຍບໍ່ມີ CSS

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

ການນໍາໃຊ້ພື້ນທີ່ທີ່ບໍ່ທໍາລາຍ, ທ່ານພຽງແຕ່ຕື່ມ & nbsp; ເປັນຈໍານວນຫຼາຍເທົ່າທີ່ທ່ານຕ້ອງການໃນ HTML markup ຂອງທ່ານ.

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

& nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp;

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