ສ້າງຊ່ອງຫວ່າງແລະການແຍກຕ່າງຫາກຂອງອົງປະກອບໃນ HTML ດ້ວຍ CSS
ການສ້າງສະຖານທີ່ແລະແຍກຕ່າງຫາກຂອງອົງປະກອບໃນ HTML ສາມາດຍາກທີ່ຈະເຂົ້າໃຈສໍາລັບຜູ້ອອກແບບເວັບໄຊຕ໌ເລີ່ມຕົ້ນ. ນີ້ແມ່ນຍ້ອນວ່າ HTML ມີຊັບສິນທີ່ເອີ້ນກັນວ່າ "ການຫົດຕົວຂອງບລັອກ." ບໍ່ວ່າທ່ານຈະປະເພດ 1 ຫຼື 100 ໃນລະຫັດ HTML ຂອງທ່ານ, ຕົວທ່ອງເວັບຂອງເວັບໄຊທ໌ຂອງທ່ານອັດຕະໂນມັດຈະລຸດລົງສະຖານທີ່ເຫຼົ່ານັ້ນລົງໃນພື້ນທີ່ດຽວ. ນີ້ແມ່ນແຕກຕ່າງຈາກໂຄງການເຊັ່ນ Microsoft Word , ເຊິ່ງຊ່ວຍໃຫ້ຜູ້ສ້າງເອກະສານສາມາດເພີ່ມສະຖານທີ່ຕ່າງໆເພື່ອແຍກຄໍາແລະລາຍການອື່ນໆຂອງເອກະສານນັ້ນ.
ນີ້ບໍ່ແມ່ນແນວໃດສະຖານທີ່ອອກແບບເວັບໄຊທ໌ທ໌.
ດັ່ງນັ້ນ, ເຮັດແນວໃດທ່ານເພີ່ມສະຖານທີ່ຂາວໃນ HTML ທີ່ສະແດງຢູ່ໃນ ຫນ້າເວັບ ? ບົດຂຽນນີ້ພິຈາລະນາວິທີການຕ່າງໆ.
ສະຖານທີ່ໃນ HTML ດ້ວຍ CSS
ວິທີການທີ່ຕ້ອງການເພີ່ມຊ່ອງໃນ HTML ຂອງທ່ານແມ່ນມີ Cascading Style Sheets (CSS) . CSS ຄວນຈະຖືກນໍາໃຊ້ເພື່ອເພີ່ມຮູບລັກສະນະຂອງເວັບໄຊທ໌ໃດຫນຶ່ງ, ແລະເນື່ອງຈາກວ່າຊ່ອງຫວ່າງເປັນສ່ວນຫນຶ່ງຂອງລັກສະນະການອອກແບບຂອງຮູບພາບຂອງຫນ້າ, CSS ແມ່ນບ່ອນທີ່ທ່ານຕ້ອງການໃຫ້ມັນເຮັດ.
ໃນ CSS, ທ່ານສາມາດນໍາໃຊ້ຄຸນສົມບັດ margin ຫຼື padding ເພື່ອເພີ່ມຊ່ອງຫວ່າງປະມານ. ນອກຈາກນັ້ນ, ຄຸນສົມບັດການເຂົ້າເຖິງຂໍ້ຄວາມເພີ່ມພື້ນທີ່ຢູ່ທາງຫນ້າຂອງຂໍ້ຄວາມ, ເຊັ່ນ: ສໍາລັບການເຂົ້າຫາວັກ.
ນີ້ແມ່ນຕົວຢ່າງຂອງວິທີການນໍາໃຊ້ CSS ເພື່ອເພີ່ມພື້ນທີ່ຢູ່ທາງຫນ້າຂອງວັກຂອງທ່ານ. ຕື່ມ CSS ດັ່ງຕໍ່ໄປນີ້ ໃນ ເອກະສານສະໄຕ ພາຍນອກ ຫຼື ພາຍໃນ ຂອງທ່ານ:
p {
text-indent: 3em
}
ຊ່ອງຫວ່າງໃນ HTML: ພາຍໃນຂໍ້ຄວາມຂອງທ່ານ
ຖ້າທ່ານພຽງແຕ່ຕ້ອງການເພີ່ມພື້ນທີ່ເພີ່ມເຕີມຫຼືສອງໃຫ້ຂໍ້ຄວາມຂອງທ່ານ, ທ່ານສາມາດໃຊ້ພື້ນທີ່ທີ່ບໍ່ທໍາລາຍໄດ້.
ຕົວອັກສອນນີ້ເຮັດຄືກັນກັບລັກສະນະພື້ນທີ່ມາດຕະຖານ, ມັນບໍ່ພຽງແຕ່ລົ້ມລົງໃນເບົາເຊີ.
ນີ້ແມ່ນຕົວຢ່າງຂອງການເພີ່ມຫ້າສະຖານທີ່ພາຍໃນເສັ້ນຂອງຂໍ້ຄວາມ:
ຂໍ້ຄວາມນີ້ມີຫ້າຊ່ອງຫວ່າງພາຍໃນມັນ
ໃຊ້ HTML:
ຂໍ້ຄວາມນີ້ມີ & nbsp; & nbsp; & nbsp; & nbsp; ຫ້າສະຖານທີ່ພິເສດພາຍໃນມັນ
ທ່ານຍັງສາມາດໃຊ້ໂຄດຄໍາສັ່ງເພື່ອເພີ່ມການພັກຜ່ອນຫຍໍ້ພິເສດ.
ປະໂຫຍກນີ້ມີການຢຸດຫ້າເສັ້ນຢູ່ໃນຕອນທ້າຍຂອງມັນ
ເປັນຫຍັງຈຶ່ງ Spacing ໃນ HTML ເປັນຄວາມຄິດທີ່ບໍ່ດີ
ໃນຂະນະທີ່ຕົວເລືອກເຫລົ່ານີ້ເຮັດວຽກ - ອົງປະກອບສະຖານທີ່ທີ່ບໍ່ທໍາລາຍກໍ່ຈະເພີ່ມໄລຍະຫ່າງໃຫ້ກັບຂໍ້ຄວາມຂອງທ່ານແລະການຢຸດເສັ້ນຈະເພີ່ມຊ່ອງຫວ່າງພາຍໃຕ້ວັກສະແດງຂ້າງເທິງ - ນີ້ບໍ່ແມ່ນວິທີທີ່ດີທີ່ສຸດໃນການສ້າງຊ່ອງຫວ່າງໃນຫນ້າເວັບຂອງທ່ານ. ເພີ່ມອົງປະກອບເຫຼົ່ານີ້ໃຫ້ HTML ຂອງທ່ານເພີ້ມຂໍ້ມູນຮູບພາບໃຫ້ກັບລະຫັດແທນທີ່ຈະແຍກໂຄງສ້າງຂອງຫນ້າ (HTML) ຈາກຮູບແບບທີ່ເບິ່ງເຫັນ (CSS). ການປະຕິບັດທີ່ດີທີ່ສຸດກໍານົດວ່າຄວນຈະແຍກຕ່າງຫາກສໍາລັບເຫດຜົນຈໍານວນຫນຶ່ງ, ລວມທັງຄວາມງ່າຍໃນການປັບປຸງໃນອະນາຄົດແລະຂະຫນາດໄຟລ໌ແລະການປະຕິບັດຫນ້າ.
ຖ້າທ່ານໃຊ້ຮູບແບບສະໄຕພາຍນອກເພື່ອກໍານົດຮູບແບບແລະໄລຍະຫ່າງຂອງທ່ານ, ຫຼັງຈາກນັ້ນ, ການປ່ຽນຮູບແບບເຫລົ່ານັ້ນສໍາລັບເວັບໄຊທ໌ທັງຫມົດແມ່ນງ່າຍດາຍ, ເພາະວ່າທ່ານພຽງແຕ່ຕ້ອງການອັບເດດເອກະສານແບບດຽວກັນ.
ພິຈາລະນາຕົວຢ່າງຂ້າງເທິງຂອງປະໂຫຍກທີ່ມີປ້າຍຫ້າຢູ່ໃນຕອນທ້າຍຂອງມັນ. ຖ້າທ່ານຕ້ອງການຈໍານວນຂອງຊ່ອງຫວ່າງທີ່ຢູ່ດ້ານລຸ່ມຂອງວັກທຸກໆ, ທ່ານຈໍາເປັນຕ້ອງເພີ່ມລະຫັດ HTML ໃຫ້ກັບທຸກໆພາກໃນເວັບໄຊທ໌ຂອງທ່ານທັງຫມົດ. ນັ້ນແມ່ນຈໍານວນເງິນທີ່ຖືກຕ້ອງຂອງເຄື່ອງຫມາຍບວກພິເສດທີ່ຈະເຮັດໃຫ້ຫນ້າຂອງທ່ານຫນ້າຫງຸດຫງິດ.
ນອກຈາກນັ້ນ, ຖ້າທ່ານຕັດສິນໃຈລົງຖະຫນົນຫົນທາງວ່າຊ່ອງຫວ່າງນີ້ຫຼາຍເກີນໄປຫຼືນ້ອຍເກີນໄປ, ແລະທ່ານຕ້ອງການປ່ຽນແປງມັນນ້ອຍໆ, ທ່ານຈໍາເປັນຕ້ອງແກ້ໄຂທຸກພາກສ່ວນໃນເວັບໄຊທ໌ຂອງທ່ານທັງຫມົດ. ບໍ່ຂອບໃຈ!
ແທນທີ່ຈະເພີ່ມອົງປະກອບສະຖານທີ່ເຫຼົ່ານີ້ໃຫ້ກັບລະຫັດຂອງທ່ານ, ໃຫ້ໃຊ້ CSS.
p {
padding bottom: 20px;
}
ເສັ້ນຫນຶ່ງຂອງ CSS ຈະເພີ່ມຊ່ອງຫວ່າງພາຍໃຕ້ວັກຫນ້າຂອງທ່ານ. ຖ້າທ່ານຕ້ອງການປ່ຽນສະຖານທີ່ໃນອະນາຄົດ, ແກ້ໄຂເສັ້ນຫນຶ່ງນີ້ (ແທນທີ່ຈະລະຫັດຂອງເວັບໄຊທ໌ທັງຫມົດຂອງທ່ານ) ແລະທ່ານກໍ່ຈະດີ!
ໃນປັດຈຸບັນ, ຖ້າທ່ານຕ້ອງການເພີ່ມຊ່ອງດຽວໃນບາງສ່ວນຂອງເວັບໄຊທ໌ຂອງທ່ານ, ການໃຊ້ແທັບ
ຫຼືພື້ນທີ່ທີ່ບໍ່ທໍາລາຍແມ່ນບໍ່ສິ້ນສຸດຂອງໂລກ, ແຕ່ວ່າທ່ານຈໍາເປັນຕ້ອງລະວັງ.
ການນໍາໃຊ້ທາງເລືອກໃນການວາງສະແດງ HTML ເຫຼົ່ານີ້ສາມາດເປັນ slope slippery. ໃນຂະນະທີ່ຫນຶ່ງຫຼືສອງອາດຈະບໍ່ທໍາຮ້າຍເວັບໄຊທ໌ຂອງທ່ານ, ຖ້າທ່ານສືບຕໍ່ລົງຕາມເສັ້ນທາງນັ້ນ, ທ່ານຈະນໍາບັນຫາເຂົ້າໄປໃນຫນ້າຂອງທ່ານ. ໃນທີ່ສຸດ, ທ່ານກໍາລັງຫັນໄປຫາ CSS ສໍາລັບໄລຍະຫ່າງ HTML, ແລະທຸກຮູບແບບເວັບຕ່າງໆອື່ນໆ.