ไวยากรณ์ซีเอสเอส

สารบัญ

    แสดงสารบัญ

กฎ CSS ประกอบด้วยตัวเลือกและบล็อกการประกาศ

ไวยากรณ์ซีเอสเอส

ตัวเลือกชี้ไปที่องค์ประกอบ HTML ที่คุณต้องการจัดรูปแบบ

บล็อกการประกาศประกอบด้วยการประกาศอย่างน้อยหนึ่งรายการคั่นด้วย อัฒภาค

การประกาศแต่ละครั้งจะมีชื่อคุณสมบัติ CSS และค่า โดยคั่นด้วยเครื่องหมายทวิภาค

การประกาศ CSS หลายรายการจะคั่นด้วยเครื่องหมายอัฒภาคและการประกาศ บล็อกล้อมรอบด้วยเครื่องหมายปีกกา

ตัวอย่าง

ในตัวอย่างนี้ องค์ประกอบ <p> ทั้งหมดจะถูกจัดกึ่งกลางโดยมีสีแดง สีข้อความ:

p
{
  color: red;
  text-align: center;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;
  text-align: center;
} 
</style>
</head>
<body>

<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>

</body>
</html>

ตัวอย่างอธิบาย

  • p เป็นตัวเลือกใน CSS (ชี้ไปที่องค์ประกอบ HTML ที่คุณต้องการจัดรูปแบบ: <p>)

  • color เป็นคุณสมบัติ และ red เป็นค่าคุณสมบัติ

  • text-align เป็นคุณสมบัติ และ center เป็นค่าคุณสมบัติ

คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือก CSS และคุณสมบัติ CSS ในบทถัดไป!