CSS: ການອອກແບບຕາຕະລາງ. ຕົວຢ່າງຂອງການລົງທະບຽນ

ເຮັດໃຫ້ຕາຕະລາງທີ່ມີ CSS - ຂອງບົດຮຽນທີ່ຫນ້າສົນໃຈແລະຮັບຜິດຊອບ. ວິທີການທຸລະກິດນີ້ຈໍາເປັນຕ້ອງໄດ້ສາມາດແຂ່ງຂັນ, ທີ່ມີຄວາມຮູ້ທັງຫມົດທີ່ຮູບແບບທີ່ເປັນໄປໄດ້. ໃນນອກຈາກນັ້ນ, ມັນເປັນສິ່ງຈໍາເປັນທີ່ຈະມີຄວາມຮູ້ສຶກຂອງຄວາມງາມຢູ່ໃນຄໍາສັ່ງທີ່ຈະບໍ່ມີຄວາມຢ້ານກົວອອກມາຢ້ຽມຢາມຄວາມຄິດສ້າງສັນຂອງເຂົາເຈົ້າ.

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

ຊາຍແດນຕາຕະລາງ

CSS ການອອກແບບແບບຕາຕະລາງສະເຫມີມີເກມທີ່ມີຊາຍແດນ (frame). ຕາຕະລາງໃນຕອນຕົ້ນທັງຫມົດບໍ່ກອບ contours. ວ່າແມ່ນ, ມັນແມ່ນເທົ່າທຽມກັນກັບ 0 pixels. ແຕ່ນີ້ສາມາດໄດ້ຮັບການແກ້ໄຂໂດຍຊາຍແດນຄຸນສົມບັດໄດ້.

ທ່ານສາມາດກໍານົດພານອກສໍາລັບຕາຕະລາງທັງຫມົດ:

ຕາຕະລາງ {border: 3px solid ສີດໍາ }

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

th, TD {border: ສີດໍາແຂງ 3px;}

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

ຄໍາຫມາຍເຖິງການຈົດທະບຽນຢ່າງຕໍ່ເນື່ອງຫມັ້ນຄົງ. ທ່ານສາມາດກໍານົດຄຸນຄ່າອື່ນໆ.

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

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

ຕາຕະລາງ {border-top: 1px solid ສີແດງ; }

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

header ຕາຕະລາງ

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

ຫົວຂໍ້ນີ້ຈະປາກົດໃນວິທີການເຊັ່ນດຽວກັນກັບມາດຕະຖານໃນຫນັງສື (ເຊັ່ນ: "Table 1").

ທ່ານສາມາດກໍານົດສະຖານທີ່ຂອງຫົວຂໍ້ແລະຄຸນສົມບັດສ່ວນຂ້າງຄຽງ (ເທິງຫຼືທາງລຸ່ມ) ໄດ້. ສອດຄ່ອງກັບຊ້າຍຫຼືຂວາຖືກກໍານົດໂດຍຄຸນສົມບັດຂໍ້ຄວາມ align.

ຕາຕະລາງພື້ນຖານ

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

ສີສາມາດໄດ້ຮັບການກໍານົດໄວ້ເປັນຊື່ແລະລະບົບພາສາທີ່ແຕກຕ່າງກັນ. ໃນນອກຈາກນັ້ນ, ທ່ານສາມາດກໍານົດດັ່ງຕໍ່ໄປນີ້:

• ໃສ -.
• ມູນມໍລະດົກ - ສີແມ່ນຄືກັນກັບທີ່ຂອງອົງປະກອບຜູ້ປົກຄອງ.
• ໃນເບື້ອງຕົ້ນ - ໃນຕອນຕົ້ນ.

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

ໃນນອກຈາກນັ້ນ, ຄວາມເປັນມາດັ່ງກ່າວອາດຈະຮູບພາບໃດຫນຶ່ງ. ເພື່ອເຮັດສິ່ງນີ້, ໃນແບບກໍາຫນົດຄຸນສົມບັດຄວາມເປັນມາ, ຮູບພາບ. ເສັ້ນທາງດັ່ງກ່າວແມ່ນຄ້າຍຄືນີ້:

url ( 'URL')

ເສັ້ນທາງໄຟລ໌ດັ່ງກ່າວອາດຈະບໍ່ວ່າຈະຍາດພີ່ນ້ອງຫຼືຢ່າງແທ້ຈິງ.

ຕື່ມຂໍ້ມູນທີ່ຊັບຊ້ອນເພີ່ມເຕີມສາມາດເຮັດໄດ້ດ້ວຍ gradient:

• ຮູບແຂບ, gradient ();
• radial, gradient ();
• ຊ້ໍາມີໃບ, gradient () ແລະຊ້ໍາ, radial, gradient () -. gradient ຊ້ໍາ

ສັບມືຖືຄວາມເປັນມາ

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

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

• tr: nth ລູກ (ເຖິງແມ່ນວ່າ) { ... } - ລະບຸ interlaced;
• tr: nth ເດັກ (1) { ... } - ສະແດງເຖິງມູນຂອງຄຸນສົມບັດຂອງແຖວໂດຍສະເພາະ;
• td: nth ລູກ (ເຖິງແມ່ນວ່າ) { ... } - ສະແດງເຖິງມູນຂອງສະສືອາກເມນີ
• td: nth ເດັກ (1) { ... } - ສະແດງເຖິງມູນຂອງຄຸນສົມບັດຂອງຖັນໂດຍສະເພາະ.

ນອກຈາກລໍາດັບແລະຈໍານວນສາມາດໄດ້ຮັບການກໍານົດໄວ້ - ທໍາອິດ (td: ຄັ້ງທໍາອິດ, ເດັກ) ຫຼືຮູບສຸດທ້າຍ (td: ທີ່ຜ່ານມາ, ເດັກນ້ອຍ).

ຊ່ອງຫວ່າງລະຫວ່າງຈຸລັງ

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

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

ແດນຍຸບ: ຍຸບ

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

ຊາຍແດນ, collapse: ແຍກຕ່າງຫາກ

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

ຊາຍແດນ, ສະຖານທີ່: 20px.

ຖ້າຫາກວ່າທ່ານຕ້ອງການທີ່ຈະລະບຸໄລຍະຫ່າງທີ່ແຕກຕ່າງກັນລະຫວ່າງແຖວເກັດທີ່ຢູ່ແລະຖັນ, ມັນຊີ້ໃຫ້ເຫັນທັງສອງສິ່ງທີ່:

ຊາຍແດນ, ສະຖານທີ່: 10px20px.

ຄວາມແຕກຕ່າງກັນໃນຕົວທ່ອງເວັບໄດ້

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

ຂ້າງເທິງນີ້ແມ່ນຕົວຢ່າງຂອງພາ thicknesses ກັບຄ່າດິຈິຕອນເປັນ.

ສໍາລັບຕົວຢ່າງນີ້, ຄວາມຫນາຂອງເຟຣມໄດ້ຄົງໄດ້.

ຄໍເຕົ້າໄຂ່ທີ່ຊາຍແດນຍັງມີຄວາມແຕກຕ່າງຢ່າງຫຼວງຫຼາຍ.

ເພາະສະນັ້ນ, ການພັດທະນາສະເຫມີໄປເບິ່ງຜົນໃນຕົວທ່ອງເວັບທີ່ແຕກຕ່າງກັນໄດ້.

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

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

ບັນຫາສ່ວນໃຫຍ່ຈະເກີດຂຶ້ນຈາກ shadows ໄດ້.

CSS: ຕົວຢ່າງຮູບແບບຕາຕະລາງ

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

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

ຫຼາຍຈະເປັນຕົວຢ່າງທີ່ຫນ້າສົນໃຈການອອກແບບລະບຽບຮຽບຮ້ອຍທີ່ສວຍງາມທີ່ຈະບໍ່ຕັດຜູ້ໃຊ້ຕາ. embodiment ນີ້ແມ່ນເຫມາະສົມໃນເກືອບທຸກສະຖານະການ.

ແຄມຂອງສາມາດເຮັດໄດ້ຕະຫຼອດ. ມັນເບິ່ງງາມ pretty.

ສະຫຼຸບ

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

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

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