ดูข้อเท็จจริงด้วยเคล็ดลับเหล่านี้
เว็บเบราเซอร์ทั้งหมดรวมถึงสิ่งที่เรียกว่า "defauly styles" สไตล์เหล่านี้เป็นลักษณะที่กำหนดรูปลักษณ์และความรู้สึกขององค์ประกอบ HTML โดยที่ไม่มีข้อมูลสไตล์อื่น ๆ ตัวอย่างเช่นในเกือบทุกเบราว์เซอร์ลักษณะเริ่มต้นของการเชื่อมโยงหลายมิติเป็นสีน้ำเงินที่มีขีดเส้นใต้ นี่เป็นลักษณะที่ลิงก์เหล่านี้ดูดีเว้นแต่คุณจะบอกให้พวกเขาแสดงในลักษณะที่ต่างออกไป
รูปแบบเบราว์เซอร์เริ่มต้นจะมีประโยชน์ แต่ในหลายกรณีนักออกแบบเว็บต้องการนำสไตล์เหล่านี้ออกเพื่อให้สามารถเริ่มต้นใหม่ด้วยสไตล์ที่สามารถควบคุมได้ 100% นี่ทำโดยใช้สิ่งที่เรียกว่า "สไตล์ชีตต้นแบบ"
สไตล์ชีตต้นแบบควรเป็นสไตล์ชีตแรกที่คุณเรียกใช้ในเอกสารทั้งหมดของคุณ คุณสามารถใช้สไตล์ชีตต้นแบบเพื่อล้างการตั้งค่าเบราว์เซอร์เริ่มต้นที่อาจทำให้เกิดปัญหาในการออกแบบเว็บข้ามเบราว์เซอร์ เมื่อคุณล้างสไตล์ด้วยสไตล์ชีตต้นแบบแล้วการออกแบบของคุณจะเริ่มต้นจากที่เดียวกันในทุกเบราว์เซอร์เช่นผ้าใบที่สะอาดสำหรับการวาดภาพ
ค่าดีฟอลต์ระดับโลก
สไตล์ชีตต้นแบบของคุณควรเริ่มต้นโดยการ zeroing ขอบ, paddings และเส้นขอบ บนหน้า เว็บเบราเซอร์บางตัวกำหนดค่าส่วนหัวของเอกสารเป็น 1 หรือ 2 พิกเซลเว้นระหว่างส่วนขอบของเบราเซอร์ นี้ทำให้แน่ใจว่าพวกเขาทั้งหมดแสดงเหมือนกัน:
html, body {margin: 0px; padding: 0px; เส้นขอบ: 0px; }นอกจากนี้คุณยังต้องการทำให้ตัวอักษรสอดคล้องกัน ตรวจสอบให้แน่ใจว่าได้ตั้งขนาดตัวอักษรไว้ที่ 100 เปอร์เซ็นต์หรือ 1EM เพื่อให้สามารถเข้าถึงหน้าเว็บของคุณได้ แต่ขนาดยังคงสม่ำเสมอ และอย่าลืมรวมเส้นสูง
body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }การจัดรูปแบบหัวเรื่อง
แท็กบรรทัดแรกหรือส่วนหัว (H1, H2, H3 ฯลฯ ) โดยปกติจะเป็นข้อความตัวหนาที่มีขอบขนาดใหญ่หรือช่องว่างรอบ ๆ การล้างน้ำหนักระยะขอบและการเว้นช่องว่างช่วยให้มั่นใจได้ว่าแท็กเหล่านี้ยังคงมีขนาดใหญ่ (หรือเล็กกว่า) กว่าข้อความที่อยู่รอบตัวโดยไม่ต้องมีรูปแบบพิเศษ:
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: ปกติ; ตระกูลอักษร: Arial, Helvetica, sans-serif; }คุณอาจต้องการพิจารณากำหนดขนาดเฉพาะช่วงห่างระหว่างตัวอักษรและการวาง paddings กับแท็กส่วนหัวของคุณ แต่ที่จริงขึ้นอยู่กับลักษณะของไซต์ที่คุณออกแบบและควรถูกปล่อยออกจากสไตล์ชีตหลัก คุณสามารถเพิ่มสไตล์สำหรับหัวข้อเหล่านี้ได้ตามต้องการสำหรับการออกแบบเฉพาะของคุณ
การจัดรูปแบบข้อความล้วน
นอกเหนือจากหัวเรื่องแล้วมีแท็กข้อความอื่น ๆ ที่คุณควรตรวจดูให้ชัดเจน หนึ่งชุดที่ผู้คนมักลืมคือแท็กเซลล์ตาราง (TH และ TD) และแท็กฟอร์ม (SELECT, TEXTAREA และ INPUT) หากคุณไม่ได้กำหนดให้มีขนาดเดียวกับเนื้อหาในเนื้อความและย่อหน้าของคุณคุณอาจรู้สึกประหลาดใจอย่างไม่ราบรื่นในวิธีที่เบราว์เซอร์แสดงผล
p, th, td, li, dd, dt, ul, ol, blockquote, q, ตัวย่อ, abbr, a, input, select, textarea {margin: 0; padding: 0; แบบอักษร: ปกติธรรมดาปกติ 1em / 1.25 Arial, Helvetica, sans-serif; }นอกจากนี้ยังยินดีที่จะให้คำพูดของคุณ (BLOCKQUOTE และ Q) ตัวย่อและคำย่อแบบพิเศษเล็กน้อยเพื่อให้พวกเขาโดดเด่นขึ้นอีกหน่อย:
blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } ตัวย่อ, abbr {เคอร์เซอร์: help; ขอบล่าง: 1px dashed; }ลิงค์และรูปภาพ
ลิงก์สามารถจัดการได้ง่ายและสามารถเปลี่ยนจากข้อความขีดเส้นใต้สีน้ำเงินที่กล่าวมาได้ ฉันต้องการให้ลิงก์ของฉันยังคงขีดเส้นใต้เสมอ แต่ถ้าคุณต้องการวิธีอื่นคุณสามารถตั้งค่าตัวเลือกเหล่านี้ได้แยกกัน ฉันยังไม่รวมสีในสไตล์ชีตต้นเพราะนั่นขึ้นอยู่กับการออกแบบ
a, a: link, a: visited, a: active, a: hover {text-decoration: ขีดเส้นใต้; }ด้วยภาพสิ่งสำคัญคือต้องปิดเส้นขอบ ในขณะที่เบราว์เซอร์ส่วนใหญ่ไม่ได้แสดงเส้นขอบรอบภาพธรรมดาเมื่อเชื่อมโยงรูปภาพเบราว์เซอร์จะเปิดเส้นขอบ ในการแก้ไขปัญหานี้:
img {border: ไม่มี; }ตาราง
ในขณะที่ตารางไม่ได้ใช้เพื่อวัตถุประสงค์ในการจัดวางอีกต่อไปแล้วไซต์ของคุณอาจยังใช้ข้อมูลเหล่านี้กับข้อมูลแท็บที่แท้จริง นี่คือการใช้ตาราง HTML ที่ดี เราได้ตรวจสอบให้แน่ใจแล้วว่าขนาดข้อความเริ่มต้นเหมือนกันสำหรับเซลล์ในตารางของคุณ แต่มีรูปแบบอื่น ๆ ที่คุณควรตั้งค่าเพื่อให้ตารางของคุณยังคงเหมือนเดิม:
ตาราง {margin: 0; padding: 0; ชายแดน: ไม่มี; }รูปแบบ
เช่นเดียวกับองค์ประกอบอื่น ๆ คุณควรล้างขอบและพ่นไว้รอบ ๆ รูปแบบของคุณ สิ่งอื่นที่ฉันต้องการทำคือเขียนแท็กแบบเป็น " inline " เพื่อไม่ให้มีพื้นที่เพิ่มขึ้นที่คุณวางแท็กลงในโค้ด เช่นเดียวกับองค์ประกอบข้อความอื่น ๆ ฉันจะกำหนดข้อมูลแบบอักษรสำหรับการเลือก textarea และการป้อนข้อมูลข้างต้นเพื่อให้เหมือนกับส่วนที่เหลือของข้อความ
ฟอร์ม {margin: 0; padding: 0; display: inline; }นอกจากนี้คุณควรเปลี่ยนเคอร์เซอร์สำหรับป้ายกำกับ วิธีนี้จะช่วยให้ผู้คนเห็นว่าป้ายกำกับจะทำอะไรบางอย่างเมื่อคลิก
ป้ายกำกับ {cursor: pointer; }ชั้นเรียนทั่วไป
สำหรับส่วนนี้ของสไตล์ชีตต้นแบบคุณควรกำหนด คลาส ที่เหมาะสมกับคุณ นี่คือบางส่วนของชั้นเรียนที่ฉันใช้บ่อยที่สุด โปรดทราบว่าไม่ได้ตั้งค่าไว้เป็นองค์ประกอบใด ๆ เพื่อให้คุณสามารถกำหนดค่าให้กับสิ่งที่คุณต้องการได้:
. ชัดเจน {ชัดเจน: ทั้งสอง; } floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .text แก้ไข {text-align: justify; } .blockCenter {display: block; margin-left: auto; ขอบขวา: อัตโนมัติ; } / * อย่าลืมตั้งความกว้าง * / .bold {font-weight: bold; } .italic {แบบอักษร: ตัวเอียง; } .intraining {text-decoration: ขีดเส้นใต้; } .noindent {margin-left: 0; padding ซ้าย: 0; } .nomargin {margin: 0; }. padding (padding: 0; } .nobullet {list-style: none; list-style-image: none; }จำได้ว่าเนื่องจากชั้นเรียนเหล่านี้เขียนขึ้นก่อนรูปแบบอื่น ๆ และเป็นเพียงชั้นเรียนพวกเขาจึงง่ายต่อการแทนที่ด้วยคุณสมบัติของสไตล์เฉพาะที่เกิดขึ้นในภายหลังใน น้ำตก หากคุณพบว่าคุณตั้งค่าชั้นเรียนร่วมกับองค์ประกอบและไม่มีผลใด ๆ คุณควรตรวจสอบเพื่อให้แน่ใจว่าไม่มีรูปแบบอื่นในสไตล์ชีตในภายหลังที่มีผลต่อองค์ประกอบเดียวกัน
สไตล์ชีตต้นแบบทั้งหมด
/ * Global Defaults * / html, body {margin: 0px; padding: 0px; เส้นขอบ: 0px; } body {แบบอักษร: 1em / 1.25 Arial, Helvetica, sans-serif; } / * บรรทัดแรก * / h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: ปกติ; ตระกูลอักษร: Arial, Helvetica, sans-serif; } / * รูปแบบข้อความ * / p, th, td, li, dd, dt, ul, ol, blockquote, q, ตัวย่อ, abbr, a, input, select, textarea {margin: 0; padding: 0; แบบอักษร: ปกติธรรมดาปกติ 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } ตัวย่อ, abbr {เคอร์เซอร์: help; ขอบล่าง: 1px dashed; } ขนาดเล็ก {font-size: .85em; } big {font-size: 1.2em; } / * ลิงก์และรูปภาพ * / a, a: link, a visited, a: active, a: hover {text-decoration: ขีดเส้นใต้; } img {border: none; } / * ตาราง * / ตาราง {margin: 0; padding: 0; ชายแดน: ไม่มี; } / * แบบฟอร์ม * / แบบฟอร์ม {margin: 0; padding: 0; display: inline; } ป้ายกำกับ {เคอร์เซอร์: ตัวชี้; } / * Common Classes * / .clear {ล้าง: ทั้งสอง; } floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .text แก้ไข {text-align: justify; } .blockCenter {display: block; margin-left: auto; ขอบขวา: อัตโนมัติ; } / * อย่าลืมตั้งความกว้าง * / .bold {font-weight: bold; } .italic {แบบอักษร: ตัวเอียง; } .intraining {text-decoration: ขีดเส้นใต้; } .noindent {margin-left: 0; padding ซ้าย: 0; } .nomargin {margin: 0; }. padding (padding: 0; } .nobullet {list-style: none; list-style-image: none; }บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 10/6/17