สอน CSS | รูปแบบการเขียน CSS หรือ Syntax CSS #1

จากตอนที่แล้วผมได้เกริ่นไป เกี่ยวกับ CSS คืออะไร ซึ่งทำให้สามารถพอจะเข้าใจในภาพรวมได้ว่า CSS สามารถปรับแต่งเว็บของเราให้สวยได้ง่ายๆเลยน่ะ ในบทนี้ผมจะแนะนำเกี่ยวกับโครงสร้างในการเขียน CSS กัน  

 รูปแบบการเขียน CSS หรือ Syntax CSS

  • Selector
  • Declaration

 รูปแบบการเขียน CSS หรือ Syntax CSS

Selector คือ ตำแหน่งหรือจุดที่ HTML element อยู่แล้วเราต้องการกำหนดสไตล์ หรือ CSS เช่น
ข้อความส่วนหัว h1,h2,h3…n   <h1>head title</h1>   พารากราฟ(paragraph) <p>paragraph</p> และนี้คือ selector ตัวอย่างที่เราต้องการใส่ CSS เข้าไป

Declaration คือ ตำแหน่งที่เราต้องการกำหนดลักษณะของสไตล์นั้นเอง ประกอบไปด้วย property และ value ซึ่งถ้ามีหลายๆ property ก็จำเป็นต้องคั่นด้วย เซมิโคลอน ( ; ) คั่นไปเรื่อยๆ

    • property เช่น กำหนดฟอนต์ font-size จัดข้อความให้อยู่ตรงกลาง text-align เป็นต้น

 

  • value คือค่าของ property เช่น font-size : 16px  ; text-align : center เป็นต้น

สรุป

ในบทนี้เรารู้จักถึงโครงสร้างหรือรูปแบบการเขียน CSS ที่ถูกต้อง ซึ่งมันจะประกอบด้วย  Selector กับ Declaration และใน  Declaration ประกอบด้วย property และ value  ถ้าเข้าใจถึงโครงของมันแล้ว เขียนให้ถูกหลัก มันก็ไม่ได้ยากแล้วล่ะครับ ส่วนบทถัดไปเราจะมาเจาะลึกเกี่ยวกับ Selector กันว่ามีวิธีใช้กี่วิธี อะไรบ้าง.

Hasan Lebaesa

เริ่มทำงานกับ Web Agency กทม. ลาออกมาทำฟรีแลนซ์เต็มตัว และลาออกจากการเป็นฟรีแลนซ์ ก่อตั้งบริษัท, ปี 2019 ตั้งเป้าไว้ว่า จะเขียนบทความดีๆ วีคละ 1 บทความ.