ວິທີ CSS Inheritance ເຮັດວຽກຢູ່ໃນເອກະສານເວັບ

ສ່ວນຫນຶ່ງທີ່ສໍາຄັນຂອງການສ້າງເວັບໄຊທ໌ທີ່ມີ CSS ແມ່ນຄວາມເຂົ້າໃຈແນວຄວາມຄິດຂອງມໍລະດົກ.

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

CSS Inheritance ແມ່ນຫຍັງ?

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

ຕົວຢ່າງເຊັ່ນ, ໂຄ້ດ HTML ດ້ານລຸ່ມນີ້ມີແທັບ H1 ທີ່ຕິດແທໍກ EM:

ນີ້ແມ່ນຫົວຂໍ້ Big

ອົງປະກອບ EM ແມ່ນລູກຂອງອົງປະກອບ H1 ແລະຮູບແບບໃດໆທີ່ກ່ຽວກັບ H1 ທີ່ໄດ້ຮັບມໍລະດົກຈະຖືກສົ່ງໄປຍັງຂໍ້ຄວາມ EM. ຍົກ​ຕົວ​ຢ່າງ:

h1 {font-size: 2em }

ເນື່ອງຈາກຄຸນສົມບັດຂອງ font size ແມ່ນ inherited, ຂໍ້ຄວາມທີ່ກ່າວວ່າ "Big" (ເຊິ່ງແມ່ນສິ່ງທີ່ຢູ່ໃນເອັມ EM) ຈະມີຂະຫນາດດຽວກັນກັບສ່ວນທີ່ເຫຼືອຂອງ H1. ນີ້ແມ່ນຍ້ອນວ່າມັນ inherits ມູນຄ່າທີ່ກໍານົດໄວ້ໃນຄຸນສົມບັດ CSS.

ວິທີການໃຊ້ CSS Inheritance

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

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

body {font-family: Arial, sans-serif; }

ການນໍາໃຊ້ມູນຄ່າແບບ Inherit

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

body {margin: 1em } p {margin: inherit }

ມໍລະດົກນໍາໃຊ້ມູນຄ່າທີ່ຖືກຄິດໄລ່

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

ຖ້າທ່ານກໍານົດຂະຫນາດຕົວອັກສອນຂອງ 1em ໃນອົງປະກອບ BODY ຂອງທ່ານ, ຫນ້າທັງຫມົດຂອງທ່ານຈະບໍ່ພຽງແຕ່ 1 ເທົ່າໃນຂະຫນາດເທົ່ານັ້ນ. ນີ້ແມ່ນຍ້ອນວ່າອົງປະກອບເຊັ່ນຫົວຂໍ້ (H1-H6) ແລະ ອົງປະກອບ ອື່ນໆ (ບາງຕົວທ່ອງເວັບກໍານົດຄຸນສົມບັດຕາຕະລາງທີ່ແຕກຕ່າງກັນ) ມີຂະຫນາດທີ່ທຽບເທົ່າໃນຕົວທ່ອງເວັບ. ເມື່ອບໍ່ມີຂໍ້ມູນຂະຫນາດຕົວອັກສອນອື່ນໆ, ຕົວທ່ອງເວັບເວັບຈະເຮັດໃຫ້ຫົວຂໍ້ H1 ເປັນຂໍ້ຄວາມທີ່ໃຫຍ່ທີ່ສຸດໃນຫນ້າ, ຕິດຕາມດ້ວຍ H2 ແລະອື່ນໆ. ເມື່ອທ່ານກໍານົດອົງປະກອບ BODY ຂອງທ່ານໃຫ້ມີຂະຫນາດຕົວອັກສອນສະເພາະໃດຫນຶ່ງ, ມັນຖືກໃຊ້ເປັນຂະຫນາດຕົວອັກສອນ "ສະເລ່ຍ", ແລະອົງປະກອບຫົວຂໍ້ແມ່ນຖືກຄິດໄລ່ຈາກນັ້ນ.

ຫມາຍເຫດກ່ຽວກັບມໍລະດົກແລະຊັບສົມບັດພື້ນຫລັງ

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