การกำหนดสีข้อความด้วย CSS color Property

คุณสมบัติ color ใน CSS ใช้กำหนดสีของข้อความในองค์ประกอบ

ไวยากรณ์ (Syntax)

Selector {
  color: /*value*/;
}

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

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div {
      height: 100px; width: 200px; margin: 10px;
      display: flex; float: left; font-size: 1.4em;
      word-spacing: 30px; line-height: 4.5em;
      border: thin solid blue; border-radius: 40%;
      text-align: center; color: rebeccapurple;
    }
    div + div {
      background-color: beige; color: red;
      text-align: justify; text-decoration: line-through;
    }
  </style>
</head>
<body>
  <div>One Two</div>
  <div>Three </div>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: สีข้อความใน span ภายใน p

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    p {
      margin: 10px; display: flex; float: left;
      border: 3px groove green; text-align: center;
      color: rebeccapurple;
    }
    span {
      background-color: beige; color: red; text-decoration: underline;
    }
  </style>
</head>
<body>
  <h2>What is Tableau?</h2>
  <p>Tableau is a Business Intelligence tool for visually analyzing the data.
    <span>Users can create and distribute an interactive and shareable dashboard, which depict the trends, variations, and density of the data in the form of graphs and charts. </span>
    Tableau can connect to files, relational and Big Data sources to acquire and process data.</p>
</body>
</html>

ผลลัพธ์

รูปแบบค่าสี (Color Values)

การสืบทอด (Inheritance)

color ถูกสืบทอดโดยอัตโนมัติจากพาเรนต์ ไม่ต้องกำหนดซ้ำสำหรับลูกทุกตัว