Classes ແລະ ID ຊ່ວຍເພີ່ມຂະຫນາດ CSS ຂອງທ່ານ
ການສ້າງເວັບໄຊທ໌ໃນເວັບໄຊທ໌ມື້ນີ້ຮຽກຮ້ອງໃຫ້ມີຄວາມເຂົ້າໃຈລະອຽດກ່ຽວກັບ CSS (Cascading Style Sheets). ເຫຼົ່ານີ້ແມ່ນຄໍາແນະນໍາທີ່ທ່ານໃຫ້ເວັບໄຊທ໌ເພື່ອກໍານົດແນວໃດມັນຈະຈັດວາງແບບໃນປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ. ທ່ານໃຊ້ຊຸດຂອງ "ຄໍເຕົ້າໄຂ່ທີ່" ກັບເອກະສານ HTML ຂອງທ່ານເຊິ່ງຈະສ້າງຮູບລັກສະນະແລະຄວາມຮູ້ສຶກຂອງຫນ້າເວັບຂອງທ່ານ.
ມີຫລາຍວິທີທີ່ຈະນໍາໃຊ້ຮູບແບບທີ່ໄດ້ກ່າວມາຂ້າງເທິງໃນເອກະສານແຕ່ວ່າທ່ານມັກໃຊ້ແບບໃດໆໃນບາງເອກະສານທີ່ຢູ່ໃນເອກະສານແຕ່ບໍ່ແມ່ນຕົວຢ່າງຂອງອົງປະກອບທັງຫມົດ.
ທ່ານອາດຈະຕ້ອງການສ້າງແບບທີ່ທ່ານສາມາດນໍາໃຊ້ກັບອົງປະກອບຕ່າງໆໃນເອກະສານ, ໂດຍບໍ່ຕ້ອງເຮັດຊ້ໍາກົດລະບຽບສໍາລັບແຕ່ລະຕົວຢ່າງແຕ່ລະຄົນ. ເພື່ອບັນລຸຮູບແບບທີ່ຕ້ອງການເຫຼົ່ານີ້, ທ່ານຈະນໍາໃຊ້ຄຸນລັກສະນະຂອງເອກະສານຊັ້ນແລະ ID. ຄຸນລັກສະນະເຫຼົ່ານີ້ແມ່ນມີຄຸນລັກສະນະທົ່ວໂລກທີ່ສາມາດນໍາໃຊ້ກັບເກືອບທຸກ ແທັບ HTML . ນັ້ນຫມາຍຄວາມວ່າທ່ານກໍາລັງສ້າງແບບຈໍາແນກ, ວັກ, ລິ້ງ, ລາຍການຫຼືສ່ວນໃດຂອງ HTML ອື່ນໆໃນເອກະສານຂອງທ່ານ, ທ່ານສາມາດສົ່ງກັບຄຸນລັກສະນະຂອງຊັ້ນແລະ ID. ຊ່ວຍໃຫ້ທ່ານເຮັດສໍາເລັດຫນ້າວຽກນີ້!
Class Selectors
ຕົວເລືອກຫ້ອງຮຽນອະນຸຍາດໃຫ້ທ່ານຕັ້ງຄໍເຕົ້າໄຂ່ທີ່ມີລັກສະນະດຽວກັນຫຼືໂຄດຄໍາສັ່ງໃນເອກະສານ. ຕົວຢ່າງ: ທ່ານອາດຈະຕ້ອງມີບາງສ່ວນຂອງຂໍ້ຄວາມຂອງທ່ານເອີ້ນວ່າສີທີ່ແຕກຕ່າງຈາກສ່ວນທີ່ເຫຼືອຂອງຂໍ້ຄວາມໃນເອກະສານ. ພາກສ່ວນທີ່ເນັ້ນໃສ່ເຫຼົ່ານີ້ສາມາດເປັນ "ເຕືອນ" ທີ່ທ່ານກໍານົດຢູ່ໃນຫນ້າ. ທ່ານສາມາດກໍາຫນົດວັກຕອນຂອງທ່ານດ້ວຍຫ້ອງຮຽນດັ່ງນີ້:
p {color: # 0000ff }
palert {color: # ff0000 }
ຮູບແບບເຫຼົ່ານີ້ຈະກໍານົດສີຂອງວັກ ທັງຫມົດ ໃຫ້ເປັນສີຟ້າ (# 0000ff), ແຕ່ວັກໃດທີ່ມີຄຸນລັກສະນະຊັ້ນຂອງ "ການເຕືອນ" ແທນທີ່ຈະເປັນແບບສີແດງ (# ff0000). ນີ້ແມ່ນຍ້ອນວ່າຄຸນລັກສະນະຫ້ອງຮຽນມີຄວາມສະເພາະທີ່ສູງກວ່າກົດລະບຽບ CSS ທໍາອິດ, ເຊິ່ງໃຊ້ພຽງແຕ່ຕົວເລືອກແທັກ.
ໃນເວລາທີ່ເຮັດວຽກກັບ CSS, ກົດລະບຽບສະເພາະຫຼາຍຈະ override ຫນຶ່ງທີ່ບໍ່ສະເພາະໃດຫນຶ່ງ. ດັ່ງນັ້ນ, ໃນຕົວຢ່າງນີ້, ກົດລະບຽບທົ່ວໄປຫຼາຍກໍານົດສີຂອງວັກທັງຫມົດ, ແຕ່ກົດລະບຽບທີສອງ, ກົດລະບຽບຫຼາຍກວ່າການ overrides ວ່າການຕັ້ງຄ່າພຽງແຕ່ຢູ່ໃນວັກບາງ.
ນີ້ແມ່ນວິທີການນີ້ສາມາດຖືກນໍາໃຊ້ໃນບາງ HTML markup:
ຫຍໍ້ຫນ້ານີ້ຈະຖືກສະແດງຢູ່ໃນສີຟ້າເຊິ່ງເປັນຄ່າເລີ່ມຕົ້ນສໍາລັບຫນ້າ.
ວັກນີ້ຍັງຈະຢູ່ໃນສີຟ້າ.
ແລະວັກນີ້ຈະຖືກສະແດງຢູ່ໃນສີແດງເນື່ອງຈາກວ່າຄຸນລັກສະນະຂອງຊັ້ນຈະ overwrite ສີຟ້າມາດຕະຖານຈາກຕົວເລືອກເລືອກອົງປະກອບ.
ໃນຕົວຢ່າງດັ່ງກ່າວ, ແບບຂອງ "p.alert" ຈະໃຊ້ກັບອົງປະກອບວັກທີ່ໃຊ້ແຖບ "ເຕືອນ" ເທົ່ານັ້ນ. ຖ້າທ່ານຕ້ອງການໃຊ້ຊັ້ນຮຽນໃນອົງປະກອບ HTML ຫຼາຍ, ທ່ານຈະເອົາສ່ວນ HTML ອອກຈາກຈຸດເລີ່ມຕົ້ນ (ໃຫ້ແນ່ໃຈວ່າອອກຈາກໄລຍະເວລາ () ໃນສະຖານທີ່), ເຊັ່ນ:
.alert {background-color: # ff0000;}
ຫ້ອງຮຽນນີ້ມີຢູ່ໃນປັດຈຸບັນສໍາລັບອົງປະກອບທີ່ຕ້ອງການມັນ. ທຸກໆເອກະສານ HTML ຂອງທ່ານທີ່ມີມູນຄ່າຄຸນລັກສະນະຊັ້ນຂອງ "ການແຈ້ງເຕືອນ" ຈະໄດ້ຮັບແບບນີ້. ໃນ HTML ຂ້າງລຸ່ມນີ້, ພວກເຮົາມີທັງວັກແລະລະດັບລໍາດັບທີ 2 ທີ່ນໍາໃຊ້ຫ້ອງຮຽນ "ເຕືອນ". ທັງສອງນີ້ຈະມີສີພື້ນຫລັງຂອງສີແດງໂດຍອີງໃສ່ CSS ພວກເຮົາສະແດງໃຫ້ເຫັນ.
ຫຍໍ້ຫນ້ານີ້ຈະຖືກຂຽນເປັນສີແດງ.
ແລະ h2 ນີ້ກໍ່ຈະເປັນສີແດງ.
ໃນເວັບໄຊທ໌ມື້ນີ້, ຄຸນລັກສະນະຂອງຊັ້ນຮຽນມັກຖືກນໍາໃຊ້ໃນຫຼາຍໆອົງປະກອບຍ້ອນວ່າມັນງ່າຍຕໍ່ການເຮັດວຽກກັບມຸມມອງສະເພາະທີ່ມີ IDs. ທ່ານຈະຊອກຫາຫນ້າ HTML ທີ່ມີປະໂຫຍດຫຼາຍທີ່ສຸດທີ່ຈະຕ້ອງເຕັມໄປດ້ວຍຄຸນລັກສະນະຊັ້ນ, ບາງສ່ວນທີ່ຖືກຊ້ໍາອີກຄັ້ງໃນເອກະສານແລະອື່ນໆເຊິ່ງອາດຈະປາກົດໃນຄັ້ງດຽວເທົ່ານັ້ນ.
ຕົວເລືອກ ID
ຕົວ ເລືອກ ID ອະນຸຍາດໃຫ້ທ່ານໃຫ້ຊື່ໃຫ້ເປັນແບບສະເພາະໂດຍບໍ່ມີການເຊື່ອມໂຍງມັນກັບ tag ຫຼື ອົງປະກອບ HTML ອື່ນໆ. ບອກວ່າທ່ານມີສ່ວນແບ່ງໃນ HTML markup ຂອງທ່ານທີ່ມີຂໍ້ມູນກ່ຽວກັບເຫດການ.
ທ່ານສາມາດໃຫ້ເອກະສານນີ້ເປັນເອກະລັກ ID ຂອງ "ເຫດການ", ແລະຫຼັງຈາກນັ້ນຖ້າທ່ານຕ້ອງການສະຫຼຸບການແບ່ງທີ່ມີຂອບສີດໍາ 1 ຈຸດ, ທ່ານຂຽນລະຫັດ ID ນີ້:
#event {border: 1px solid # 000 }
ສິ່ງທ້າທາຍທີ່ມີ ຕົວເລືອກ ID ແມ່ນວ່າພວກເຂົາບໍ່ສາມາດຖືກຊ້ໍາໃນເອກະສານ HTML. ພວກເຂົາຕ້ອງເປັນເອກະລັກ (ທ່ານສາມາດໃຊ້ ID ດຽວກັນໃນຫຼາຍຫນ້າຂອງເວັບໄຊທ໌ຂອງທ່ານ, ແຕ່ວ່າພຽງແຕ່ຄັ້ງດຽວໃນແຕ່ລະເອກະສານ HTML ແຕ່ລະຄົນ). ດັ່ງນັ້ນ, ຖ້າທ່ານມີ 3 ເຫດການທີ່ຕ້ອງການຊາຍແດນນີ້, ທ່ານຈໍາເປັນຕ້ອງໃຫ້ພວກເຂົາມີຄຸນລັກສະນະ ID ຂອງ "event1", "event2" ແລະ "event3" ແລະແບບຂອງແຕ່ລະຄົນ. ດັ່ງນັ້ນ, ມັນຈຶ່ງຈະງ່າຍຕໍ່ການນໍາໃຊ້ຄຸນລັກສະນະຊັ້ນຮຽນທີ່ກ່າວມາກ່ອນຂອງ "ເຫດການ" ແລະໃຫ້ພວກເຂົາແບບດຽວກັນ.
ສິ່ງທ້າທາຍອື່ນທີ່ມີ ຄຸນລັກສະນະ ID ແມ່ນວ່າພວກເຂົາມີຄວາມສະເພາະທີ່ສູງກວ່າຄຸນລັກສະນະຊັ້ນ. ນີ້ຫມາຍຄວາມວ່າຖ້າທ່ານຕ້ອງການ CSS ທີ່ overrides ແບບທີ່ໄດ້ສ້າງໄວ້ກ່ອນຫນ້ານີ້, ມັນອາດຈະຍາກທີ່ຈະເຮັດດັ່ງນັ້ນຖ້າທ່ານມີຂໍ້ມູນຫຼາຍເກີນໄປກ່ຽວກັບ IDs. ມັນແມ່ນສໍາລັບເຫດຜົນທີ່ນັກພັດທະນາເວັບຫຼາຍຄົນໄດ້ຍ້າຍອອກໄປຈາກການໃຊ້ ID ໃນ markup ຂອງເຂົາເຈົ້າ, ເຖິງແມ່ນວ່າພວກເຂົາເຈົ້າມີຈຸດປະສົງນໍາໃຊ້ມູນຄ່າຄັ້ງດຽວເທົ່ານັ້ນ, ແລະແທນທີ່ຈະຫັນໄປສູ່ຄຸນລັກສະນະຂອງຊັ້ນທີ່ຫນ້ອຍກວ່າສໍາລັບເກືອບທຸກຮູບແບບ.
ພື້ນທີ່ຫນຶ່ງທີ່ມີຄຸນລັກສະນະ ID ທີ່ມາເຂົ້າໃນການຫຼິ້ນແມ່ນເວລາທີ່ທ່ານຕ້ອງການສ້າງຫນ້າທີ່ມີການເຊື່ອມໂຍງຫນ້າໃນຫນ້າ. ຕົວຢ່າງເຊັ່ນຖ້າທ່ານມີເວບໄຊທ໌ແບບ parallax ທີ່ມີເນື້ອຫາທັງຫມົດໃນຫນ້າດຽວທີ່ມີລິ້ງທີ່ "ຂ້າມ" ໄປຫາບາງສ່ວນຂອງຫນ້ານັ້ນ. ນີ້ແມ່ນເຮັດໄດ້ໂດຍໃຊ້ຄຸນລັກສະນະ ID ແລະການເຊື່ອມໂຍງຂໍ້ຄວາມທີ່ນໍາໃຊ້ການເຊື່ອມໂຍງເຫຼົ່ານີ້.
ທ່ານພຽງແຕ່ຈະເພີ່ມມູນຄ່າຂອງຄຸນລັກສະນະດັ່ງກ່າວ, preceded ໂດຍສັນຍາລັກ #, ກັບ href attribute ຂອງລິ້ງຄ໌, ເຊັ່ນນີ້:
ນີ້ແມ່ນການເຊື່ອມຕໍ່
ເມື່ອກົດຫລືສໍາຜັດ, ການເຊື່ອມຕໍ່ນີ້ຈະໄປຫາສ່ວນຫນຶ່ງຂອງຫນ້າທີ່ມີຄຸນລັກສະນະ ID ນີ້. ຖ້າບໍ່ມີອົງປະກອບໃນຫນ້າທີ່ນໍາໃຊ້ມູນຄ່າ ID ນີ້, ການເຊື່ອມຕໍ່ຈະບໍ່ເຮັດຫຍັງ.
ຈືຂໍ້ມູນການ, ຖ້າທ່ານຕ້ອງການສ້າງຫນ້າເຊື່ອມຕໍ່ຢູ່ໃນເວັບໄຊຕ໌, ການນໍາໃຊ້ຄຸນລັກສະນະ ID ຈະຕ້ອງມີ, ແຕ່ວ່າທ່ານຍັງສາມາດຫັນໄປຫາຫ້ອງຮຽນສໍາລັບຈຸດປະສົງຂອງ CSS ແບບທົ່ວໄປ. ນີ້ແມ່ນວິທີການຂ້າພະເຈົ້າຫມາຍເຖິງຫນ້າຕ່າງໆໃນມື້ນີ້ - ຂ້າພະເຈົ້າໄດ້ນໍາໃຊ້ຕົວເລືອກຊັ້ນຮຽນໃຫ້ຫຼາຍເທົ່າທີ່ເປັນໄປໄດ້ແລະພຽງແຕ່ສົ່ງກັບ ID ໃນເວລາທີ່ຂ້ອຍຈໍາເປັນຕ້ອງປະຕິບັດບໍ່ພຽງແຕ່ເປັນ hook ສໍາລັບ CSS ເທົ່ານັ້ນແຕ່ເປັນ link ໃນຫນ້າ.
ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ແກ້ໄຂໂດຍ Jeremy Girard ເມື່ອວັນທີ 8/9/17