Styling Notepad ສ້າງຫນ້າເວັບທີ່ມີ CSS

01 of 10

ສ້າງແບບ CSS Style

ວິທີດຽວກັນພວກເຮົາສ້າງໄຟລ໌ຂໍ້ຄວາມແຍກຕ່າງຫາກສໍາລັບ HTML, ທ່ານຈະສ້າງໄຟລ໌ຂໍ້ຄວາມສໍາລັບ CSS. ຖ້າທ່ານຕ້ອງການຮູບພາບສໍາລັບຂະບວນການນີ້ໂປດເບິ່ງບົດຮຽນທໍາອິດ. ນີ້ແມ່ນຂັ້ນຕອນໃນການສ້າງເອກະສານແບບ CSS ຂອງທ່ານໃນ Notepad:

1. ເລືອກ File> New ໃນ Notepad ເພື່ອໃຫ້ມີປ່ອງຢ້ຽມຫວ່າງເປົ່າ
2. ບັນທຶກໄຟລ໌ເປັນ CSS ໂດຍການຄລິກ File
3. ທ່ອງໄປຫາໂຟເດີ my_website ເທິງຮາດໄດຂອງທ່ານ
4. ປ່ຽນ "Save As Type:" ໄປ "All Files"
5. ຊື່ໄຟລ໌ຂອງທ່ານ "styles.css" (ໃຫ້ປິດຄໍາເວົ້າ) ແລະຄລິກ Save

02 of 10

ເຊື່ອມໂຍງແບບ CSS Style ກັບ HTML ຂອງທ່ານ

ເມື່ອທ່ານໄດ້ເອກະສານແບບສໍາລັບເວັບໄຊທ໌ຂອງທ່ານ, ທ່ານຈໍາເປັນຕ້ອງເຊື່ອມໂຍງກັບຫນ້າເວັບມັນເອງ. ເພື່ອເຮັດສິ່ງນີ້ທ່ານນໍາໃຊ້ໂຄ້ດເຊື່ອມຕໍ່. ໃສ່ໂຄ້ດເຊື່ອມຕໍ່ຕໍ່ໄປນີ້ທຸກບ່ອນພາຍໃນ tags ຂອງເອກະສານ pets.htm ຂອງທ່ານ:

03 of 10

ແກ້ໄຂຫນ້າ Margin

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

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

html, body {
margin: 0px
padding: 0px
border: 0px
left: 0px
top: 0px
}

04 of 10

ການປ່ຽນແປງຕົວອັກສອນໃນຫນ້າ

ຕົວອັກສອນມັກຈະເປັນສິ່ງທໍາອິດທີ່ທ່ານຕ້ອງການປ່ຽນແປງໃນຫນ້າເວັບ. ຕົວອັກສອນທໍາອິດໃນຫນ້າເວັບສາມາດເປັນທີ່ຫນ້າກຽດແລະເປັນຕົວທ່ອງເວັບຂອງຕົວທ່ອງເວັບຕົວຈິງ, ດັ່ງນັ້ນຖ້າທ່ານບໍ່ກໍານົດຕົວອັກສອນ, ທ່ານກໍ່ຈະບໍ່ຮູ້ວ່າຫນ້າເວັບຈະເປັນແນວໃດ.

ໂດຍປົກກະຕິ, ທ່ານຈະປ່ຽນແປງຕົວອັກສອນໃນວັກ, ຫຼືບາງຄັ້ງໃນເອກະສານທັງຫມົດຂອງມັນເອງ. ສໍາລັບເວັບໄຊທ໌ນີ້, ພວກເຮົາຈະກໍານົດຕົວອັກສອນຢູ່ໃນລະດັບ header ແລະ paragraph. ຕື່ມຂໍ້ມູນຕໍ່ໄປນີ້ໃຫ້ແກ່ເອກະສານ styles.css ຂອງທ່ານ:

p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 15em Arial, Helvetica, sans-serif;
}
h3 {
font: 125m Arial, Helvetica, sans-serif;
}

ຂ້າພະເຈົ້າໄດ້ເລີ່ມຕົ້ນດ້ວຍ 1em ເປັນຂະຫນາດພື້ນຖານຂອງຂ້າພະເຈົ້າສໍາລັບວັກແລະລາຍະການລາຍການ, ແລະຫຼັງຈາກນັ້ນນໍາໃຊ້ເພື່ອກໍານົດຂະຫນາດຂອງຫົວຂໍ້ຂອງຂ້າພະເຈົ້າ. ຂ້າພະເຈົ້າບໍ່ຄາດວ່າຈະໃຊ້ຫົວຂໍ້ເລິກກວ່າ h4, ແຕ່ຖ້າທ່ານວາງແຜນທີ່ທ່ານຈະຕ້ອງການແບບມັນເຊັ່ນກັນ.

05 of 10

ການເຮັດໃຫ້ການເຊື່ອມຕໍ່ຂອງທ່ານທີ່ຫນ້າສົນໃຈຫຼາຍ

ສີທີ່ເລີ່ມຕົ້ນສໍາລັບການເຊື່ອມຕໍ່ແມ່ນສີຟ້າແລະສີມ່ວງສໍາລັບການເຊື່ອມຕໍ່ບໍ່ໄດ້ເບິ່ງແລະໄປຢ້ຽມຢາມຕາມລໍາດັບ. ໃນຂະນະທີ່ນີ້ແມ່ນມາດຕະຖານ, ມັນອາດຈະບໍ່ເຫມາະສົມກັບລະບົບສີຂອງຫນ້າເວັບ, ດັ່ງນັ້ນໃຫ້ປ່ຽນມັນ. ໃນໄຟລ໌ styles.css ຂອງທ່ານ, ໃຫ້ຕື່ມຂໍ້ມູນຕໍ່ໄປນີ້:

a: link {
ຄອບຄົວຕົວອັກສອນ: Arial, Helvetica, sans-serif;
ສີ: # FF9900;
text-decoration: underline;
}
a: visited {
ສີ: # FFCC66;
}
a: hover {
background: #FFFFCC;
font-weight: bold
}

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

06 of 10

Styling the Navigation Navigation

ນັບຕັ້ງແຕ່ພວກເຮົາເອົານໍາທິດ (id = "nav") ສ່ວນທໍາອິດໃນ HTML, ໃຫ້ເຮົາແບບທໍາອິດ. ພວກເຮົາຈໍາເປັນຕ້ອງຊີ້ບອກວ່າມັນຄວນຈະກວ້າງແລະຄວນວາງຂອບຂອບດ້ານຂວາເພື່ອໃຫ້ຂໍ້ຄວາມຕົ້ນຕໍຈະບໍ່ຂື້ນກັບມັນ. ຂ້າພະເຈົ້າຍັງເຮັດໃຫ້ຊາຍແດນລ້ອມຮອບມັນ.

ເພີ່ມ CSS ຕໍ່ໄປນີ້ໃຫ້ແກ່ຄໍເຕົ້າໄຂ່ທີ່ styles.css ຂອງທ່ານ:

#nav {
width: 225px
margin-right: 15px
ຊາຍແດນ: ແຂງຂະຫນາດກາງ # 000000;
}
#nav li {
list-style: none;
}
footer {
font-size: 75em
clear: both
width: 100%
text-align: center
}

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

07 of 10

ຕັ້ງຕໍາແຫນ່ງຫລັກ

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

ຈັດວາງດັ່ງຕໍ່ໄປນີ້ໃນເອກະສານ styles.css ຂອງທ່ານ:

#main {
width: 800px
top: 0px
ຕໍາແຫນ່ງ: absolute;
left: 250px
}

08 of 10

Styling Paragraphs ຂອງທ່ານ

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

ຈັດວາງດັ່ງຕໍ່ໄປນີ້ໃນເອກະສານ styles.css ຂອງທ່ານ:

topline {
ດ້ານເທິງ: ແຂງ # FFCC00;
}

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

09 of 10

Styling the Images

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

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

ຈັດວາງດັ່ງຕໍ່ໄປນີ້ໃນເອກະສານ styles.css ຂອງທ່ານ:

#main img {
float: left
ຂອບຂວາ: 5px;
ຂອບຮ່າງ: 15px;
}
noborder {
border: 0px none
}

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

10 ຈາກ 10

ຕອນນີ້ເບິ່ງຫນ້າຂອງເຈົ້າແລ້ວ

ເມື່ອທ່ານໄດ້ບັນທຶກ CSS ຂອງທ່ານທ່ານສາມາດໂຫຼດຫນ້າ pets.htm ໃນຕົວທ່ອງເວັບຂອງທ່ານ. ຫນ້າຂອງທ່ານຄວນຈະມີລັກສະນະທີ່ຄ້າຍຄືກັນກັບຮູບທີ່ສະແດງຢູ່ໃນຮູບນີ້, ໂດຍມີຮູບພາບທີ່ສອດຄ່ອງແລະການນໍາທິດຖືກຈັດໃສ່ໃນເບື້ອງຊ້າຍຂອງຫນ້າ.

ປະຕິບັດຕາມຂັ້ນຕອນດຽວກັນນີ້ສໍາລັບຫນ້າທັງຫມົດຂອງທ່ານສໍາລັບເວັບໄຊທ໌ນີ້. ທ່ານຕ້ອງການມີຫນ້າຫນຶ່ງສໍາລັບທຸກຫນ້າໃນການນໍາທາງຂອງທ່ານ.