ads by google

วันอาทิตย์ที่ 5 สิงหาคม พ.ศ. 2555

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

คำสั่งของ 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 } 

Comment

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