โค้ดเปลี่ยนสีตัวอักษร html

2.4 การกำหนดรูปแบบและสีของตัวอักษร

ในการจัดรูปแบบของข้อความหรือตัวอักษรนั้น การใช้สีก็เป็นส่วนสำคัญเช่นกันในการจัดรูปแบบ ซึ่งในการกำหนดรูปแบบสามารถกำหนดได้ ดังนี้

การกำหนดรูปแบบ

ในการกำหนดรูปแบบของตัวอักษร หรือข้อความ สามารถกำหนดได้ด้วยคุณสมบัติ(attribute) ชื่อ face แล้ว ตามด้วยชื่อ font ที่เราต้องการ เอกสารเว็บกำหนดฟอนต์ ได้หลายฟอนต์ โดยโปรแกรมเบราเซอร์จะมีการตรวจสอบการใช้ฟอนต์ให้อัตโนมัติ
เราสามารถการกำหนดรูปแบบของตัวอักษร ได้โดยใช้คำสั่ง

..ข้อความต้องการกำหนด font..

font สำหรับข้อความภาษาไทย/อังกฤษ ที่เหมาะสมได้แก่ MS Sans Serif, Microsoft Sans Serif, Thonburi และ font สำหรับข้อความภาษาอังกฤษที่เหมาะสม คือ Arial, Helvetica, sans-serif ชนิดของ font ปกติ = MS Sans Serif

การกำหนดสี

การกำหนดสีของตัวอักษร หรือข้อความที่ต้องการนั้น คำสั่งในภาษา HTML จะใช้ คุณสมบัติ (attribute) สำหลับกำหนดสีที่ชื่อ color

การกำหนดสีของตัวอักษรหรือข้อความ นั้นจะสามารถกำหนดได้ 2 แบบ ดังนี้

1. กำหนดโดยใช้ชื่อสี เช่น red, yellow, blue หรือ pink เป็นต้น

2. การกำหนดสีโดยระบุชื่อสีแบบนี้จะมีข้อจำกัดมาก เพราะไม่สามารถใช้โทนสีได้มากเท่าที่ใจต้องการ (จะใช้ได้ประมาณ 16 สี) ถ้าต้องการให้มีสีมากกว่านี้จะต้องใช้การกำหนดเป็นรหัสค่าสีด้วยระบบตัวเลขฐานสิบหก กำหนดค่าสีของแสง (RGB)
เลขฐานสิบหกประกอบด้วยตัวเลข 0 1 2 3 4 5 6 7 8 9 และตัวอักษร a b c d e f ซึ่งจะแทนค่าสีตั้งแต่มืดสุด (ค่าเป็น 0) จนถึงสว่างสุด (ค่าเป็น f) ค่าสีตัวเลขฐานสิบหกจะประกอบด้วยกลุ่มตัวเลข 2 ตัว 3 ชุด แทนค่าสี RR GG BB และมีเครื่องหมาย # กำกับหน้าตัวเลขดังตัวอย่างสี #RRGGBB (code สีเพิ่มเติม)

คำสั่งที่ใช้คือ

..........

ทดสอบการกำหนด font และสีตัวอักษร

วิธีการ 1 วิธีการ 1 ของ 2:ใช้แท็กต่างๆ ใน HTML

สร้าง font tag. ให้ใส่แท็ก หน้าข้อความที่อยากใส่สี แล้วปิดด้วยแท็กต่อท้ายข้อความ
- เช่น
 อยากให้ข้อความนี้สีน้ำเงิน
ใส่ color attribute. ใส่ color=" " กลาง font tag ที่ใช้เปิด สีที่คุณต้องการจะอยู่ในเครื่องหมายคำพูด
- เช่น
 color=" "อยากให้ข้อความนี้สีน้ำเงิน
เลือกชื่อสี. ชื่อสีจะเป็นคำเดียว ไม่เว้นวรรค มีทั้งสีพื้นฐานอย่าง "blue" (น้ำเงิน) หรือ "red" (แดง) ไปจนถึงสีละเอียดขึ้นอย่าง "lightblue" (ฟ้าอ่อน) หรือ "darkblue" (น้ำเงินเข้ม) ถ้าอยากดูชื่อสีเพิ่มเติม ให้ศึกษารายชื่อคำที่ใช้ระบุสีได้ เช่น "maroon" (แดงอมม่วง), "steelblue" (ฟ้าออกเทา) และ "lime" (เขียวมะนาว)
- เช่น
 อยากให้ข้อความนี้สีน้ำเงิน
ใช้โค้ดสีแบบ hex แทน. HTML ให้คุณเลือกใช้ได้เป็นล้านสี แต่บางสีก็ไม่มีชื่อนี่สิ ก็เลยกำกับด้วยเลข 6 หลักแทน เป็นโค้ดเลขฐานสิบหก (hexadecimal) มีหลายเว็บเลยที่รวบรวมรายชื่อโค้ดสีแบบ hex ไว้ หรือเว็บที่ให้คุณเลือกสีในหน้าจอ แล้วแสดงเป็นค่า hex ออกมาให้เสร็จสรรพ โค้ดนี้จะเริ่มด้วยเครื่องหมาย # แล้วตามด้วยเลข 6 หลัก (0 - 9) หรือตัวอักษร (A - F)
- พิมพ์โค้ด #FF0000 หรือ red ก็ได้ออกมาเป็นสีแดงเหมือนกัน
- พิมพ์โค้ดนี้ได้ข้อความสีเขียว
- พิมพ์โค้ดนี้ได้ข้อความสีน้ำเงิน
ปรับค่า RGB. ปกติคุณเลือกสีในเว็บได้เลย ไม่ต้องรู้โค้ดสีแบบ hex แต่ถ้าอยากผสมสีให้ตรงใจ ก็ทำได้ง่ายๆ โดย
- รู้ก่อนว่าเลข 6 หลักจะแบ่งออกเป็นค่า red (แดง), green (เขียว) และ blue (น้ำเงิน) ("RGB") เช่น โค้ด #FF0000 ก็คือ "red: FF green: 00 blue: 00" นั่นเอง
- ถ้าอยากปรับปริมาณสีแดง ก็ให้เปลี่ยนเลข 2 หลักแรก ปรับได้ตั้งแต่ 00 (ไม่มีสีแดงเลย) ไปจนถึง 99 (แดงขึ้นมาหน่อย) หรือใช้ตัวอักษร AA (แดงขึ้นมาอีกนิด) ไปจนถึง FF (แดงสุดๆ)
- คุณปรับค่าของสีเขียว (2 หลักกลาง) หรือค่าสีน้ำเงิน (2 หลักสุดท้าย) ได้ด้วยวิธีเดียวกัน
รู้ลึกเรื่องโค้ดสีแบบ hex. ถ้าอยากเลือกสีให้เป๊ะตรงใจกว่านี้ ก็ต้องรู้ 2 เรื่องนี้เพิ่ม
- ค่าสีทั้ง 3 มีเลข 2 หลักเป็นของตัวเอง ถ้าอยากปรับแบบละเอียด ให้ปรับหลักที่ 2 เช่น #850000 และ #890000 จะคล้ายกันมาก แต่ #A50000 จะสดกว่าเยอะ
- การผสมสีด้วยค่า RGB นั้นใช้ระบบแม่สีบวก คือแดงผสมเขียวเป็นเหลือง (yellow) น้ำเงินผสมเขียวเป็นฟ้าอมเขียว (cyan) และแดงผสมน้ำเงินเป็นแดงอมม่วง (magenta)

วิธีการ 2 วิธีการ 2 ของ 2:ใช้ CSS แบบ In-Line

ใส่ style attribute ในแท็ก HTML. attribute style="" ให้คุณใช้ CSS ในเอกสาร HTML ได้ เป็นวิธีง่ายๆ ในการกำหนดสีฟอนต์ โดยที่ใช้ CSS ไม่เป็นก็ได้ ให้ลองใส่ style attribute ในแท็ก HTML ต่อไปนี้ดู
- แท็ก p จะครอบข้อความทั้งย่อหน้า
- <a style="" href="https://www.wikihow.com">แท็ก a ครอบลิงค์</a>
- ใช้แท็ก span ถ้าอยากให้ข้อความบางส่วนของย่อหน้ามีสี โดยไม่เปลี่ยนฟอร์แมต
ระบุสี. พิมพ์ color: ตามด้วยชื่อสีหรือโค้ด hex ในเครื่องหมายคำพูดถ้าอยากรู้ชื่อหรือโค้ดสีโดยละเอียด ให้เลื่อนกลับไปอ่านวิธีการด้านบน หรือลองใช้ตัวอย่างต่อไปนี้ดู
- ข้อความจะเป็นสีแดง
- นี่คือโค้ดสีเขียวมะกอกเข้ม
- CSS จะใช้โค้ดสีแบบย่อ คือมีเลข 3 หลัก อย่างโค้ด 745 ก็ย่อมาจากโค้ด 774455
ใช้ class ต่างๆ ของ CSS แทนสไตล์ที่คุณใช้บ่อย. ถ้าอยากกำหนดสไตล์ให้ทุกแคปชั่นบรรยายรูป หรือชื่อ chapter ในหน้าเว็บขนาดใหญ่ ก็ไม่ต้องมานั่งพิมพ์โค้ดเต็มๆ ทุกครั้งไป ให้กำหนด class ของ CSS ในหัวเอกสารแทน แล้วอ้างถึงโดยใช้คำย่อ ทุกครั้งที่อยากใช้สไตล์นั้นข้างล่างคือตัวอย่างการใช้ style attribute แบบใหม่
- ในส่วน <head> ของเอกสาร HTML ให้ paste โค้ดต่อไปนี้ลงไป
 <style type="text/css">
 .fancy {
 font-family: Cursive;
 color: darkgreen;
 font-size:150%;
 }
 </style>
- ใน body หรือเนื้อหาของเอกสารเดียวกัน ให้ใช้ attribute class="fancy" เพื่อใส่สไตล์นี้ใน element เช่น ย่อหน้านี้จะกลายเป็นสีเขียวเข้ม ใช้ฟอนต์ใหญ่ เป็นลายมือหวัด
- จริงๆ แล้วจะอธิบายสไตล์ด้วยคำอื่นแทน "fancy" (หรูหรา) ก็ได้