CSS syntax

CSS

    จากบทที่แล้วเราคงทราบกับแล้วว่า 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 - aling : center ; color : black ; font-family : arial }

เราอาจเขียนให้ selectors หลายตัวมี property เหมือนกันก็ได้เช่น เขียนให้สีหัวข้อเป็นสีเขียวทั้งหมด

h1,h2,h3,h4,h5,h6 { color : green }

---

Class selector

ในการกำหนด selector นั้นเราจะใช้ HTML tag ในการกำหนด แต่ถ้าเราต้องการแสดงผลที่ต่างกัน ใน HTML tag ตัวเดียวกัน

ตัวอย่าง เช่น เราต้องการให้ ย่อหน้าในเอกสารจัดตัวอักษรชิดซ้ายในตำแหน่งนึง และจัดชิดขวาในอีกตำแหน่ง

p.left { text-align : left } p.right { text-align : right } p.bold { font-weight: bold }

จะเห็นว่ามี P อยู่ 3 class คือ left , right , bold ซึ่งจะจัดย่อหน้าให้ชิดซ้าย , ชิดขวา , ให้ตัวอักษรเป็นตัวหนา ซึ่งเมื่อเราจะประกาศใช้ใน HTML เราก็จะต้องบอกชื่อด้วยว่าจะใช้ ชื่อ (class) อะไร

<p class = "right"> ตัวอักษรในย่อหน้านี้จะชิดขวา </p> <p class = "left"> ตัวอักษรในย่อหน้านี้จะชิดซ้าย </p>

ถ้าเราต้องการใช้หลาย 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 #C00; }

---

Id selector

เป็นการกำหนด selector อีกแบบหนึ่ง ซึ่งเราจะใช้สัญลักษณ์ # นำหน้า 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 กันแล้ว