รูปแบบการเขียน style sheet

กฏการเขียน style sheet นั้นจะประกอบไปด้วยสองส่วนหลักๆ นั่นคือ selector ที่จะเป็นตัวบ่งบอกว่า element นั้นๆจะมีรูปแบบใด และ declaration ที่จะประกอบด้วย 1 ส่วนหรือมากกว่า เพื่อกำหนดรูปแบบให้ละเอียดและชัดเจน

h1 {color: red;}
สิ่งเพิ่มเติมที่ 7.1 ตัวอย่างการเขียน style โดยที่ h1 เค้าจะเรียกว่า selector ส่วน {color:red;}? ทั้งหมด เค้าจะเรียกว่า declaration? โดยที่จะมี color คือ property และ มี red เป็น value และที่สำคัญ property ทุกอันต้องปิดท้ายด้วย ; (Semicolon) เสมอ

h1 {color: red;
background: yellow;}
สิ่งเพิ่มเติมที่ 7.2 การเขียน style ที่มีหลาย property ซึ่งจะเห็นได้ว่าแต่ละ property จะต้องคั่นด้วย ; เพื่อเป็นการปิดคำสั่ง property นั้นเสมอๆ เช่น color: red; ก็จะถือเป็น 1 property เพราะว่าปิดด้วย ; (semicolon) แล้ว และ background: yellow; ก็จะถือเป็นอีก 1 property ด้วยเช่นกัน

การเขียน style
1.พิมพ์ selector โดยที่ selector นั้น จะสื่อถึง element ที่จะควบคุม format ซึ่งเราจะกล่าวถึงในบทต่อๆไป
2.พิมพ์ { (ปีกกาเปิด) เพื่อเริ่มต้นที่จะเขียนส่วน declaration
3.พิมพ์ property: value; โดยที่ property? คือชื่อของ css property ที่จะเป็นการบอกถึงการจัดรูปแบบในแบบต่างๆ ที่จะนำไปใช้ และ value คือ ค่าของ รูปแบบนั้นๆ เช่น property คือ กว้าง value จะเป็นค่าบอกว่ากว้างเท่าไร เป็นต้น ซึ่งรายละเอียดจะกล่าวในบทต่อๆไป
4. ทำซ้ำข้อ 3 อีกถ้าต้องการเพิ่ม property อื่นๆ
5.พิมพ์ } เพื่อปิด tag ทำให้เสร็จสมบูรณ์
เพิ่มเติม
- คุณสามารถใส่ ช่องว่างเยอะเท่าไนก็ได้ หรือ tab หรือขึ้นบรรทัดใหม่ก็ได้ ในแต่ละขั้นตอน
- ในขณะที่ใส่ property และ value แต่ละคู่แล้ว ต้องไม่ลืมปิดท้ายด้วย ; (semicolon) โดย semicolon จะเป็นตัวบอกการจบแต่ละ property แต่สำหรับ property สุดท้ายของ selector ใดๆนั้น จะไม่ใส่ก็ได้ แต่เราก็แนะนำว่าให้ใส่ไว้จะดีกว่า เพื่อจะได้ไม่ลืมเวลาหยิบมาเพิ่มเติมแก้ไข
- การไม่ใส่ semicolon หรือใส่ซ้ำ บาง browser จะไม่โหลด property นั้นขึ้นาใช้

No comments yet.
You must be logged in to post a comment.