ຮູບແບບ Cascading Style Sheets ແມ່ນຫຍັງ?
ເວັບໄຊທ໌ແມ່ນປະກອບດ້ວຍຈໍານວນຂອງສ່ວນບຸກຄົນ, ລວມທັງພາບ, ຂໍ້ຄວາມແລະເອກະສານຕ່າງໆ. ເອກະສານເຫຼົ່ານີ້ບໍ່ພຽງແຕ່ປະກອບມີຂໍ້ມູນຕ່າງໆທີ່ສາມາດເຊື່ອມໂຍງກັບຫນ້າຕ່າງໆ, ເຊັ່ນໄຟລ໌ PDF, ແຕ່ຍັງມີເອກະສານທີ່ໃຊ້ໃນການກໍ່ສ້າງຫນ້າຕົວເອງເຊັ່ນເອກະສານ HTML ເພື່ອກໍານົດໂຄງສ້າງຂອງເອກະສານຫນ້າເອກະສານ CSS (Cascading Style Sheet) ເພື່ອກໍານົດເບິ່ງຫນ້າ. ບົດຄວາມນີ້ຈະສະທ້ອນໃຫ້ເຫັນເຖິງ CSS, ເຊິ່ງກວມເອົາສິ່ງທີ່ມັນເປັນແລະບ່ອນທີ່ມັນຖືກນໍາໃຊ້ໃນເວັບໄຊທ໌ມື້ນີ້.
ບົດຮຽນປະຫວັດຂອງ CSS
CSS ໄດ້ພັດທະນາຄັ້ງທໍາອິດໃນປີ 1997 ເປັນວິທີການສໍາລັບນັກພັດທະນາເວັບເພື່ອກໍານົດຮູບລັກສະນະຂອງຫນ້າເວັບທີ່ພວກເຂົາກໍາລັງສ້າງ. ມັນມີຈຸດປະສົງເພື່ອອະນຸຍາດໃຫ້ຜູ້ຊ່ຽວຊານດ້ານເວັບຕ່າງໆ ແຍກເນື້ອໃນ ແລະໂຄງສ້າງຂອງລະຫັດເວັບໄຊທ໌ຈາກການອອກແບບຕາ, ບາງສິ່ງບາງຢ່າງທີ່ບໍ່ສາມາດເຮັດໄດ້ກ່ອນເວລານີ້.
ການແຕກແຍກຂອງໂຄງສ້າງແລະຮູບແບບຊ່ວຍໃຫ້ HTML ສາມາດປະຕິບັດຫນ້າທີ່ຫຼາຍຂຶ້ນກວ່າເດີມ - ການສ້າງເນື້ອຫາ, ໂດຍບໍ່ຕ້ອງກັງວົນກ່ຽວກັບການອອກແບບແລະຮູບແບບຂອງຫນ້າຂອງມັນ, ສິ່ງທີ່ເອີ້ນວ່າ "ເບິ່ງແລະຮູ້ສຶກ" ຂອງຫນ້າ.
CSS ບໍ່ໄດ້ຮັບຄວາມນິຍົມຈົນກ່ວາປະມານ 2000, ໃນເວລາທີ່ຕົວທ່ອງເວັບເວັບໄຊຕ໌ໄດ້ເລີ່ມຕົ້ນການນໍາໃຊ້ຫຼາຍກ່ວາລັກສະນະພື້ນຖານແລະລັກສະນະສີຂອງພາສາການຫມາຍ markup ນີ້. ໃນມື້ນີ້, ທຸກຕົວທ່ອງເວັບທີ່ທັນສະໄຫມສະຫນັບສະຫນູນທັງຫມົດຂອງ CSS ລະດັບ 1, ສ່ວນໃຫຍ່ຂອງ CSS ລະດັບ 2, ແລະເຖິງແມ່ນວ່າຫຼາຍທີ່ສຸດຂອງ CSS ລະດັບ 3. ໃນຖານະ CSS ສືບຕໍ່ພັດທະນາແລະຮູບແບບໃຫມ່ຖືກນໍາສະເຫນີ, ຕົວທ່ອງເວັບເວັບໄຊຕ໌ໄດ້ເລີ່ມການນໍາໃຊ້ໂມດູນທີ່ນໍາສະຫນັບສະຫນູນ CSS ໃຫມ່ເຂົ້າໄປໃນຕົວທ່ອງເວັບເຫຼົ່ານັ້ນແລະໃຫ້ຜູ້ອອກແບບເວັບໄຊຕ໌ທີ່ມີເຄື່ອງມືທີ່ມີປະໂຫຍດໃຫມ່ທີ່ຈະເຮັດວຽກຮ່ວມກັບ.
ໃນຫລາຍປີທີ່ຜ່ານມາມີຜູ້ອອກແບບເວັບໄຊທ໌ທີ່ປະຕິເສດບໍ່ນໍາໃຊ້ CSS ໃນການອອກແບບແລະພັດທະນາເວັບໄຊທ໌, ແຕ່ວ່າການປະຕິບັດນັ້ນແມ່ນຫມົດທຸກຢ່າງແຕ່ມາຈາກອຸດສາຫະກໍາໃນມື້ນີ້. CSS ເປັນມາດຕະຖານທີ່ຖືກນໍາໃຊ້ຢ່າງກວ້າງຂວາງໃນການອອກແບບເວັບໄຊທ໌ແລະທ່ານກໍ່ຈະຕ້ອງກົດດັນໃຫ້ຜູ້ໃດເຮັດວຽກໃນອຸດສາຫະກໍາໃນມື້ນີ້ທີ່ບໍ່ມີຄວາມເຂົ້າໃຈພື້ນຖານກ່ຽວກັບພາສານີ້ຢ່າງຫນ້ອຍ.
CSS ເປັນຕົວຫຍໍ້
ດັ່ງທີ່ໄດ້ກ່າວແລ້ວ, ຄໍາວ່າ CSS ແມ່ນ "Cascading Style Sheet." ໃຫ້ທໍາລາຍປະໂຫຍກນີ້ລົງເລັກນ້ອຍເພື່ອອະທິບາຍຢ່າງເຕັມສ່ວນວ່າເອກະສານເຫຼົ່ານີ້ເຮັດແນວໃດ.
ຄໍາວ່າ "ເອກະສານສະໄຕ" ຫມາຍເຖິງເອກະສານຂອງຕົວມັນເອງ (ເຊັ່ນເອກະສານເອກະສານເອກະສານເອກະສານເອກະສານເອກະສານເອກະສານ CSS ເຊິ່ງກໍ່ສາມາດແກ້ໄຂໄດ້ດ້ວຍຄວາມຫຼາກຫຼາຍຂອງໂຄງການ). ແຜ່ນແບບໄດ້ຖືກນໍາໃຊ້ສໍາລັບ ການອອກແບບ ເອກະສານສໍາລັບເວລາຫຼາຍປີ. ພວກເຂົາເປັນຂໍ້ກໍານົດດ້ານວິຊາການສໍາລັບຮູບແບບ, ບໍ່ວ່າຈະເປັນພິມຫຼືອອນໄລນ໌. ຜູ້ອອກແບບພິມໄດ້ໃຊ້ຮູບແບບຍາວເພື່ອຮັບປະກັນວ່າການອອກແບບຂອງພວກເຂົາຖືກພິມຢ່າງຖືກຕ້ອງກັບຂໍ້ກໍານົດຂອງພວກເຂົາ. ເອກະສານແບບສໍາລັບເວັບໄຊຕ໌ເປັນຈຸດປະສົງດຽວກັນ, ແຕ່ມີການເຮັດວຽກທີ່ເພີ່ມເຂົ້າໃນການບອກຕົວທ່ອງເວັບຂອງເວັບທີ່ຈະສະແດງເອກະສານ. ໃນມື້ນີ້, ຮູບແບບ CSS ຍັງສາມາດນໍາໃຊ້ ຄໍາຖາມສື່ ເພື່ອປ່ຽນວິທີການຫນ້າຊອກຫາ ອຸປະກອນຕ່າງໆແລະຂະຫນາດຫນ້າຈໍ . ນີ້ແມ່ນສິ່ງທີ່ສໍາຄັນທີ່ສຸດເນື່ອງຈາກມັນອະນຸຍາດໃຫ້ເອກະສານເອກະສານ HTML ດຽວທີ່ຈະຖືກສະແດງໃຫ້ແຕກຕ່າງກັນຕາມຫນ້າຈໍທີ່ໃຊ້ໃນການເຂົ້າເຖິງມັນ.
Cascade ແມ່ນພາກສ່ວນຫນຶ່ງທີ່ພິເສດຂອງຄໍາສັບ "ຮູບສະໄຕແບບຊັ້ນ". ເອກະສານແບບເວັບໄຊຕ໌ ແມ່ນມີຄວາມສົນໃຈໃນການສ້າງແບບຈໍາລອງຂອງຮູບແບບຕ່າງໆທີ່ຢູ່ໃນແຜ່ນນັ້ນ, ເຊັ່ນ: ແມ່ນ້ໍາເຫນືອນ້ໍາຕົກ. ນ້ໍາໃນແມ່ນ້ໍາ hits ທັງຫມົດຫີນໃນນ້ໍາຕົກ, ແຕ່ວ່າພຽງແຕ່ຢູ່ທາງລຸ່ມມີຜົນກະທົບທີ່ແທ້ຈິງບ່ອນທີ່ນ້ໍາຈະໄຫຼ. ດຽວກັນແມ່ນຄວາມຈິງຂອງ cascade ໃນຮູບແບບເວັບໄຊທ໌.
ທຸກໆເວັບໄຊທ໌ໄດ້ຮັບຜົນກະທົບຈາກເອກະສານສະໄຕຢ່າງຫນ້ອຍຫນຶ່ງ, ເຖິງແມ່ນວ່ານັກອອກແບບເວັບໄຊຕ໌ບໍ່ໄດ້ໃຊ້ແບບໃດ. ແບບສະໄຕແບບນີ້ແມ່ນເອກະສານແບບ ຕົວແທນຜູ້ໃຊ້ - ເປັນທີ່ຮູ້ຈັກເປັນຄໍເຕົ້າໄຂ່ທີ່ເລີ່ມຕົ້ນທີ່ຕົວທ່ອງເວັບຂອງເວັບຈະໃຊ້ເພື່ອສະແດງຫນ້າຖ້າບໍ່ມີຄໍາແນະນໍາອື່ນ. ຕົວຢ່າງ, ໂດຍ hyperlinks ແບບເດີມແມ່ນຄໍເຕົ້າໄຂ່ໃນສີຟ້າແລະພວກເຂົາຖືກເນັ້ນຫນັກໃສ່. ຮູບແບບເຫລົ່ານັ້ນມາຈາກເອກະສານສະໄຕແບບເບື້ອງຕົ້ນຂອງຕົວທ່ອງເວັບຂອງເວັບໄຊຕ໌. ຖ້າຜູ້ອອກແບບເວັບແນະນໍາຄໍາແນະນໍາອື່ນໆ, ຕົວທ່ອງເວັບຈະຕ້ອງຮູ້ວ່າມີຄໍາແນະນໍາໃດແດ່. ຕົວທ່ອງເວັບທັງຫມົດມີຄໍເຕົ້າໄຂ່ໃນຕອນຕົ້ນຂອງພວກເຂົາເອງ, ແຕ່ຈໍານວນຕົ້ນສະບັບຈໍານວນຫຼາຍ (ເຊັ່ນ: ການເຊື່ອມຕໍ່ຂໍ້ຄວາມທີ່ມີສີສັນສີຟ້າ) ຖືກແບ່ງປັນທົ່ວທຸກລຸ້ນຫຼືສ່ວນໃຫຍ່ຂອງຕົວທ່ອງເວັບແລະເວີຊັນ.
ສໍາລັບຕົວຢ່າງອື່ນຂອງຕົວທ່ອງເວັບໃນເບື້ອງຕົ້ນ, ໃນຕົວທ່ອງເວັບຂອງຕົວທ່ອງເວັບຂອງຂ້ອຍ, font ທໍາອິດແມ່ນ " Times New Roman " ທີ່ສະແດງໃນຂະຫນາດ 16. ເກືອບບໍ່ມີຫນ້າໃດຫນຶ່ງທີ່ຂ້ອຍໄປຢ້ຽມຢາມໃນຄອບຄົວແລະຂະຫນາດຂອງຕົວອັກສອນ. ນີ້ແມ່ນຍ້ອນວ່າ cascade ກໍານົດວ່າຮູບແບບທີສອງ, ເຊິ່ງຖືກກໍານົດໄວ້ໂດຍນັກອອກແບບຕົວເອງ, ເພື່ອປັບລະ ດັບຂະຫນາດຕົວອັກສອນ ແລະຄອບຄົວ, ການເນັ້ນໃສ່ ຄ່າເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບຂອງເວັບ. ແຜ່ນສະໄຕໃດໆທີ່ທ່ານສ້າງສໍາລັບຫນ້າເວັບຈະມີຄວາມສະເພາະຫຼາຍກວ່າຮູບແບບເລີ່ມຕົ້ນຂອງຕົວທ່ອງເວັບ, ດັ່ງນັ້ນຄ່າເລີ່ມຕົ້ນເຫຼົ່ານັ້ນຈະໃຊ້ເທົ່ານັ້ນຖ້າເອກະສານແບບຂອງທ່ານບໍ່ສໍາເນົາໃຫ້ເຂົາເຈົ້າ. ຖ້າທ່ານຕ້ອງການເຊື່ອມຕໍ່ເປັນສີຟ້າແລະເນັ້ນຫນັກ, ທ່ານບໍ່ຈໍາເປັນຕ້ອງເຮັດຫຍັງເພາະວ່າມັນເປັນຄ່າເລີ່ມຕົ້ນ, ແຕ່ຖ້າໄຟລ໌ CSS ຂອງເວັບໄຊທ໌ຂອງທ່ານກ່າວວ່າການເຊື່ອມຕໍ່ຄວນສີຂຽວ, ສີນັ້ນຈະຖືກແທນທີ່ສີຟ້າໃນຕອນຕົ້ນ. ແນວໃດກໍ່ຕາມ, ມັນຈະຢູ່ໃນຕົວຢ່າງນີ້, ເພາະວ່າທ່ານບໍ່ໄດ້ລະບຸໄວ້ໃນທາງອື່ນ.
CSS ຖືກນໍາໃຊ້ຢູ່ໃສ?
CSS ຍັງສາມາດໃຊ້ວິທີການກໍານົດວິທີຫນ້າເວັບຄວນເບິ່ງໃນເວລາທີ່ໄດ້ເບິ່ງຢູ່ໃນສື່ອື່ນໆກວ່າຕົວທ່ອງເວັບ. ຕົວຢ່າງເຊັ່ນ, ທ່ານສາມາດສ້າງເອກະສານແບບພິມທີ່ຈະກໍານົດວິທີການພິມຫນ້າເວັບ. ເນື່ອງຈາກວ່າຫນ້າເວັບຕ່າງໆເຊັ່ນປຸ່ມນໍາທິດຫຼືແບບຟອມເວັບຈະບໍ່ມີຈຸດປະສົງໃນຫນ້າພິມ, ແບບ Print Style Sheet ສາມາດໃຊ້ "ປິດ" ເຂດເຫຼົ່ານັ້ນເມື່ອພິມຫນ້າ. ໃນຂະນະທີ່ບໍ່ແມ່ນການປະຕິບັດທົ່ວໄປໃນສະຖານທີ່ຫຼາຍ, ທາງເລືອກໃນການສ້າງຮູບແບບແບບພິມແມ່ນມີປະສິດທິພາບແລະຫນ້າສົນໃຈ (ໃນປະສົບການຂອງຂ້ອຍ - ຜູ້ຊ່ຽວຊານດ້ານຄອມພິວເຕີສ່ວນໃຫຍ່ບໍ່ໄດ້ເຮັດແບບນີ້ພຽງແຕ່ຂອບເຂດຂອງງົບປະມານຂອງເວັບໄຊທ໌ບໍ່ໄດ້ເອີ້ນວ່າວຽກງານເພີ່ມເຕີມນີ້ )
CSS ເປັນຫຍັງຈຶ່ງສໍາຄັນ?
CSS ແມ່ນຫນຶ່ງໃນເຄື່ອງມືທີ່ມີປະສິດທິພາບທີ່ສຸດທີ່ນັກອອກແບບເວັບສາມາດຮຽນຮູ້ໄດ້ເພາະວ່າມັນສາມາດສົ່ງຜົນກະທົບຕໍ່ຮູບລັກສະນະຂອງເວັບໄຊທ໌. ຂຽນແບບອັກສອນທີ່ດີສາມາດໄດ້ຮັບການປັບປຸງຢ່າງໄວວາແລະອະນຸຍາດໃຫ້ສະຖານທີ່ປ່ຽນແປງສິ່ງທີ່ຖືກຈັດອັນດັບຄວາມສໍາຄັນໃນຫນ້າຈໍ, ເຊິ່ງສະແດງໃຫ້ເຫັນມູນຄ່າແລະຈຸດສຸມຂອງຜູ້ມາຢ້ຽມຢາມ, ໂດຍບໍ່ມີການປ່ຽນແປງໃດໆທີ່ຕ້ອງການທີ່ຈະເຮັດສໍາເນົາ HTML.
ສິ່ງທ້າທາຍຕົ້ນຕໍຂອງ CSS ແມ່ນວ່າມີການຮຽນຮູ້ຢ່າງຫຼວງຫຼາຍແລະມີຕົວທ່ອງເວັບການປ່ຽນແປງທຸກໆມື້, ສິ່ງທີ່ເຮັດວຽກດີໃນມື້ນີ້ອາດຈະບໍ່ມີຄວາມຮູ້ສຶກໃນມື້ອື່ນຍ້ອນວ່າຄໍເຕົ້າໄຂ່ທີ່ໃຫມ່ຈະໄດ້ຮັບການສະຫນັບສະຫນູນແລະຄົນອື່ນຈະຫຼຸດລົງຫຼືຫຼຸດອອກຈາກເງື່ອນໄຂຫນຶ່ງ ທີ່ຢູ່
ເນື່ອງຈາກ CSS ສາມາດສະສົມແລະສົມທົບແລະພິຈາລະນາວິທີຕ່າງໆທີ່ສາມາດຕີຄວາມຫມາຍແລະນໍາທິດທາງຕ່າງໆທີ່ແຕກຕ່າງກັນ, CSS ສາມາດມີຄວາມຫຍຸ້ງຍາກຫຼາຍກ່ວາ HTML ທໍາມະດາທີ່ຈະເປັນຕົ້ນ. CSS ຍັງປ່ຽນແປງໃນຕົວທ່ອງເວັບໃນລັກສະນະທີ່ HTML ກໍ່ບໍ່ໄດ້. ແຕ່ເມື່ອທ່ານເລີ່ມຕົ້ນໃຊ້ CSS, ທ່ານຈະເຫັນວ່າການໃຊ້ພະລັງງານຂອງແຜ່ນສະໄຕຈະໃຫ້ທ່ານມີຄວາມຍືດຫຍຸ່ນທີ່ຫນ້າເຊື່ອຖືໃນວິທີການຈັດວາງຫນ້າເວັບຕ່າງໆແລະກໍານົດລັກສະນະແລະຄວາມຮູ້ສຶກຂອງພວກເຂົາ. ຕາມວິທີທາງການ, ທ່ານຈະເກັບ "ຖົງເຄັດລັບ" ຂອງຮູບແບບແລະວິທີການທີ່ເຮັດວຽກສໍາລັບທ່ານໃນອະດີດແລະທ່ານສາມາດປ່ຽນໄປອີກເມື່ອທ່ານສ້າງຫນ້າເວັບໃຫມ່ໃນອະນາຄົດ.
ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ແກ້ໄຂໂດຍ Jeremy Girard ໃນວັນທີ 7/5/17,