ທັນທີທີ່ທ່ານຈະເລີ່ມຕົ້ນສ້າງຫນ້າເວັບຕ່າງໆທີ່ມີ HTML, ທ່ານຈະເລີ່ມຕົ້ນເຮັດວຽກກັບຂະຫນາດ. ເພື່ອເຮັດໃຫ້ເວັບໄຊທ໌ຂອງທ່ານເບິ່ງວິທີທີ່ທ່ານຕ້ອງການເບິ່ງ, ອາດຈະມີການອອກແບບທີ່ທ່ານຫລືຜູ້ອອກແບບອື່ນສ້າງ, ທ່ານຕ້ອງການປ່ຽນຂະຫນາດຂອງຂໍ້ຄວາມໃນເວັບນັ້ນເຊັ່ນດຽວກັນກັບສ່ວນປະກອບອື່ນໆໃນຫນ້າເວັບ. ເພື່ອເຮັດສິ່ງນີ້ທ່ານອາດຈະເລີ່ມຕົ້ນຊອກຫາ HTML "ຂະຫນາດ" ແທັກ, ແຕ່ວ່າທ່ານຈະຊອກຫາມັນຢ່າງວ່ອງໄວ.
tag HTML size ບໍ່ມີຢູ່ໃນ HTML. ແທນທີ່ຈະ, ເພື່ອກໍານົດຂະຫນາດຂອງຕົວອັກສອນ, ຮູບພາບຫຼືຮູບແບບຂອງທ່ານ, ທ່ານຄວນໃຊ້ Cascading Style Sheets. ໃນຄວາມເປັນຈິງ, ທຸກການປ່ຽນແປງທີ່ທ່ານຕ້ອງການທີ່ຈະເຮັດໃຫ້ຂໍ້ຄວາມຂອງເວັບໄຊທ໌ໃດຫນຶ່ງຫຼືອົງປະກອບອື່ນຄວນຖືກຈັດການໂດຍ CSS! HTML ແມ່ນສໍາລັບໂຄງສ້າງເທົ່ານັ້ນ.
ແທັກທີ່ໃກ້ຄຽງກັບແທັບຂະຫນາດ HTML ແມ່ນແທັບ font ເກົ່າ, ເຊິ່ງບໍ່ໄດ້ລວມເອົາຄຸນສົມບັດຂະຫນາດ. ໄດ້ຮັບການເຕືອນວ່າໂຄດຄໍາສັ່ງນີ້ຖືກປະຕິເສດໃນສະບັບ HTML ປັດຈຸບັນແລະອາດຈະບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນໂດຍຕົວທ່ອງເວັບໃນອະນາຄົດ! ທ່ານບໍ່ຕ້ອງການໃຊ້ແທັບ font ໃນ HTML ຂອງທ່ານ! ແທນທີ່ຈະ, ທ່ານຄວນຮຽນ CSS ເພື່ອຂະຫນາດອົງປະກອບ HTML ຂອງທ່ານແລະໃຫ້ໃສ່ຫນ້າເວັບຂອງທ່ານຕາມຄວາມເຫມາະສົມ.
Font Sizes
ຕົວອັກສອນແມ່ນເປັນສິ່ງທີ່ງ່າຍທີ່ສຸດທີ່ຈະມີຂະຫນາດທີ່ມີ CSS. Moreso ກ່ວາພຽງແຕ່ວັດແທກຂໍ້ຄວາມດັ່ງກ່າວ, ມີ CSS ທ່ານສາມາດສະເພາະກ່ຽວກັບ typography ເວັບໄຊທ໌ ຂອງທ່ານ. ທ່ານສາມາດກໍານົດຂະຫນາດຕົວອັກສອນ, ສີ, ກ່ອງ, ນ້ໍາຫນັກ, ນໍາ, ແລະອື່ນໆ. ມີແທັບ font, ທ່ານພຽງແຕ່ສາມາດກໍານົດຂະຫນາດແລະຫຼັງຈາກນັ້ນເທົ່ານັ້ນເປັນຈໍານວນທີ່ກ່ຽວກັບຂະຫນາດຕົວອັກສອນຂອງເບົາເຊີທີ່ແຕກຕ່າງກັນສໍາລັບລູກຄ້າທຸກຄົນ.
ເພື່ອກໍານົດວັກຕອນຂອງທ່ານໃຫ້ມີຂະຫນາດຕົວອັກສອນຂອງ 12pt, ໃຫ້ໃຊ້ຄຸນສົມບັດແບບອັກສອນຂະຫນາດຕົວອັກສອນ:
h3 {font-size = 24px }ແບບນີ້ຈະກໍານົດຂະຫນາດຕົວອັກສອນຂອງຫົວ 24 headiing3. ທ່ານສາມາດເພີ່ມນີ້ໃຫ້ກັບເອກະສານສະໄຕພາຍນອກແລະ H3s ເວັບໄຊທ໌ທັງຫມົດຂອງທ່ານຈະໃຊ້ແບບນີ້.
ຖ້າທ່ານຕ້ອງການເພີ່ມຄໍເຕົ້າໄຂ່ທີ່ພິມແບບເພີ່ມເຕີມໃຫ້ກັບຂໍ້ຄວາມຂອງທ່ານ, ທ່ານສາມາດເພີ່ມໃສ່ກົດ CSS ນີ້:
h3 {font-size: 24px ສີ: # 000; font-weight: normal }ນີ້ຈະບໍ່ພຽງແຕ່ກໍານົດຂະຫນາດຕົວອັກສອນສໍາລັບ H3s, ມັນຍັງຈະຕັ້ງສີໃຫ້ເປັນສີດໍາ (ເຊິ່ງແມ່ນລະຫັດ hex ຂອງ # 000 ຫມາຍຄວາມວ່າ) ແລະມັນຈະກໍານົດນ້ໍາຫນັກໃຫ້ "ປະກະຕິ". ໂດຍຕົວຢ່າງ, ຕົວທ່ອງເວັບກໍາລັງເຮັດຫົວຂໍ້ 1-6 ເປັນຂໍ້ຄວາມທີ່ກ້າວຫນ້າ, ດັ່ງນັ້ນແບບນີ້ຈະ override ວ່າ default ແລະ "un-bold" ຂໍ້ຄວາມ.
ຂະຫນາດຮູບພາບ
ຮູບພາບຕ່າງໆສາມາດເຮັດໄດ້ງ່າຍທີ່ຈະກໍານົດຂະຫນາດເພາະວ່າຕົວຈິງແລ້ວ, ທ່ານສາມາດໃຊ້ຕົວທ່ອງເວັບເພື່ອປັບຂະຫນາດພາບ. ແນ່ນອນ, ການປັບຂະຫນາດຮູບພາບກັບຕົວທ່ອງເວັບແມ່ນຄວາມຄິດທີ່ບໍ່ດີເນື່ອງຈາກມັນເຮັດໃຫ້ຫນ້າເວັບໂຫຼດຊ້າລົງແລະຕົວທ່ອງເວັບມັກເຮັດວຽກທີ່ບໍ່ດີຂອງການປັບຂະຫນາດ, ເຮັດໃຫ້ຮູບພາບເບິ່ງບໍ່ດີ. ແທນທີ່ຈະ, ທ່ານຄວນໃຊ້ ຊອບແວຮູບພາບເພື່ອປັບຂະຫນາດຮູບພາບ ແລະຫຼັງຈາກນັ້ນຂຽນຂະຫນາດຕົວຈິງຂອງພວກເຂົາໃນຫນ້າເວັບ HTML ຂອງທ່ານ.
ຕ່າງຈາກແບບອັກສອນ, ຮູບພາບສາມາດນໍາໃຊ້ HTML ຫຼື CSS ເພື່ອກໍານົດຂະຫນາດ. ທ່ານກໍານົດ width ຂອງຮູບພາບແລະຄວາມສູງ. ເມື່ອທ່ານໃຊ້ HTML, ທ່ານພຽງແຕ່ສາມາດກໍານົດຂະຫນາດຮູບພາບເປັນ pixels ເທົ່ານັ້ນ. ຖ້າທ່ານໃຊ້ CSS, ທ່ານສາມາດໃຊ້ການວັດແທກອື່ນໆເຊິ່ງລວມທັງນິ້ວ, ຊັງຕີແມັດແລະຮ້ອຍລະ. ນີ້ມູນຄ່າຫຼ້າສຸດ, ອັດຕາສ່ວນ, ແມ່ນມີຜົນປະໂຫຍດຫຼາຍເມື່ອຮູບພາບຂອງທ່ານຕ້ອງເປັນນ້ໍາ, ໃນເວັບໄຊທ໌ຕອບສະຫນອງ.
ເພື່ອກໍານົດຂະຫນາດຮູບພາບຂອງທ່ານໂດຍໃຊ້ HTML, ໃຫ້ໃຊ້ຄຸນລັກສະນະຄວາມສູງແລະຄວາມກວ້າງຂອງແທັກ img. ຕົວຢ່າງເຊັ່ນຮູບພາບນີ້ຈະເປັນສີ່ຫລ່ຽມ 400x400 pixels:
height = "400" width = "400" alt = "image" />ເພື່ອກໍານົດຂະຫນາດຮູບພາບຂອງທ່ານໂດຍໃຊ້ CSS, ໃຫ້ໃຊ້ຄຸນສົມບັດແບບລະດັບຄວາມສູງແລະຄວາມກວ້າງ. ນີ້ແມ່ນຮູບດຽວກັນ, ໃຊ້ CSS ເພື່ອກໍານົດຂະຫນາດ:
style = "height: 400px width: 400px" alt = "image" />Layout Sizes
ຂະຫນາດໃຫຍ່ທີ່ສຸດທີ່ທ່ານກໍານົດໃນຮູບແບບແມ່ນ width, ແລະສິ່ງທໍາອິດທີ່ທ່ານຈໍາເປັນຕ້ອງຕັດສິນໃຈວ່າຈະໃຊ້ ຮູບແບບ width ຄົງທີ່ ຫຼືເວັບໄຊທ໌ຕອບສະຫນອງ. ໃນຄໍາສັບຕ່າງໆອື່ນໆ, ທ່ານຈະກໍານົດ width ທີ່ເປັນຈໍານວນທີ່ແນ່ນອນຂອງ pixels, ນິ້ວ, ຫຼືຈຸດ? ຫຼືທ່ານກໍາລັງຈະກໍານົດຂອບເຂດຮູບຮ່າງຂອງທ່ານໃຫ້ມີຄວາມຍືດຫຍຸ່ນໂດຍໃຊ້ ems ຫຼືຮ້ອຍລະ? ເພື່ອກໍານົດຂະຫນາດຂອງຮູບແບບຂອງທ່ານ, ທ່ານໃຊ້ຄຸນສົມບັດຄວາມກວ້າງແລະຄວາມສູງຂອງ CSS ຄືກັນກັບຮູບພາບຂອງທ່ານ.
ຄວາມກວ້າງຄົງທີ່:
style = "width: 600px">ຄວາມກວ້າງຂອງເຫລວ:
style = "width: 80%">ໃນເວລາທີ່ທ່ານຕັດສິນໃຈໃສ່ຄວາມກວ້າງສໍາລັບຮູບແບບຂອງທ່ານ, ທ່ານຄວນລະວັງຄວາມກວ້າງຂອງຕົວທ່ອງເວັບທີ່ແຕກຕ່າງກັນທີ່ຜູ້ອ່ານຂອງທ່ານອາດຈະໃຊ້ແລະອຸປະກອນຕ່າງໆທີ່ພວກເຂົາຈະໃຊ້. ນີ້ແມ່ນເຫດຜົນທີ່ ເວັບໄຊທ໌ຕອບສະຫນອງ , ເຊິ່ງສາມາດປ່ຽນແປງຮູບແບບແລະຂະຫນາດຂອງມັນໂດຍອີງໃສ່ອຸປະກອນຕ່າງໆແລະຂະຫນາດຫນ້າຈໍ, ແມ່ນມາດຕະຖານປະຕິບັດທີ່ດີທີ່ສຸດໃນປະຈຸບັນ.