ວິທີການສ້າງແບບສະໄຕແບບພາຍນອກ

ໃຊ້ CSS Site Wide

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

HTML ໄດ້ສະເຫມີສິ່ງທີ່ສະຫນອງເວັບໄຊທີ່ມີໂຄງສ້າງຂອງມັນ. ໃນຊ່ວງທໍາອິດຂອງເວັບ, HTML ຍັງມີຂໍ້ມູນກ່ຽວກັບແບບຟອມ. ອົງປະກອບເຊັ່ນ tag ຖືກ littered ທົ່ວ HTML code, ເພີ່ມຂໍ້ມູນເບິ່ງແລະຮູ້ສຶກຄຽງຄູ່ກັບຂໍ້ມູນໂຄງສ້າງ. ການເຄື່ອນໄຫວຂອງມາດຕະຖານເວັບໄດ້ຊຸກຍູ້ໃຫ້ພວກເຮົາປ່ຽນແປງການປະຕິບັດນີ້ແລະແທນທີ່ຈະສົ່ງຂໍ້ມູນແບບລົງໃນ CSS ຫຼື Cascading Style Sheets. ການນໍາຂັ້ນຕອນນີ້ຕື່ມອີກ, ຄໍາແນະນໍາໃນປະຈຸບັນແມ່ນວ່າທ່ານໃຊ້ສິ່ງທີ່ຮູ້ຈັກເປັນ "ເອກະສານສະໄຕພາຍນອກ" ສໍາລັບຄວາມຕ້ອງການຂອງທ່ານໃນຮູບແບບເວັບໄຊທ໌.

ຂໍ້ດີແລະຂໍ້ເສຍຂອງເອກະສານສະໄຕພາຍນອກ

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

ຂໍ້ໄດ້ປຽບຂອງເອກະສານສະໄຕພາຍນອກ

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

ຂໍ້ເສຍຂອງຮູບແບບພາຍນອກ

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

ວິທີການສ້າງແຜ່ນສະໄຕແບບພາຍນອກ

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

selector {property: value}

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

ເມື່ອທ່ານມີເອກະສານເອກະສານສະໄຕ, ທ່ານຈໍາເປັນຕ້ອງເຊື່ອມໂຍງກັບ ຫນ້າເວັບ ຂອງທ່ານ. ນີ້ສາມາດເຮັດໄດ້ໃນສອງທາງ:

  1. ການເຊື່ອມໂຍງ
    1. ເພື່ອເຊື່ອມຕໍ່ແຜ່ນສະໄຕແບບສະໄຕ, ທ່ານໃຊ້ແທັບ HTML. ນີ້ມີຄຸນລັກສະນະ rel , type , ແລະ href . attrib rel ບອກວ່າທ່ານກໍາລັງເຊື່ອມໂຍງ (ໃນກໍລະນີນີ້ເປັນຮູບແບບ), ປະເພດກໍານົດ MIME ສໍາລັບຕົວທ່ອງເວັບ, ແລະ href ແມ່ນເສັ້ນທາງໄປຫາໄຟລ໌ .css.
  2. ການນໍາເຂົ້າ
    1. ທ່ານຈະນໍາໃຊ້ເອກະສານສະໄຕທີ່ນໍາເຂົ້າພາຍໃນເອກະສານສະໄຕລະດັບເອກະສານເພື່ອໃຫ້ທ່ານສາມາດນໍາໃຊ້ຄຸນລັກສະນະຂອງເອກະສານສະໄຕພາຍນອກໄດ້ໃນຂະນະທີ່ບໍ່ສູນເສຍເອກະສານໃດໆ. ທ່ານໂທຫາມັນໃນແບບດຽວກັນກັບການເອີ້ນແຜ່ນສະໄຕແບບທີ່ເຊື່ອມໂຍງ, ມັນຕ້ອງຖືກເອີ້ນພາຍໃນການປະກາດແບບລະດັບເອກະສານ. ທ່ານສາມາດນໍາເຂົ້າແບບອັກສອນແບບພາຍນອກຫຼາຍຢ່າງຕາມທີ່ທ່ານຈໍາເປັນຕ້ອງຮັກສາເວັບໄຊທ໌ຂອງທ່ານ.

ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ແກ້ໄຂໂດຍ Jeremy Girard ເມື່ອວັນທີ 8/8/17