ພາບລວມຂອງແຜ່ນຮູບແບບ Cascading ດ້ວຍແບບສະໄຕຮູບແບບ
ໃນເວລາທີ່ທ່ານສ້າງເວັບໄຊທ໌ທໍາອິດ, ມັນເປັນການເລີ່ມຕົ້ນທີ່ມີຮູບແບບພື້ນຖານທີ່ກໍານົດໄວ້. ມັນຄ້າຍຄືກັບການເລີ່ມຕົ້ນດ້ວຍຜ້າໃບທີ່ສະອາດແລະແປງສົດ. ຫນຶ່ງໃນບັນຫາທໍາອິດທີ່ຜູ້ອອກແບບເວັບຕ້ອງປະເຊີນຫນ້າແມ່ນວ່າ ຕົວທ່ອງເວັບຂອງເວັບ ແມ່ນແຕກຕ່າງກັນທັງຫມົດ. ຂະຫນາດຕົວອັກສອນເລີ່ມຕົ້ນແມ່ນແຕກຕ່າງກັນຈາກແພລະຕະຟອມໄປສູ່ແພລະຕະຟອມ, ຄອບຄົວຕົວອັກສອນທີ່ແຕກຕ່າງກັນແມ່ນແຕກຕ່າງກັນ, ບາງຕົວທ່ອງເວັບກໍານົດຂອບແລະກ່ອງໃສ່ແທັກຂອງຮ່າງກາຍໃນຂະນະທີ່ຄົນອື່ນບໍ່ແລະອື່ນໆ. ໄດ້ຮັບປະມານຄວາມບໍ່ສອດຄ່ອງເຫຼົ່ານີ້ໂດຍການກໍານົດຮູບແບບເລີ່ມຕົ້ນສໍາລັບຫນ້າເວັບຂອງທ່ານ.
CSS ແລະຊຸດຕົວອັກສອນ
ສິ່ງທໍາອິດທໍາອິດ, ກໍານົດຊຸດຕົວອັກສອນຂອງເອກະສານ CSS ຂອງທ່ານໃຫ້ utf-8 . ໃນຂະນະທີ່ມັນເປັນໄປໄດ້ວ່າສ່ວນຫຼາຍຂອງຫນ້າເວັບທີ່ທ່ານອອກແບບຖືກຂຽນເປັນພາສາອັງກິດ, ບາງຄົນອາດຈະຖືກດັດແປງຕາມສະຖານທີ່ສໍາລັບພາສາແລະພາສາທີ່ແຕກຕ່າງກັນ. ໃນເວລາທີ່ເຂົາເຈົ້າມີ, utf-8 simplifies ຂະບວນການ. ການຕັ້ງຄ່າອັກຂະລະທີ່ກໍານົດໄວ້ໃນ ເອກະສານສະໄຕພາຍນອກ ຈະບໍ່ນໍາຫນ້າກ່ອນຫນ້າ HTTP ແຕ່ໃນສະຖານະການອື່ນໆທັງຫມົດ, ມັນຈະ.
ມັນງ່າຍທີ່ຈະຕັ້ງຄ່າຕົວອັກສອນ. ສໍາລັບເສັ້ນທໍາອິດຂອງເອກະສານ CSS ຂຽນ:
@charset "utf-8";ວິທີນີ້, ຖ້າທ່ານໃຊ້ຕົວອັກສອນສາກົນໃນຊັບສິນເນື້ອຫາຫຼືເປັນຊື່ລະຫັດແລະຊື່, ແຜ່ນສະໄຕ ຈະຍັງເຮັດວຽກຢ່າງຖືກຕ້ອງ.
Styling the Body Page
ສິ່ງທີ່ຕ້ອງການຕໍ່ໄປນີ້ແມ່ນຄວາມຕ້ອງການຂອງເອກະສານສະໄຕແບບດັ້ງເດີມແມ່ນຮູບແບບທີ່ບໍ່ມີຂອບເຂດ, ຂອບ, ແລະຂອບ. ນີ້ເຮັດໃຫ້ແນ່ໃຈວ່າຕົວທ່ອງເວັບທັງຫມົດວາງເນື້ອໃນຢູ່ໃນສະຖານທີ່ດຽວກັນ, ແລະບໍ່ມີສະຖານທີ່ທີ່ເຊື່ອງໄວ້ລະຫວ່າງຕົວທ່ອງເວັບແລະເນື້ອຫາ. ສໍາລັບຫນ້າເວັບສ່ວນໃຫຍ່, ນີ້ແມ່ນໃກ້ກັບຂອບສໍາລັບຂໍ້ຄວາມ, ແຕ່ວ່າມັນກໍ່ມີຄວາມສໍາຄັນທີ່ຈະເລີ່ມຕົ້ນນັ້ນເພື່ອໃຫ້ຮູບພາບພື້ນຫລັງແລະສ່ວນການຈັດວາງຮູບແບບຖືກຕິດຕັ້ງຢ່າງຖືກຕ້ອງ.
html, body {margin: 0px padding: 0px border: 0px }ຕັ້ງຄ່າສີຫນ້າທໍາອິດຫລືສີທໍາມະດາໄປທີ່ສີດໍາແລະສີພື້ນຖານໃນເບື້ອງຕົ້ນໃຫ້ສີຂາວ. ໃນຂະນະທີ່ນີ້ຈະມີການປ່ຽນແປງຫລາຍທີ່ສຸດສໍາລັບການອອກແບບເວັບໄຊຕ໌ສ່ວນໃຫຍ່, ມີສີມາດຕະຖານເຫຼົ່ານີ້ທີ່ກໍານົດໄວ້ໃນຮ່າງກາຍແລະ HTML tag ໃນຄັ້ງທໍາອິດເຮັດໃຫ້ຫນ້າງ່າຍຕໍ່ການອ່ານແລະເຮັດວຽກຮ່ວມກັບ.
html, body {color: # 000 background: #fff }Default Font Styles
ຂະຫນາດຕົວອັກສອນແລະຄອບຄົວຕົວອັກສອນແມ່ນບາງສິ່ງບາງຢ່າງທີ່ແນ່ນອນຈະປ່ຽນແປງເມື່ອການອອກແບບໃຊ້ເວລາແຕ່ເລີ່ມຕົ້ນດ້ວຍຂະຫນາດຕົວອັກສອນທໍາອິດຂອງ 1 em ແລະຄອບຄົວແບບອັກສອນແບບທໍາມະດາຂອງ Arial, Geneva ຫຼືບາງ font sans-serif ອື່ນໆ. ການນໍາໃຊ້ ems ຮັກສາຫນ້າເວັບທີ່ສາມາດເຂົ້າເຖິງໄດ້ຕາມທີ່ເປັນໄປໄດ້, ແລະແບບອັກສອນ sans-serif ສາມາດອ່ານໄດ້ຫຼາຍໃນຫນ້າຈໍ.
html, body, p, th, td, li, dd, dt {ຕົວອັກສອນ: 1em Arial, Helvetica, sans-serif; }ອາດຈະມີສະຖານທີ່ອື່ນໆທີ່ທ່ານອາດຈະຊອກຫາຂໍ້ຄວາມ, ແຕ່ p , th , td , li , dd , ແລະ dt ແມ່ນການເລີ່ມຕົ້ນທີ່ດີສໍາລັບການກໍານົດຕົວອັກສອນຖານ. ລວມ HTML ແລະ ຮ່າງກາຍ ພຽງແຕ່ໃນກໍລະນີ, ແຕ່ຕົວທ່ອງເວັບຫຼາຍຄົນ override ທາງເລືອກ font ຖ້າທ່ານພຽງແຕ່ກໍານົດຕົວອັກສອນຂອງທ່ານສໍາລັບ HTML ຫຼືຮ່າງກາຍ.
ຫົວຂໍ້
ຫົວຂໍ້ HTML ແມ່ນມີຄວາມສໍາຄັນທີ່ຈະໃຊ້ເພື່ອຊ່ວຍໂຄງຮ່າງການຂອງເວັບໄຊທ໌ຂອງທ່ານແລະໃຫ້ເຄື່ອງຈັກຊອກຫາເຂົ້າໄປໃນເວັບໄຊທ໌ຂອງທ່ານ. ໂດຍບໍ່ມີຄໍເຕົ້າໄຂ່, ພວກເຂົາທັງຫມົດແມ່ນ ugly, ດັ່ງນັ້ນກໍານົດຮູບແບບເລີ່ມຕົ້ນທັງຫມົດຂອງມັນແລະກໍານົດຄອບຄົວຕົວອັກສອນແລະຂະຫນາດຕົວອັກສອນສໍາລັບແຕ່ລະຄົນ.
h1, h2, h3, h4, h5, h6 {ຕົວອັກສອນຄອບຄົວ: Arial, Helvetica, sans-serif; } h1 {font-size: 2em } h2 {font-size: 15em } h3 {font-size: 12em } h4 {font-size: 10em } h5 {font-size: 09em } h6 {font-size: 08em }ຢ່າລືມຜູກພັນ
ການປັບແຕ່ງສີເຊື່ອມໂຍງແມ່ນສ່ວນຫນຶ່ງທີ່ສໍາຄັນຂອງການອອກແບບ, ແຕ່ຖ້າທ່ານບໍ່ກໍານົດມັນຢູ່ໃນຄໍເຕົ້າໄຂ່ທີ່ເລີ່ມຕົ້ນ, ໂອກາດກໍ່ຄືທ່ານຈະລືມຢ່າງຫນ້ອຍຫນຶ່ງຂອງຊັ້ນ pseudo-classes. ກໍານົດໃຫ້ພວກເຂົາມີການປ່ຽນແປງເລັກນ້ອຍໃນສີຟ້າແລະຫຼັງຈາກນັ້ນປ່ຽນໃຫ້ເຂົາເຈົ້າເມື່ອທ່ານມີສີ palette ສໍາລັບເວັບໄຊທີ່ກໍານົດໄວ້.
ເພື່ອກໍານົດການ ເຊື່ອມຕໍ່ ໃນສີຂອງສີຟ້າ, ຕັ້ງ:
- ເຊື່ອມຕໍ່ ເປັນສີຟ້າ
- ໄປຢ້ຽມຢາມການເຊື່ອມຕໍ່ ເປັນສີຟ້າຊ້ໍາ
- ການເຊື່ອມຕໍ່ hover ເປັນສີຟ້າອ່ອນ
- ການເຊື່ອມຕໍ່ທີ່ຫ້າວຫັນ ເປັນສີຟ້າ
ດັ່ງທີ່ສະແດງຢູ່ໃນຕົວຢ່າງນີ້:
a: link {color: # 00f } a: visited {color: # 009 } a: hover {color: # 06f } a: active {color: # 0cf } ໂດຍການອອກແບບການເຊື່ອມໂຍງກັບໂຄງການສີທີ່ເປັນອັນຕະລາຍທີ່ເປັນທໍາ, ມັນເຮັດໃຫ້ແນ່ໃຈວ່າຂ້ອຍຈະບໍ່ລືມທຸກຊັ້ນຮຽນ, ແລະຍັງເຮັດໃຫ້ພວກເຂົາເລັກນ້ອຍຫນ້ອຍກວ່າສີຟ້າ, ສີແດງແລະສີມ່ວງ.ແຜ່ນເຕັມຮູບແບບ
ນີ້ແມ່ນເອກະສານແບບເຕັມຮູບແບບ:
@charset "utf-8"; html, body {margin: 0px padding: 0px border: 0px ສີ: # 000; background: #fff } html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif } h1 {font-size: 2em } h2 {font-size: 15em } h3 {font-size: 12em } h4 {font-size: 10em } h5 {font-size: 09em } h6 {font-size: 08em } a: link {color: # 00f } a: visited {color: # 009 } a: hover {color: # 06f } a: active {color: # 0cf }