ໃຊ້ span ແລະ div ກັບ CSS ສໍາລັບແບບຫຼາຍກວ່າແລະການຄວບຄຸມຮູບແບບ.
ປະຊາຊົນຈໍານວນຫຼາຍທີ່ມີການອອກແບບເວັບໃຫມ່ແລະ HTML / CSS ນໍາໃຊ້ອົງປະກອບ ແລະ ອົງປະກອບ div ກໍານົດການແບ່ງປັນຢ່າງມີເຫດຜົນໃນຫນ້າເວັບຂອງທ່ານ. ມັນເປັນພື້ນຖານທີ່ມີກ່ອງທີ່ທ່ານສາມາດຈັດເອົາເອກະສານ HTML ອື່ນໆທີ່ສົມເຫດສົມຜົນໄປນໍາກັນ. ພາກສ່ວນຫນຶ່ງສາມາດມີອົງປະກອບອື່ນໆຫຼາຍເຊັ່ນ: ວັກ, ຫົວຂໍ້, ລາຍຊື່, ການເຊື່ອມຕໍ່, ຮູບພາບ, ແລະອື່ນໆ. ມັນກໍ່ສາມາດມີການແບ່ງປັນພາຍໃນຂອງມັນເພື່ອສະຫນອງໂຄງສ້າງແລະອົງກອນເພີ່ມເຕີມຕໍ່ເອກະສານ HTML ຂອງທ່ານ. ການນໍາໃຊ້ອົງປະກອບ div ໃຫ້ແທັບ contents of div ຖ້າພື້ນທີ່ຂອງຫນ້າຂອງທ່ານຕ້ອງການຂໍ້ມູນເພີ່ມເຕີມທີ່ທ່ານຈະໃຊ້ກັບ CSS ໃນພາຍຫລັງ, ທ່ານສາມາດເພີ່ມຕົວເລືອກ id (ຕົວຢ່າງ, id = "myDiv">), ຫຼືຕົວເລືອກຫ້ອງຮຽນ (ເຊັ່ນ: class = "bigDiv">). ຫຼັງຈາກນັ້ນທັງສອງຄຸນລັກສະນະເຫຼົ່ານີ້ສາມາດຖືກເລືອກໂດຍໃຊ້ CSS ຫຼືດັດແກ້ໂດຍໃຊ້ JavaScript. ການປະຕິບັດທີ່ດີທີ່ສຸດໃນປະຈຸບັນແມ່ນເນັ້ນຫນັກໃສ່ການນໍາໃຊ້ຕົວເລືອກຫ້ອງຮຽນແທນ IDs, ສ່ວນຫນຶ່ງແມ່ນຍ້ອນວ່າວິທີເລືອກເສພາະຕົວເລືອກແມ່ນຫຍັງ. ໃນຄວາມຈິງ, ຢ່າງໃດກໍຕາມ, ທ່ານສາມາດນໍາໃຊ້ທັງຫນຶ່ງແລະກໍ່ສາມາດໃຫ້ການແບ່ງປັນທັງ ID ແລະ selector ຫ້ອງຮຽນ. ເມື່ອໃຊ້ ອົງປະກອບ div ແມ່ນແຕກຕ່າງຈາກສ່ວນ HTML5 ເນື່ອງຈາກວ່າມັນບໍ່ໃຫ້ເນື້ອຫາທີ່ປິດບັງມີຄວາມຫມາຍກ່ຽວກັບຄວາມຫມາຍ. ຖ້າທ່ານບໍ່ແນ່ໃຈວ່າບລັອກຂອງເນື້ອຫາຄວນເປັນສ່ວນຫນຶ່ງຫຼືສ່ວນໃດຫນຶ່ງໃຫ້ຄິດກ່ຽວກັບຈຸດປະສົງຂອງອົງປະກອບແລະເນື້ອຫາທີ່ຈະຊ່ວຍທ່ານຕັດສິນໃຈວ່າຈະໃຊ້: ໃນທີ່ສຸດ, ທັງສອງ divs ແລະພາກສ່ວນປະຕິບັດທີ່ຄ້າຍຄືກັນຄ້າຍຄືກັນແລະທ່ານສາມາດໃຫ້ພວກເຂົາທັງສອງຄຸນຄ່າຄຸນລັກສະນະແລະໃຫ້ພວກເຂົາ CSS ດ້ວຍການເບິ່ງຮູບຂອງເວັບໄຊທ໌ທີ່ທ່ານຕ້ອງການ. ທັງສອງນີ້ແມ່ນອົງປະກອບລະດັບຕັນ. ອົງປະກອບ span ແມ່ນອົງປະກອບເສັ້ນໃນໂດຍຄ່າເລີ່ມຕົ້ນ. ນີ້ກໍານົດມັນຫ່າງຈາກສ່ວນ div ແລະສ່ວນ. ອົງປະກອບ span ແມ່ນມັກຈະໃຊ້ຫໍ່ເນື້ອຫາທີ່ເປັນຂໍ້ຄວາມປົກກະຕິເພື່ອໃຫ້ມັນເປັນ "hook" ທີ່ສາມາດໄດ້ຮັບການແຕ່ງຕັ້ງພາຍຫຼັງ. ການນໍາໃຊ້ກັບ CSS, ມັນສາມາດປ່ຽນແບບຂອງຂໍ້ຄວາມທີ່ມັນກວມເອົາ; ຢ່າງໃດກໍຕາມ, ໂດຍບໍ່ມີຄຸນລັກສະນະແບບໃດ, ອົງປະກອບ span ເທົ່ານັ້ນບໍ່ມີຜົນກະທົບຕໍ່ຂໍ້ຄວາມທັງຫມົດ. ນີ້ແມ່ນຄວາມແຕກຕ່າງຕົ້ນຕໍລະຫວ່າງ span ແລະອົງປະກອບ div. ດັ່ງທີ່ໄດ້ກ່າວມາຂ້າງເທິງ, ອົງປະກອບ div ປະກອບມີການຢຸດວັກ, ໃນຂະນະທີ່ອົງປະກອບ span ເທົ່ານັ້ນບອກຕົວທ່ອງເວັບທີ່ຈະນໍາໃຊ້ກົດລະບຽບແບບ CSS ທີ່ກ່ຽວຂ້ອງກັບສິ່ງທີ່ຖືກປິດໂດຍ tags: ຂໍ້ຄວາມທີ່ເນັ້ນຫນັກ ແລະຂໍ້ຄວາມທີ່ບໍ່ໄດ້ເນັ້ນໃສ່. ເພີ່ມ class = "highlight" ຫະລືຊັ້ນຮຽນອື່ນ ໆ ໃຫ້ element span ເພື່ອ style text ດ້ວຍ CSS (eg class = "highlight">) ອົງປະກອບ span ບໍ່ມີຄຸນສົມບັດທີ່ຕ້ອງການ, ແຕ່ສາມທີ່ມີປະໂຫຍດຫຼາຍທີ່ສຸດແມ່ນຄືກັບຂອງອົງປະກອບ div: ໃຊ້ລະດັບເວລາທີ່ທ່ານຕ້ອງການປ່ຽນແບບເນື້ອຫາໂດຍບໍ່ຕ້ອງກໍານົດວ່າເນື້ອຫາເປັນ ອົງປະກອບ ລະດັບໃຫມ່ ໃນເອກະສານ. ຕົວຢ່າງເຊັ່ນຖ້າທ່ານຕ້ອງການຄໍາທີສອງຂອງຫົວຂໍ້ h3 ເປັນສີແດງ, ທ່ານສາມາດລ້ອມຮອບຄໍາທີ່ມີອົງປະກອບ span ເຊິ່ງຈະເຮັດໃຫ້ຄໍາວ່າເປັນຄໍາສີແດງ. ຄໍາຍັງຄົງເປັນສ່ວນຫນຶ່ງຂອງອົງປະກອບ h3, ແຕ່ວ່າໃນປັດຈຸບັນຍັງສະແດງຢູ່ໃນສີແດງ: ແກ້ໄຂໂດຍ Jeremy Girard ທີ່ 2/2/17 ການໃຊ້
ການນໍາໃຊ້ Element
ນີ້ແມ່ນຫົວຂໍ້ຫນ້າຫວາດສຽວຂອງຂ້ອຍ