ไวยากรณ์ หรือรูปแบบคำสั่ง ของ CSS (CSS Syntax)
รูปแบบคำสั่งของ CSS มีวิธีการเขียนดังนี้
Selector {Property: Value; Property: Value;}
ตัวอย่างเช่น
h1 {color: blue; font-size: 12px;}
- Selector คือ ส่วน HTML Tag ที่เราต้องการจะให้แสดงผล เช่น <table> , <h1> , <p> , <span> เป็นต้น โดยไม่ต้องเอาเครื่องหมาย < > เอาแต่ชื่อที่อยู่ด้านใน Tag เท่านั้น
- Property คือ ส่วนของคุณสมบัติที่เราต้องการให้แสดง เช่น สีตัวอักษร , ชนิดตัวอักษร , ขนาดตัวอักษร , สีพื้นหลัง เป็นต้น
- Value คือ ค่าที่เราต้องการให้แสดง เช่น ตัวอักษรสีแดง , ตัวอักษรแบบ tahoma , ตัวอักษรขนาด 12px , พื้นหลังสีแดง เป็นต้น
- ระหว่าง Property และ Value จะคั่นด้วยเครื่องหมาย :
- เมื่อจบการประกาศแต่ละอันจะจบด้วยเครื่องหมาย ;
การจัดกลุ่มของ Selector
เราสามารถจัดกลุ่มให้กับ Selector ได้ถ้าหาว่า Property และ Value นั่นเหมือนกัน โดยวิธีการคือใส่เครื่องหมาย , คั่นระหว่าง Selector
h1,h2,h3,h4,h5,h6 {color: red;}
Class selector (การสร้าง class)
เมื่อเราต้องการให้มีการแสดงผลที่แตกต่างกันเราสามารถสร้าง class ให้กับ selector ได้ โดยการใส่เครื่องหมาย . นำหน้าชื่อ class ของเราเช่น
p.left {text-align: left;}
p.right {text-align : right;}
p.bold {font-weight: bold;}
จะเห็นว่ามี P อยู่ 3 class คือ left , right , bold ซึ่งจะจัดย่อหน้าให้ชิดซ้าย , ชิดขวา , ให้ตัวอักษรเป็นตัวหนา ซึ่งเมื่อเราจะประกาศใช้ใน HTML เราก็จะต้องบอกชื่อด้วยว่าจะใช้ ชื่อ class อะไร
** หมายเหตุ:
1. class สามารถใช้ซ้ำได้ในหน้าเว็บเพจเดียวกัน
2. ห้ามใช้ตัวเลขนำหน้าในชื่อของ class เพราะจะทำให้มีปํญหาเมื่อใช้งานกับบางเบราว์เซอร์
<p class="left">
ตัวอักษรนี้จะชิดซ้าย
</p>
<p class="right">
ตัวอักษรนี้จะชิดขวา
</p>
<p class="bold">
ตัวอักษรนี้จะหนา
</p>
// สามารถใช้ class ร่วมกันได้เช่น
<p class="right bold">
ตัวอักษรนี้จะชิดขวาและหนา
</p>
ตัวอย่างโค้ดการใช้ class
เราอาจตัด HTML Tag ด้านหน้าชื่อคลาสของเราออกได้และสามารถใช้ได้กับทุก ๆ Tag ได้ เช่น
.left {text-align: left;}
.right {text-align : right;}
.bold {font-weight: bold;}
<p class="left">
ตัวอักษรนี้จะชิดซ้าย
</p>
<h1 class="right">
หัวข้อจะชิดขวา
</h1>
<span class="bold">
ระยะนี้จะหนา
</span>
// สามารถใช้ class ร่วมกันได้เช่น
<div class="right bold">
ภายใน DIV นี้ ตัวอักษรนี้จะชิดขวาและหนา
</div>
// จะเห็นได้ว่าสามารถใช้ได้กับทุก ๆ HTML Tag
ตัวอย่างโค้ดการใช้ class
Id selector
เป็นการกำหนด selector อีกแบบหนึ่ง ซึ่งเราจะใช้สัญลักษณ์ # นำหน้า selector ของเรา ดังตัวอย่าง
p#green {color: green;}
หรือเราอาจตัด HTML Tag ออกได้ ซึ่งจะใช้ได้กับทุก Tag เช่น
#red {color: red;}
** หมายเหตุ
1. ID สามารถใช้ได้ครั้งเดียวในหน้าเพจหนึ่ง ๆ เท่านั้น
<p id="green">
ตัวอักษรนี้จะมีสีเขียว
</p>
<h1 id="red">
หัวข้อนี้จะมีสีแดง
</h1>
// #red สามารถใช้กับ Tag ใดก็ได้
ตัวอย่างโค้ดการใช้ id
การคอมเม้นต์ (CSS Comment)
การเขียนหมายเหตุให้คำสั่ง CSS หมายเหตุ หรือ comment เราจะใช้ในการบรรยาย code ของเราซึ่งส่วนนี้จะไม่แสดงผลใด ๆ แต่จะใช้เพื่อบอกเราว่า code ส่วนนี้ใช้เพื่อทำอะไร โดยมีวิธีเขียนคือ
/* คำอธิบาย หรือ หมายเหตุ */