CSS คืออะไร
CSS ย่อมาจาก Cascading Style Sheet มักเรียกโดยย่อว่า "สไตล์ชีต" คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร
HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ (หรือ "Style") ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ ซึ่งการกำหนดรูปแบบ หรือ Style นี้ใช้หลักการของการแยกเนื้อหาเอกสาร HTML ออกจากคำสั่งที่ใช้ในการจัดรูปแบบการแสดงผล กำหนดให้รูปแบบของการแสดงผลเอกสาร ไม่ขึ้นอยู่กับเนื้อหาของเอกสาร เพื่อให้ง่ายต่อการจัดรูปแบบการแสดงผลลัพธ์ของเอกสาร HTML โดยเฉพาะในกรณีที่มีการเปลี่ยนแปลงเนื้อหาเอกสารบ่อยครั้ง หรือต้องการควบคุมให้รูปแบบการแสดงผลเอกสาร HTML มีลักษณะของความสม่ำเสมอทั่วกันทุกหน้าเอกสารภายในเว็บไซต์เดียวกัน โดยกฏเกณฑ์ในการกำหนดรูปแบบ (Style) เอกสาร HTML ถูกเพิ่มเข้ามาครั้งแรกใน HTML 4.0 เมื่อปีพ.ศ. 2539 ในรูปแบบของ CSS level 1 Recommendations ที่กำหนดโดย องค์กร World Wide Web Consortium หรือ W3C
ประโยชน์ของ CSS
1.CSS มีคุณสมบัติมากกว่า tag ของ html เช่น การกำหนดกรอบให้ข้อความ รวมทั้งสี รูปแบบของข้อความที่กล่าวมาแล้ว
2.CSS นั้นกำหนดที่ต้นของไฟล์ html หรือตำแหน่งอื่น ๆ ก็ได้ และสามารถมีผล กับเอกสารทั้งหมด หมายถึงกำหนด ครั้งเดียวจุดเดียวก็มีผลกับการแสดงผลทั้งหมด ทำให้เวลาแก้ไขหรือปรับปรุงทำได้สะดวก ไม่ต้องไล่ตามแก้ tag ต่างๆ ทั่วทั้งเอกสาร
3.CSS สามารถกำหนดแยกไว้ต่างหากจาก ไฟล์เอกสาร html และสามารถนำมาใช้ร่วม
กับเอกสารหลายไฟล์ได้ การแก้ไขก็แก้เพียง จุดเดียวก็มีผลกับเอกสารทั้งหมด
CSS กับ HTML / XHTML นั้นทำหน้าที่คนละอย่างกัน โดย HTML / XHTML จะทำหน้าที่ในการวางโครงร่างเอกสารอย่างเป็นรูปแบบ ถูกต้อง เข้าใจง่าย ไม่เกี่ยวข้องกับการแสดงผล ส่วน CSS จะทำหน้าที่ในการตกแต่งเอกสารให้สวยงาม เรียกได้ว่า HTML /XHTML คือส่วน coding ส่วน CSS คือส่วน design
บทเรียนแรก
เราจะเริ่มต้นด้วยการตั้งค่าสีของตัวอักษร และฉากหลัง ซึ่งสามารถทำได้ด้วยการใช้
Style element ในการกำหนดค่าคุณสมบัติและรูปแบบของ tag ในเอกสาร ดังนี้:
<style type="text/css">
body { color: black; background: white; }
</style>
การใช้ style element จะต้องเขียนไว้ในส่วน head ของเอกสาร ตัวอย่างเอกสาร HTML
ด้านล่างจะแสดง ให้เห็นว่าท่านจะต้องวาง style element ไว้ ณ ตำแหน่งใด
ท่านสามารถคัดลอกตัวอย่างโค้ดด้านล่างไปใช้ในโปรแกรม editor ที่ท่านใช้อยู่ได้เลย
เพื่อเพิ่มความสะดวกในการทดลองใช้งาน style sheet ของ CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> ใส่ชื่อหัวเรื่อง (title)ที่นี่ </title>
<style type="text/css">
body { color: black; background: white; }
</style>
</head>
<body>
ใส่เนื้อหาของเอกสารที่นี่
</body>
</html>
โค้ดที่อยู่ระหว่าง แท็ก <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 type="text/css" rel="stylesheet" href="style.css">
link tag จะต้องวางไว้ระหว่าง element <head> ... </head>
ของไฟล์ HTML ที่ใช้การเชื่อมโยงใช้งาน style sheet ภายนอกหรือ style sheet
ที่เขียนแยกไว้ต่างหาก ตัวอย่างไฟล์ HTML ที่ได้จะมีลักษณะดังตัวอย่างด้านล่าง:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> ใส้ชื่อเรื่องที่นี่ </title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
ใส่เนื้อหาเอกสารที่นี่
</body>
</html>
element ของ link
rel ต้องกำหนดค่าคุณลักษณะ (attribute) เป็น
"stylesheet" เพื่อให้ browser รู้ว่า attribute
href
ที่ใช้ระบุที่อยู่ของเว็บ (URL) ที่อยู่ถัดไปนั้น เป็นทีอยู่ของไฟล์ style sheet
ไฟล์ stylesheet อย่างง่ายอาจเขียนได้ดังตัวอย่างด้านล่างนี้:
/* style.css - style sheet อย่างง่าย */
body {
margin-left: 10%; margin-right: 10%;
color: black; background: white;
}
ในไฟล์ HTML เดียวกันนั้นสามารถใ้ช้ทั้ง style sheet ภายนอก และภายในได้พร้อมกัน
โดยใช้ style element เพื่อกำหนดรูปแบบบางส่วนของหน้าเว็บเป็นการเฉพาะ
โดยมีหลักว่า style element ที่อยู่ใกล้ element ที่ต้องการกำหนดสมบัติที่สุด
จะมีผลต่อ element นั้นเสมอ แม้ว่าจะมีการกำหนดค่า style ให้กับ element
นั้นไว้ก่อนแล้วในหน้าเพจนั้นก็ตาม
การกำหนดค่าระยะห่างจากจุดเริ่มต้น
หน้าเว็บเพจจะดูดี ถ้าเราให้มีระยะห่างเริ่มต้นที่มากหน่อย
การกำหนดระยะห่างจากจุดเริ่มต้นให้หน้าเพจ ทำได้โดยการใช้ "margin-left"
สำหรับระยะห่างด้านซ้าย และ "margin-right" สำหรับระยะห่างด้านขวา ตัวอย่างเช่น
<style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
</style>
โค้ดด้านบนจะกำหนดให้ ระยะห่างจากจุดเริ่มต้นทั้งซ้ายและขวา เป็น 10%
ของความกว้างหน้าต่างที่เปิดหน้าเพจนั้น
โดยค่าระยะห่างจากจุดเริ่มต้นนี้ยังจะแปรผันกับขนาดหน้าต่างของ browser
ที่ใช้เปิดหน้าเพจนั้นอีกด้วย
การกำหนดค่าย่อหน้า ซ้าย ขวา
เมื่อต้องการให้ส่วน tag h1,h2,.... ดูโดดเด่น
ท่านอาจใช้การกำหนดระยะห่างจากจุดเริ่มต้นในส่วนของ body เช่น
<style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
h1 { margin-left: -8%;}
h2,h3,h4,h5,h6 { margin-left: -4%; }
</style>
ในตัวอย่างนี้มีการกำหนด 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
ทั้งหมดในหน้าเอกสารสามารถทำได้โดยเขียนโค้ดดังนี้:
h2 { margin-top: 8em; margin-bottom: 3em; }
หน่วย em เป็นหน่วยที่มีประโยชน์มาก
เพราะเป็นการแสดงขนาดอ้างอิงกับขนาดของตัวอักษร หนึ่ง em เท่ากับความสูงของตัวอักษร
การใช้หน่วย em จะช่วยให้รักษาขนาดของหน้าเพจได้โดยไม่ขึ้นกับขนาดของตัวอักษร
ต่างจากการใช้หน่วย pixel หรือ point
ซึ่งจะทำให้หน้าเพจผิดเพี้ยนได้เมื่อผู้ใช้ขยายขนาดตัวอักษร
หน่วย point ใช้กับโปรแกรม word processing เป็นส่วนมาก แต่บน browser จะพบว่า
browser แต่ละตัวจะแสดงผลขนาด point ไม่เท่ากัน ทำให้ค่าหนึ่งที่ใช้ได้กับ browser
ตัวหนึ่งอาจใ้ช้ไม่ได้กับอีก browser หนึ่ง
หากท่านต้องการคุมระยะห่างของ heading ใดเป็นการเฉพาะ ทำได้โดยการสร้าง named
style สำหรับ heading นั้น โดยใช้
class attribute เช่น
<h2 class="subsection">เริ่มต้น</h2>
จะได้ style rule เป็น:
h2.subsection { margin-top: 8em; margin-bottom: 3em; }
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 นั้น:
p { text-indent: 2em; margin-top: 0; margin-bottom: 0; }
style rule ข้างต้นจะทำการเว้นระยะย่อหน้าของแต่ละย่อหน้า 2 em
การควบคุมตัวอักษร
ในส่วนนี้จะอธิบายวิธีการกำหนดตัวอักษร ขนาด การทำตัวเอียง ตัวหนา และกำหนด
stlye อื่นๆ
กำหนด styles ตัวอักษร
การกำหนด styles ให้ตัวอักษรทั่วไปเป็นการทำตัวเอียง ตัวหนา browsers มักแสดง
em tag เป็นตัวเอียงและ
strong tag เป็นตัวหนา
แต่ถ้าท่านต้องการให้ em tag เป็น
ตัวเอียงหนา และ strong tag เป็น
ตัวพิมพ์ใหญ่หนา ทำได้โดย:
em { font-style: italic; font-weight: bold; }
strong { text-transform: uppercase; font-weight: bold; }
แต่ถ้าท่านรู้สึกว่าบางส่วนตัวพิมพ์ใหญ่มากไป, ท่านอาจกำหนดให้บาง tag เช่น
headings เป็นตัวเล็กเช่น:
h2 { text-transform: lowercase; }
ตั้งค่าขนาดตัวอักษร
Browser ส่วนมากจะใช้ตัวอักษรขนาดใหญ่สำหรับ heading ที่สำคัญ
ถ้าท่านทำการแก้ค่าขนาด defualt (ค่าแรกเริ่ม)
ท่านอาจพบว่าตัวหนังสืออาจเล็กจนไม่อาจอ่านได้ ดังนั้นเมื่อต้องการแก้ขนาดตัวอักษร
ท่านควรใ้ช้หน่วยแบบ relative (อัตราส่วน) แทน
ตัวอย่างด้านล่าง เป็นการตั้งค่าขนาด heading ในแบบ เปอร์เซนต์
ซึ่งเป็นอัตราส่วนกับขนาดของตัวอักษรปกติ:
h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 100%; }
ตั้งค่า font family (ชนิดตัวอักษร)
ท่านมักพบว่าชนิดตัวอักษรที่ท่านชอบนั้นอาจไม่สนับสนุนกับ browser ทุกชนิด
เพื่อแก้ปัญหานี้ ท่านสามารถใส่ชนิดตัวอักษรได้หลายๆชนิดด้วยกัน
โดยเรียงตามความชอบส่วนตัว แต่ก็มีอักษรบางตัวที่เป็นอักษรทั่วไปที่ browser
สนับสนุนได้ทุกตัว เช่น serif, sans-serif, cursive, fantasy, หรือ monospace
เป็นต้น ซึ่งท่านควรที่จะใช้อักษรเหล่านี้ไว้ท้ายสุดของ style rule ดังเช่น:
body { font-family: Verdana, sans-serif; }
h1,h2 { font-family: Garamond, "Times New Roman", serif; }
ในตัวอย่างนี้ heading จะแสดงอักษร Garamond ถ้า browser ไม่สนับสนุนจะแสดงเป็น
Times New Roman และถ้าไม่สามารถสนับสนุนได้อีก ก็จะแสดง เป็นตัวอักษรมาตรฐาน serif
ในส่วนของ paragraph จะแสดงตัวอักษร Verdana
และถ้าไม่สนับสนุนก็จะใช้ตัวอักษรมาตรฐาน sans-serif
การที่จะสามารถอ่านตัวอักษรได้
ปกตbจะขึ้นกับความสูงของตัวอักษรแบบพิมพ์เล็กมากกว่าขนาดของตัวอักษรเอง
ดังนั้นตัวอักษรอย่าง Verdana จะอ่านได้ง่ายกว่าพวก Time news roman
ดังนั้นจึงนิยมใช้ในส่วนของ paragraph
แก้ปัญหาระยะห่างเริ่มต้นกับตัวอักษร
ปัญหาแรกที่ผู้เขียนพบเจอ คือ ปัญหาตัวอักษรที่ตำแหน่ง body ที่ไม่อยู่ใน block
level element เช่น
p เป็นต้น:
<h2>ฤดูใบไม้ผลิใน Wiltshire</h2>
ดอกไม้บาน นกร้องเพลงและเสียงแกะร้องในทุ่ง
ตัวหนังสือที่ต่อท้าย heading อาจถูกแสดงผลผิดในบาง browser เป็น font อื่น
หรือมีระยะห่างที่ไม่ถูกต้องได้ ดังนั้นท่านควรใช้ paragraph element
คลุมตัวหนังสือดังกล่าวเสีย เช่น
<h2>ฤดูใบไม้ผลิใน Wiltshire</h2>
<p>ดอกไม้บาน นกร้องเพลงและเสียงแกะร้องในทุ่ง
</p>
อีกปัญหาหนึ่ง คือ การตั้งค่า font family ให้
pre elements บาง
browser จะลืมค่า font family เมื่อคุณตั้งค่าขนาด font หรือ property อื่นๆให้ tag
pre
pre { font-family: monospace; }
ปัญหาสุดท้ายคือการตั้งค่า font family ให้ heading, p และ ul
ถ้าท่านต้องการกำหนดขอบหรือฉากหลังให้ element อย่าง div การตั้งค่า font
นี้จะช่วยแก้ปัญหา browser ลืมใช้ font fmaily ที่กำหนดไว้ก่อนแล้ว แล้วไปใช้
default font แทน
h1,h2,h3,h4,h5,p,ul { font-family: sans-serif; }
การเพิ่มขอบและฉากหลัง
ท่านสามารถเพิ่มขอบรอบๆ 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 เป็นต้น
p.changed {
padding-left: 0.2em;
border-left: solid;
border-right: none;
border-top: none;
border-bottom: none;
border-left-width: thin;
border-color: red; }
โค้ดข้างต้นจะสร้างขอบด้านซ้ายสีแดงใน paragraph ที่ใช้ class
"changed".
ตั้งค่าสี
ตัวอย่างการตั้งค่าสีได้กล่าวไว้แล้วในตอนต้นของบทความ เช่น:
body {color: black;background: white;}strong { color: red; }
ในตัวอย่างข้างบนเป็นการตั้งค่าสีตัวอักษรเป็นสีดำและพื้นหลังเป็นสีขาว ส่วน tag
strong เป็นสีแดง ค่าชื่อสีมาตรฐานมีอยู่ทั้งสิ้น 16 ชื่อด้วยกัน
ซึ่งจะอธิบายไว้ด้านล่าง ท่านอาจใช้ค่าสีในระบบ rgb แทนได้เช่นกัน โดยมีแม่สี แดง
เขียว น้ำเงิน จะมีค่า 0-255 เช่น rgb(255, 0, 0) แทนสีแดง และท่านยังไช้ค่าสีฐาน
16 ได้เช่นกัน โดยค่าสีฐาน 16 จะใช้สัญลักษณ์ # นำหน้าตามด้วยเลขฐาน 16
ท่านสามารถเทียบค่าสีระบบ rgb และ ค่าสีในเลขฐาน 16
ได้โดยใช้เครื่องมือแปลงค่าสีด้านล่าง
การกำหนดค่าสีให้กับลิ้ง
ท่านสามารถใช้ CSS ในการกำหนดค่าสีให้กับลิ้ง
ไม่ว่าจะเป็นสีลิ้งขณะที่ผู้ชมยังไม่ได้คลิ๊กชม หรือสีของลิ้งขณะที่คลิ๊ก
แม้แต่สีลิ้งเมื่อเอาเมาส์วางเหนือลิ้งก็ตามที
:link { color: rgb(0, 0, 153); } /* สำหรับลิ้งที่ยังไม่ได้รับชม */
:visited { color: rgb(153, 0, 153); } /* สำหรับฃิ้งที่รับชมแล้ว */
a:active { color: rgb(255, 0, 102); } /* สำหรับลิ้งที่ถูกคลิ๊ก */
a:hover { color: rgb(0, 96, 255); } /* สำหรับลิ้งที่มีเมาส์วางเหนือ */
บางครั้งท่านอาจไม่ต้องการให้ลิ้งที่ปรากฏมีเส้นด้านล่าง
ท่านก็สามารถทำได้โดยตั้งค่าที่ property
text-decoration เป็น
none:
a.plain { text-decoration: none; }
ซึ่งจะบังคับให้ไม่มีเส้นด้านใต้ ดังนี้:
คำนี้ <a class="plain" href="what.html">ไม่มีเส้นใต้</a>
คนทั่วไปเมื่อเห็นข้อความมีเส้นขีดด้านใต้มักเข้าใจว่าเป็นลิ้ง
ดังนั้นท่านควรจะปล่อยให้ส่วนที่ท่านต้องการให้เป็นลิ้ง มีเส้นขีดไว้คงเดิม
เช่นเดียวกับสีของลิ้ง
ที่คนส่วนมากจะเข้าใจว่าถ้ามีข้อความสีน้ำเงินและมีเส้นขีดด้านใต้เป็นลิ้ง
ท่านจึงควรที่จะปล่อยสีของตัวอักษรบริเวณที่ท่านต้องการทำลิ้งให้เป็นสีเดิม
ยกเว้นว่า ฉากหลังกับสีอักษรจะทำให้ยากต่อการอ่าน
ความบอดสี
เมื่อมีการใช้สีในหน้าเพจ ท่านควรระลึกไว้ว่า ผู้ชาย 5- 10 % ตาบอดสี
ซึ่งทำให้ยากต่อการแยกสีระหว่างสี แดง และ เขียว หรือ ระหว่าง สีเหลืองกับ น้ำเงิน
ซึ่งบางทีก็มีผู้ชมส่วนน้อยมากที่ไม่อาจแยกสีใดๆได้เลย
ท่านจึงควรเลี่ยงที่จะใช้สีฉากหน้าและฉากหลังที่จะทำให้ยากต่อการอ่านของผู้ชมที่ตาบอดสีด้วย
ค่าสีตามชื่อเรียกสี
ชื่อสีมารตฐานที่สามารถนำมาใช้เป็นค่ากำหนดสีได้ มีดังนี้ คราม, ดำ, น้ำเงิน,
เลือดหมู, เทา, เขียว, เขียวมะนาว, ม่วงชมพู, ฟ้า, เขียวมะกอก, ม่วง, แดง, เงิน,
ฟ้าเขียว, ขาว, และ เหลืองซึ่งมี 16 สี ที่ระบุใน HTML 3.2 และ 4.01
สอดคล้องกับค่าสีพื้นฐาน VGA บน PC บาง browser อาจรับรู้ชื่อสีมากว่านี้
แต่ทา่นไม่ควรใช้
ชื่อเรียกสี และค่าสี sRGB
 |
ดำ = "#000000" |
 |
เขียว = "#008000" |
 |
เงิน = "#C0C0C0" |
 |
เขียวมะนาว = "#00FF00" |
 |
เทา = "#808080" |
 |
เขียวมะกอก = "#808000" |
 |
ขาว = "#FFFFFF" |
 |
เหลือง = "#FFFF00" |
 |
เลือดหมู = "#800000" |
 |
นำ้เงิน = "#000080" |
 |
แดง = "#FF0000" |
 |
ฟ้า = "#0000FF" |
 |
ม่วง = "#800080" |
 |
ฟ้าเขียว = "#008080" |
 |
ม่วงชมพู = "#FF00FF" |
 |
คราม = "#00FFFF" |
จากตารางจะได้ว่าสี "#800080" หมายถึงสี "ม่วง"
ค่าสีฐาน 16
ค่าสี "#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)
สีปลอดภัยเกิดจากการผสมสีระหว่างสี แดง เขียว น้ำเงินจากค่าสีต่อไปนี้
:
| RGB |
00 |
51 |
102 |
153 |
204 |
255 |
| Hex |
00 |
33 |
66 |
99 |
CC |
FF |
ตารางสี ตารางสีปลอดภัยสำหรับ browser
สามารถหาได้โดยไม่มีค่าใช้จ่ายในรูปแบบไฟล์กราฟฟิกที่นิยมได้จาก
www.visibone.com.
กรณีที่ browser ไม่รองรับ CSS เป็นอย่างไร?
Browser เก่า เช่น Netscape 4.0 และ Internet Explorer 4.0 ไม่รองรับ CSS สำหรับ
browser นี้ท่านต้องใช้โค้ด HTML ในการกำหนด style แทน
การกำหนดสีและฉากหลัง
ท่านกำหนดสีที่ใช้ได้ใน tag BODY
ตัวอย่างข้างล่างนี้กำหนดให้ฉากหลังเป็นสีขาวและตัวอักษรสีดำ:
<body bgcolor="white" text="black">
element BODY ต้องวางไว้ก่อนเนื้อหาที่มองเห็นของหน้าเพจ เช่นก่อน heading แรก
ท่านสามารถคุมสีของส่วนลิ้งได้โดยใช้ attribute ดังนี้
- link สำหรับลิ้งที่ยังไม่ได้มีการเยี่ยมชม
- vlink สำหรับลิ้งที่เยี่ยมชมแล้ว
- alink สำหรับลิ้งที่กำลังถูกคลิ๊ก
ตัวอย่างนี้เป็นการกำหนดค่าเหล่านี้:
<body bgcolor="white" text="black"
link="navy" vlink="maroon" alink="red">
ท่านสามารถกำหนดฉากหลังของเพจเป็นรูปภาพได้โดยใช้ attribute background
เพื่อระบุที่อยู่ของภาพ เช่น
<body bgcolor="white" background="texture.jpeg" text="black"
link="navy" vlink="maroon" alink="red">
และท่านควรกำหนดค่าสีฉาหลังด้วย bgcolor attribute กรณีที่ browser
ไม่สามารถแสดงภาพได้
โดยท่านต้องตรวจสอบให้ดีว่าสีดังกล่าวไม่้ทำให้เกิดความยากต่อการอ่านด้วย
ตัวอย่างที่ทำให้เกิดความยากในการอ่านเช่น:
<body bgcolor="black">
Browser ส่วนมากแสดงตัวหนังสือเป็นสีดำ ทำให้แสดงผลตัวอักษรดำบนฉากสีดำ!
นอกจากนี้ผู้ชมหลายคนประสบปัญหาจากความบอดสี
เช่นสีเขียวอาจมองเห็นเป็นสีน้ำตาลอีกด้วย อีกปัญหา คือ เมื่อต้องการพิมพ์หน้าเว็บเพจ browser
หลายตัวจะไม่แสดงสีฉากหลังเมื่อสั่งพิมพ์ ดังนั้นหากใช้อักษรสีขาว
เมื่อพิมพ์จะได้เป็นหน้าเปล่าๆออกมา
ตัวอย่างที่กล่าวจะเกิดขึ้นเมื่อใช้โค้ดด้านล่าง:
<body bgcolor="black" text="white">
ท่านสามารถใช ้bgcolor attribute ในตารางได้เช่น
<table border="0" cellpadding="5">
<tr>
<td bgcolor="yellow">ตารางสี</td>
</tr>
</table>
ตารางสามารถใช้เพื่อผลในการจัดหน้าได้หลายแบบ
แต่ในอนาคตการจัดหน้าเว็บจะถูกแทนที่ด้วย style sheet แทน
ซึ่งจะช่วยให้การจัดการหน้าเว็บเป็นไปด้วยความง่ายดายยิ่งขึ้น
การตั้งค่าตัวอักษร ขนาดและสี
tag FONT สามารถใช้เลือกชนิดอักษร ตั้งขนาด และสีได้ เช่น:
ประโยคนี้ <font color="yellow">คำ</font> สีเหลือง.
face attribute ใช้ในการตั้งชนิดตัวอักษรตามลำดับที่เลือกไว้ เช่น
<font face="Garamond, Times New Roman">เนื้อหา ...</font>
size attribute ใช้เพื่อเลือกขนาดอักษรมีค่าระหว่าง 1 - 6
ถ้ามีเครื่องหมาย +, - อยู่ด้านหน้า ขนาดที่ได้จะเป็นอัตราส่วน
เช่นถ้าต้องการให้ขนาดใหญ่กว่าเดิม 1 จนาดสามารถใช้ "+1" เมื่อต้องการให้ขนาดลดลง 1
ขนาดสามารถใช้ "-1" เช่น
<font size="+1" color="maroon"
face="Garamond, Times New Roman">เนื้อหา ...</font>
