CSS syntax
จากบทที่แล้วเราคงทราบกับแล้วว่า CSS นั้นก็เป็นตัวที่เข้าไปกำหนดการแสดงผลใน HTML ว่าจะให้แสดงผลแบบไหน สีอะไร ตัวอักษรแบบใด ซึ่งในบทนี้จะเป็นเนื้อหาของรูปแบบของคำสั่ง CSS
รูปแบบคำสั่ง CSS จะเป็นดังนี้
selector {property: value}
รูปแบบของคำสั่ง CSS นั้นจะประกอบไปด้วย 3 ส่วนคือ
1.Selector คือ ส่วน HTML tag ที่เราต้องการจะให้แสดงผล เช่น <table> ก็จะแสดงผลในส่วนของตาราง
2.Property คือ ส่วนของคุณสมบัติที่เราต้องการให้แสดง เช่น สีตัวอักษร , ชนิดตัวอักษร , ขนาดตัวอักษร
3.Value คือ ค่าที่เราต้องการให้แสดง เช่น ตัวอักษรสีแดง , ตัวอักษรแบบ tahoma , ตัวอักษรขนาด 12 pt
ตัวอย่างรูปแบบการใช้งาน
แสดงตัวหนังสือในตารางให้เป็นสีแดงทั้งหมด
table { color : red }
การใช้งานเมื่อ value เป็นคำที่มีมากว่า 1 คำ เราจะใส่ value ในเครื่องหมาย ""
p { font - family : "sans serif" }
ถ้ามี property มากกว่า 1 เราจะใช้ ; คั่นระหว่าง property เช่นเราต้องการให้มีการจัดตัวอักษรให้อยู่ กึ่งกลางและตัวอักษรมีสีแดง
p { text - align : center ; color : red }
ถ้ามีหลาย property มากๆ เราอาจเขียนแต่ละอันให้อยู่คนละบรรทัดกันได้
p { text - align : center; color : black; font-family : arial; }
เราอาจเขียนให้ selectors หลายตัวมี property เหมือนกันก็ได้เช่น เขียนให้สีหัวข้อเป็นสีเขียวทั้งหมด
h1,h2,h3,h4,h5,h6 { color : green }
Class selector
ในการกำหนด selector นั้นเราจะใช้ HTML tag ในการกำหนด แต่ถ้าเราต้องการแสดงผลที่ต่างกัน ใน HTML tag ตัวเดียวกัน
ตัวอย่าง เช่น เราต้องการให้ ย่อหน้าในเอกสารจัดตัวอักษรชิดซ้ายในตำแหน่งนึง และจัดชิดขวาในอีกตำแหน่ง คำตอบคือเราสามารถใส่ class ไปใน html เพื่อเป็นการระบุชื่อให้ครับ entity นั้นได้เช่น
<p class="right"> ตัวอักษรในย่อหน้านี้จะชิดขวา </p> <p class="left"> ตัวอักษรในย่อหน้านี้จะชิดซ้าย </p>
จะเห็นว่ามี P อยู่ 3 class คือ left , right , bold ซึ่งจะจัดย่อหน้าให้ชิดซ้าย , ชิดขวา , ให้ตัวอักษรเป็นตัวหนา ซึ่งเมื่อเราจะประกาศใช้ใน HTML เราก็จะต้องบอกชื่อด้วยว่าจะใช้ ชื่อ (class) อะไร
หลังจากนั้นเราก็สามารถกำหนดชื่อ class ที่ต้องการใช้ใน css ได้เช่น
p.left { text-align : left } p.right { text-align : right } p.bold { font-weight: bold }
ถ้าเราต้องการใช้หลาย class พร้อมกันก็ทำได้ดังนี้
<p class = "left bold"> ตัวอักษรในย่อหน้านี้จะชิดซ้าย และเป็นตัวหนา </p>
ในการใช้งานแบบ class เราอาจตัดตัว HTML tag ที่อยู่ ด้านหน้าได้เช่น
.center { text - align: center }
เมื่อใช้งานเราก็เขียนชื่อ class ได้เลยเช่น
<h1 class = "center"> ตัวอักษรนี้จะจัดอยู่กึ่งกลาง </h1> <p class = "center"> ตัวอักษรนี้จะจัดอยู่กึ่งกลาง </p>
คำเตือน ห้ามใช้ตัวเลขนำหน้าในชื่อของ class เพราะจะทำให้มีปํญหาเมื่อใช้งานกับ firefox browser
ในหมวด HTML เราคงได้ใช้ form กันบ้างแล้ว ถ้าเราต้องการประกาศคำสั่งใช้กับ form ทำได้ดังนี้
คำสั่ง HTML
<input type="text" id="text-two" size=:"15" />
คำสั่ง CSS
input[type="text"] { border: 1px solid red; //เปลี่ยนสีกรอบของ input ให้เป็นสีแดง }
ID selector
เป็นการกำหนด selector อีกแบบหนึ่ง ซึ่งเราจะใช้สัญลักษณ์ # นำหน้า selector ของเรา มีคำถามเข้ามามากว่าใช้ต่างกันกับ class selector ยังไง คำตอบคือเราจะประกาศ id selector เพียงครั้งเดียวในหน้านั้นๆ ต่างกับ class ที่เราจะประกาศกี่ครั้งก็ได้ แล้วถ้าเราประกาศ id ซ้ำล่ะจะเกิดอะไรขึ้น ก็ไม่เกิดอะไรขึ้นครับใช้ได้ปรกติ
ตามปรกติแล้วผมจะประกาศให้ ID เป็น element ที่ครอบคลุมทั้งหมดของแต่ละส่วนของหน้าเอาไว้ แล้วใช้ class อยู่ข้างในอีกที เพราะเราสามารถใช้ <a> ในการอ้างอิงแต่แหน่งของ ID selector ได้ด้วยครับเช่น <a href=/#id-selector-name></a> มีประโยชน์มากครับ
ตัวอย่างการใช้งาน ID selector
#green { color : green }
เป็นการสร้าง id ชื่อ green และเก็บค่าสีเขียวเอาไว้
ตัวอย่าง id selector ใน P tag
p#para1 { text-align : center ; color : red ; }
ซึ่งการใช้งานก็จะเป็นดังนี้
<p id="para1"> ตัวอักษรจัดเข้ากลาง และเป็นสีแดง </p>
คำเตือน ห้ามใช้ ตัวเลขขึ้นต้นชื่อ id เพราะจะทำให้มีปัญหาใน firefox browser
CSS comments
การเขียนหมายเหตุให้คำสั่ง CSS หมายเหตุ หรือ comment เราจะใช้ในการบรรยาย code ของเราซึ่งส่วนนี้จะไม่แสดงใน brower แต่จะใช้เพื่อบอกเราว่า code ส่วนนี้ใช้เพื่อทำอะไร
ตัวอย่างการใช้งาน
/* กำหนดให้ตัวอักษรสีฟ้า */ .blue { color : blue } /* กำหนดให้ตัวอักษรสีเขียว */ .green { color : green }
ในบทนี้ก็จบเพียงเท่านี้ ในบทความต่อไปจะเป็นเรื่องของการใช้งาน CSS กันแล้ว