ดาวน์โหลดบทความ
ดาวน์โหลดบทความ
แท็กฟอนต์ของ HTML นั้นพวกนักพัฒนามือโปรเขาเลิกใช้กันไปแล้ว ถ้าคุณจะเขียนเว็บ ก็ไม่ควรใช้เช่นกัน [1] X แหล่งข้อมูลอ้างอิง ถึงเวลาเขียนเว็บเองแล้วใช้แท็กเปลี่ยนสีฟอนต์จะสะดวกดี แต่ก็ไม่แน่ว่าพอเบราว์เซอร์ต่างๆ อัพเดทแล้วจะยังแสดงผลได้ดีอยู่ ถ้าใช้ CSS ท้ายบทความนี้จะดีที่สุด
ขั้นตอน
-
สร้าง font tag. ให้ใส่แท็ก <font>หน้าข้อความที่อยากใส่สี แล้วปิดด้วยแท็ก</font>ต่อท้ายข้อความ
- เช่น
<font>อยากให้ข้อความนี้สีน้ำเงิน</font>
- เช่น
-
ใส่ color attribute. ใส่ color=" " กลาง font tag ที่ใช้เปิด สีที่คุณต้องการจะอยู่ในเครื่องหมายคำพูด
- เช่น
<font> color=" " อยากให้ข้อความนี้สีน้ำเงิน</font>
- เช่น
-
เลือกชื่อสี. ชื่อสีจะเป็นคำเดียว ไม่เว้นวรรค มีทั้งสีพื้นฐานอย่าง "blue" (น้ำเงิน) หรือ "red" (แดง) ไปจนถึงสีละเอียดขึ้นอย่าง "lightblue" (ฟ้าอ่อน) หรือ "darkblue" (น้ำเงินเข้ม) ถ้าอยากดูชื่อสีเพิ่มเติม ให้ศึกษารายชื่อคำที่ใช้ระบุสีได้ เช่น "maroon" (แดงอมม่วง), "steelblue" (ฟ้าออกเทา) และ "lime" (เขียวมะนาว) [2] X แหล่งข้อมูลอ้างอิง
- เช่น
<font color=" blue "> อยากให้ข้อความนี้สีน้ำเงิน </font>
- เช่น
-
ใช้โค้ดสีแบบ hex แทน. HTML ให้คุณเลือกใช้ได้เป็นล้านสี แต่บางสีก็ไม่มีชื่อนี่สิ ก็เลยกำกับด้วยเลข 6 หลักแทน เป็นโค้ดเลขฐานสิบหก (hexadecimal) มีหลายเว็บเลยที่รวบรวมรายชื่อโค้ดสีแบบ hex ไว้ หรือเว็บที่ให้คุณเลือกสีในหน้าจอ แล้วแสดงเป็นค่า hex ออกมาให้เสร็จสรรพ โค้ดนี้จะเริ่มด้วยเครื่องหมาย # แล้วตามด้วยเลข 6 หลัก (0 - 9) หรือตัวอักษร (A - F)
- <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) [3] X แหล่งข้อมูลอ้างอิง
โฆษณา
-
ใส่ style attribute ในแท็ก HTML. attribute style=" " ให้คุณใช้ CSS ในเอกสาร HTML ได้ เป็นวิธีง่ายๆ ในการกำหนดสีฟอนต์ โดยที่ใช้ CSS ไม่เป็นก็ได้ ให้ลองใส่ style attribute ในแท็ก HTML ต่อไปนี้ดู
- <p style=" ">แท็ก p จะครอบข้อความทั้งย่อหน้า</p>
- <a style=" " href="https://www.wikihow.com">แท็ก a ครอบลิงค์</a>
- <span style=" ">ใช้แท็ก span ถ้าอยากให้ข้อความบางส่วนของย่อหน้ามีสี โดยไม่เปลี่ยนฟอร์แมต</span>
-
ระบุสี. พิมพ์ color: ตามด้วยชื่อสีหรือโค้ด hex ในเครื่องหมายคำพูด [4] X แหล่งข้อมูลอ้างอิง ถ้าอยากรู้ชื่อหรือโค้ดสีโดยละเอียด ให้เลื่อนกลับไปอ่านวิธีการด้านบน หรือลองใช้ตัวอย่างต่อไปนี้ดู
- <span style="color:red"> ข้อความจะเป็นสีแดง </span>
- <span style="color:#556B2F"> นี่คือโค้ดสีเขียวมะกอกเข้ม </span>
- <span style="color:#745"> CSS จะใช้โค้ดสีแบบย่อ คือมีเลข 3 หลัก อย่างโค้ด 745 ก็ย่อมาจากโค้ด 774455 </span>
-
ใช้ class ต่างๆ ของ CSS แทนสไตล์ที่คุณใช้บ่อย. ถ้าอยากกำหนดสไตล์ให้ทุกแคปชั่นบรรยายรูป หรือชื่อ chapter ในหน้าเว็บขนาดใหญ่ ก็ไม่ต้องมานั่งพิมพ์โค้ดเต็มๆ ทุกครั้งไป ให้กำหนด class ของ CSS ในหัวเอกสารแทน แล้วอ้างถึงโดยใช้คำย่อ ทุกครั้งที่อยากใช้สไตล์นั้น [5] X แหล่งข้อมูลอ้างอิง ข้างล่างคือตัวอย่างการใช้ 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 โค้ดต่อไปนี้ลงไป
เคล็ดลับ
- พยายามสร้างหน้าเว็บให้อ่านง่ายสบายตา ถ้าสีสดๆ แรงๆ บนพื้นขาว อ่านนานๆ ก็ปวดตา แต่ถ้าพื้นหลังดำแล้วข้อความยังสีเข้มอีก ก็มองไม่ค่อยเห็น
- ถ้าคอมรุ่นเก่าๆ จะแสดงสีได้แค่ประมาณ 65,000 สี ยิ่งถ้าจอเก๋ากึ้ก ยิ่งลดเหลือ 256 สี แต่สบายใจได้ว่า 99% ของชาวเน็ตจะเห็นสีที่คุณกำหนดไปแน่นอน [6] X แหล่งข้อมูลอ้างอิง
โฆษณา
คำเตือน
- font element ใช้กับ XHTML 1.0 Strict DTD ไม่ได้
โฆษณา
ข้อมูลอ้างอิง
- ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font
- ↑ https://www.w3.org/TR/SVG/types.html#ColorKeywords
- ↑ http://hyperphysics.phy-astr.gsu.edu/hbase/vision/addcol.html
- ↑ https://www.w3.org/TR/REC-html40/present/styles#h-14.2.2
- ↑ https://www.w3.org/TR/REC-html40/present/styles#h-14.2.2
- ↑ http://www.w3schools.com/browsers/browsers_display.asp
เกี่ยวกับวิกิฮาวนี้
มีการเข้าถึงหน้านี้ 66,370 ครั้ง
โฆษณา
