คู่มือท่องเที่ยว สำหรับคนรักการท่องเที่ยว

Chapter 2

โครงสร้างคำสั่ง

คำสั่งของ CSS ประกอบด้วย selector, property และ value

selector { property:value }
selector { property1:value1; property2:value2 }

- selector สามารถเป็น HTML Tag ต่างๆ เช่น <body>, <p> หรือเป็น Class name หรือ ID ที่เราตั้งชื่อให้ก็ได้
- property คือ คุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color สำหรับกำหนดสี, font-size สำหรับกำหนดขนาดตัวอักษร
- value เป็น ค่า ที่เรากำหนดให้กับ property ต่างๆ เช่น color:white, font-size:14px

ตัวอย่างคำสั่ง CSS

กำหนดให้ข้อความที่อยู่ใน Tag <p> เป็นสีดำ และวางอยู่กึ่งกลาง

/* selector ที่เป็น HTML Tag */
p {
color:#000000;
text-align:center
}

กำหนดให้ข้อความที่ class name topic เป็นสีแดง ชนิดอักษรเป็น Arial ตัวหนา และจัดวางอยู่กึ่งกลาง

/* selector ที่เป็น Class name */
.topic{
color:red;
font-family:Arial;
font-weight:bold;
text-align:center
}       

กรณีที่ selector มีค่า property เหมือนกัน สามารถเขียนรวมกันได้ โดยใช้เครื่องหมาย "," คั่นระหว่าง selector

กำหนดให้ข้อความใน Tag <h1>,<h2> และ <h3> เป็นสีแดง ชนิดตัวอักษรเป็น sans-serif

h1, h2, h3 {
color:red;
font-family:sans-serif
}

สำหรับเรื่อง property และ value จะได้ศึกษาอย่างละเอียดในหัวข้อต่อๆ ไป


Comment

ใน Style Sheet Comment  จะใช้เครื่องหมาย "/*" เป็นการเปิด และ "*/" เป็นการปิด เช่น
/* นี่คือ comment กำหนดสีตัวอักษรเป็นสีดำ ขนาด14px */
body {
color:#000000;
font-size:14px
}


« Chapter 1
Chapter 3 »