ดาวน์โหลดบทความดาวน์โหลดบทความX
บทความนี้ร่วมเขียนโดยเหล่าบรรณาธิการและนักวิจัยที่ผ่านการฝึกฝนมาเพื่อความถูกต้องและครอบคลุมของเนื้อหา
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้
บทความนี้ถูกเข้าชม 64,340 ครั้ง
แท็กฟอนต์ของ HTML นั้นพวกนักพัฒนามือโปรเขาเลิกใช้กันไปแล้ว ถ้าคุณจะเขียนเว็บ ก็ไม่ควรใช้เช่นกัน[1]ถึงเวลาเขียนเว็บเองแล้วใช้แท็กเปลี่ยนสีฟอนต์จะสะดวกดี แต่ก็ไม่แน่ว่าพอเบราว์เซอร์ต่างๆ อัพเดทแล้วจะยังแสดงผลได้ดีอยู่ ถ้าใช้ CSS ท้ายบทความนี้จะดีที่สุด
ขั้นตอน
สร้าง font tag. ให้ใส่แท็ก <font>หน้าข้อความที่อยากใส่สี แล้วปิดด้วยแท็ก</font>ต่อท้ายข้อความ- เช่น
<font>อยากให้ข้อความนี้สีน้ำเงิน</font>
- เช่น
ใส่ color attribute. ใส่ color=" " กลาง font tag ที่ใช้เปิด สีที่คุณต้องการจะอยู่ในเครื่องหมายคำพูด- เช่น
<font>color=" "อยากให้ข้อความนี้สีน้ำเงิน</font>
- เช่น
เลือกชื่อสี. ชื่อสีจะเป็นคำเดียว ไม่เว้นวรรค มีทั้งสีพื้นฐานอย่าง "blue" (น้ำเงิน) หรือ "red" (แดง) ไปจนถึงสีละเอียดขึ้นอย่าง "lightblue" (ฟ้าอ่อน) หรือ "darkblue" (น้ำเงินเข้ม) ถ้าอยากดูชื่อสีเพิ่มเติม ให้ศึกษารายชื่อคำที่ใช้ระบุสีได้ เช่น "maroon" (แดงอมม่วง), "steelblue" (ฟ้าออกเทา) และ "lime" (เขียวมะนาว)[2]- เช่น
<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]
โฆษณา
ใส่ 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]ถ้าอยากรู้ชื่อหรือโค้ดสีโดยละเอียด ให้เลื่อนกลับไปอ่านวิธีการด้านบน หรือลองใช้ตัวอย่างต่อไปนี้ดู- <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]ข้างล่างคือตัวอย่างการใช้ 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]
โฆษณา
คำเตือน
- 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
เกี่ยวกับวิกิฮาวนี้
นักเขียนในทีมวิกิฮาว
บทความนี้ร่วมเขียนโดยเหล่าบรรณาธิการและนักวิจัยที่ผ่านการฝึกฝนมาเพื่อความถูกต้องและครอบคลุมของเนื้อหา
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้ บทความนี้ถูกเข้าชม 64,340 ครั้ง
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้ บทความนี้ถูกเข้าชม 64,340 ครั้ง
หมวดหมู่: คอมพิวเตอร์และอุปกรณ์อิเล็กทรอนิกส์
มีการเข้าถึงหน้านี้ 64,340 ครั้ง
บทความนี้เป็นประโยชน์กับคุณไหม
⚠️ Disclaimer:
Content from Wiki How ไท language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
โฆษณา
