Blogger: ແບບ CSS ສໍາລັບລະຫັດໃນບລັອກຂອງເຈົ້າ
ໝູ່ຄົນໜຶ່ງຖາມຂ້ອຍວ່າຂ້ອຍສ້າງພື້ນທີ່ລະຫັດໃນລາຍການ Blogger ແນວໃດ. ຂ້ອຍໄດ້ເຮັດມັນໂດຍໃຊ້ໂຄດຄໍາສັ່ງແບບສໍາລັບ CSS ໃນແມ່ແບບ Blogger ຂອງຂ້ອຍ. ນີ້ແມ່ນສິ່ງທີ່ຂ້ອຍເພີ່ມ:
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
: ນີ້ແມ່ນກົດລະບຽບ CSS ທີ່ກໍານົດເປົ້າຫມາຍ HTML<p>
ອົງປະກອບທີ່ມີຊື່ຫ້ອງຮຽນ "ລະຫັດ." ມັນ ໝາຍ ຄວາມວ່າວັກໃດ ໜຶ່ງ ທີ່ມີຊັ້ນຮຽນນີ້ຈະຖືກຈັດຮູບແບບຕາມຄຸນສົມບັດຕໍ່ໄປນີ້.font-family: Courier New;
: ຄຸນສົມບັດນີ້ກຳນົດຄອບຄົວຕົວອັກສອນເປັນ “Courier New.” ມັນກໍານົດຕົວອັກສອນທີ່ຈະໃຊ້ສໍາລັບຂໍ້ຄວາມພາຍໃນອົງປະກອບເປົ້າຫມາຍ.font-size: 8pt;
: ຄຸນສົມບັດນີ້ກຳນົດຂະໜາດຕົວອັກສອນເປັນ 8 ຈຸດ. ຂໍ້ຄວາມພາຍໃນອົງປະກອບເປົ້າຫມາຍຈະຖືກສະແດງຢູ່ໃນຂະຫນາດຕົວອັກສອນນີ້.border-style: inset;
: ຄຸນສົມບັດນີ້ກໍານົດຮູບແບບຊາຍແດນເປັນ "inset." ມັນສ້າງຮູບລັກສະນະທີ່ sunken ຫຼືກົດດັນສໍາລັບຊາຍແດນປະມານອົງປະກອບເປົ້າຫມາຍ.border-width: 3px;
: ຄຸນສົມບັດນີ້ກຳນົດຄວາມກວ້າງຂອງຂອບເປັນ 3 pixels. ຂອບອ້ອມອົງປະກອບຈະຫນາ 3 pixels.padding: 5px;
: ຄຸນສົມບັດນີ້ເພີ່ມ 5 pixels ຂອງ padding ປະມານເນື້ອໃນພາຍໃນອົງປະກອບເປົ້າຫມາຍ. ມັນສະຫນອງຊ່ອງຫວ່າງລະຫວ່າງຂໍ້ຄວາມແລະຊາຍແດນ.background-color: #FFFFFF;
: ຄຸນສົມບັດນີ້ກຳນົດສີພື້ນຫຼັງເປັນສີຂາວ (#FFFFFF). ເນື້ອໃນພາຍໃນອົງປະກອບເປົ້າຫມາຍຈະມີພື້ນຫລັງສີຂາວ.line-height: 100%;
: ຄຸນສົມບັດນີ້ກໍານົດຄວາມສູງຂອງເສັ້ນເປັນ 100% ຂອງຂະຫນາດຕົວອັກສອນ. ມັນຮັບປະກັນວ່າເສັ້ນຂໍ້ຄວາມມີໄລຍະຫ່າງຕາມຂະຫນາດຕົວອັກສອນ.margin: 10px;
: ຄຸນສົມບັດນີ້ເພີ່ມຂອບຂອງ 10 pixels ອ້ອມຮອບອົງປະກອບທັງໝົດ. ມັນສະຫນອງຊ່ອງຫວ່າງລະຫວ່າງອົງປະກອບນີ້ແລະອົງປະກອບອື່ນໆໃນຫນ້າ.
ລະຫັດ CSS ທີ່ສະຫນອງໃຫ້ກໍານົດຮູບແບບສໍາລັບວັກ HTML ທີ່ມີຊັ້ນ "ລະຫັດ." ມັນກໍານົດຕົວອັກສອນ, ຂະຫນາດຕົວອັກສອນ, ຮູບແບບຊາຍແດນ, ຄວາມກວ້າງຂອງຂອບ, padding, ສີພື້ນຫລັງ, ຄວາມສູງຂອງເສັ້ນ, ແລະຂອບສໍາລັບວັກເຫຼົ່ານີ້. ຮູບແບບນີ້ສາມາດຖືກນຳໃຊ້ກັບສະນິບເພັດ ຫຼື ຂໍ້ຄວາມທີ່ຈັດຮູບແບບໄວ້ລ່ວງໜ້າໃນໂພສຂອງ Blogger ເພື່ອໃຫ້ພວກມັນມີລັກສະນະສະເພາະ.
ນີ້ແມ່ນວິທີທີ່ມັນຈະເບິ່ງ:
p.code {
font-family: Courier ໃຫມ່;
font-size: 8pt;
border-style: inset;
border-width: 3px;
ແຜ່ນຮອງ: 5px;
ສີພື້ນຫຼັງ: #FFFFFF;
line-height: 100%;
ຂອບ: 10px;
}
ສະບາຍດີລະຫັດ!