การใช้งาน CSS เบื้องต้นโดย Dave Raggett

หมายเหตุ เอกสารฉบับนี้เป็นเอกสารแปลจากต้นฉบับภาษาอังกฤษอาจมีข้อบกพร่องหรือไม่ทันสมัย
เอกสารต้นฉบับเป็นของ W3C และถือเป็นเอกสารอย่างเป็นทางการ ท่านสามารถอ่านประกอบเพื่อความถูกต้อง

การใช้งาน Style สำหรับภาษา HTML

บทความสั้นนี้จัดทำขึ้นเพื่อแนะนำการใช้ Style ตกแต่งเว็บเพจ ด้วยภาษา Cascading Style Sheets language (CSS) ของ W3C และคำสั่งที่สามารถใช้ทดแทนกันได้ในภาษา HTML ในบทความนี้ท่านยังจะได้เห็นปัญหาการใช้งาน CSS อันเกิดจากการแสดงผลของ Browser ที่ต่างชนิด หรือต่างเวอร์ชั่นกันอีกด้วย

การที่จะทำให้ Style sheet ทำงานได้สมบูรณ์นั้น สิ่งจำเป็น คือการเขียน markup ของท่านจะต้องไม่มีที่ผิดพลาดเลย วิธีการที่สะดวกที่สุดเพื่อกันไม่ให้การ markup ของท่านผิดพลาด สามารถทำได้โดยใช้โปรแกรม HTML Tidy ซึ่งจะช่วยให้การ markup เรียบร้อยและง่ายต่อการอ่านและแก้ไข ท่านควรที่จะเปิดโปรแกรมนี้ไว้ขณะทำการแก้ไขหรือเขียน markup เป็นประจำ เพราะโปรแกรม Tidy นี้จะช่วยแก้ไขปัญหาการ markup ที่ไม่เรียบร้อยอันเกิดจากโปรแกรมช่วยเขียนเว็บเพจได้เป็นอย่างดี

สำหรับบทความนี้ท่านจะได้เรียนรู้เรื่องดังต่อไปนี้:

บทเรียนแรก

เราจะเริ่มต้นด้วยการตั้งค่าสีของตัวอักษร และฉากหลัง ซึ่งสามารถทำได้ด้วยการใช้ Style element ในการกำหนดค่าคุณสมบัติและรูปแบบของ tag ในเอกสาร ดังนี้:

การใช้ style element จะต้องเขียนไว้ในส่วน head ของเอกสาร ตัวอย่างเอกสาร HTML ด้านล่างจะแสดง ให้เห็นว่าท่านจะต้องวาง style element ไว้ ณ ตำแหน่งใด ท่านสามารถคัดลอกตัวอย่างโค้ดด้านล่างไปใช้ในโปรแกรม editor ที่ท่านใช้อยู่ได้เลย เพื่อเพิ่มความสะดวกในการทดลองใช้งาน style sheet ของ CSS:

โค้ดที่อยู่ระหว่าง แท็ก <style> และ </style> เป็น เครื่องหมาย (notation) พิเศษ ที่ใช้กำหนดกฏของ style (style rule) โดยแต่ละกฏจะเริ่มด้วยการเรียกชื่อ tag ที่ต้องการกำหนด ตามด้วย property (คุณสมบัติ) ในเครื่องหมายปีกกา { และ } ในตัวอย่างกฎที่ใช้จะมีผลกับ tag body ซึ่งจะเห็นว่า tag body เป็น tag พื้นฐานที่ใช้กำหนดการมองเห็นและความรู้สึกต่อหน้าเว็บเพจได้เป็นอย่างดีทีเดียว

แต่ละ property จะเริ่มด้วยชื่อ property ที่ต้องการ ตามด้วยเครื่องหมาย colon และค่า (value) ที่ต้องการกำหนดสำหรับ property นั้นๆ เป็นลำดับสุดท้าย โดยหากมีการใช้ property หลายตัวจะคั่นด้วยเครื่องหมาย semicolon ในตัวอย่างข้างต้น มีการใช้ property สองตัวด้วยกัน คือ "color" ซึ่งเป็นตัวกำหนดค่าสีของตัวอักษร และ "background" ในการกำหนดสีที่ใช้ในฉากหลัง ท่านควรจะไส่เครื่องหมาย semicolon ไว้หลัง property ทุกครั้ง แม้จะเป็น property สุดท้ายแล้วก็ตามที

การกำหนดค่าสีอาจใช้โดยการระบุชื่อสีที่ต้องการหรือใช้ค่าโค้ดสี rgb ก็ได้ เช่น rgb(255, 204, 204) เป็นสีชมพู เลขสามชุดในปีกกา้ใช้แทนค่าสี แดง เขียว น้ำเงิน ตามลำดับ ซึ่งมีค่าระหว่าง 0 ถึง 255 นอกจากนี้ท่านอาจกำหนดค่าสีด้วยเลขฐาน 16 ซึ่งสีชมพูแทนด้วย #FFCCCC รายละเอียดค่าสีจะกล่าวในส่วนถัดไป

Stlye element จะต้องวางไว้ในตำแหน่งของ head ในเอกสาร ถัดจาก tag title เสมอ และห้ามวางไว้ในตำแหน่ง body

การเชื่อมโยง style sheet ภายนอก

ถ้าท่านต้องการใช้ Style เดียวกันในหลายหน้าเว็บเพจแล้ว ท่านสามารถทำได้โดย การเขีียนไฟล์ Style sheet แยกไว้ต่างหาก แล้วใช้การเชื่อมโยง (Link) ในหน้าเพจ เพื่อเรียกใช้งาน Style sheet ภายนอกที่สร้างไว้ได้ โดยเมื่อต้องการเรียกใช้ Style sheet ที่เพจใดก็ให้แทรกโค้ดด้านล่างที่เพจนั้น:

link tag จะต้องวางไว้ระหว่าง element <head> ... </head> ของไฟล์ HTML ที่ใช้การเชื่อมโยงใช้งาน style sheet ภายนอกหรือ style sheet ที่เขียนแยกไว้ต่างหาก ตัวอย่างไฟล์ HTML ที่ได้จะมีลักษณะดังตัวอย่างด้านล่าง:

element ของ link rel ต้องกำหนดค่าคุณลักษณะ (attribute) เป็น "stylesheet" เพื่อให้ browser รู้ว่า attribute href ที่ใช้ระบุที่อยู่ของเว็บ (URL) ที่อยู่ถัดไปนั้น เป็นทีอยู่ของไฟล์ style sheet ไฟล์ stylesheet อย่างง่ายอาจเขียนได้ดังตัวอย่างด้านล่างนี้:

ในไฟล์ HTML เดียวกันนั้นสามารถใ้ช้ทั้ง style sheet ภายนอก และภายในได้พร้อมกัน โดยใช้ style element เพื่อกำหนดรูปแบบบางส่วนของหน้าเว็บเป็นการเฉพาะ โดยมีหลักว่า style element ที่อยู่ใกล้ element ที่ต้องการกำหนดสมบัติที่สุด จะมีผลต่อ element นั้นเสมอ แม้ว่าจะมีการกำหนดค่า style ให้กับ element นั้นไว้ก่อนแล้วในหน้าเพจนั้นก็ตาม

การกำหนดค่าระยะห่างจากจุดเริ่มต้น

หน้าเว็บเพจจะดูดี ถ้าเราให้มีระยะห่างเริ่มต้นที่มากหน่อย การกำหนดระยะห่างจากจุดเริ่มต้นให้หน้าเพจ ทำได้โดยการใช้ "margin-left" สำหรับระยะห่างด้านซ้าย และ "margin-right" สำหรับระยะห่างด้านขวา ตัวอย่างเช่น

โค้ดด้านบนจะกำหนดให้ ระยะห่างจากจุดเริ่มต้นทั้งซ้ายและขวา เป็น 10% ของความกว้างหน้าต่างที่เปิดหน้าเพจนั้น โดยค่าระยะห่างจากจุดเริ่มต้นนี้ยังจะแปรผันกับขนาดหน้าต่างของ browser ที่ใช้เปิดหน้าเพจนั้นอีกด้วย

การกำหนดค่าย่อหน้า ซ้าย ขวา

เมื่อต้องการให้ส่วน tag h1,h2,.... ดูโดดเด่น ท่านอาจใช้การกำหนดระยะห่างจากจุดเริ่มต้นในส่วนของ body เช่น

ในตัวอย่างนี้มีการกำหนด style rule สามอย่างด้วยกัน อันแรกสำหรับ element body อันที่สองสำหรับ element h1 (ใช้สำหรับหัวเรื่องที่สำคัญ) และอันสุดท้ายสำหรับ หัวเรื่องรองลงไป (h2, h3, h4, h5 และ h6) ค่าระยะห่างจากจุดเริ่มต้นของ heading (หัวเรื่อง) จะนับต่อจากระยะห่างที่กำหนดไว้ในส่วน body โดยค่าลบจะหมายถึงให้ลดระยะห่างจากจุดเริ่มต้นลง

ในส่วนเนื้อหาต่อไป การใช้ style rule จะเรียกใช้จาก style element ในส่วน head ของเอกสาร หรืออาจเรียกใช้จากการเชื่อมโยงไปยัง style sheet ภายนอก

การกำหนดค่าระยะห่างด้านบนและด้านล่าง

Browsers ส่วนใหญ่จะแสดงผลระยะห่างด้านบน และด้านล่างทั้งในส่วน heading (หัวเรื่อง) paragraph (ย่อหน้า) และอื่นๆได้ดี เรามีเหตุผลอยู่สองประการในการควบคุมค่าระยะห่างด้านบนและด้านล่าง คือ เมื่อเราต้องกำหนดการระยะห่างก่อนถึง heading หรือ paragraph เป็นการเฉพาะ หรือเมื่อเราต้องการควบคุมพื้นที่ว่างที่แม่นยำ

"margin-top" ใช้สำหรับระบุพื้นที่ว่างด้านบน และ "margin-bottom" ใช้สำหรับระบุพื้นที่ว่างด้านล่าง เมื่อต้องการกำหนดค่านี้สำหรับ h2 headings ทั้งหมดในหน้าเอกสารสามารถทำได้โดยเขียนโค้ดดังนี้:

หน่วย em เป็นหน่วยที่มีประโยชน์มาก เพราะเป็นการแสดงขนาดอ้างอิงกับขนาดของตัวอักษร หนึ่ง em เท่ากับความสูงของตัวอักษร การใช้หน่วย em จะช่วยให้รักษาขนาดของหน้าเพจได้โดยไม่ขึ้นกับขนาดของตัวอักษร ต่างจากการใช้หน่วย pixel หรือ point ซึ่งจะทำให้หน้าเพจผิดเพี้ยนได้เมื่อผู้ใช้ขยายขนาดตัวอักษร

หน่วย point ใช้กับโปรแกรม word processing เป็นส่วนมาก แต่บน browser จะพบว่า browser แต่ละตัวจะแสดงผลขนาด point ไม่เท่ากัน ทำให้ค่าหนึ่งที่ใช้ได้กับ browser ตัวหนึ่งอาจใ้ช้ไม่ได้กับอีก browser หนึ่ง

หากท่านต้องการคุมระยะห่างของ heading ใดเป็นการเฉพาะ ทำได้โดยการสร้าง named style สำหรับ heading นั้น โดยใช้ class attribute เช่น

Style rule ที่้ใช้จะเริ่มโดยเรียกชื่อ tag ที่ต้องการ, ตามด้วยจุดและชื่อของ class attribute. โดยห้ามมีการเว้นว่างก่อนหรือหลังจุด มิฉะนั้น stlye rule จะไม่สามารถทำงานได้ การกำหนด style ให้ element เป็นการเฉพาะมีอีกหลายวิธี แต่การใช้ class attribute จะยืดหยุ่นมากที่่สุด

เมื่อ tag ที่อยู่ต่อกันมีการกำหนดค่า margin-bottom และ margin-top เช่น เมื่อ heading ตามด้วย paragraph ค่า margin-bottom ของ heading จะไม่นำไปนับรวมกับค่า margin-top ของ paragraph แต่จะใช้ค่าใดค่าหนึ่งที่มีค่ามากที่สุดเท่านั้น

ระยะย่อหน้าบรรทัดแรก

บางครั้งท่านอาจต้้องการกำหนดระยะย่อหน้าในบรรทัดแรกของแต่ละย่อหน้า ท่านอาจใช้ style rule ต่อไปนี้ในการกำหนดค่าของ paragraph นั้น:

style rule ข้างต้นจะทำการเว้นระยะย่อหน้าของแต่ละย่อหน้า 2 em

การควบคุมตัวอักษร

ในส่วนนี้จะอธิบายวิธีการกำหนดตัวอักษร ขนาด การทำตัวเอียง ตัวหนา และกำหนด stlye อื่นๆ

กำหนด styles ตัวอักษร

การกำหนด styles ให้ตัวอักษรทั่วไปเป็นการทำตัวเอียง ตัวหนา browsers มักแสดง em tag เป็นตัวเอียงและ strong tag เป็นตัวหนา แต่ถ้าท่านต้องการให้ em tag เป็น ตัวเอียงหนา และ strong tag เป็น ตัวพิมพ์ใหญ่หนา ทำได้โดย:

แต่ถ้าท่านรู้สึกว่าบางส่วนตัวพิมพ์ใหญ่มากไป, ท่านอาจกำหนดให้บาง tag เช่น headings เป็นตัวเล็กเช่น:

ตั้งค่าขนาดตัวอักษร

Browser ส่วนมากจะใช้ตัวอักษรขนาดใหญ่สำหรับ heading ที่สำคัญ ถ้าท่านทำการแก้ค่าขนาด defualt (ค่าแรกเริ่ม) ท่านอาจพบว่าตัวหนังสืออาจเล็กจนไม่อาจอ่านได้ ดังนั้นเมื่อต้องการแก้ขนาดตัวอักษร ท่านควรใ้ช้หน่วยแบบ relative (อัตราส่วน) แทน

ตัวอย่างด้านล่าง เป็นการตั้งค่าขนาด heading ในแบบ เปอร์เซนต์ ซึ่งเป็นอัตราส่วนกับขนาดของตัวอักษรปกติ:

ตั้งค่า font family (ชนิดตัวอักษร)

ท่านมักพบว่าชนิดตัวอักษรที่ท่านชอบนั้นอาจไม่สนับสนุนกับ browser ทุกชนิด เพื่อแก้ปัญหานี้ ท่านสามารถใส่ชนิดตัวอักษรได้หลายๆชนิดด้วยกัน โดยเรียงตามความชอบส่วนตัว แต่ก็มีอักษรบางตัวที่เป็นอักษรทั่วไปที่ browser สนับสนุนได้ทุกตัว เช่น serif, sans-serif, cursive, fantasy, หรือ monospace เป็นต้น ซึ่งท่านควรที่จะใช้อักษรเหล่านี้ไว้ท้ายสุดของ style rule ดังเช่น:

ในตัวอย่างนี้ heading จะแสดงอักษร Garamond ถ้า browser ไม่สนับสนุนจะแสดงเป็น Times New Roman และถ้าไม่สามารถสนับสนุนได้อีก ก็จะแสดง เป็นตัวอักษรมาตรฐาน serif ในส่วนของ paragraph จะแสดงตัวอักษร Verdana และถ้าไม่สนับสนุนก็จะใช้ตัวอักษรมาตรฐาน sans-serif

การที่จะสามารถอ่านตัวอักษรได้ ปกตbจะขึ้นกับความสูงของตัวอักษรแบบพิมพ์เล็กมากกว่าขนาดของตัวอักษรเอง ดังนั้นตัวอักษรอย่าง Verdana จะอ่านได้ง่ายกว่าพวก Time news roman ดังนั้นจึงนิยมใช้ในส่วนของ paragraph

แก้ปัญหาระยะห่างเริ่มต้นกับตัวอักษร

ปัญหาแรกที่ผู้เขียนพบเจอ คือ ปัญหาตัวอักษรที่ตำแหน่ง body ที่ไม่อยู่ใน block level element เช่น p เป็นต้น:

ตัวหนังสือที่ต่อท้าย heading อาจถูกแสดงผลผิดในบาง browser เป็น font อื่น หรือมีระยะห่างที่ไม่ถูกต้องได้ ดังนั้นท่านควรใช้ paragraph element คลุมตัวหนังสือดังกล่าวเสีย เช่น

อีกปัญหาหนึ่ง คือ การตั้งค่า font family ให้ pre elements บาง browser จะลืมค่า font family เมื่อคุณตั้งค่าขนาด font หรือ property อื่นๆให้ tag pre

ปัญหาสุดท้ายคือการตั้งค่า font family ให้ heading, p และ ul ถ้าท่านต้องการกำหนดขอบหรือฉากหลังให้ element อย่าง div การตั้งค่า font นี้จะช่วยแก้ปัญหา browser ลืมใช้ font fmaily ที่กำหนดไว้ก่อนแล้ว แล้วไปใช้ default font แทน

การเพิ่มขอบและฉากหลัง

ท่านสามารถเพิ่มขอบรอบๆ heading, list, paragraph หรือ กลุ่ม element ข้างต้นใน tag divได้โดยง่าย เช่น:

div.box { border: solid; border-width: thin; width: 100%; }

ในบาง browser ถ้าท่านไม่กำหนด "width" property ท่านอาจเจอปัญหาว่า ขอบด้านขวาอยู่ห่างจากทางขวามากเกินไป เมื่อกำหนด class ข้างต้นแล้วอาจเรียกใช้โดย:

<div class="box">
เนื้อหาส่วนนี้อยู่ใน element DIV  จะถูกล้อมกรอบด้วยขอบแบบบาง


</div>

ท่านควรทราบว่าชนิดขอบใน CSS มีไม่มากนัก คือ dotted, dashed, solid, double, groove, ridge, inset and outset โดยมี property border-width เป็นตัวใช้ระบุขนาด และมีค่าเป็น thin, medium, thick หรืออาจระบุเป็นขนาดไปเลยได้เป็น 0.1 em และมี border-color ใช้กำหนดสีขอบด้วย

เพื่อผลลัพธ์ที่สวยงาม ท่านอาจใช้สีให้ฉากหลังเป็นสีทึบหรือภาพต่อกัน โดยใช้ background property ซึ่จะได้ div.box ดังตัวอย่างด้านล่าง:

  div.color {
    background: rgb(204,204,255);
    padding: 0.5em;
    border: none;
  }

ถ้าท่านไม่ระบุ property ของขอบที่ใช้ให้ชัดเจนแล้ว บาง browser จะลงสี background ใต้ตัวอักษรแต่ะตัวเท่านั้น ตัว padding property เป็นการเพิ่มที่ว่างระว่างรอยต่อของบริเวณสีกับตัวหนัังสือข้างใน

ท่านสามารถกำหนดค่า padding ทั้งด้านซ้าย บน ขวา ล่างได้โดยใช้ padding-left, padding-top, padding-right and padding-bottom properties, เช่น padding-left: 1em.

กรณีที่ท่านต้องสร้างขอบเพียงด้านใดด้านหนึ่ง ท่านสามารถควบคุม property ของขอบของแต่ละด้านได้โดยอิสระ โดยใช้ border-left, border-top, border-right และ border-bottom กับตัว suffix ที่ถูกต้อง เช่น style, width หรือ color เป็นต้น

โค้ดข้างต้นจะสร้างขอบด้านซ้ายสีแดงใน paragraph ที่ใช้ class "changed".

ตั้งค่าสี

ตัวอย่างการตั้งค่าสีได้กล่าวไว้แล้วในตอนต้นของบทความ เช่น:

ในตัวอย่างข้างบนเป็นการตั้งค่าสีตัวอักษรเป็นสีดำและพื้นหลังเป็นสีขาว ส่วน tag strong เป็นสีแดง ค่าชื่อสีมาตรฐานมีอยู่ทั้งสิ้น 16 ชื่อด้วยกัน ซึ่งจะอธิบายไว้ด้านล่าง ท่านอาจใช้ค่าสีในระบบ rgb แทนได้เช่นกัน โดยมีแม่สี แดง เขียว น้ำเงิน จะมีค่า 0-255 เช่น rgb(255, 0, 0) แทนสีแดง และท่านยังไช้ค่าสีฐาน 16 ได้เช่นกัน โดยค่าสีฐาน 16 จะใช้สัญลักษณ์ # นำหน้าตามด้วยเลขฐาน 16 ท่านสามารถเทียบค่าสีระบบ rgb และ ค่าสีในเลขฐาน 16 ได้โดยใช้เครื่องมือแปลงค่าสีด้านล่าง

การกำหนดค่าสีให้กับลิ้ง

ท่านสามารถใช้ CSS ในการกำหนดค่าสีให้กับลิ้ง ไม่ว่าจะเป็นสีลิ้งขณะที่ผู้ชมยังไม่ได้คลิ๊กชม หรือสีของลิ้งขณะที่คลิ๊ก แม้แต่สีลิ้งเมื่อเอาเมาส์วางเหนือลิ้งก็ตามที

บางครั้งท่านอาจไม่ต้องการให้ลิ้งที่ปรากฏมีเส้นด้านล่าง ท่านก็สามารถทำได้โดยตั้งค่าที่ property text-decoration เป็น none:

ซึ่งจะบังคับให้ไม่มีเส้นด้านใต้ ดังนี้:

คนทั่วไปเมื่อเห็นข้อความมีเส้นขีดด้านใ้ต้มักเข้าใจว่าเป็นลิ้ง ดังนั้นท่านควรจะปล่อยให้ส่วนที่ท่านต้องการให้เป็นลิ้ง มีเส้นขีดไว้คงเดิม เช่นเดียวกับสีของลิ้ง ที่คนส่วนมากจะเข้าใจว่าถ้ามีข้อความสีน้ำเงินและมีเส้นขีดด้านใต้เป็นลิ้ง ท่านจึงควรที่จะปล่อยสีของตัวอักษรบริเวณที่ท่านต้องการทำลิ้งให้เป็นสีเดิม ยกเว้นว่า ฉากหลังกับสีอักษรจะทำให้ยากต่อการอ่าน

ความบอดสี

เมื่อมีการใช้สีในหน้าเพจ ท่านควรระลึกไว้ว่า ผู้ชาย 5- 10 % ตาบอดสี ซึ่งทำให้ยากต่อการแยกสีระหว่างสี แดง และ เขียว หรือ ระหว่าง สีเหลืองกับ น้ำเงิน ซึ่งบางทีก็มีผู้ชมส่วนน้อยมากที่ไม่อาจแยกสีใดๆได้เลย ท่านจึงควรเลี่ยงที่จะใช้สีฉากหน้าและฉากหลังที่จะทำให้ยากต่อการอ่านของผู้ชมที่ตาบอดสีด้วย

ค่าสีตามชื่อเรียกสี

ชื่อสีมารตฐานที่สามารถนำมาใช้เป็นค่ากำหนดสีได้ มีดังนี้ คราม, ดำ, น้ำเงิน, เลือดหมู, เทา, เขียว, เขียวมะนาว, ม่วงชมพู, ฟ้า, เขียวมะกอก, ม่วง, แดง, เงิน, ฟ้าเขียว, ขาว, และ เหลืองซึ่งมี 16 สี ที่ระบุใน HTML 3.2 และ 4.01 สอดคล้องกับค่าสีพื้นฐาน VGA บน PC บาง browser อาจรับรู้ชื่อสีมากว่านี้ แต่ทา่นไม่ควรใช้

จากตารางจะได้ว่าสี "#800080" หมายถึงสี "ม่วง"

ค่าสีฐาน 16

**ชื่อเรียกสี และค่าสี sRGB**
	ดำ = "#000000"		เขียว = "#008000"
	เงิน = "#C0C0C0"		เขียวมะนาว = "#00FF00"
	เทา = "#808080"		เขียวมะกอก = "#808000"
	ขาว = "#FFFFFF"		เหลือง = "#FFFF00"
	เลือดหมู = "#800000"		นำ้เงิน = "#000080"
	แดง = "#FF0000"		ฟ้า = "#0000FF"
	ม่วง = "#800080"		ฟ้าเขียว = "#008080"
	ม่วงชมพู = "#FF00FF"		คราม = "#00FFFF"

ค่าสี "#FF9999" เป็นค่าสีในเลขฐาน 16 โดยแทนค่าสี แดง เขียว น้ำเงิน เลขสองตัวเลขแทนค่าสีแดง ถัดมาอีกสองตัวแทนสีเขียว และเลขสองตัวสุดท้ายแทนสีน้ำเงิน ซึ่งปกติในฐาน 10 ค่า 3 ชุดนี้จะมีค่าระหว่าง 0 - 255 ถ้าท่านรู้ค่าสีในฐาน 10 ท่านอาจใช้เครื่องคิดเลขแปลงเป็นฐาน 16 ได้

ค่าสีปลอดภัยสำหรับ browser (Browser safe colors)

เครื่องคอมพิวเตอร์รุ่นใหม่ๆสามารถรองรับสีได้หลายล้านเชดสี แต่เครื่องระบบเก่าวามารถใช้สีได้ครั้งละ 256 สีพร้อมๆกันเท่านั้น ดังนั้น browser ซึ่งใช้สีจากตารางสีคงที่จึงทำให้เกิดปัญหาสีเปื้อน (speckling effect) เพราะ browser พยายามที่จะใช้สีแท้ (true color) ที่จุดใดๆในภาพ อย่างไรก็ตามปัญหานี้จะหมดไปจากการที่เครื่องรุ่นใหม่ๆเข้ามาแทนที่

Browser ส่วนมากสามารถรองรับค่าสีที่เรียกว่าสีปลอดภัย (browser safe) ที่สร้างจากการไล่สี 6 แถบจากแม่สี แดง เขียว และน้ำเงิน มาผสมกัน ถ้าท่านใช้สีจากสีเหล่านี้ จะสามารถเลี่ยงปัญหาสีเปื้อนได้ ซึ่งมีประโยชน์มากสำหรับการกำหนดสีฉากหลังของภาพ

ถ้า browser ใช้สีปลอดภัยเหล่านี้ ฉากหลังของหน้าเพจจะใช้สีใกล้เคียงกับสีในสีปลอดภัยมากที่สุด แต่ถ้าท่านไม่ใช้สีฉากหลังเป็นสีปลอดภัยแล้ว ท่านอาจเสี่งที่จะได้สีที่ต่างออกไปขึ้นกับว่าคอมพิวเตอร์นั้นใช้สีจากตัชนี (index) หรือสีแท้ (true color)

สีปลอดภัยเกิดจากการผสมสีระหว่างสี แดง เขียว น้ำเงินจากค่าสีต่อไปนี้

ตารางด้านล่างเป็นค่าสีปลอดภัยที่เกิดจากการผสมสีโดยอ้างอิงจากค่าสีในเลขฐาน 16 ต้องขอบคุณ Bob Stein ที่จัดทำตารางสีประกอบมาให้.

ตารางสี ตารางสีปลอดภัยสำหรับ browser สามารถหาได้โดยไม่มีค่าใช้จ่ายในรูปแบบไฟล์กราฟฟิกที่นิยมได้จาก www.visibone.com.

กรณีที่ browser ไม่รองรับ CSS เป็นอย่างไร?

Browser เก่า เช่น Netscape 4.0 และ Internet Explorer 4.0 ไม่รองรับ CSS สำหรับ browser นี้ท่านต้องใช้โค้ด HTML ในการกำหนด style แทน

การกำหนดสีและฉากหลัง

ท่านกำหนดสีที่ใช้ได้ใน tag BODY ตัวอย่างข้างล่างนี้กำหนดให้ฉากหลังเป็นสีขาวและตัวอักษรสีดำ:

element BODY ต้องวางไว้ก่อนเนื้อหาที่มองเห็นของหน้าเพจ เช่นก่อน heading แรก ท่านสามารถคุมสีของส่วนลิ้งได้โดยใช้ attribute ดังนี้:

ตัวอย่างนี้เป็นการกำหนดค่าเหล่านี้:

ท่านสามารถกำหนดฉากหลังของเพจเป็นรูปภาพได้โดยใช้ attribute background เพื่อระบุที่อยู่ของภาพ เช่น

และท่านควรกำหนดค่าสีฉาหลังด้วย bgcolor attribute กรณีที่ browser ไม่สามารถแสดงภาพได้ โดยท่านต้องตรวจสอบให้ดีว่าสีดังกล่าวไม่้ทำให้เกิดความยากต่อการอ่านด้วย ตัวอย่างที่ทำให้เกิดความยากในการอ่านเช่น:

Browser ส่วนมากแสดงตัวหนังสือเป็นสีดำ ทำให้แสดงผลตัวอักษรดำบนฉากสีดำ! นอกจากนี้ผู้ชมหลายคนประสบปัญหาจากความบอดสี เช่นสีเขียวอาจมองเห็นเป็นสีน้ำตาลอีกด้วย

อีกปัญหา คือ เมื่อต้องการพิมพ์หน้าเว็บเพจ browser หลายตัวจะไม่แสดงสีฉากหลังเมื่อสั่งพิมพ์ ดังนั้นหากใช้อักษรสีขาว เมื่อพิมพ์จะได้เป็นหน้าเปล่าๆออกมา ตัวอย่างที่กล่าวจะเกิดขึ้นเมื่อใช้โค้ดด้านล่าง:

ท่านสามารถใช ้bgcolor attribute ในตารางได้เช่น

ตารางสามารถใช้เพื่อผลในการจัดหน้าได้หลายแบบ แต่ในอนาคตการจัดหน้าเว็บจะถูกแทนที่ด้วย style sheet แทน ซึ่งจะช่วยให้การจัดการหน้าเว็บเป็นไปด้วยความง่ายดายยิ่งขึ้น

การตั้งค่าตัวอักษร ขนาดและสี

tag FONT สามารถใช้เลือกชนิดอักษร ตั้งขนาด และสีได้ เช่น:

RGB	00	51	102	153	204	255
Hex	00	33	66	99	CC	FF

face attribute ใช้ในการตั้งชนิดตัวอักษรตามลำดับที่เลือกไว้ เช่น

size attribute ใช้เพื่อเลือกขนาดอักษรมีค่าระหว่าง 1 - 6 ถ้ามีเครื่องหมาย +, - อยู่ด้านหน้า ขนาดที่ได้จะเป็นอัตราส่วน เช่นถ้าต้องการให้ขนาดใหญ่กว่าเดิม 1 จนาดสามารถใช้ "+1" เมื่อต้องการให้ขนาดลดลง 1 ขนาดสามารถใช้ "-1" เช่น

สิ่งที่ท่านควรระวังคือ อย่าใช้สีที่ทำให้ยากต่อการอ่านต่อผู้บอดสี และอย่าใช้การตั้งขนาดในการทำ heading ท่านควรใช้ tag h1 ถึง h6 แทนเมื่อต้องการแสดง heading

อ่านเพิ่มเติม

สำหรับอ่านเพิ่มเติมเรื่อง CSS และเครื่องมือที่รองรับ ท่านสามารถศึกษาได้ที่ W3C home page for CSS ซึ่งจะมีรายชื่อหนังสือเกี่ยวกับ HTML และ CSS ให้ศึกษาเพิ่มเติมได้ เช่น "Raggett on HTML4" ตีพิมพ์ในปี 1998 โดย Addison Wesley และสำหรับหนังสือที่เน้นรายละเอียดเกี่ยวกับ CSS สามารถอ่านได้จาก "Cascading Style Sheets" โดย Håkon Wium Lie and Bert Bos ตีพิมพ์โดย Addison Wesley ซึ่งจะกล่าวถึง CSS ในเชิงลึกเกี่ยวกับสถาปัตยกรรมของ CSS

ผู้เขียนตั้งใจว่าจะเขียนเรื่องแนะนำการใช้งาน CSS เกี่ยวกับการกำหนดตำแหน่ง การพิมพ์ และการใช้ aural style sheet ต่อไป

Copyright © 1994-2003 W3C^® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statement

แดง:		ค่าสีฐาน 16
เขียว:
น้ำเงิน: