ເປັນຫຍັງຄໍາງ່າຍດາຍງ່າຍດາຍການເຂົ້າລະຫັດ
CSS, ຫຼື Cascading Style Sheets, ແມ່ນວິທີການທີ່ໄດ້ຮັບການຍອມຮັບຈາກອຸດສາຫະກໍາການອອກແບບເວັບເພື່ອເພີ່ມຮູບແບບທີ່ເບິ່ງເຫັນໃນເວັບໄຊທ໌. ດ້ວຍ CSS, ທ່ານສາມາດຄວບຄຸມຮູບແບບຫນ້າ, ສີ, ພິມປະທັບໃຈ , ຮູບພາບພື້ນຫລັງແລະອື່ນໆອີກ. ໂດຍພື້ນຖານແລ້ວ, ຖ້າມັນເປັນແບບຕາ, ຫຼັງຈາກນັ້ນ CSS ແມ່ນວິທີທີ່ຈະນໍາເອົາຮູບແບບເຫລົ່ານັ້ນໄປຫາເວັບໄຊທ໌ຂອງທ່ານ.
ເມື່ອທ່ານເພີ່ມຄໍເຕົ້າໄຂ່ທີ່ CSS ກັບເອກະສານ, ທ່ານອາດຈະສັງເກດເຫັນວ່າເອກະສານເລີ່ມຕົ້ນທີ່ຈະຍາວແລະຍາວກວ່າ. ເຖິງແມ່ນວ່າເວັບໄຊທ໌ຂະຫນາດນ້ອຍທີ່ມີພຽງແຕ່ຫນ້າເວັບຕ່າງໆສາມາດສິ້ນສຸດດ້ວຍໄຟລ໌ CSS ຂະຫນາດໃຫຍ່ - ແລະເວັບໄຊຂະຫນາດໃຫຍ່ທີ່ມີ lots ແລະຫນ້າຂອງເນື້ອຫາທີ່ເປັນເອກະລັກສາມາດມີເອກະສານ CSS ຫຼາຍ. ນີ້ແມ່ນປະສົມໂດຍ ເວັບໄຊທ໌ທີ່ຕອບສະຫນອງ ທີ່ມີຫຼາຍ ຄໍາຖາມ ໃນ ສື່ມວນຊົນທີ່ ລວມຢູ່ໃນຮູບແບບເພື່ອປ່ຽນວິທີການເບິ່ງຮູບພາບແລະຫນ້າເວັບວາງອອກສໍາລັບຫນ້າຈໍທີ່ແຕກຕ່າງກັນ.
ແມ່ນແລ້ວ, ໄຟລ໌ CSS ສາມາດຍາວໄດ້. ນີ້ບໍ່ແມ່ນບັນຫາສໍາຄັນໃນການປະຕິບັດງານຂອງເວັບໄຊທ໌ແລະຄວາມໄວໃນການດາວໂຫລດ, ເພາະວ່າເຖິງແມ່ນວ່າເອກະສານ CSS ທີ່ຍາວນານອາດຈະມີຂະຫນາດນ້ອຍ (ເພາະວ່າມັນເປັນເອກະສານຂໍ້ຄວາມ). ຍັງ, ທຸກໆນ້ອຍຈະນັບໃນເວລາທີ່ມັນມາກັບຄວາມໄວຫນ້າ, ດັ່ງນັ້ນຖ້າທ່ານສາມາດເຮັດໃຫ້ຮູບແບບຂອງທ່ານເລີ້ມ, ມັນເປັນຄວາມຄິດທີ່ດີ. ນີ້ແມ່ນບ່ອນທີ່ "ຫຍໍ້" ສາມາດມາໃນຫຼາຍໆ handy ໃນເອກະສານແບບຂອງທ່ານ!
Commas and CSS
ທ່ານອາດຈະສົງໄສວ່າພາລະບົດບາດທີ່ມີຢູ່ໃນແຖບຕົວເລືອກ CSS ແມ່ນຫຍັງ. ໃນປະໂຫຍກ, ໂຄຣມນໍາໃຊ້ລະຫັດບໍ່ແມ່ນລະຫັດໃສ່ເຄື່ອງຫມາຍແຍກຕ່າງຫາກ. ຕົວຫຍໍ້ໃນ ຕົວເລືອກ CSS ຄັດ ແຍກຕົວເລືອກຕ່າງໆໃນຮູບແບບດຽວກັນ.
ຕົວຢ່າງ, ໃຫ້ເບິ່ງບາງ CSS ຂ້າງລຸ່ມນີ້.
th {color: red }
td {color: red }
pred {color: red }
div # firstred {color: red }
ມີ syntax ນີ້, ທ່ານກໍາລັງເວົ້າວ່າທ່ານຕ້ອງການ tags, tags td , tags ຖ້ອຍຄໍາທີ່ມີສີແດງ, ແລະ tag div ກັບ ID ໄດ້ firstred ທັງຫມົດທີ່ຈະມີສີແບບສີແດງ.
ນີ້ແມ່ນ CSS ທີ່ສົມບູນແບບທີ່ຍອມຮັບໄດ້, ແຕ່ມີສອງຂໍ້ບົກພ່ອງທີ່ສໍາຄັນໃນການຂຽນມັນໃນແບບນີ້:
- ໃນອະນາຄົດ, ຖ້າທ່ານຕັດສິນໃຈປ່ຽນສີຂອງສີຂອງຄຸນສົມບັດເຫຼົ່ານີ້ໃຫ້ເປັນສີຟ້າ, ທ່ານຕ້ອງປ່ຽນແປງສີ່ເທື່ອໃນເອກະສານສະໄຕຂອງທ່ານ.
- ມັນເພີ້ມຫຼາຍລັກສະນະພິເສດໃຫ້ກັບເອກະສານສະໄຕຂອງທ່ານທີ່ທ່ານບໍ່ຕ້ອງການ. ແບບ 4 ແບບເຫຼົ່ານີ້ອາດຈະບໍ່ຄ້າຍຄືກັບການ overkill, ແຕ່ຖ້າທ່ານຍັງສືບຕໍ່ດໍາເນີນການນີ້ໃນຮູບແບບຂອງທ່ານທັງຫມົດ, ສາຍຈະເພີ່ມຂຶ້ນແລະແຜ່ນນັ້ນຈະຫຼາຍ, ຫຼາຍກ່ວາມັນຕ້ອງເປັນ.
ເພື່ອຫລີກລ້ຽງຂໍ້ບົກຜ່ອງເຫຼົ່ານີ້ແລະເພື່ອປັບປຸງລະບົບ CSS ຂອງທ່ານ, ພວກເຮົາຈະພະຍາຍາມໃຊ້ໂຄຣມ.
ການນໍາໃຊ້ຄໍາສັບຕ່າງໆເພື່ອແຍກຕົວເລືອກ
ແທນທີ່ຈະຂຽນ 4 ຕົວເລືອກ CSS ແຍກຕ່າງຫາກແລະ 4 ກົດລະບຽບ, ທ່ານສາມາດສົມທົບຄໍເຕົ້າໄຂ່ເຫຼົ່ານີ້ເຂົ້າໄປໃນຄຸນສົມບັດກົດລະບຽບຫນຶ່ງໂດຍແຍກຕົວເລືອກແຕ່ລະດ້ວຍໂຄຣມ. ນີ້ແມ່ນວິທີທີ່ຈະເຮັດໄດ້:
th, td, pred, div # firstred {color: red }
ຕົວອັກສອນສະກຸນແມ່ນເຮັດຕາມຄໍາວ່າ "ແລະ" ພາຍໃນຕົວເລືອກ. ດັ່ງນັ້ນນີ້ໃຊ້ກັບແທໍກ t h ແລະແທໍກ td ແລະແທໍບຖ້ອຍຄໍາທີ່ມີສີແດງແລະ tag div ດ້ວຍ ID firstred ນີ້ແມ່ນສິ່ງທີ່ພວກເຮົາເຄີຍມີມາກ່ອນ, ແຕ່ແທນທີ່ຈະຕ້ອງມີກົດ 4 CSS, ພວກເຮົາມີກົດລະບຽບດຽວກັບຕົວເລືອກຫຼາຍ. ນີ້ແມ່ນສິ່ງທີ່ໂຄຣມເຮັດໃນຕົວເລືອກ, ມັນອະນຸຍາດໃຫ້ພວກເຮົາມີຕົວເລືອກຫຼາຍໃນກົດລະບຽບຫນຶ່ງ.
ບໍ່ພຽງແຕ່ວິທີການນີ້ເຮັດໃຫ້ສໍາລັບ leaner, ໄຟລ໌ CSS ສະອາດ, ມັນຍັງເຮັດໃຫ້ການປັບປຸງໃນອະນາຄົດສະດວກສະບາຍຫຼາຍ. ໃນປັດຈຸບັນຖ້າທ່ານຕ້ອງການປ່ຽນສີຈາກສີແດງຫາສີຟ້າ, ທ່ານພຽງແຕ່ຕ້ອງເຮັດການປ່ຽນແປງຢູ່ໃນສະຖານທີ່ຫນຶ່ງແທນທີ່ຈະຜ່ານກົດລະບຽບສະໄຕເດີມ 4 ແບບທີ່ພວກເຮົາມີ! ຄິດກ່ຽວກັບເງິນຝາກປະຢັດທີ່ໃຊ້ເວລາເຫຼົ່ານີ້ໃນທົ່ວໄຟລ໌ CSS ທັງຫມົດແລະທ່ານສາມາດເບິ່ງວິທີການນີ້ຈະຊ່ວຍປະຢັດທ່ານທັງເວລາແລະພື້ນທີ່ໃນ rune ຍາວ!
Syntax Variation
ບາງຄົນເລືອກທີ່ຈະເຮັດໃຫ້ CSS ມີຄວາມສາມາດອ່ານໄດ້ໂດຍການແຍກຕົວເລືອກໃນເສັ້ນຂອງຕົນເອງ, ແທນທີ່ຈະຂຽນມັນທັງຫມົດໃນເສັ້ນດຽວນີ້. ນີ້ແມ່ນວິທີທີ່ຈະເຮັດໄດ້:
th,
td,
pred,
div # firstred
{
ສີ: ສີແດງ;
}
ແຈ້ງໃຫ້ທາບວ່າທ່ານເອົາໂຄ້ດແຕ່ລະຕົວຫຼັງຈາກນັ້ນເລືອກ "ເຂົ້າ" ເພື່ອທໍາລາຍຕົວເລືອກຖັດໄປໃສ່ເສັ້ນຂອງຕົນເອງ. ທ່ານບໍ່ເພີ່ມສະຫຼັບຫຼັງຈາກຕົວເລືອກສຸດທ້າຍ.
ໂດຍການນໍາໃຊ້ເຄື່ອງຫມາຍສະແດງລະຫວ່າງຕົວເລືອກຂອງທ່ານ, ທ່ານຈະສ້າງແຜ່ນແບບແບບທີ່ຫນາແຫນ້ນທີ່ງ່າຍຕໍ່ການປັບປຸງໃນອະນາຄົດແລະງ່າຍຕໍ່ການອ່ານໃນມື້ນີ້!
ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ແກ້ໄຂໂດຍ Jeremy Girard ເມື່ອວັນທີ 5/8/17