CSS, ເລືອກ, ແລະພາລະບົດບາດຂອງຕົນໃນຮູບແບບ html ເອກະສານ

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

ປະເພດຂອງ selectors ໃນ CSS

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

• ເລືອກໂຄດຄໍາສັ່ງ;
• ເລືອກລະດັບ;
• id, ເລືອກ;
• attribute selector.

ເລືອກ Tag

ມັນຖືກເອີ້ນວ່າຍັງ "type ເລືອກ" ຫຼື "ອົງປະກອບ", ມັນເປັນໄດ້ຫຼາຍທີ່ສຸດງ່າຍດາຍແລະທົ່ວໄປ. ໃນຖານະເປັນ CSS, ເອກະສານຂອງເຂົາມີຊື່ຂອງອົງປະກອບຂອງ html, ໄຟລ໌, ທີ່ພວກເຮົາອະທິບາຍໄດ້. ສໍາລັບຕົວຢ່າງ, ຖ້າຫາກວ່າພວກເຮົາຈໍາເປັນຕ້ອງໄດ້ກໍານົດແບບວັກ, ພວກເຮົາກໍານົດຄຸນສົມບັດແລະຄຸນຄ່າຂອງເຂົາເຈົ້າສໍາລັບ p ອົງປະກອບ {background ໄດ້: x; ສີ: y; ຂະຫນາດ:. z} ໃນກໍລະນີດັ່ງກ່າວນີ້, ວັກທັງຫມົດຂອງຫນ້າເວັບໄຊຕ໌ຈະມີຮູບແບບດຽວກັນ (ພື້ນເປັນສີ, ຂະຫນາດຕົວຫນັງສື, ແລະອື່ນໆ. D).

ເລືອກລະດັບ

ແລະສິ່ງທີ່ຖ້າຫາກວ່າທ່ານຕ້ອງການທີ່ຈະຮ້ອງຂໍໃຫ້ທຸກວັກຂອງທ່ານແມ່ນແຕກຕ່າງກັນຈາກຄໍເຕົ້າໄຂ່ທີ່ອື່ນໆ? ເພື່ອເຮັດສິ່ງນີ້, ມີຕົວເລືອກລະດັບ.

CSS ແມ່ນເອກະສານໃນກໍລະນີນີ້ຈະປະກອບດ້ວຍເຂົ້າຂອງຮູບແບບດັ່ງຕໍ່ໄປນີ້ເປັນ: p.first {color: x; ນາດໂຕອັກສອນຂະຫນາດ: y}. ດັ່ງນັ້ນ, ພວກເຮົາກໍານົດຄຸນສົມບັດຂອງ "ສີ" ແລະ "ຂະຫນາດ" ພຽງແຕ່ສໍາລັບວັກລະດັບທໍາອິດ.

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

id Selector

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

ຫຼັງຈາກນັ້ນໃນ html, ເອກະສານການມອບຫມາຍຕົວລະບຸ h1 header, articlename ດັ່ງກ່າວ. ແລະໃນ CSS, ເອກະສານ, ລະບຸແບບນັ້ນ, ເຮັດໃຫ້ຊື່ ID ປີ້ງ: #articlename {color: ສີນ້ໍາເງິນ ຂໍ້ຄວາມ align: center}. ໃນປັດຈຸບັນລວມຂອງພວກເຮົາຈະມີສີຟ້າແລະເປັນຈຸດສູນກາງ.

ແຕ່ລະປະເພດຂ້າງເທິງນີ້ສາມາດໄດ້ຮັບການອະທິບາຍເປັນ "ງ່າຍດາຍ CSS, ເລືອກ". ພວກເຂົາກໍານົດຮູບແບບສໍາລັບການກໍານົດໂດຍສະເພາະຂອງ html ເອກະສານ: ກັນອົງປະກອບທີ່ຄ້າຍຄືກັນ (ຕົວຢ່າງ:, ວັກທັງຫມົດຂອງບົດຄວາມ), ຫນຶ່ງລະດັບ (ສໍາລັບຕົວຢ່າງ, ພຽງແຕ່ວັກທໍາອິດ) ຫຼືລາຍການສະເພາະໃດຫນຶ່ງ (ເຊັ່ນ: ຫົວຂໍ້ບົດຄວາມ).

attribute selectors

ນອກເຫນືອໄປຈາກຂ້າງເທິງນັ້ນ, ມີການ CSS, selectors ຄຸນລັກສະນະ - ວິທີການຊັບຊ້ອນຫຼາຍຂອງຄໍເຕົ້າໄຂ່ທີ່ຄໍາຮ້ອງສະຫມັກ. ມັນອະນຸຍາດໃຫ້ອົງປະກອບຮູບແບບ html ກ່ຽວກັບຄຸນລັກສະນະທີ່ເລືອກຫຼືມູນຄ່າ. ມີຫຼາຍໆຊະນິດຂອງຕົວເລືອກນີ້ແມ່ນ:

• ໂດຍການມີສ່ວນໃຫ້ເຫດຜົນໄດ້;
• ໃນມູນຄ່າທີ່ແນ່ນອນຂອງຕົນ;
• ໂດຍມູນຄ່າ attribute ບາງສ່ວນ;
• ກ່ຽວກັບມູນຄ່າສະເພາະໃດຫນຶ່ງຂອງຕົນ.

ໃຫ້ພວກເຮົາພິຈາລະນາແຕ່ລະຊະນິດນີ້:

1. ໃນກໍລະນີທໍາອິດ. ການຈັດຮູບແບບແມ່ນນໍາໃຊ້, ຖ້າຫາກວ່າຢູ່ໃນທັດສະນະທີ່ html ລະຫັດສະເພາະໃດຫນຶ່ງ (ມັນອາດຈະເປັນ p, div, header, ແລະອື່ນໆ). ຖ້າຫາກວ່າມັນບໍ່ແມ່ນ, ມັນໃຊ້ທົ່ວໄປສໍາລັບອົງປະກອບທັງຫມົດຂອງການລົງ. ສໍາລັບຕົວຢ່າງ, ສໍາລັບອົງປະກອບທີ່ມີຫົວຂໍ້ (ປາຍເຄື່ອງມື).
2. ໃນກໍລະນີທີສອງ. ແບບໃຊ້ສະເພາະກັບ html, ອົງປະກອບທີ່ມີການແຂ່ງຂັນຄືກັນອ້ອຍຕ້ອຍຂອງຄ່າໃຫ້ເຫດຜົນ. ສໍາລັບຕົວຢ່າງ, ເພື່ອປ້ອນອົງປະກອບທີ່, ບ່ອນທີ່ຄຸນຄ່າຂອງປະເພດໃຫ້ເຫດຜົນເທົ່າສົ່ງ.
3. ໃນຄັ້ງທໍາອິດກໍລະນີ. ພາຍໃຕ້ຮູບແບບການຈະພຽງແຕ່ປະກອບດ້ວຍລາຍການໃນບັນຊີລາຍຊື່ຂອງຄ່າທີ່ປະກອບດ້ວຍຄໍາສະເພາະໃດຫນຶ່ງ. ສໍາລັບຕົວຢ່າງ, sideBar ເຫດຜົນ "class" ສໍາລັບອົງປະກອບ div.
4. ສີ່ກໍລະນີ. ແບບຖືກກໍານົດໄວ້ພຽງແຕ່ສໍາລັບອົງປະກອບຂອງ html ເອກະສານ, ທີ່ໃຫ້ເຫດຜົນໂດຍສະເພາະມີຄ່າສະເພາະໃດຫນຶ່ງ, ແລະຈະເລີ່ມຕົ້ນກັບພຣະອົງ. ສໍາລັບຕົວຢ່າງ, ການນໍາໃຊ້ຂອງສີທີ່ລະບຸໄວ້ໃນການອົງປະກອບທັງຫມົດທີ່ໄດ້ໃຫ້ເຫດຜົນພາສາອັງກິດ (ທີ່ອາດຈະ en, en-rus, en-au ແລະ t. D).

ດັ່ງນັ້ນ, ໂດຍການນໍາໃຊ້ຫນຶ່ງຫຼືອື່ນໆ, ເລືອກ CSS ໄດ້, ສາມາດທີ່ດີທີ່ສຸດໄດ້ຮັບການກໍານົດໄວ້ເປັນຫນ້າເວັບທີ່ທັງຫມົດ, ແລະອະທິບາຍບາງສ່ວນຂອງອົງປະກອບຂອງຕົນ.