โครงสร้างคำสั่ง
คำสั่งของ CSS ประกอบด้วย selector, property และ value
selector { property:value }
selector { property1:value1; property2:value2 }
selector { property1:value1; property2:value2 }
- selector สามารถเป็น HTML Tag ต่างๆ เช่น <body>, <p> หรือเป็น Class name หรือ ID ที่เราตั้งชื่อให้ก็ได้
- property คือ คุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color สำหรับกำหนดสี, font-size สำหรับกำหนดขนาดตัวอักษร
- value เป็น ค่า ที่เรากำหนดให้กับ property ต่างๆ เช่น color:white, font-size:14px
- property คือ คุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color สำหรับกำหนดสี, font-size สำหรับกำหนดขนาดตัวอักษร
- value เป็น ค่า ที่เรากำหนดให้กับ property ต่างๆ เช่น color:white, font-size:14px
ตัวอย่างคำสั่ง CSS
กำหนดให้ข้อความที่อยู่ใน Tag <p> เป็นสีดำ และวางอยู่กึ่งกลาง
/* selector ที่เป็น HTML Tag */
p {
color:#000000;
text-align:center
}
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
}
.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
}
color:red;
font-family:sans-serif
}
สำหรับเรื่อง property และ value จะได้ศึกษาอย่างละเอียดในหัวข้อต่อๆ ไป
Comment
ใน Style Sheet Comment จะใช้เครื่องหมาย "/*" เป็นการเปิด และ "*/" เป็นการปิด เช่น
/* นี่คือ comment กำหนดสีตัวอักษรเป็นสีดำ ขนาด14px */
body {
color:#000000;
font-size:14px
}
body {
color:#000000;
font-size:14px
}
