CSS Font Color: คู่มือการเปลี่ยนสีตัวอักษร

CSS background-color property ใช้สีกับ text element สามารถระบุ CSS built-in color keyword, hexadecimal value หรือ color value อื่นๆ ด้วย background-color property Syntax: color: yourcolor;

วิธีใช้ CSS Font Color

การตั้งค่าสีและ background color ของ text บนเว็บไซต์เป็นส่วนสำคัญของ web design

นี่คือที่มาของ CSS color และ background-color properties color property ให้ตั้งค่าสีของ HTML text background-color property ให้กำหนด text background colors

บทเรียนอภิปรายวิธีตั้งค่าสี text ใน CSS พร้อมตัวอย่าง แล้วค่อยพูดถึง background color ของ text element

CSS Font Color

CSS font color ตั้งค่าด้วย color property color property ตั้งค่าสีของ text ไม่ใช่ background ของ element ใช้ CSS color keywords หรือ color values เช่น hexadecimal strings

Syntax ของ color property:

p { color: red; }

Rule นี้ตั้งค่าสีของทุก

tags ใน HTML document เป็นสีแดง

ใช้ CSS color keyword keywords เหล่านี้สะดวกหากต้องการอ้างอิง standard color เช่น "red" หรือ "paleblue" แต่ไม่ครอบคลุมทุกสีใน spectrum หากต้องการสีเฉพาะ อาจใช้ color label อื่น

color property ยอมรับค่าเหล่านี้:

Value	Description	Examples
Color name	ชื่อสี	blue, hotpink
HEX color	สี hexadecimal ตัวระบุ 6 ตัวอักษร	#f7f7f7, #0000ff
RGB color	RGB = red, green, blue	rgb(0, 50, 28), rgb(0, 0, 255)
HSL color	HSL = hue, saturation, lightness	hsl(0, 50%, 50%), hsl(180, 50%, 25%)

โดย default text color ของ web page = text color ที่ใช้กับ tag ถ้าไม่ระบุอื่น จะเป็นสีดำ

สามารถใช้ color property กำหนด link colors ใน stylesheet

มาดูตัวอย่างการทำงานของ color property

Change Font Color CSS: ตัวอย่าง

สมมติ design website สำหรับร้านขายของชำท้องถิ่น Peterson and Sons เจ้าของต้องการแสดง block ของ text บางส่วนเป็นสีเทา ใช้โค้ด:

<html> <p>Peterson and Sons was founded by Louis Peterson in 1927. Louis was a Seattle resident with a dream of bringing fresh groceries to his local neighborhood. Peterson and Sons primarily sells fresh food and groceries, including delicious deli meat and artisan cheese. Today, Peterson and Sons operates five stores across the Seattle area.</p> <style> p { color: gray; }

โค้ดคืนค่า: CSS Font Color: คู่มือการเปลี่ยนสีตัวอักษร กดปุ่มใน code editor ด้านบนเพื่อดู output

ใช้

HTML tag กำหนด paragraph อธิบาย Peterson and Sons ใน CSS สร้าง style ตั้ง text color ของทุก

tags เป็น gray ใช้ color name value ("gray")

อาจระบุ "rgb(128, 128, 128)" แทน "gray" หากต้องการ RGB value หรือใช้ hexadecimal หรือ HSL value

ไม่ได้ใช้ CSS file styles อยู่ใน