ภาพรวมของ Cascading Style Sheets ด้วยสไตล์ชีตตัวอย่าง
เมื่อคุณสร้างเว็บไซต์ตั้งแต่เริ่มต้นจะเป็นการเริ่มต้นด้วยรูปแบบพื้นฐานที่กำหนดไว้ เหมือนเริ่มต้นด้วยผ้าใบที่สะอาดและแปรงสด หนึ่งในปัญหาแรกที่นักออกแบบเว็บไซต์ต้องเผชิญคือ เว็บเบราเซอร์ มีความแตกต่างกันทั้งหมด ขนาดแบบอักษรเริ่มต้นแตกต่างจากแพลตฟอร์มเพื่อแพลตฟอร์มตระกูลแบบอักษรเริ่มต้นจะแตกต่างกันเบราว์เซอร์บางประเภทกำหนดระยะขอบและส่วนรองลงบนแท็ก body ขณะที่อื่น ๆ ไม่ได้เป็นต้น หลีกเลี่ยงความไม่สอดคล้องกันเหล่านี้ด้วยการกำหนดรูปแบบเริ่มต้นสำหรับหน้าเว็บของคุณ
CSS และชุดอักขระ
สิ่งแรกอันดับแรกให้ชุดอักขระของเอกสาร CSS ของคุณเป็น utf-8 ในขณะที่มีแนวโน้มว่าหน้าเว็บส่วนใหญ่ที่คุณออกแบบเป็นภาษาอังกฤษอาจมีบางภาษาเหมาะสำหรับบริบททางภาษาและวัฒนธรรมที่แตกต่างกัน เมื่อมีการ utf-8 ทำให้กระบวนการนี้ง่ายขึ้น การตั้งค่าชุดอักขระใน สไตล์ชีตภายนอก จะไม่มีผลเหนือกว่า ส่วนหัว HTTP แต่ในกรณีอื่น ๆ ทั้งหมดจะเป็นเช่นนั้น
ตั้งค่าชุดอักขระได้ง่าย สำหรับบรรทัดแรกของเอกสาร CSS เขียน:
@charset "utf-8";ด้วยวิธีนี้ถ้าคุณใช้อักขระระหว่างประเทศในคุณสมบัติเนื้อหาหรือเป็นชื่อคลาสและชื่อ ID สไตล์ชีต จะทำงานได้อย่างถูกต้อง
การจัดรูปแบบหน้าเว็บ
สิ่งต่อไปที่สไตล์ชีตดีฟอลต์ต้องการคือสไตล์เพื่อให้เป็นศูนย์จากระยะขอบการเว้นวรรคและเส้นขอบ การทำเช่นนี้จะทำให้แน่ใจได้ว่าเบราว์เซอร์ทั้งหมดวางเนื้อหาไว้ในที่เดียวกันและไม่มีช่องว่างที่ซ่อนระหว่างเบราเซอร์และเนื้อหา สำหรับหน้าเว็บส่วนใหญ่ส่วนนี้ใกล้กับขอบของข้อความมากเกินไป แต่สิ่งสำคัญคือต้องเริ่มต้นจากที่นั่นเพื่อให้ภาพพื้นหลังและส่วนรูปแบบเรียงรายขึ้นอย่างถูกต้อง
html, body {margin: 0px; padding: 0px; เส้นขอบ: 0px; }ตั้งค่าสีพื้นหน้าหรือสีตัวอักษรเริ่มต้นเป็นสีดำและสีพื้นหลังเริ่มต้นเป็นสีขาว แม้ว่าการออกแบบเว็บเพจนี้จะมีการเปลี่ยนแปลงมากที่สุดการตั้งสีมาตรฐานไว้ในเนื้อหาและ แท็ก HTML ในตอนแรกจะทำให้สามารถอ่านและใช้งานเพจได้ง่ายขึ้น
html, body {color: # 000; พื้นหลัง: #fff; }ลักษณะแบบอักษรเริ่มต้น
ขนาดตัวอักษรและครอบครัวแบบอักษรเป็นสิ่งที่ย่อมเปลี่ยนแปลงได้เมื่อการออกแบบเริ่มต้นขึ้น แต่เริ่มต้นด้วยขนาดตัวอักษรเริ่มต้น 1 ชุดและครอบครัวแบบอักษรเริ่มต้นของ Arial, Geneva หรือตัวอักษร sans-serif อื่น ๆ การใช้ ems ทำให้หน้านี้เข้าถึงได้มากที่สุดเท่าที่จะเป็นไปได้และแบบอักษร sans-serif สามารถอ่านได้บนหน้าจอมากขึ้น
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }อาจมีที่อื่น ๆ ที่คุณอาจพบข้อความ แต่ p , th , td , li , 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; }อย่าลืมลิงก์
การจัดรูปแบบสีลิงก์เป็นส่วนสำคัญของการออกแบบเกือบตลอดเวลา แต่ถ้าคุณไม่ได้กำหนดไว้ในรูปแบบเริ่มต้นโอกาสที่คุณจะลืมอย่างน้อยหนึ่งชั้นหลอก กำหนดให้มีรูปแบบเล็ก ๆ สีฟ้าและเปลี่ยนสีเมื่อคุณมีจานสีสำหรับเว็บไซต์ที่กำหนดไว้
เมื่อต้องการตั้งค่าการ เชื่อมโยง ในโทนสีฟ้าให้ตั้งค่า:
- ลิงก์ เป็นสีฟ้า
- ลิงก์ที่เข้าชม เป็นสีน้ำเงินเข้ม
- ลิงก์แบบเลื่อน เป็นสีน้ำเงินอ่อน
- ลิงก์ที่ใช้งาน เป็นสีฟ้าจาง ๆ
ดังแสดงในตัวอย่างนี้:
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 {font: 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; }