ຄຳເຕືອນ: ໂຫລດໂຫດ

ເຫັນຄົນເຂົ້າໄປ >>>ໄດນີ້<<< ແລ້ວບອກວ່າ ງົງ ບໍ່ເຂົ້າໃຈ ຢາກໃຫ້ມີເປັນຮູບພ້ອມຄຳອະທິບາຍ ຊ່ວງນີ້ພໍມີເວລາຫວ່າງ ກະເລີຍຂຽນມາໃຫ້ອ່ານກັນ

ຈະຂຽນອະທິບາຍຕັ້ງແຕ່ຂັ້ນພື້ນຖານ ເພື່ອຄວາມເຂົ້າໃຈ

ຂໍບອກໄວ້ກ່ອນວ່າມີ່ກະບໍ່ໄດ້ເກັ່ງ ແລະທີ່ຂຽນມານີ້ ແມ່ນຮຽບຮຽງຈາກຄວາມເຂົ້າໃຈເປັນສ່ວນໃຫຍ່ ດັ່ງນັ້ນຈຶ່ງອາດມີຄວາມຜິດພາດ ກໍ່ຊ່ວຍກັນທັກທ້ວງມາໄດ້ ຈະໄດ້ນຳມາແກ້ໄຂ

ຂໍອະນຸຍາດຂຽນເປັນກະຕູນ ດ້ວຍຄວາມມັກສ່ວນຕົວ ຮະຮະ (ຄິດວ່າຂຽນແບບນີ້ ຫນ້າຈະອ່ານງ່າຍກວ່າບໍ່ນະ?)

ຄວາມຮູ້ທົ່ວໄປກ່ຽວກັບ CSS Code

CSS Code ແມ່ນຫຍັງ?

CSS ຫຍໍ້ມາຈາກ Cascading Style Sheets

CSS Code ມີໄວ້ສຳລັບແກ້ໄຂຫນ້າເວັບ ຢ່າງເຊັ່ນ ພາບພື້ນຫລັງ, ເສັ້ນຂອບ, ສີສັນ, ຕົວຫນັງສື ແລະອື່ນໆ

ສ່ວນໃຫຍ່ໆແມ່ນມີເນື້ອຫາດັ່ງນີ້

Background - ພື້ນຫລັງ

Border - ເສັ້ນຂອບ

Cursor - ເມົ້າ

Scroll bar - ແຖບເລື່ອນຫນ້າຈໍ

List - ຫົວຂໍ້

Table - ຕາຕະລາງ, ຫ້ອງ

ອື່ນໆ (ບໍ່ເຄີຍໃຊ້ນອກເຫນືອຈາກນີ້ ເລີຍບໍ່ຄ່ອຍຮູ້...)

ການແກ້ໄຂ CSS ໃນ Punlao

ໂຄງສ້າງພື້ນຖານຂອງ CSS Code

ການໃສ່ພາບພື້ນຫລັງ

ພິມໂຄ້ດນີ້ໃສ່

body { background-image: url( url ຂອງຮູບ ); }

ສ່ວນ Url ກັອບມາໃສ່ໄດ້ເລີຍ ຕາມຮູບ

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

(ຕາມຮູບຈະເຫັນວ່າມັນມີສ່ວນຂາວໆ ທີ່ພາບພື້ນຫລັງບໍ່ສະແດງ)

ຄຳສັ່ງທີ່ຕ້ອງໃສ່ເພິ່ມເຂົ້າໄປ ຖ້າເຫັນວ່າພາບພື້ນຫລັງບໍ່ສະແດງຕໍ່ໄປຈົນສຸດ ແມ່ນ background-repeat: repeat

ຄືດັ່ງນີ້

body { background-image: url( url ຂອງຮູບ ); background-repeat: repeat; }  

ນອກຈາກ ຄຳວ່າ repeat ຍັງມີຄຳສັ່ງອື່ນອີກ ຄື

no-repeat  ຫມາຍເຖິງໃຫ້ພາບພື້ນຫລັງສະແດງແຕ່ຮູບດຽວ (ບໍ່ຊ້ຳ)

repeat-x  ຫມາຍເຖິງໃຫ້ພາບພື້ນຫລັງສະແດງລຽງໄປຕາມລວງຂວາງ

repeat-y ຫມາຍເຖິງໃຫ້ພາບພື້ນຫລັງສະແດງລຽງໄປຕາມລວງຕັ້ງ
 

ຢ່າງເຊັ່ນວິທີໃຊ້

background-repeat: repeat-x

ການລັອກພາບພື້ນຫລັງໃຫ້ຢູ່ກັບທີ່

body { background-image: url( url ຂອງຮູບ ); background-attachment: fixed; }

ໃນນີ້ເຮົາຈະໃຊ້ພ້ອມກັນກັບຄຳສັ່ງ repeat ທາງເທິງນັ້ນກະໄດ້ ພຽງແຕ່ຕື່ມ background-repeat: repeat ເຂົ້າໄປ

body { background-image: url( url ຂອງຮູບ ); background-attachment: fixed;  background-repeat: repeat; } 

ການໃສ່ພາບພື້ນຫລັງສອງຊັ້ນ

ພາບພື້ນຫລັງສອງຊັ້ນ ແມ່ນການໃສ່ພາບພື້ນຫລັງແບບ ທີ່ມີຮູບຢູ່ຊັ້ນທາງຫນ້າ ແລະມີ ສີ ຢູຊັ້ນທາງລຸ່ມ

ໃນຮູບນີ້ ມີຮູບຢູ່ຊັ້ນເທິງ ແລະມີ ສີດຳ ຢູ່ທາງຊັ້ນລຸ່ມ

ເອົາເປັນວ່າ ຖ້າໃຜຍັງບໍ່ເຂົ້າໃຈ ລອງເອົາໄປໃຊ້ເບິ່ງກະໄດ້

body { background: #ໂຄ້ດສີ; background: #ໂຄ້ດສີ url( url ຂອງຮູບ ) ; background-repeat: no-repeat;}

ບ່ອນໂຄ້ດສີ ຕ້ອງໃສ່ໂຄ້ດສີອັນດຽວກັນ!

ສຳລັບຮູບທາງເທິງ ມີ່ໃສ່ໂຄ້ດແບບນີ້

body { background: #000000; background: #000000 url(http://i30.photobucket.com/albums/c316/yardnam/blog/mimi2bg444.gif) top center; background-repeat: no-repeat;}

ການວາງພາບພື້ນຫລັງ

ເຮົາສາມາດວາງຕຳແຫນ່ງພາບພື້ນຫລັງໄວ້ບ່ອນໃດກໍ່ໄດ້ ໂດຍພິມຂໍ້ຄວາມພວກນີ້ຕໍ່ທ້າຍ ຫລັງໃສ່ Url

ຢ່າງເຊັ່ນໂຄ້ດທີ່ມີ່ໃຊ້

body { background: #000000; background: #000000 url(http://i30.photobucket.com/albums/c316/yardnam/blog/mimi2bg444.gif) top center; background-repeat: no-repeat;}

ຫລັງໃສ່ url ມີຄຳວ່າ top center ເຊິ່ງຫມາຍເຖິງຢູ່ເທິງສຸດ ທາງກາງ (ຄວາມຫມາຍຕາມຕົວນັ້ນແຫລະ)

ຖ້າຢາກວາງໃສ່ສ່ວນອື່ນໆ ກໍ່ຂຽນແທນຂໍ້ຄວາມໄດ້ຕາມນີ້

ໃຫ້ສົມມຸດວ່າຕາຕະລາງນີ້ເປັນຫນ້າເວັບ ຖ້າຢາກວາງຮູບພື້ນຫລັງໃສ່ໃສ ກະເລືອກຈາກສ່ວນນັ້ນມາໃສ່ໃນໂຄ້ດ

OPTION 1

ສຳລັບຄົນທີ່ຍັງບໍ່ຮູ້ວິທີອັບໂຫລດຮູບ ຫລືຈະເອົາ url ໄດ້ຈາກໃສ

ທ່ານເວັບມາສເຕີເພິ່ນໄດ້ສ້າງເວັບສຳລັບຝາກຮູບໄວ້ໃຫ້ແລ້ວ ຢ່າງເຊັ່ນ

uphoup.com

img.laoupload.com

ອັນນີ້ເປັນຕົວຢ່າງການຝາກຮູບຢູ່ເວັບ uphoup

ກ່ອນອື່ນເຂົ້າໄປ ຫນ້າເວັບຈະເປັນແບບນີ້

ຄລິກ Browse...

ຈະມີຫນ້າຕ່າງໃຫມ່ປະກົດຂຶ້ນມາ ໃຫ້ເຮົາເລືອກຮູບຈາກໃນຄອມເຮົາ

ຫລັງຈາກເລືອກຮູບແລ້ວໆ ໃຫ້ກົດ ເລີ່ມອັບໂຫລດ

ກົດ ເລີ່ມອັບໂຫລດແລ້ວ ຖ້ານິດຫນຶ່ງ ກະຈະກາຍເປັນແບບນີ້

ກັອບເອົາ url ໄປໃຊ້ໄດ້ທັນທີ

---------------------------------

ເອົາເປັນວ່າ ບົດຮຽນມື້ນີ້ ຂໍຈົບລົງພຽງເທົ່ານີ້ກ່ອນກະແລ້ວກັນ (ປາດເຫື່ອ)

ຂໍຂອບໃຈທຸກທ່ານທີ່ອ່ານມາຈົນຈົບ

ສຸດທ້າຍນີ້ ໃຜມີຫຍັງຖາມກະຖາມເຂົ້າມາໄດ້ ...ຖ້າເປັນໄປໄດ້ ກ່ອນຖາມ ຢາກໃຫ້ລອງເຮັດດ້ວຍຕົນເອງເບິ່ງກ່ອນເດີ້ ບໍ່ໄດ້ແທ້ໆຈຶ່ງຖາມ

ຂໍຄວາມກະລຸນານຳທຸກໆຄົນ ບໍ່ຢາກໃຫ້ຄອມເມັ້ນເປັນ emotion ເສີຍໆ ແບບບໍ່ມີຂໍ້ຄວາມຫຍັງເລີຍນ່ະ (ແບບວ່າບໍ່ມັກ... =3= ບໍ່ຮູ້ຢາກສື່ເຖິງຫຍັງ) ຖ້າເຫັນໃຜເມັ້ນມາແບບນັ້ນ ສະແດງວ່າບໍ່ອ່ານ ບາງທີຈະລຶບຖິ້ມ ຂໍໂທດນຳລ່ວງຫນ້າ ຮຶ

ສະຫລຸບບົດຮຽນທີ່ເວົ້າເຖິງມື້ນີ້...

ຄວາມຮູ້ທົ່ວໄປກ່ຽວກັບ CSS Code

ການແກ້ໄຂ CSS ໃນ Punlao

ໂຄງສ້າງພື້ນຖານຂອງ CSS Code

ການໃສ່ພາບພື້ນຫລັງ

ການລັອກພາບພື້ນຫລັງໃຫ້ຢູ່ກັບທີ່

ການໃສ່ພາບພື້ນຫລັງສອງຊັ້ນ

ການວາງພາບພື້ນຫລັງ

OPTION 1 (url ການອັບໂຫລດຮູບ)

*/ ຕິຊົມໄດ້ຕາມສະດວກ...

**/ ບໍ່ແນ່ວ່າຈະຂຽນຕໍ່ບໍ່ ຖ້າມີຄົນຖາມຫລາຍໆກະອາດຈະແຍກໄປຂຽນໄດໃຫມ່ ຕາມແຕ່ເວລາຈະອຳນວຍ =w=