การกำหนดคุณสมบัติ Color ใน CSS

เราสามารถกำหนดสีสำหรับข้อความ ขอบ และพื้นหลังขององค์ประกอบได้ด้วย CSS คุณสมบัติ color ใช้ระบุสีข้อความขององค์ประกอบ

ไวยากรณ์ (Syntax)

Selector {
  color: /*value*/;
}

ตัวอย่างที่ 1: สีข้อความและพื้นหลังบน div และ p

<!DOCTYPE html>
<html>
<head>
  <style>
    div { color: seashell; background-color: lightcoral; }
    p { font-size: 1.5em; color: blue; background-color: palegreen; box-shadow: 0 0 5px 1px rgb(0,0,0); }
  </style>
</head>
<body>
  <div>
    This is demo text.
    <p> Text added for reference. </p>
    This is demo text 2.
  </div>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: สีบน h3 และ p

<!DOCTYPE html>
<html>
<head>
  <style>
    * { text-align: center; }
    h3 { color: red; border: 2px ridge rosybrown; }
    p { color: royalblue; background-color: cornsilk; box-shadow: 0 0 5px 1px deeppink; }
  </style>
</head>
<body>
  <h3>Demo Demo Demo Demo</h3>
  <p>Demo text here</p>
</body>
</html>

ผลลัพธ์

รูปแบบค่าสีที่รองรับ (Color Values)

CurrentColor Keyword

currentColor ใช้ค่าของ color ขององค์ประกอบเดียวกัน ใช้ได้กับ border, outline, box-shadow, background ฯลฯ

.icon { color: blue; border: 2px solid currentColor; }

Color Property สร้างผลต่ออะไรบ้าง?

• ข้อความ (text content)
• ค่าเริ่มต้นของ border-color, outline-color
• ค่าเริ่มต้นของ text-decoration-color, text-emphasis-color
• ค่า currentColor สำหรับ properties อื่น