“การออกแบบเว็บด้วยสไตล์ชีท”
Cascading Style Sheets (CSS) คือเทคโนโลยีที่พัฒนาขึ้นมาเพื่อใช้จัดรูปแบบการแสดงผลข้อมูลให้มีประสิทธิภาพโดยการทำงาน CSS นั้น จะแยกส่วนของข้อมูลออกจากส่วนรูปแบบการแสดงผล เว็บเพจที่ออกแบบด้วยสไตล์ชีทจึงมีความยืดหยุ่นในการปรับเปลี่ยนรูปแบบนำเสนอ และความสามารถของ CSS ที่เพิ่มขึ้นมาจากแท็ก HTML ธรรมดา คือ สามารถควบคุมการแสดงผลบนอุปกรณ์ที่แสดงผลเว็บเพจด้วยเสียงได้อีกด้วย
สไตล์ชีท สามารถจำแนกตามรูปแบบการประกาศออกเป็น 2 ประเภท ดังนี้
1. Embedded Style Sheet เป็นการประกาศสไตล์ชีทรวมอยู่ในไฟล์เดียวกับข้อมูล (ถ้ามีเว็บเพจ 3 หน้า หมายถึง ต้องมีสไตล์ชีท 3ไฟล์ด้วย) โดยสไตล์ชีทจะถูกประกาศไว้ภายในแท็กพิเศษ <script>…</script> Embedded Style Sheet เหมาะสำหรับกำหนดรูปแบบการแสดงผลของเว็บเพจบางส่วนในหน้านี้ให้แตกต่างจากเว็บเพจหน้าอื่นๆ เช่น สีหรือชนิดตัวอักษรของ Header ของแต่ละเพจ เป็นต้น
หมายเหตุ External Style Sheet ช่วยลดเวลาที่ใช้ดาวน์โหลดข้อมูล เพราะสามารถดาวน์โหลดไฟล์สไตล์ชีทเพื่อจัดรูปแบบการนำเสนอของทุกเว็บเพจที่เหมือนกันเพียงหนึ่งครั้งเท่านั้น ในขณะที่ Embedded Style Sheet จะต้องดาวน์โหลดสไตล์ชีทใหม่ทุกครั้ง เมื่อมีการเปิดหน้าเว็บเพจหน้าใหม่ขึ้นมา
หลักการออกแบบเว็บเพจด้วยสไตล์ชีทที่สำคัญมีดังนี้
1. การกำหนดรูปแบบตัวอักษร ไม่ควรกำหนดชนิดของตัวอักษรที่ใช้แสดงผลบนเว็บเพจมากกว่า 2 ชนิด เพราะจะทำให้เกิดความสับสนและรูปแบบของเว็บเพจมีลักษณะไม่เป็นไปในทางเดียวกัน แต่หากต้องการสร้างความแตกต่างให้กับข้อความสามารถกำหนดรูปแบบอื่นได้ เช่น ทำให้อักษรเป็นตัวหนา ตัวเอียง หรือเลือกใช้สีต่างๆ เป็นต้น
หมายเหตุ การเน้นข้อความ ไม่ควรใช้วิธี “ขีดเส้นใต้ (Underline)” เนื่องจากอาจทำให้ผู้ชมเกิดความสับสนระหว่างข้อความเชื่อมโยง (Link) กับข้อความปกติได้
2. การกำหนดขนาดตัวอักษร ไม่ควรกำหนดขนาดของตัวอักษรที่แน่นอนตายตัวไว้ เนื่องจากในเว็บบราวเซอร์ทั่วไปจะมีเครื่องมือสำหรับปรับขนาดตัวอักษร (Text Size) ไว้แล้ว ยกตัวอย่างเช่น Large เป็นการขยายมุมมองของเว็บเพจให้มีขนาดประมาณ 200 เปอร์เซ็นต์ เป็นต้น
3. ตรวจสอบความถูกต้องในการทำงาน บางครั้งนักพัฒนาเว็บอาจเกิดความสับสนเมื่อเรียกใช้งาน Class ต่างๆเพื่อกำหนดรูปแบบการแสดงผลได้ ดังนั้นจึงต้องมีการตรวจสอบการแสดงผลทุกครั้งก่อนเสมอ เพื่อให้แน่ใจว่าได้เรียกใช้ชื่อ Class ถูกต้องตรงตามรูปแบบที่ต้องการ
หมายเหตุ “Class” เป็นรูปแบบของการประกาศสไตล์ชีท โดยกำหนดคุณสมบัติที่ต้องการภายใน Class แล้วจึงเรียกใช้ชื่อ Class เพื่อกำหนดรูปแบบการแสดงผลที่แท็กซ์ HTML นั้น
4. สร้างทางเลือกที่หลากหลายให้กับผู้ชม สไตล์ชีทมีแอททริบิวต์ !important เพื่อใช้จัดลำดับการ Override ตามลำดับ ความสำคัญของสไตล์ชีทที่นักพัฒนาเว็บเป็นผู้กำหนด เราสามารถใช้คุณสมบัติดังกล่าวร่วมกับคำสั่งใน JavaScript เพื่อสร้างทางเลือกรับชมหน้าเว็บให้กับผู้ใช้ได้ โดยเปลี่ยนรูปแบบ Theme หรือปรับขนาดความกว้างของหน้าเว็บ และลักษณะอื่นๆตามที่ผู้ใช้แต่ละคนต้องการได้
"แสดงตัวอย่างการกำหนดเครื่องมือในเว็บ www.msn.com เพื่อให้ผู้ชมเลือกเปลี่ยนสี Theme ได้"
