ສິ່ງທີ່ມີຄວາມຫມາຍສໍາຄັນໃນ CSS?

ສໍາຄັນສໍາລັບການປ່ຽນແປງໃນ Cascade ໄດ້

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

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

ມັນຫມາຍຄວາມວ່າແນວໃດແລະ, ຄືກັນກັບ, ວ່າທ່ານໃຊ້ຄໍາປະກາດທີ່ຖືກຕ້ອງໃນຮູບແບບຂອງທ່ານແນວໃດ?

The Cascade of CSS

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

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

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

ນີ້ແມ່ນຍ້ອນວ່າມູນຄ່າ "ສີດໍາ" ແມ່ນຢູ່ໃນອັນດັບທີສອງ. ນັບຕັ້ງແຕ່ CSS ແມ່ນອ່ານຈາກດ້ານເທິງໄປຫາລຸ່ມ, ແບບສຸດທ້າຍແມ່ນ "ສີດໍາ" ແລະດັ່ງນັ້ນຈື່ວ່າຫນຶ່ງຊະນະ.

p {color: red }
p {color: black }

ແນວໃດ, ການປ່ຽນແປງທີ່ສໍາຄັນຄວາມສໍາຄັນ

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

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

ເພື່ອເຮັດໃຫ້ຂໍ້ຄວາມຫຍໍ້ສະເຫມີສີແດງ, ຈາກຕົວຢ່າງຂ້າງເທິງ, ທ່ານຈະໃຊ້:

p {color: red! important }
p {color: black }

ໃນປັດຈຸບັນຂໍ້ຄວາມທັງຫມົດຈະປາກົດຢູ່ໃນສີແດງ, ເຖິງແມ່ນວ່າມູນຄ່າ "ສີດໍາ" ແມ່ນຢູ່ໃນອັນດັບທີສອງ. ຄໍາແນະນໍາທີ່ສໍາຄັນທີ່ overrides ກົດລະບຽບປົກກະຕິຂອງ cascade ໄດ້ແລະມັນໃຫ້ແບບທີ່ສະເພາະທີ່ສູງສະເພາະ.

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

ເມື່ອຕ້ອງໃຊ້!

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

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

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

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

ການນໍາໃຊ້ແມ່ນສໍາຄັນສໍາລັບການທົດສອບຫຼືໃນບາງກໍລະນີ, ເມື່ອທ່ານຕ້ອງການທີ່ຈະ override ແບບ inline ທີ່ເປັນສ່ວນຫນຶ່ງຂອງຊຸດຮູບແບບຫົວຂໍ້ຫຼື template.

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

User Style Sheets

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

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

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

ແກ້ໄຂໂດຍ Jeremy Girard