ວິທີການປ່ຽນແປງສີເວັບໄຊທ໌ດ້ວຍ CSS

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

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

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

ເພີ່ມຄໍເຕົ້າໄຂ່ທີ່ຈະປ່ຽນສີຂອງສີ

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

ນີ້ແມ່ນວິທີການປ່ຽນສີຂອງຕົວອັກສອນຂອງຂໍ້ຄວາມພາຍໃນປ້າຍຂໍ້ກໍານົດໂດຍໃຊ້ເອກະສານສະໄຕພາຍນອກຂອງທ່ານ.

ຄ່າສີສາມາດຖືກສະແດງເປັນໂຄດຄໍາສັ່ງສີ, ເລກສີ RGB, ຫຼືເລກສີຂອງເລກຖານສິບຫົກ.

1. ເພີ່ມຄຸນລັກສະນະຂອງ style ສໍາລັບ tag ຖ້ອຍຄໍາ:
   1. p {}
2. ວາງຄຸນສົມບັດ ສີ ໃນແບບ. ວາງເງີນຫຼັງຈາກຊັບສິນດັ່ງກ່າວ:
   1. p {color:}
3. ຫຼັງຈາກນັ້ນເພີ່ມມູນຄ່າສີຫຼັງຈາກທີ່ຄຸນສົມບັດ. ໃຫ້ແນ່ໃຈວ່າຈະສິ້ນສຸດຄ່າທີ່ມີເຄິ່ງຂື້ນ:
   1. p {color: black}

ຫຍໍ້ໃນຫນ້າຂອງທ່ານຕອນນີ້ຈະເປັນສີດໍາ.

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

p {color: # 000000 }

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

ດັ່ງທີ່ພວກເຮົາໄດ້ກ່າວມາແລ້ວ, ຄ່າ hex ເຮັດວຽກດີເມື່ອທ່ານຕ້ອງການສີທີ່ບໍ່ແມ່ນສີດໍາຫຼືສີຂາວ. ນີ້ແມ່ນຕົວຢ່າງ:

p {color: # 2f5687 }

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

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

p {color: rgba (47,86,135,1) }

ມູນຄ່າ RGBA ນີ້ແມ່ນຄືກັນກັບສີຟ້າສີຟ້າທີ່ລະບຸໄວ້ກ່ອນຫນ້ານີ້. ຄ່າທໍາອິດ 3 ກໍານົດຄ່າສີແດງ, ສີຂຽວແລະສີຟ້າແລະຈໍານວນສຸດທ້າຍແມ່ນການຕັ້ງຄ່າອັນຟາ. ມັນຖືກຕັ້ງເປັນ "1", ເຊິ່ງຫມາຍຄວາມວ່າ "100%", ດັ່ງນັ້ນສີນີ້ຈະບໍ່ມີຄວາມໂປ່ງໃສ. ຖ້າທ່ານກໍານົດວ່າຈໍານວນທະສະນິຍົມເຊັ່ນ .85, ມັນຈະແປກເຖິງ 85% opacity ແລະສີຈະໂປ່ງໃສ.

ຖ້າທ່ານຕ້ອງການ bulletproof ຄຸນຄ່າສີຂອງທ່ານ, ທ່ານຈະເຮັດແນວນີ້:

p {
ສີ: # 2f5687;
ສີ: rgba (47,86,135,1);
}

syntax ນີ້ກໍານົດລະຫັດ hex ກ່ອນ. ມັນຫຼັງຈາກນັ້ນ overwrites ມູນຄ່າທີ່ມີຈໍານວນ RGBA. ນີ້ຫມາຍຄວາມວ່າຕົວທ່ອງເວັບເກົ່າທີ່ບໍ່ສະຫນັບສະຫນູນ RGBA ຈະໄດ້ຮັບມູນຄ່າທໍາອິດແລະບໍ່ສົນໃຈຄັ້ງທີສອງ. ຕົວທ່ອງເວັບທີ່ທັນສະໄຫມຈະໃຊ້ຄັ້ງທີສອງຕໍ່ CSS cascade.