CSS Syntax

| ไอที | CSS | 4683

	มาดู CSS Syntax, Selector, Property และก็การใส่ Value กัน

	ในการเขียน CSS แต่ละครั้งนั้น สิ่งที่จำเป็นและสำคัญ คือ การ Selector ว่าจะเลือกส่วนไหนในการกำนหด Style ต่อมาก็คือ Property นั่นก็คือสิ่งที่ต้องการกำหนด ว่าจะกำหนด Style อะไรในแท็กที่เลือก สุดท้ายก็คือ Value นั่นก็คือ จะกำหนดค่าอะไรให้กับแท็ก ดังนั้น เราจึงแบ่งองค์ประกอบของ CSS ได้เป็น 3 อย่าง นั่นคือ

	- Selector : ก็คือการเลือกแท็ก หรือคลาส หรือไอดี ที่ต้องการกำหนดลักษณะ เช่น

	- Property : ก็คือการกำหนดลักษณะ หรือแอททริบิว ที่ต้องการ เช่น border, color, background-color

	- Value : ก็คือค่าที่ต้องการหนดลักษณะใน Property เช่น #F1F1F1, 20px, 30%

	มาดู Syntax CSS ตามด้านล่างครับ
selector{property:value}

	ต่อไปมาดูตัวอย่างการใช้งานกันครับ ตามด้านล่างเลย
table{border:1px solid #C00;}

	จากโค้ดด้านบน Selector ก็คือ table นั่นก็คือ ต้องการกำหนดลักษณะให้กับแท็ก table ส่วน Property ก็คือ border นั่นก็คือ สิ่งที่ต้องการกำหนดให้กับ table นั่นก็คือ ขอบ(border) และสุดท้าย Value ก็คือ 1px มีขนาด 1px มีลักษณะเป็นเส้นเดียว solid มีสีเป็น C00 นั่นก็คือ สีแดงเข้ม ๆ หน่อย

	CSS Selector

	The Type Selectors

	จะเป็นการ select จากแท็กที่กำหนดทั้งหมด เช่น
h1{color:#00F;}

	The Universal Selectors

	เป็นการ select แท็กทั้งหมด โดยใช้เครื่องหมาย *
*{color:#000000;}

	The Descendant Selectors

	เป็นการ select ที่มีลักษณะเฉพาะ เช่นดังตัวอย่าง ให้ select em ที่อยู่ใน ul
ul em{color:#000000;}

	The Class Selectors

	เป็นการ select ที่เลือกเฉพาะ class ที่กำหนด โดยการใส่จุดแล้วตามด้วยชื่อคลาส ดังตัวอย่างด้านล่าง
.black{ olor:#000000;}

	ตัวอย่างนี้เป็นการ select class เหมือนกัน แต่ต่างกันตรงที่ จะ select class เฉพาะที่เป็นแท็ก h1 เท่านั้น
h1.black{color:#000000;}

	The ID Selectors

	เป็นการ select ที่เลือกเฉพาะ id ที่กำหนด โดยการใส่เครื่องหมาย # แล้วตามด้วยชื่อไอดี ดังตัวอย่างด้านล่าง
#black{color:#000000;}

	ตัวอย่างนี้เป็นการ select id เหมือนกัน แต่ต่างกันตรงที่ จะ select id เฉพาะที่เป็นแท็ก h1 เท่านั้น
h1#black{color:#000000;}

	The Child Selectors

	เป็นการ select แท็กที่เป็นลูก เช่นตัวอย่าง จะ select แท็ก p ที่เป็นลูกของแท็ก body

body > p{color:#000000;}

	The Attribute Selectors

	เป็นการ select แท็กที่เพิ่มข้อจำกัดขึ้นมาอีกนั่นคือ select ตามชื่อของ attribute
input[type="text"]{color:#000000;}

	Grouping Selectors

	เป็นการ select แท็กต่าง ๆ เป็นกลุ่ม
h1, h2, h3
{
  color:#36C;
  font-weight:normal;
  letter-spacing:.4em;
  margin-bottom:1em; 
  text-transform:lowercase;
}
#content, #footer, #supplement
{
  position:absolute;
  left:510px;
  width:200px;
} 


	พอรู้วิธี Select กันไปคร่าว ๆ แล้ว นะครับ คราวหน้า ผมจะมาอธิบายวิธี กำหนด Property กับ Value กันต่อครับ