2.4 การกำหนดรูปแบบและสีของตัวอักษร
ในการจัดรูปแบบของข้อความหรือตัวอักษรนั้น การใช้สีก็เป็นส่วนสำคัญเช่นกันในการจัดรูปแบบ ซึ่งในการกำหนดรูปแบบสามารถกำหนดได้ ดังนี้
การกำหนดรูปแบบ
ในการกำหนดรูปแบบของตัวอักษร
หรือข้อความ สามารถกำหนดได้ด้วยคุณสมบัติ(attribute) ชื่อ face แล้ว ตามด้วยชื่อ font ที่เราต้องการ เอกสารเว็บกำหนดฟอนต์ ได้หลายฟอนต์ โดยโปรแกรมเบราเซอร์จะมีการตรวจสอบการใช้ฟอนต์ให้อัตโนมัติ
เราสามารถการกำหนดรูปแบบของตัวอักษร ได้โดยใช้คำสั่ง
<font face="ชื่อ font">..ข้อความต้องการกำหนด 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 color="ชื่อสี หรือ code สี ที่ต้องการ">..........</font>
ทดสอบการกำหนด font และสีตัวอักษร
สร้าง font tag. ให้ใส่แท็ก <font>หน้าข้อความที่อยากใส่สี แล้วปิดด้วยแท็ก</font>ต่อท้ายข้อความ ใส่ color attribute. ใส่ color=" " กลาง font tag ที่ใช้เปิด สีที่คุณต้องการจะอยู่ในเครื่องหมายคำพูด เลือกชื่อสี. ชื่อสีจะเป็นคำเดียว ไม่เว้นวรรค มีทั้งสีพื้นฐานอย่าง "blue" (น้ำเงิน) หรือ "red" (แดง) ไปจนถึงสีละเอียดขึ้นอย่าง "lightblue" (ฟ้าอ่อน) หรือ "darkblue" (น้ำเงินเข้ม) ถ้าอยากดูชื่อสีเพิ่มเติม
ให้ศึกษารายชื่อคำที่ใช้ระบุสีได้ เช่น "maroon" (แดงอมม่วง), "steelblue" (ฟ้าออกเทา) และ "lime" (เขียวมะนาว) ใช้โค้ดสีแบบ hex แทน. HTML ให้คุณเลือกใช้ได้เป็นล้านสี แต่บางสีก็ไม่มีชื่อนี่สิ ก็เลยกำกับด้วยเลข 6 หลักแทน เป็นโค้ดเลขฐานสิบหก (hexadecimal) มีหลายเว็บเลยที่รวบรวมรายชื่อโค้ดสีแบบ hex ไว้ หรือเว็บที่ให้คุณเลือกสีในหน้าจอ
แล้วแสดงเป็นค่า hex ออกมาให้เสร็จสรรพ โค้ดนี้จะเริ่มด้วยเครื่องหมาย # แล้วตามด้วยเลข 6 หลัก (0 - 9) หรือตัวอักษร (A - F) วิธีการ 1 วิธีการ 1 ของ 2:ใช้แท็กต่างๆ ใน HTML
<font>อยากให้ข้อความนี้สีน้ำเงิน</font>
<font>color=" "อยากให้ข้อความนี้สีน้ำเงิน</font>
<font color="blue">อยากให้ข้อความนี้สีน้ำเงิน</font>
- <font color="FF0000">พิมพ์โค้ด #FF0000 หรือ red ก็ได้ออกมาเป็นสีแดงเหมือนกัน</font>
- <font color="00FF00">พิมพ์โค้ดนี้ได้ข้อความสีเขียว</font>
- <font color="0000FF">พิมพ์โค้ดนี้ได้ข้อความสีน้ำเงิน</font>
ปรับค่า 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 style="">แท็ก p จะครอบข้อความทั้งย่อหน้า</p>
- <a style="" href="//www.wikihow.com">แท็ก a ครอบลิงค์</a>
- <span style="">ใช้แท็ก span ถ้าอยากให้ข้อความบางส่วนของย่อหน้ามีสี โดยไม่เปลี่ยนฟอร์แมต</span>
ระบุสี. พิมพ์ color: ตามด้วยชื่อสีหรือโค้ด hex ในเครื่องหมายคำพูดถ้าอยากรู้ชื่อหรือโค้ดสีโดยละเอียด ให้เลื่อนกลับไปอ่านวิธีการด้านบน หรือลองใช้ตัวอย่างต่อไปนี้ดู
- <span style="color:red">ข้อความจะเป็นสีแดง</span>
- <span style="color:#556B2F">นี่คือโค้ดสีเขียวมะกอกเข้ม</span>
- <span style="color:#745">CSS จะใช้โค้ดสีแบบย่อ คือมีเลข 3 หลัก อย่างโค้ด 745 ก็ย่อมาจากโค้ด 774455</span>
ใช้ 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 เช่น <p class="fancy">ย่อหน้านี้</p>จะกลายเป็นสีเขียวเข้ม ใช้ฟอนต์ใหญ่ เป็นลายมือหวัด
- จริงๆ แล้วจะอธิบายสไตล์ด้วยคำอื่นแทน "fancy" (หรูหรา) ก็ได้
- ในส่วน <head> ของเอกสาร HTML ให้ paste โค้ดต่อไปนี้ลงไป