1. CSS ແມ່ນຫຍັງ?

CSS (Cascading Style Sheets) ເປັນພາສາ style language ຊ່ວຍຈັດຮູບແບບ ແລະ ຕົກແຕ່ງໜ້າເວັບທີ່ຂຽນດ້ວຍ HTML ຫຼື XML ໃຫ້ມີຄວາມສວຍງາມ

 

ໃນຂະນະທີ່ HTML ສ້າງອົງປະກອບຕົ້ນຕໍຂອງຫນ້າເວັບເຊັ່ນ: ຫົວຂໍ້, ວັກ, ຮູບພາບ, CSS ຕັດສິນໃຈວ່າອົງປະກອບເຫຼົ່ານີ້ຈະປະກົດແນວໃດເຊັ່ນ: ສີ, ຕົວອັກສອນ, ຮູບແບບ ແລະ ການຈັດລຽງໃນຫນ້າ.

 

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

 

2. ຍ້ອນຫຍັງ CSS ຈຶ່ງຖືກໃຊ້ຢ່າງກວ້າງຂວາງ?

2.1 ການແຍກການນຳສະເໜີອອກຈາກເນື້ອຫາ

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

 

ຕົວຢ່າງ: ຖ້າຕ້ອງການປ່ຽນສີພື້ນຫລັງສໍາລັບຫນ້າ web ທັງຫມົດ, ແທນທີ່ຈະແກ້ໄຂແຕ່ລະຫນ້າ HTML, ເຮົາພຽງແຕ່ຕ້ອງການປ່ຽນສີພື້ນຫລັງໃນໄຟລ໌ CSS ແລະ ຫນ້າເວັບທັງຫມົດຈະຖືກປັບແກ້

 

2.2 ການອອກແບບທີ່ມີຄວາມຍືດຫຍຸ່ນ

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

2.3 ງ່າຍຕໍ່ການດັດແກ້ ແລະ ຮັກສາ

CSS ສະຫນັບສະຫນູນການຈັດຮູບແບບປະເພດຕ່າງໆ (class, id, ແລະ selector). ສິ່ງນີ້ເຮັດໃຫ້ການແກ້ໄຂລະຫັດ CSS ງ່າຍຂຶ້ນ, ຍ້ອນວ່າເຮົາສາມາດເພີ່ມ, ເອົາອອກ, ຫຼື ດັດແປງອົງປະກອບໂດຍບໍ່ມີຜົນກະທົບຕໍ່ໂຄງສ້າງ HTML.

 

ຕົວຢ່າງ: class ໃນ CSS ສາມາດນໍາໃຊ້ກັບອົງປະກອບທີ່ແຕກຕ່າງ, ເຮັດໃຫ້ງ່າຍຕໍ່ການປ່ຽນຮູບແບບດ້ວຍລະຫັດສອງສາມແຖວໂດຍບໍ່ຈໍາເປັນຕ້ອງແກ້ໄຂແຕ່ລະອົງປະກອບ HTML.

 

3. syntax ພື້ນຖານຂອງ CSS

3.1 Selectors

Selectorsແມ່ນວິທີທີ່ CSS ເລືອກອົງປະກອບ HTML ເພື່ອໃຊ້ການຈັດຮູບແບບ. ເຮົາສາມາດເລືອກອົງປະກອບໂດຍອີງໃສ່ປະເພດ, class, ID, ຫຼື property. ມີ Selectors ທີ່ງ່າຍດາຍເຊັ່ນ ພຽງແຕ່ເລືອກ tag ສະເພາະ (ເຊັ່ນ: <p> ເພື່ອເລືອກວັກ), ແລະ ຍັງມີ Selectors ທີ່ສັບສົນກວ່າ.

ຕົວຢ່າງ:

- Element Selector: ເລືອກທຸກ tag ທີ່ມີປະເພດດຽວກັນ, ເຊັ່ນ: p, ເລືອກທຸກ tag <p>.

- Class Selector: ເລືອກອົງປະກອບທີ່ມີ class ດຽວກັນ, ຂຽນດ້ວຍເຄື່ອງໝາຍຈໍ້ານໍາໜ້າ, ເຊັ່ນ: .class-name.

- ID Selector: ເລືອກອົງປະກອບທີ່ມີ ID ສະເພາະ, ຂຽນດ້ວຍເຄື່ອງໝາຍ # ນໍາໜ້າ ເຊັ່ນ: #unique-id.

 

3.2 Declaration Block

ຫຼັງ​ຈາກ​​ເລືອກ​ອົງ​ປະ​ກອບ​ໂດຍ​ການ​ນໍາ​ໃຊ້ selector​, ເຮົາ​ຈະ​ກໍານົດ​ການ​ຈັດ​ຮູບ​ແບບ​ໃນ​ Declaration Block​, ອ້ອມ​ຮອບ​ດ້ວຍ curly braces {} . ພາຍໃນ Declaration Block, ເຮົາຈະກໍານົດ properties ແລະ value ທີ່ຈະປ່ຽນວິທີການສະແດງອົງປະກອບ (element).

ຕົວຢ່າງ: color: blue; ການປ່ຽນສີຕົວອັກສອນເປັນສີຟ້າ, font-size: 16px; ກໍານົດຂະຫນາດຕົວອັກສອນເປັນ 16px.

3.3 Properties ແລະ Values

Properties​: ແມ່ນ​ຄຸນ​ສົມ​ບັດ​ທີ່​ເຮົາ​ຕ້ອງ​ການ​ປ່ຽນ​​ສໍາ​ລັບ​ elements ເຊັ່ນ​: ສີ​ຂໍ້​ຄວາມ​, ຂະ​ຫນາດ​, ຄວາມຫ່າງ ...

Values: ແມ່ນຄ່າສະເພາະຂອງ properties ທີ່ທ່ານຕ້ອງການນຳໃຊ້.

ຕົວຢ່າງ: color: red; ສີຂໍ້ຄວາມເປັນສີແດງ, margin-top: 10px; ສ້າງໄລຍະຫ່າງຂ້າງເທິງວັກແມ່ນ 10px, padding: 15px; ເຮັດໃຫ້ຊ່ອງຫວ່າງພາຍໃນວັກແມ່ນ 15px.

 

4. "Best Practice" ເມື່ອຂຽນ CSS

4.1 ການຈັດລະບຽບ code

ຈັດລະບຽບ code CSS ຂອງຢ່າງລະມັດລະວັງໂດຍການຈັດກຸ່ມຮູບແບບທີ່ກ່ຽວຂ້ອງຮ່ວມກັນ ແລະ ນໍາໃຊ້ comment ເພື່ອຊີ້ແຈງແຕ່ລະສ່ວນ ເຊິ່ງເຮັດໃຫ້ງ່າຍຕໍ່ການຊອກຫາ ແລະ ດັດແກ້ໃນເວລາທີ່ຈໍາເປັນ.

4.2 ໃຊ້ຫຼັກການຕັ້ງຊື່ທີ່ສອດຄ່ອງ

ໃຊ້ຮູບແບບການຕັ້ງຊື່ດຽວກັນກັບ class ແລະ ID ເພື່ອເຮັດໃຫ້ລະຫັດ CSS ອ່ານງ່າຍ ແລະ ຈັດການໄດ້ງ່າຍຂຶ້ນ. ບາງຫຼັກການທົ່ວໄປແມ່ນ BEM (Block, Element, Modifier) ​​​​ແລະ SMACSS (Scalable and Modular Architecture ສໍາລັບ CSS).

 

4.3 ການເຮັດໃຫ້ Selectors ສັ້ນ ແລະ ສະເພາະເຈາະຈົງ

ຫຼີກເວັ້ນການນໍາໃຊ້ Selectors ທີ່ສັບສົນເກີນໄປ ເພາະຈະເຮັດໃຫ້ການອອກແບບທີ່ທັບຊ້ອນກັນໄດ້ງ່າຍ ແລະຍາກທີ່ຈະຮັກສາ. ການຂຽນແບບງ່າຍໆຈະເຮັດໃຫ້ເຮົາສາມາດຈັດກ CSS code ງ່າຍຂຶ້ນໃນອະນາຄົດ.

- ຊື່ Selector ແບບສັ້ນກະທັດຮັດ

- ຊື່ Selectors ແບບຍາວ

 

ຕົວຢ່າງ: ການຈັດຕໍາແໜ່ງໜັງສື

ກ່ອນໃຊ້ CSS

ຜົນໄດ້ຮັບ:

ຫຼັງໃຊ້ CSS

ຜົນໄດ້ຮັບ:

5. ບົດສະຫຼຸບ

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