ວິທີການຖອນຕົວອອກແບບເບົາເຊີເບື້ອງຕົ້ນດ້ວຍຮູບແບບແມ່ແບບແມ່ບົດ

ໄດ້ຮັບຂໍ້ເທັດຈິງດ້ວຍຄໍາແນະນໍາເຫຼົ່ານີ້

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

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

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

Global Defaults

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

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

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

body {font: 1em / 125 Arial, Helvetica, sans-serif; }

ການຕັ້ງຄ່າຫົວຂໍ້

ແທໍກຫົວຂໍ້ຫລືຫົວຂໍ້ (H1, H2, H3, ຯ ລະຯ ) ໂດຍເສພາະຢ່າງຍິ່ງກັບຂໍ້ຄວາມທີ່ຫນາແຫນ້ນດ້ວຍຂອບຂອບຫລືຂະຫນາດໃຫຍ່ຮອບ ໆ ໂດຍການກັ່ນຕອງນ້ໍາຫນັກ, ຮາບແລະຂອບ, ທ່ານຄວນຫມັ້ນໃຈວ່າແທັບເຫຼົ່ານີ້ຍັງຄົງຂະຫນາດໃຫຍ່ (ຫຼືນ້ອຍກວ່າ) ກວ່າຂໍ້ຄວາມທີ່ຢູ່ອ້ອມຮອບພວກມັນໂດຍບໍ່ມີຮູບແບບພິເສດ:

h1, h2, h3, h4, h5, h6 {margin: 0 padding: 0 font-weight: normal ຄອບຄົວຕົວອັກສອນ: Arial, Helvetica, sans-serif; }

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

ການຈັດຮູບແບບຂໍ້ຄວາມທົ່ງພຽງ

ນອກເຫນືອຈາກຫົວຂໍ້ຂ່າວ, ມີຂໍ້ຄວາມອື່ນໆທີ່ທ່ານຄວນແນ່ໃຈວ່າຈະເຊັດອອກ. ຫນຶ່ງທີ່ກໍານົດວ່າປະຊາຊົນມັກຈະລືມແມ່ນຕາຕະລາງຕາຕະລາງຕາຕະລາງ (TH ແລະ TD) ແລະແທັບແບບຟອມ (SELECT, TEXTAREA ແລະ INPUT). ຖ້າທ່ານບໍ່ໄດ້ກໍານົດໃຫ້ຂະຫນາດດຽວກັນກັບຮ່າງກາຍແລະຂໍ້ຄວາມຂອງວັກຂອງທ່ານ, ທ່ານອາດຈະແປກໃຈທີ່ວິທີການຕົວທ່ອງເວັບຂອງພວກມັນເຮັດໃຫ້ພວກມັນມີຄວາມແປກໃຈ.

p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0 padding: 0 ຕົວອັກສອນ: normal normal normal 1em / 125 Arial, Helvetica, sans-serif; }

ມັນກໍ່ດີທີ່ຈະໃຫ້ຄໍາຄິດຄໍາເຫັນຂອງທ່ານ (BLOCKQUOTE ແລະ Q), ຄໍາສັບຄ້າຍຄື, ແລະຄໍານາມເປັນແບບພິເສດຫນ້ອຍ, ເພື່ອວ່າພວກເຂົາຈະຢືນຢູ່ຫຼາຍກວ່ານີ້ອີກ:

blockquote {margin: 125em padding: 125m} q {font-style: italic } acronym, abbr {cursor: help border-bottom: 1px dashed; }

ລິ້ງຄ໌ແລະຮູບພາບ

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

a, a: link, a: visited, a: active, a: hover {text-decoration: underline }

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

img {border: none }

ຕາຕະລາງ

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

ຕາລາງ {margin: 0; padding: 0 border: none }

ແບບຟອມ

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

form {margin: 0 padding: 0 ສະແດງ: inline; }

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

label {cursor: pointer }

Common classes

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

clear {clear: both } floatLeft {float: left } floatRight {float: right } textLeft {text-align: left } textRight {text-align: right } textCenter {text-align: center } textJustify {text-align: justify } blockblockCenter {display: block margin-left: auto margin-right: auto } / * ຈື່ໄວ້ວ່າຈະກໍານົດ width * / bold {font-weight: bold; } .italic {font-style: italic; } intline {text-decoration: underline } noindent {margin-left: 0 padding-left: 0; } nomargin {margin: 0 } nopadding {padding: 0 } nobullet {list-style: none ລາຍການແບບຮູບແບບ: none; }

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

ຮູບແບບແມ່ແບບລວມທັງຫມົດ

/ * Global Defaults * / html, body {margin: 0px padding: 0px border: 0px } body {font: 1em / 125 Arial, Helvetica, sans-serif } / * Headlines * / h1, h2, h3, h4, h5, h6 {margin: 0 padding: 0 font-weight: normal ຄອບຄົວຕົວອັກສອນ: Arial, Helvetica, sans-serif; } / * Text Styles * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0 padding: 0 ຕົວອັກສອນ: normal normal normal 1em / 125 Arial, Helvetica, sans-serif; } blockquote {margin: 125em padding: 125m} q {font-style: italic } acronym, abbr {cursor: help border-bottom: 1px dashed; } ຂະຫນາດນ້ອຍ {font-size: .85em; } big {font-size: 12em } / * Links and Images * / a, a: link, a: visited, a: active, a: hover {text-decoration: underline } img {border: none } / * ຕາລາງ * / table {margin: 0 padding: 0 border: none } / * ຮູບແບບ * / form {margin: 0 padding: 0 ສະແດງ: inline; } label {cursor: pointer } / * Common Classes * / clear {clear: both } floatLeft {float: left } floatRight {float: right } textLeft {text-align: left } textRight {text-align: right } textCenter {text-align: center } textJustify {text-align: justify } blockblockCenter {display: block margin-left: auto margin-right: auto } / * ຈື່ໄວ້ວ່າຈະກໍານົດ width * / bold {font-weight: bold; } .italic {font-style: italic; } intline {text-decoration: underline } noindent {margin-left: 0 padding-left: 0; } nomargin {margin: 0 } nopadding {padding: 0 } nobullet {list-style: none ລາຍການແບບຮູບແບບ: none; }

ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ແກ້ໄຂໂດຍ Jeremy Girard ເມື່ອວັນທີ 10/6/17