Cascading Style Sheets Syntax

Syntax

ไวยากรณ์ของ CSS ประกอบด้วย 3 ส่วนด้วยกันคือ ตัวเลือก(selector) สมบัติ (property) และค่าของสมบัติ (value)

selector { property: value }

selector คือตัวเลือกว่าจะใช้สไตล์นี้กับ tag ของ html ตัวใด property คือตัวระบุคุณสมบัติที่เราอยากเปลี่ยนหรือกำหนดค่าให้มัน value คือค่าที่กำหนดให้แก่ property โดยต้องมี colon (:) คั่นระหว่างชื่อ property กับค่าที่กำหนดให้มัน property และค่าของมันต้องใส่ไว้ในเครื่องหมายวงเล็บปีกกา ตัวอย่างเช่น

body { color: black }

กรณีที่ค่าของ property ประกอบด้วยหลายคำซึ่งมีวรรคคั่น จะต้องใส่ค่านั้นไว้ในเครื่องหมายคำพูด ดังตัวอย่าง

p {font-family: "Angsana UPC"}

ในกรณีที่ต้องการกำหนด property หลายตัว จะต้องคั่น property และค่าของมันในแต่ละชุดดัวย semicolon (;) ดังตัวอย่างต่อไปนี้ ซึ่งกำหนดให้พารากราฟมีการจัดวางไว้กลางหน้าและแสดงด้วยอักษรสีแดง

p {text-align:center; color: red}

เพื่อให้การกำหนดสไตล์อ่านได้ง่าย เราควรเขียน property แต่ละตัวไว้ในแต่ละบรรทัด ดังตัวอย่างต่อไปนี้ 

p  {
     text-align: center;
     color: black;
     font-family: arial
   }

การเลือก tag หลายตัวเพื่อใช้สไตล์เดียวกัน

ในกรณีที่เราต้องการให้ tag หลายตัวใช้สไตล์เดียวกัน เราสามารถใส่ selector หลายตัวไว้ในกลุ่มเดียวกันโดยคั่น tag แต่ละตัวด้วย comma(,) ดังตัวอย่าง

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

Class selector

บางครั้งเราต้องการให้ tag หนึ่งตัวมีหลายสไตล์ เช่น tag <p> สำหรับจัดพารากราฟ เราอยากให้มีพารากราฟที่จัดชิดขวา และพารากราพที่จัดกลางหน้า ถ้าเราต้องการให้มีพารากราพทั้ง 2 สไตล์นี้ เราสามารถทำได้โดยการแบ่ง tag ตัวนั้นออกเป็นประเภทเรียกว่า class แล้วเราเลือกระบุสไตล์สำหรับแต่ละ class ได้ดังนี้ 

p.right  { text-align: right }
p.center { text-align: center}

คำว่า right และ center ที่เขียนไว้หลัง p. เป็นชื่อคลาสที่เราตั้งขึ้นเอง โดยพยายามตั้งชื่อให้สื่อความหมาย ซึ่งจะใช้อ้างอิงต่อไปในตอนที่จะนำสไตล์หล่านี้ไปใช้ ดังตัวอย่าง 

<p class="right" >
พารากราพนี้จะจัดชิดขวา
</p>

<p class="center" >
พารากราพนี้จะจัดกลางหน้า
</p>

เราสามารถำหนดชื่อคลาสโดยละไม่ใส่ชื่อ tag ใน selector ก็ได้ การทำอย่างนี้เท่ากับว่าเราไม่เจาะจงคลาสนี้ว่าจะใช้กับ tag ใดเป็นการเฉพาะ เราสามารถนำคลาสนี้ไปใช้กับ tag ได้หลายตัว เช่น 

.center { text-align: center}

สามารถนำ ตัวเลือก .center ไปใช้กับ tag ได้หลายตัว ดังตัวอย่าง 

<h3 class="center" >
หัวพารากราพนี้จะจัดกลางหน้า
</p>

<p class="center" >
พารากราพนี้จะจัดกลางหน้าเช่นกัน
</p>

ตัวเลือกเฉพาะ

ตัวเลือกเฉพาะ (id selector) แตกต่างไปจากตัวเลือกคลาสซึ่งสามารถนำสไตล์ไปใช้ได้กับทั้งกลุ่มที่ใช้ชื่อคลาสเดียวกัน ตัวเลือกเฉพาะจะใช้ได้กับ tag ตัวใดตัวหนึ่งเพียงตัวเดียว โดยการตั้งรหัสขึ้นมาเป็นการเฉพาะสำหรับ tag ตัวที่ต้องการไม่ให้มีรหัสซ้ำกันเลย ตัวอย่างข้างล่างนี้เป็นการกำหนดสไตล์ให้กับ tag <p> เฉพาะตัวที่มีรหัส (id) เป็น para5 เท่านั้น 

p#para5 { text-align: center; color:blue}

พิจารณาตัวอย่างต่อไปนี้ กฏที่กำหนดข้างต้นจะใช้กับ tag <p> ทีกำหนดรหัสเป็น para5 เท่านั้น 

<p id="para4" >พารากราพ 4 1</p>
<p id="para5" >พารากราพ 5 1</p>

ตัวอย่างต่อไปนี้จะนำสไตล์ไปใช้กับ tag ตัวแรกที่พบว่ามีรหัส (id) เป็น r345 

*#r345 { color: yellow}

พิจารณาตัวอย่างข้างล่าง กฎที่กำหนดข้างต้นนี้จะใช้กับ tag <h1> ตัวเดียวเท่านั้น ไม่ใช้กับ tag <h2> เนื่องจากเจอ tag <h1>ก่อน 

<h1 id="r345">หัวพารากราพระดับ 1</h1>
<h2 id="r345">หัวพารากราพระดับ 2</h2>

การใส่หมายเหตุ (comment)

เราอาจใส่หมายเหตุเพื่ออธิบายสิ่งที่เราเขียนซึ่งจะช่วยให้เราทำความเข้าใจต้นฉบับที่เราเขียนได้ง่ายขึ้น โดยเฉพาะอย่างยิ่งเมื่อเราต้องการกลับมาแก้ไขต้นฉบับหลังจากที่ได้เขียนไปเป็นเวลานาน หมายเหตุที่เราใส่ลงไปเบราเซอร์จะไม่สนใจ การใส่หมายเหตุใน CSS จะเริ่มต้นด้วย "/*" ตามด้วยหมายเหตุที่ต้องการใส่ และจบลงด้วย "*/" ดังตัวอย่าง 

/* นี่คือหมายเหตุ */
p  {
     text-align: center;
     color: black;
     font-family: arial
   }
/* นี่ก็เป็นหมายเหตุเช่นกัน 
   แต่เขียนไว้ 2 บรรทัด */
h1, h2, h3, h4, h5, h6 {color: green}