ທ່ານບໍ່ຈໍາກັດຈໍານວນຊັ້ນ CSS ດຽວຕໍ່ອົງປະກອບ.
ແຜ່ນສະໄຕແບບ Cascading (CSS) ອະນຸຍາດໃຫ້ທ່ານກໍານົດຮູບລັກສະນະຂອງອົງປະກອບໂດຍການເຂົ້າໄປໃນລັກສະນະທີ່ທ່ານນໍາໃຊ້ກັບອົງປະກອບນັ້ນ. ຄຸນລັກສະນະເຫຼົ່ານີ້ສາມາດເປັນແລະ ID ຫຼືລະດັບແລະ, ເຊັ່ນດຽວກັບຄຸນລັກສະນະທັງຫມົດ, ພວກເຂົາເພີ່ມຂໍ້ມູນທີ່ເປັນປະໂຫຍດຕໍ່ກັບອົງປະກອບທີ່ພວກເຂົາກໍາລັງຕິດຢູ່. ໂດຍອີງໃສ່ຄຸນລັກສະນະທີ່ທ່ານເພີ່ມໃນອົງປະກອບ, ທ່ານສາມາດຂຽນຕົວເລືອກ CSS ເພື່ອສະຫມັກຂໍເອົາຮູບແບບທີ່ຕ້ອງການທີ່ຈໍາເປັນເພື່ອບັນລຸຮູບແລະຄວາມຮູ້ສຶກສໍາລັບອົງປະກອບນັ້ນແລະເວັບໄຊທ໌ທັງຫມົດ.
ໃນຂະນະທີ່ ID ຫຼືຊັ້ນຮຽນເຮັດວຽກສໍາລັບຈຸດປະສົງຂອງການເຊື່ອມໂຍງເຂົ້າກັບພວກເຂົາດ້ວຍກົດ CSS, ວິທີການອອກແບບເວັບທີ່ທັນສະໄຫມໄດ້ສະຫນັບສະຫນູນຫ້ອງຮຽນຫຼາຍກວ່າ ID, ສ່ວນຫນຶ່ງແມ່ນຍ້ອນວ່າພວກເຂົາແມ່ນບໍ່ສະເພາະແລະງ່າຍຕໍ່ການເຮັດວຽກຮ່ວມກັນໂດຍລວມ. ແມ່ນແລ້ວ, ທ່ານຍັງຄົງຊອກຫາເວັບໄຊທ໌ທີ່ໃຊ້ IDs, ແຕ່ຄຸນລັກສະນະເຫຼົ່ານັ້ນກໍາລັງຖືກນໍາໃຊ້ຫຼາຍເກີນໄປກ່ວາໃນໄລຍະຜ່ານມາ, ໃນຂະນະທີ່ຊັ້ນຮຽນໄດ້ກວມເອົາຫນ້າເວັບທີ່ທັນສະໄຫມ.
ຊັ້ນດຽວຫຼືຫຼາຍຊັ້ນໃນ CSS?
ໃນກໍລະນີຫຼາຍທີ່ສຸດ, ທ່ານຈະມອບ attribute ຊັ້ນດຽວໃຫ້ກັບອົງປະກອບ, ແຕ່ວ່າທ່ານບໍ່ຈໍາກັດພຽງແຕ່ຫນຶ່ງຊັ້ນທີ່ເຂົາເຈົ້າມີ IDs. ໃນຂະນະທີ່ອົງປະກອບທີ່ສາມາດມີຄຸນສົມບັດ ID ດຽວ, ທ່ານກໍ່ສາມາດໃຫ້ອົງປະກອບຫຼາຍໆອົງປະກອບແລະ, ໃນບາງກໍລະນີ, ການເຮັດດັ່ງນັ້ນຈະເຮັດໃຫ້ຫນ້າຂອງທ່ານສະດວກສະບາຍແລະມີຄວາມຍືດຫຍຸ່ນຫຼາຍຂຶ້ນ!
ຖ້າທ່ານຈໍາເປັນຕ້ອງໄດ້ມອບຫມາຍຊັ້ນຫຼາຍໃຫ້ອົງປະກອບ, ທ່ານສາມາດເພີ່ມຊັ້ນຮຽນເພີ່ມເຕີມແລະແຍກໃຫ້ພວກເຂົາມີພື້ນທີ່ໃນຄຸນລັກສະນະຂອງທ່ານ.
ຕົວຢ່າງ, ວັກນີ້ມີສາມຊັ້ນ:
pullquote featured left "> ນີ້ຈະເປັນຂໍ້ຄວາມຂອງວັກ
ນີ້ກໍານົດສາມຫ້ອງດັ່ງຕໍ່ໄປນີ້ໃນຖ້ອຍຄໍາຖ້ອຍຄໍາ:
- Pullquote
- Featured
- ຊ້າຍ
ສັງເກດເຫັນຊ່ອງຫວ່າງລະຫວ່າງແຕ່ລະຄ່າຫ້ອງຮຽນເຫຼົ່ານີ້. ສະຖານທີ່ເຫຼົ່ານັ້ນແມ່ນສິ່ງທີ່ພວກເຂົາກໍານົດເປັນກຸ່ມທີ່ແຕກຕ່າງກັນ, ແຕ່ລະຄົນ. ນີ້ກໍ່ແມ່ນເຫດຜົນທີ່ວ່າຊື່ຂອງຫ້ອງຮຽນບໍ່ສາມາດມີພື້ນທີ່ຢູ່ໃນພວກເຂົາໄດ້, ເພາະວ່າການເຮັດດັ່ງນັ້ນຈະກໍານົດໃຫ້ພວກເຂົາເປັນຊັ້ນແຍກຕ່າງຫາກ.
ຕົວຢ່າງ: ຖ້າທ່ານໃຊ້ "pullquote-featured-left" ໂດຍບໍ່ມີຊ່ອງຫວ່າງ, ມັນຈະເປັນມູນຄ່າຂອງແຕ່ລະຊັ້ນ, ແຕ່ຕົວຢ່າງຂ້າງເທິງ, ບ່ອນທີ່ສາມຄໍາເຫຼົ່ານີ້ຖືກແຍກດ້ວຍຊ່ອງຫວ່າງ, ກໍານົດໃຫ້ມັນເປັນຄ່າຂອງແຕ່ລະຄົນ. ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະເຂົ້າໃຈແນວຄິດນີ້ໃນຂະນະທີ່ທ່ານຕັດສິນໃຈໃສ່ຄ່າຫ້ອງຮຽນທີ່ໃຊ້ໃນຫນ້າເວັບຂອງທ່ານ.
ເມື່ອຄຸນມີຄ່າຫ້ອງຮຽນຂອງທ່ານໃນ HTML, ຫຼັງຈາກນັ້ນທ່ານສາມາດມອບເຫຼົ່ານີ້ເປັນຊັ້ນໃນ CSS ຂອງທ່ານແລະນໍາໃຊ້ຮູບແບບທີ່ທ່ານຕ້ອງການເພີ່ມ. ຍົກຕົວຢ່າງ.
pullquote {}
ຄຸນລັກສະນະພິເສດ {}
pleft {}
ໃນຕົວຢ່າງເຫຼົ່ານີ້, ການປະກາດ CSS ແລະຄ່າຄູ່ຈະຢູ່ໃນວົງເລັບ, ຊຶ່ງເປັນວິທີທີ່ວ່າຮູບແບບເຫລົ່ານັ້ນຈະຖືກນໍາໃຊ້ກັບຕົວເລືອກທີ່ເຫມາະສົມ.
ຫມາຍເຫດ - ຖ້າທ່ານ ຕັ້ງຫ້ອງຮຽນໃຫ້ເປັນອົງປະກອບສະເພາະ (ຍົກຕົວຢ່າງ, p.ftft), ທ່ານຍັງສາມາດໃຊ້ມັນເປັນສ່ວນຫນຶ່ງຂອງບັນຊີລາຍຊື່ຂອງຊັ້ນຮຽນ; ຢ່າງໃດກໍ່ຕາມ, ຈົ່ງຮູ້ວ່າມັນຈະມີຜົນກະທົບຕໍ່ອົງປະກອບທີ່ຖືກລະບຸໄວ້ໃນ CSS ເທົ່ານັ້ນ. ໃນຄໍາສັບຕ່າງໆອື່ນໆ, ແບບ p.left ຈະໃຊ້ເສພາະກັບວັກທີ່ມີຊັ້ນນີ້ເນື່ອງຈາກຕົວເລືອກຂອງທ່ານກໍ່ເວົ້າວ່າຈະໃຊ້ມັນກັບ "ວັກທີ່ມີຄ່າຂອງຊັ້ນຂອງ 'ຊ້າຍ'". ໂດຍທາງກົງກັນຂ້າມ, ສອງຕົວເລືອກອື່ນໆໃນຕົວຢ່າງບໍ່ໄດ້ກໍານົດອົງປະກອບໃດຫນຶ່ງ, ສະນັ້ນພວກເຂົາຈະນໍາໃຊ້ກັບອົງປະກອບໃດໆທີ່ນໍາໃຊ້ຄ່າຫ້ອງຮຽນເຫຼົ່ານັ້ນ.
ຂໍ້ດີຂອງຫ້ອງຮຽນຫຼາຍ
ຫ້ອງຮຽນຫຼາຍສາມາດເຮັດໃຫ້ງ່າຍຕໍ່ການເພີ່ມຜົນກະທົບພິເສດໃຫ້ກັບອົງປະກອບໂດຍບໍ່ຕ້ອງສ້າງແບບໃຫມ່ໃຫມ່ສໍາລັບອົງປະກອບນັ້ນ.
ຕົວຢ່າງ, ທ່ານອາດຈະຕ້ອງມີຄວາມສາມາດທີ່ຈະ ເລື່ອນອົງປະກອບທີ່ຢູ່ເບື້ອງຊ້າຍຫຼືຂວາ ຢ່າງໄວວາ. ທ່ານອາດຈະຂຽນສອງຫ້ອງຊ້າຍແລະຂວາທີ່ມີພຽງແຕ່ເລື່ອນໄປ: ຊ້າຍ; ແລະ float: ຂວາ; ໃນພວກເຂົາ. ຫຼັງຈາກນັ້ນ, ເມື່ອໃດກໍຕາມທີ່ທ່ານມີອົງປະກອບທີ່ທ່ານຕ້ອງການທີ່ຈະເລື່ອນໄວ້, ທ່ານກໍ່ພຽງແຕ່ເພີ່ມຫ້ອງຮຽນ "ໄວ້" ໃນບັນຊີຊັ້ນຮຽນຂອງມັນ.
ມີເສັ້ນທາງທີ່ດີທີ່ຈະຍ່າງຢູ່ທີ່ນີ້, ຢ່າງໃດກໍຕາມ. ຈົ່ງຈໍາໄວ້ວ່າມາດຕະຖານເວັບກໍານົດການແບ່ງແຍກແບບແລະໂຄງສ້າງ. ໂຄງສ້າງແມ່ນຈັດການຜ່ານ HTML ໃນຂະນະທີ່ແບບນີ້ແມ່ນຢູ່ໃນ CSS.
ຖ້າເອກະສານ HTML ຂອງທ່ານເຕັມໄປດ້ວຍອົງປະກອບທີ່ທຸກຄົນມີຊື່ຫ້ອງຮຽນຄື "ສີແດງ" ຫຼື "ເບື້ອງຊ້າຍ" ເຊິ່ງເປັນຊື່ທີ່ກໍານົດວ່າອົງປະກອບຄວນເບິ່ງຄືວ່າແມ່ນຫຍັງ, ພວກເຈົ້າກໍາລັງຂ້າມເສັ້ນນັ້ນລະຫວ່າງໂຄງສ້າງແລະແບບ. ຂ້າພະເຈົ້າພະຍາຍາມກໍານົດຊື່ຫ້ອງຮຽນທີ່ບໍ່ແມ່ນຄວາມຫມາຍຂອງຂ້ອຍໃຫ້ຫຼາຍເທົ່າທີ່ເປັນໄປໄດ້ສໍາລັບເຫດຜົນນີ້.
ຫ້ອງຮຽນຫຼາຍ, ຄໍາສັບຕ່າງໆ, ແລະ JavaScript
ປະໂຫຍດອີກອັນຫນຶ່ງໃນການນໍາໃຊ້ຫ້ອງຮຽນຫຼາຍແມ່ນວ່າມັນຈະຊ່ວຍໃຫ້ທ່ານມີໂອກາດທີ່ຈະມີການໂຕ້ຕອບຫຼາຍຂຶ້ນ.
ທ່ານສາມາດນໍາໃຊ້ຊັ້ນຮຽນໃຫມ່ກັບອົງປະກອບທີ່ມີຢູ່ໂດຍໃຊ້ JavaScript ໂດຍບໍ່ຕ້ອງຖອນເອົາຊັ້ນຮຽນໃດໆ. ນອກນັ້ນທ່ານຍັງສາມາດນໍາໃຊ້ຫ້ອງຮຽນເພື່ອກໍານົດ ຄວາມສໍາຄັນຂອງອົງປະກອບ . ນີ້ຫມາຍຄວາມວ່າທ່ານສາມາດເພີ່ມໃນຊັ້ນຮຽນເພີ່ມເຕີມເພື່ອກໍານົດວ່າອົງປະກອບນັ້ນຫມາຍຄວາມວ່າແນວໃດ. ນີ້ແມ່ນວິທີ Microformats ເຮັດວຽກ.
ຂໍ້ເສຍຂອງຫ້ອງຮຽນຫຼາຍ
ຄວາມເສຍຫາຍທີ່ໃຫຍ່ທີ່ສຸດໃນການນໍາໃຊ້ຫຼາຍຊັ້ນຮຽນກ່ຽວກັບອົງປະກອບຂອງທ່ານແມ່ນວ່າມັນສາມາດເຮັດໃຫ້ພວກເຂົາເຂົ້າໃຈຜິດໃນການຊອກຫາແລະຈັດການຜ່ານເວລາ. ມັນອາດຈະເປັນການຍາກທີ່ຈະກໍານົດວ່າຮູບແບບໃດທີ່ມີຜົນກະທົບຕໍ່ອົງປະກອບແລະຖ້າມີສະຄິບໃດໆທີ່ມີຜົນກະທົບຕໍ່ມັນ. ຫລາຍໂຄງການທີ່ມີຢູ່ໃນມື້ນີ້, ເຊັ່ນ: Bootstrap, ເຮັດໃຫ້ການນໍາໃຊ້ຢ່າງຫຼວງຫຼາຍຂອງອົງປະກອບທີ່ມີຫຼາຍຫ້ອງຮຽນ. ລະຫັດນັ້ນສາມາດເອົາອອກຈາກມືແລະຍາກທີ່ຈະເຮັດວຽກໄດ້ຢ່າງໄວວາຖ້າທ່ານບໍ່ລະມັດລະວັງ.
ໃນເວລາທີ່ທ່ານໃຊ້ຫ້ອງຮຽນຫຼາຍ, ທ່ານຍັງມີຄວາມສ່ຽງຕໍ່ການມີຮູບແບບສໍາລັບຊັ້ນຮຽນຫນຶ່ງທີ່ລະເມີດແບບຂອງຄົນອື່ນ, ເຖິງແມ່ນວ່າທ່ານບໍ່ໄດ້ຕັ້ງໃຈສໍາລັບເລື່ອງນີ້. ນີ້ສາມາດເຮັດໃຫ້ມັນມີຄວາມຫຍຸ້ງຍາກທີ່ຈະຄິດວ່າເປັນຫຍັງຄໍເຕົ້າໄຂ່ທີ່ທ່ານບໍ່ໄດ້ຖືກນໍາໃຊ້ເຖິງແມ່ນວ່າມັນຈະປາກົດວ່າພວກມັນຄວນຈະມີ.
ທ່ານຈໍາເປັນຕ້ອງຮູ້ເຖິງຄວາມສະເພາະ, ເຖິງແມ່ນວ່າມີຄຸນລັກສະນະທີ່ນໍາໃຊ້ກັບອົງປະກອບຫນຶ່ງເທົ່ານັ້ນ!
ໂດຍການນໍາໃຊ້ເຄື່ອງມືເຊັ່ນເຄື່ອງມືຄຸ້ມຄອງລະບົບໃນ Chrome, ທ່ານສາມາດເບິ່ງໄດ້ງ່າຍຂຶ້ນວ່າວິທີການຂອງທ່ານມີຜົນກະທົບແນວໃດຕໍ່ຮູບແບບຂອງທ່ານແລະຫຼີກເວັ້ນບັນຫານີ້ທີ່ມີລັກສະນະແລະຄຸນລັກສະນະຕ່າງກັນ.
ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ແກ້ໄຂໂດຍ Jeremy Girard ເມື່ອວັນທີ 8/7/17