วันอังคารที่ 30 กันยายน พ.ศ. 2557



ประวัติส่วนตัว 

นายสมรักษ์ สุวรรณหงษ์ ชั้น ม.6/2 เลขที่17
ชื่อเล่น แสบ

บ้านเลขที่ 15/1   บ.นาสวรรค์  ต.นาสวรรค์   อ.เมือง
จ.บึงกาฬ



ความรู้ที่ได้รับ


เราได้รู้จักภาษา ของ CSS และเราได้รู้ว่าทำยังไงบ้าง และได้รู้จักการสร้าง CSS 
รู้จักการใช้สัญลักษณ์ ของCSS
ความรู้ที่ได้รับ

คือ ได้รู้จักเกี่ยวกับ CSS และเข้าใจเรื่องของCSSว่าเป็นมายังไง บ้างและได้รู้อีกหลายๆอย่างที่เกี่ยวกับCSS

วันเสาร์ที่ 27 กันยายน พ.ศ. 2557

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

วันพุธที่ 24 กันยายน พ.ศ. 2557







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 ได้

ใส่ค่าสี RGB หรือ Hex แล้วกดหน่วยที่ต้องการแปลงค่า
แดง:
ค่าสีฐาน 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>

วันอังคารที่ 23 กันยายน พ.ศ. 2557





ประวัติส่วนตัว
ชื่อ นายนัทธพงศ์  นามวงค์  ชื่อเล่น notto
ชั้น ม.6/2  เลขที่ 12
บ้านเลขที่ 164 หมู่ที่ 9  บ.ห้วยบอนพัฒนา  
ต.นาสวรรค์  อ.เมืองบึงกาฬ จ.บึงกาฬ
ประวัติส่วนตัว
นาย วีรเชษฐ์   สาสิงห์ ชั้น ม.6/2 เลขที่ 15
บ้านเลขที่ 239 หมู่ 1 บ.นาสวรรค์ 
ต.นาสวรรค์ อ.เมืองบึงกาฬ จ.บึงกาฬ