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 กันแล้ว