ຄວາມແຕກຕ່າງລະຫວ່າງ CSS selector class ແລະ id ແມ່ນຫຍັງ? id ແລະການນໍາໃຊ້ຫ້ອງຮຽນໃນ HTML

ຄວາມແຕກຕ່າງລະຫວ່າງ CSS selector class ແລະ id ແມ່ນຫຍັງ? id ແລະການນໍາໃຊ້ຫ້ອງຮຽນໃນ HTML

Chen Weiliangປະ​ຕິ​ບັດ​ບໍ່​ດົນ​ມາ​ນີ້​SEO, ເພື່ອເພີ່ມປະສິດທິພາບເວັບໄຊທ໌WordPressຫົວຂໍ້.

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

ດັ່ງນັ້ນ, ບັນທຶກແລະສະຫຼຸບຄວາມແຕກຕ່າງແລະການນໍາໃຊ້ CSS selector id ແລະຫ້ອງຮຽນທີ່ນີ້:

• id ກົງກັບ #div
• ຫ້ອງຮຽນກົງກັບ .div

ຄວາມແຕກຕ່າງລະຫວ່າງ id ແລະຫ້ອງຮຽນ

ລາຍ​ລະ​ອຽດ id

• id ແມ່ນແທັກຄົງທີ່, ເຊິ່ງໃຊ້ເພື່ອກໍານົດຮູບແບບທີ່ໃຫຍ່ກວ່າໃນຫນ້າເວັບ, ເຊິ່ງຖືກກໍານົດໃນຮູບແບບຂອງ #div.
• ຕົວຢ່າງ: ການແບ່ງຖັນ, ເທິງ, ຮ່າງກາຍ, ລຸ່ມ, ແລະອື່ນໆ...
• ໃຊ້ເພື່ອກໍານົດອົງປະກອບສະເພາະ, ເຊິ່ງສາມາດປາກົດໄດ້ພຽງແຕ່ຫນຶ່ງຄັ້ງຕໍ່ຫນ້າແລະບໍ່ສາມາດເອີ້ນຊ້ໍາອີກ.

ລາຍ​ລະ​ອຽດ​ຫ້ອງ​ຮຽນ​

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

ຕົວເລືອກ div ຕົວຂອງມັນເອງບໍ່ມີຄຸນສົມບັດ. ໂດຍການກໍານົດ css ຂອງມັນ, ມັນຄວບຄຸມບາງຮູບແບບເຊັ່ນ: ຄວາມກວ້າງ, ຄວາມສູງ, ສີພື້ນຫລັງແລະຂະຫນາດຂໍ້ຄວາມຂອງ div.

ທົ່ວໄປການຄ້າທາງອີເລັກໂທຣນິກເວັບໄຊທ໌,ສ້າງເວັບໄຊທ໌ຫນ້າເວັບ html ທີ່ສ້າງຂຶ້ນໂດຍໂຄງການແມ່ນເພື່ອຮັບຮູ້ຮູບແບບຫນ້າຜ່ານ CSS.

ໂຕເລືອກແມ່ນຫຍັງ?

ຄໍານິຍາມຂອງແຕ່ລະແບບ CSS ປະກອບດ້ວຍ 2 ສ່ວນ:

选择器 {样式}

• ສ່ວນກ່ອນ {} ແມ່ນ "ຕົວເລືອກ".
• "ຕົວເລືອກ" ຊີ້ໃຫ້ເຫັນ "ຮູບແບບ" ຂອງ {} ທີ່ມັນປະຕິບັດ.
• ນັ້ນແມ່ນ, ໃນອົງປະກອບໃດຂອງຫນ້າເວັບນີ້ "ຮູບແບບ" ເຮັດວຽກ?

ຕົວຢ່າງລະຫັດ

ນີ້ແມ່ນວິທີເລືອກ ແລະຈັດຮູບແບບອົງປະກອບ class="sidebar":

.sidebar
{ 
background-color:black;
}

ນີ້ແມ່ນວິທີການເລືອກ ແລະຈັດຮູບແບບອົງປະກອບທີ່ມີ id="footer":

#footer
{ 
background-color:black;
}