ຮູບແບບແລະຮູບແບບຂອງເວັບໄຊທ໌ທ໌ແມ່ນຖືກກໍານົດໂດຍ CSS ຫຼື Cascading Style Sheets. ເຫຼົ່ານີ້ແມ່ນເອກະສານທີ່ມີຮູບຮ່າງຂອງ HTML markup ຂອງເວັບໄຊຕ໌, ການສະຫນອງຕົວທ່ອງເວັບເວັບໄຊຕ໌ທີ່ມີຄໍາແນະນໍາກ່ຽວກັບວິທີການສະແດງຫນ້າທີ່ຜົນໄດ້ຮັບຈາກການຕີລາຄານັ້ນ. CSS ຈັດການຮູບແບບຂອງຫນ້າ, ເຊັ່ນດຽວກັນກັບສີ, ຮູບພາບພື້ນຫລັງ, typography ແລະອື່ນໆ.
ຖ້າທ່ານເບິ່ງໄຟລ໌ CSS, ທ່ານຈະເຫັນວ່າມັນຄ້າຍກັບເຄື່ອງຫມາຍການໂຄສະນາຫຼືພາສາລະຫັດໃດກໍ່ຕາມ, ໄຟລ໌ເຫຼົ່ານີ້ມີໄວຣັດສະເພາະ. ແຜ່ນສະໄຕແບບສະເພາະແມ່ນປະກອບດ້ວຍກົດ CSS ຈໍານວນຫນຶ່ງ. ກົດລະບຽບເຫຼົ່ານີ້, ໃນເວລາທີ່ໄດ້ຮັບໃນຢ່າງເຕັມທີ່, ແມ່ນສິ່ງທີ່ຮູບແບບເວັບໄຊທ໌.
ພາກສ່ວນຂອງກົດລະບຽບ CSS
ກົດລະບຽບ CSS ມີສອງສ່ວນທີ່ແຕກຕ່າງກັນ - ຕົວເລືອກແລະການປະກາດ. ຕົວເລືອກຈະກໍານົດສິ່ງທີ່ຖືກຄໍເຕົ້າໄຂ່ຢູ່ໃນຫນ້າແລະການປະກາດວ່າມັນຄວນຈະເປັນແນວໃດ. ຍົກຕົວຢ່າງ:
p {
ສີ: # 000;
}
ນີ້ແມ່ນກົດລະບຽບ CSS. ສ່ວນການ ຄັດເລືອກ ແມ່ນ "p", ເຊິ່ງເປັນຕົວເລືອກຕົວເລືອກສໍາລັບ "ວັກ". ດັ່ງນັ້ນ, ມັນຈຶ່ງຈະເລືອກເອົາຂໍ້ຄວາມທັງຫມົດຢູ່ໃນເວັບໄຊທ໌ແລະສະຫນອງໃຫ້ພວກເຂົາມີແບບນີ້ (ເວັ້ນເສຍແຕ່ວ່າມີຂໍ້ກໍານົດທີ່ຖືກກໍາຫນົດໂດຍຮູບແບບສະເພາະທີ່ຢູ່ໃນເອກະສານ CSS ຂອງທ່ານ).
ສ່ວນຫນຶ່ງຂອງກົດລະບຽບທີ່ກ່າວວ່າ "ສີ: # 000;" ແມ່ນສິ່ງທີ່ເອີ້ນວ່າການປະກາດ. ການປະກາດດັ່ງກ່າວແມ່ນມີສອງຊິ້ນ - ຊັບສິນແລະມູນຄ່າ.
ຊັບສົມບັດແມ່ນສ່ວນທີ່ "ສີ" ຂອງການປະກາດນີ້. ມັນກໍານົດວ່າລັກສະນະຂອງຕົວເລືອກຈະຖືກປ່ຽນແປງຢ່າງໃດ.
ມູນຄ່າແມ່ນສິ່ງທີ່ຊັບສົມບັດທີ່ເລືອກ CSS ຈະຖືກປ່ຽນແປງໄປ. ໃນຕົວຢ່າງຂອງພວກເຮົາ, ພວກເຮົາກໍາລັງໃຊ້ຄ່າ hex ຂອງ # 000, ເຊິ່ງແມ່ນ CSS shorthand ສໍາລັບ "ສີດໍາ".
ດັ່ງນັ້ນການນໍາໃຊ້ກົດລະບຽບ CSS ນີ້, ຫນ້າເວັບຂອງພວກເຮົາຈະມີວັກສະແດງຢູ່ໃນສີທີ່ເປັນສີດໍາ.
CSS ພື້ນຖານພື້ນຖານ
ເມື່ອທ່ານຂຽນຄຸນສົມບັດ CSS, ທ່ານບໍ່ສາມາດເຮັດໃຫ້ພວກມັນຂຶ້ນໄປຕາມທີ່ທ່ານເຫັນ. ສໍາລັບຕົວຢ່າງ, "ສີ" ແມ່ນຊັບສິນ CSS ທີ່ແທ້ຈິງ, ດັ່ງນັ້ນທ່ານສາມາດໃຊ້ມັນ. ຄຸນສົມບັດນີ້ແມ່ນສິ່ງທີ່ກໍານົດສີຂໍ້ຄວາມຂອງອົງປະກອບ. ຖ້າທ່ານພະຍາຍາມທີ່ຈະໃຊ້ "ສີສັນ" ຫຼື "font-color" ເປັນຄຸນສົມບັດ CSS, ມັນຈະລົ້ມເຫລວຍ້ອນວ່າມັນບໍ່ແມ່ນພາກສ່ວນທີ່ແທ້ຈິງຂອງພາສາ CSS.
ຕົວຢ່າງອື່ນແມ່ນຊັບສິນ "ພາບພື້ນຫລັງ". ຊັບສິນນີ້ກໍານົດຮູບພາບທີ່ສາມາດຖືກນໍາໃຊ້ສໍາລັບພື້ນຫລັງເຊັ່ນ:
blog {
background-image: url (/images/company-logo.png);
}
ຖ້າທ່ານພະຍາຍາມທີ່ຈະໃຊ້ "ພາບພື້ນຫລັງ" ຫລື "ພື້ນຫລັງຮູບພາບ" ເປັນຊັບສິນ, ພວກເຂົາຈະລົ້ມເຫລວຍ້ອນວ່າ, ອີກຄັ້ງ, ເຫຼົ່ານີ້ບໍ່ແມ່ນຄຸນສົມບັດ CSS ທີ່ແທ້ຈິງ.
ບາງຄຸນສົມບັດ CSS
ມີຈໍານວນຄຸນສົມບັດ CSS ທີ່ທ່ານສາມາດນໍາໃຊ້ເພື່ອສະຖານທີ່. ບາງຕົວຢ່າງແມ່ນ:
- ຊາຍແດນ (ລວມທັງຊາຍແດນ - ແບບ, ຊາຍແດນ, ສີແລະຂອບຊາຍແດນ)
- Padding (ລວມທັງແຜ່ນ padding, ດ້ານຂວາ, padding bottom, ແລະ padding ຊ້າຍ)
- ຮຸ້ນ (ລວມຂອບຂອບ, ຮາບຂວາ, ຮາບລຸ່ມແລະຂອບ, ເບື້ອງຊ້າຍ)
- Font-family
- Font size
- ພື້ນຫລັງສີ
- ກວ້າງ
- ຄວາມສູງ
ຄຸນລັກສະນະ CSS ເຫຼົ່ານີ້ແມ່ນຕົວຢ່າງທີ່ດີທີ່ຈະນໍາໃຊ້ເປັນຕົວຢ່າງ, ເພາະວ່າພວກມັນແມ່ນທັງຫມົດທີ່ກົງໄປກົງມາແລະ, ເຖິງແມ່ນວ່າທ່ານບໍ່ຮູ້ CSS, ທ່ານອາດຈະເດົາວ່າພວກເຂົາເຈົ້າເຮັດຕາມຊື່ຂອງເຂົາເຈົ້າ.
ມີຄຸນສົມບັດ CSS ອື່ນ ໆ ທີ່ທ່ານຈະພົບເຊັ່ນດຽວກັນເຊິ່ງອາດຈະບໍ່ຊັດເຈນວ່າພວກເຂົາເຮັດວຽກໂດຍອີງໃສ່ຊື່ຂອງເຂົາເຈົ້າ:
- float
- Clear
- Overflow
- Text-transform
- Z-index
ໃນຂະນະທີ່ທ່ານໄດ້ຮັບຄວາມເລິກເຂົ້າໄປໃນການອອກແບບເວັບ, ທ່ານຈະພົບ (ແລະນໍາໃຊ້) ທັງຫມົດຄຸນສົມບັດເຫຼົ່ານີ້ແລະຫຼາຍ!
ຄຸນສົມບັດຕ້ອງມີຄຸນຄ່າ
ທຸກໆຄັ້ງທີ່ທ່ານໃຊ້ຊັບສິນ, ທ່ານຕ້ອງໃຫ້ມັນເປັນມູນຄ່າ - ແລະຄຸນສົມບັດບາງຢ່າງສາມາດຍອມຮັບຄ່າບາງຢ່າງເທົ່ານັ້ນ.
ໃນຕົວຢ່າງທໍາອິດຂອງຄຸນສົມບັດ "ສີ", ພວກເຮົາຈໍາເປັນຕ້ອງໃຊ້ມູນຄ່າສີ. ນີ້ອາດຈະເປັນ ມູນຄ່າ hex , RGBA, ຫຼືແມ້ກະທັ້ງ ຄໍາທີ່ໃຊ້ໃນສີ . ແຕ່ວ່າຄ່າໃຊ້ຈ່າຍເຫຼົ່ານີ້ຈະເຮັດວຽກຢ່າງໃດກໍ່ຕາມຖ້າທ່ານໃຊ້ຄໍາວ່າ "ຂົມຂື່ນ" ກັບຊັບສົມບັດນີ້, ມັນຈະບໍ່ເຮັດຫຍັງເລີຍເພາະວ່າມັນເປັນສິ່ງທີ່ມີຄວາມຫມາຍໃນຄໍາວ່າ CSS.
ຕົວຢ່າງທີສອງຂອງພວກເຮົາກ່ຽວກັບ "ຮູບພາບພື້ນຫລັງ" ຕ້ອງໃຊ້ເສັ້ນທາງຮູບພາບທີ່ໃຊ້ໃນການ ຊອກຫາຮູບພາບທີ່ແທ້ຈິງ ຈາກໄຟລ໌ຂອງເວັບໄຊທ໌ຂອງທ່ານ. ນີ້ແມ່ນມູນຄ່າ / ວິທີການທີ່ຕ້ອງການ.
ຄຸນສົມບັດ CSS ທັງຫມົດມີຄ່າທີ່ພວກເຂົາຄາດຫວັງ. ຍົກຕົວຢ່າງ:
- ຂອບຊາຍສີຄາດວ່າຈະມີມູນຄ່າສີ
- ຂະຫນາດຊາຍແດນຄາດວ່າຈະມີມູນຄ່າຂະຫນາດ, ຄື pixels ລວງຫຼືຮ້ອຍລະ
- ຄໍເຕົ້າໄຂ່ທີ່ຊາຍແດນຄາດວ່າຫນຶ່ງໃນຮູບແບບທີ່ຖືກນໍາໃຊ້ສໍາລັບຊັບສິນນີ້, ເຊັ່ນ "ແຂງ"
ຖ້າທ່ານເຂົ້າໄປໃນບັນຊີລາຍຊື່ຂອງຄຸນສົມບັດ CSS, ທ່ານຈະຄົ້ນພົບວ່າພວກເຂົາແຕ່ລະຄົນມີຄ່າເສພາະທີ່ພວກເຂົາຈະໃຊ້ເພື່ອສ້າງຄໍເຕົ້າໄຂ່ທີ່ພວກເຂົາມີຈຸດປະສົງ.
ແກ້ໄຂໂດຍ Jeremy Girard