property

Tag: property

เรียนรู้การใช้งาน CSS Generated Content

สวัสดีชาว ThaiCSS ทั้งขาประจำและขาจร บทความนี้เป็นบทความแรก แหวก ชิมิ๊ ของผมหลังจากที่ติดตามเว็บนี้มากว่า 5 ปี ในบทความนี้ผมจะพูดถึงเรื่องการ Generated Content ด้วย Properties “Content” นะครับ โดย Properties นี้ผมมองว่าค่อนข้างมีประโยชน์มาก แต่ยังไม่ค่อยถูกนำมาใช้งาน ผมขอยกตัวอย่างมาให้ดูว่าเราสามารถนำไปใช้งานยังไงได้บ้าง

คุณสมมัติต่างๆ มีดังนี้

  1. <string>หมายถึง การกำหนด Text ที่เราต้องการแสดง
  2. <uri>หมายถึง การเรียกรูปหรือไฟล์ที่เราต้องการให้แสดงผลออกมาโดยอัตโนมัติ
  3. <counter>หมายถึง การแสดงจำนวนที่เรานับโดยการระบุชื่อเนื้อหาให้ตรงกับที่เราตั้งค่าไว้จาก counter-reset* และเราสามารถกำหนดสไตล์แบบ List-Style ได้ด้วย
  4. open-quote and close-quoteหมายถึง การเปิดและปิดเครื่องหมายคำพูดในกรณีที่เราต้องการใช้งานในลักษณะของ Quote
  5. no-open-quote and no-close-quoteหมายถึง การสั่งยังไม่ให้ปิด Quote แต่ให้จำค่าไว้และอ้างอิงการปิดหรือเปิด Quote ก่อนหน้านี้
  6. attr(X)หมายถึง การดึงเนื้อหาจาก Attribute ที่เรากำหนดมาแสดงผลโดยอัตโนมัติ

CSS3 Color และ Opacity (CSS3 Color Module)

หลังจากที่ห่างหายไปกับการพูดถึงเรื่องของ Module ที่เกี่ยวข้องโดยตรงกับ Properties และ Values ของ CSS กันไปเป็นระยะเวลานานพอสมควร อาจเป็นเพราะผมยังมองว่าเรายังเข้าใจหลักการเขียน Selectors กันแบบถูกน้อย ถูกน้อยมากกันอยู่ จึงมัววุ่นอยู่แต่กับ Selector ซึ่งก็ยังพูดกันไม่หมดอยู่ดี แต่การกระโดดไกลแบบเขย่ง ก้าว กระโดดของ User Agents ทั้งหลาย ทำให้ผมไม่สามารถรีรอที่จะพูดถึงความสามารถต่าง ต่าง ที่เป็นส่วนประกอบ (Property) ของ CSS3 ได้อีกต่อไป

ขอเริ่มกันที่ CSS3 Color Module นะครับ เพราะผมเห็นว่า Module นี้ User Agents ที่เป็น Browser ทั้งหลายนั้นได้รองรับกันหลายเจ้าพอสมควร และอีกอย่าง เพื่อต้อนรับการมาถึงของ IE9 ที่กำลังเดินทางมาจากกาแล๊กซี่อันไกลโพ้น

เริ่มเขียน CSS | selector { property: value;}

Selector

คือส่งแรกที่สุดที่ควรรู้ แล้วคืออะไรหว่า ชื่อคลาส ชื่อไอดี หรือ [X]HTML tag ใดๆ ใน CSS นั้น เรียกว่า Selector ครับ

โดย คลาส นั้นใช้ . (ดอท) ในการบ่งบอกว่าเป็นคลาส ส่วน ไอดี นั้นใช้ # (ชาร์พ) เป็นตัวบอกว่านี่คือไอดีนะ ส่วน html tag หรือ ใส่มันลงไปโต้งๆ เลยครับ เช่น body (ส่วนของ body) หรือ img (รูปภาพ)

Property

คือชื่อคุณสมบัติของ css เช่น width, height, position ฯลฯ

Values

คือค่าของ property นั้นๆ ครับ เช่น 500px สำหรับความกว้าง

Back to Top