เมื่อคุณสร้างเว็บไซต์ตั้งแต่เริ่มต้นจะเป็นการเริ่มต้นด้วยรูปแบบพื้นฐานที่กำหนดไว้ เหมือนเริ่มต้นด้วยผ้าใบที่สะอาดและแปรงสด หนึ่งในปัญหาแรกที่นักออกแบบเว็บไซต์ต้องเผชิญคือเว็บเบราเซอร์มีความแตกต่างกันทั้งหมด ขนาดแบบอักษรเริ่มต้นแตกต่างจากแพลตฟอร์มเพื่อแพลตฟอร์มตระกูลแบบอักษรเริ่มต้นจะแตกต่างกันเบราว์เซอร์บางประเภทกำหนดระยะขอบและส่วนรองลงบนแท็ก body ขณะที่อื่น ๆ ไม่ได้เป็นต้น หลีกเลี่ยงความไม่สอดคล้องกันเหล่านี้ด้วยการกำหนดรูปแบบเริ่มต้นสำหรับหน้าเว็บของคุณ
CSS และชุดอักขระ
สิ่งแรกอันดับแรกให้ตั้งชุดอักขระของเอกสาร CSS ของคุณไว้ UTF-8 . ในขณะที่มีแนวโน้มว่าหน้าเว็บส่วนใหญ่ที่คุณออกแบบเป็นภาษาอังกฤษอาจมีบางภาษาเหมาะสำหรับบริบททางภาษาและวัฒนธรรมที่แตกต่างกัน เมื่อมีการ utf-8 ทำให้กระบวนการนี้ง่ายขึ้น การตั้งค่าชุดอักขระในสไตล์ชีตภายนอกจะไม่มีผลเหนือกว่าส่วนหัว HTTP แต่ในกรณีอื่น ๆ ทั้งหมดจะเป็นเช่นนั้น
ตั้งค่าชุดอักขระได้ง่าย สำหรับบรรทัดแรกของเอกสาร CSS เขียน:
@charset "utf-8";
ด้วยวิธีนี้ถ้าคุณใช้อักขระระหว่างประเทศในคุณสมบัติเนื้อหาหรือเป็นชื่อคลาสและชื่อ ID สไตล์ชีตจะทำงานได้อย่างถูกต้อง
การจัดรูปแบบหน้าเว็บ
สิ่งต่อไปที่สไตล์ชีตดีฟอลต์ต้องการคือสไตล์เพื่อให้เป็นศูนย์จากระยะขอบการเว้นวรรคและเส้นขอบ การทำเช่นนี้จะทำให้แน่ใจได้ว่าเบราว์เซอร์ทั้งหมดวางเนื้อหาไว้ในที่เดียวกันและไม่มีช่องว่างที่ซ่อนระหว่างเบราเซอร์และเนื้อหา สำหรับหน้าเว็บส่วนใหญ่ส่วนนี้ใกล้กับขอบของข้อความมากเกินไป แต่สิ่งสำคัญคือต้องเริ่มต้นจากที่นั่นเพื่อให้ภาพพื้นหลังและส่วนรูปแบบเรียงรายขึ้นอย่างถูกต้อง
html, body { margin: 0px; padding: 0px; เส้นขอบ: 0px; }
ตั้งค่าสีพื้นหน้าหรือสีตัวอักษรเริ่มต้นเป็นสีดำและสีพื้นหลังเริ่มต้นเป็นสีขาว แม้ว่าการออกแบบเว็บเพจนี้จะมีการเปลี่ยนแปลงมากที่สุดการตั้งสีมาตรฐานไว้ในเนื้อหาและแท็ก HTML ในตอนแรกจะทำให้สามารถอ่านและใช้งานเพจได้ง่ายขึ้น
html, body { สี: # 000; พื้นหลัง: #fff; }
ลักษณะแบบอักษรเริ่มต้น
ขนาดตัวอักษรและครอบครัวแบบอักษรเป็นสิ่งที่ย่อมเปลี่ยนแปลงได้เมื่อการออกแบบเริ่มต้นขึ้น แต่เริ่มต้นด้วยขนาดตัวอักษรเริ่มต้นของ 1em และครอบครัวแบบอักษรเริ่มต้นของ Arial, Geneva หรือตัวอักษร sans-serif อื่น ๆ การใช้ ems ทำให้หน้านี้เข้าถึงได้มากที่สุดเท่าที่จะเป็นไปได้และแบบอักษร sans-serif สามารถอ่านได้บนหน้าจอมากขึ้น
html, body, p, th, td, li, dd, dt { แบบอักษร: 1em Arial, Helvetica, sans-serif; }
อาจมีที่อื่นที่คุณอาจพบข้อความ แต่ พี , TH , td , ลี้ , DD , และ dt เป็นการเริ่มต้นที่ดีสำหรับการกำหนดแบบอักษรพื้นฐาน ประกอบด้วย HTML และ ร่างกาย ในกรณี แต่เบราว์เซอร์จำนวนมากจะแทนที่ตัวเลือกแบบอักษรหากคุณกำหนดแบบอักษรสำหรับ HTML หรือเนื้อหาเท่านั้น
หัวข้อข่าว
ส่วนหัว HTML มีความสำคัญต่อการใช้เพื่อช่วยให้โครงร่างเว็บไซต์ของคุณเป็นประโยชน์และช่วยให้เครื่องมือค้นหาได้ลึกลงไปในไซต์ของคุณ ไม่มีรูปแบบพวกเขาทั้งหมดน่าเกลียดดังนั้นตั้งค่ารูปแบบเริ่มต้นในทุกคนและกำหนดครอบครัวตัวอักษรและขนาดตัวอักษรสำหรับแต่ละ
h1, h2, h3, h4, h5, h6 { ตระกูลอักษร: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }
อย่าลืมลิงก์
การจัดรูปแบบสีลิงก์เป็นส่วนสำคัญของการออกแบบเกือบตลอดเวลา แต่ถ้าคุณไม่ได้กำหนดไว้ในรูปแบบเริ่มต้นโอกาสที่คุณจะลืมอย่างน้อยหนึ่งชั้นหลอก กำหนดให้มีรูปแบบเล็ก ๆ สีฟ้าและเปลี่ยนสีเมื่อคุณมีจานสีสำหรับเว็บไซต์ที่กำหนดไว้
เมื่อต้องการตั้งค่าการเชื่อมโยงในโทนสีฟ้าให้ตั้งค่า:
- การเชื่อมโยง เป็นสีฟ้า
- ลิงก์ที่เยี่ยมชม เป็นสีน้ำเงินเข้ม
- hover links เป็นสีฟ้าอ่อน
- ลิงก์ที่ใช้งานอยู่ แม้สีฟ้าจาง ๆ
ดังแสดงในตัวอย่างนี้:
a: link {color: # 00f; }a: visited {color: # 009; }a: เลื่อน (สี: # 06f; }a: active {color: # 0cf; }
ด้วยการออกแบบการเชื่อมโยงด้วยโทนสีที่ดูน่าพิศวงทำให้มั่นใจได้ว่าคุณจะไม่ลืมชั้นเรียนใด ๆ และยังทำให้พวกเขาดังน้อยกว่าค่าเริ่มต้นสีฟ้าสีแดงและสีม่วง
สไตล์ชีตเต็มรูปแบบ
นี่คือสไตล์ชีทแบบเต็ม:
@charset "utf-8"; html, body { margin: 0px; padding: 0px; เส้นขอบ: 0px; สี: # 000; พื้นหลัง: #fff; } html, body, p, th, td, li, dd, dt { แบบอักษร: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { ตระกูลอักษร: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: link {color: # 00f; } a: visited {color: # 009; } a: เลื่อน (สี: # 06f; } a: active {color: # 0cf; }
