รูปแบบคำสั่ง css มีองค์ประกอบอยู่ด้วยกัน 3 ส่วน คือ Selector , property , value จะกำหนดค่าอยู่ในส่วน Head
- องค์ประกอบทั้ง 3 ส่วน
- a1.jpg (24.01 KiB) Viewed 2297 times
>>> HTML Tag เช่น P , Form , table , h1 เป็นต้น
>>> ID เป็นคำสั่งเพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง โดยใช้ # นำหน้า ID
เช่น #chapter , #bro01 , #tb1 เป็นต้น
>>> Class ใช้เมื่อต้องการแสดงผลรูปแบบนั้นซ้ำหลายๆ ครั้ง โดยมีเครื่องหมาย . นำหน้าชื่อ class
เช่น .note , .special , .topic เป็นต้น
**( ID กับ Class ต่างกันตรงที่ ID ไม่สามารถตั้งชื่อซ่ำกันได้ใน 1 Page แต่ Class สามารถตั้งชื่อซ่ำกันได้ )
- ตัวอย่างการใช้โค้ด
- a2.jpg (88.9 KiB) Viewed 2297 times
value เป็นค่าที่เรากำหนดให้กับ property ต่างๆ (กว้าง, ยาว, สูง, สี, ตำแหน่ง) เช่น color:white, font-size:14px แยกออกได้ 3 ประเภท
>>> Absolute Length (ค่าแบบตายตัว) พวกหน่วยวัด นิ้ว , เมตร , ตารางเมตร
>>> Relative Length (ค่าแบบอัตราส่วน) ใช้ใน Bootstrap พวกเปอร์เซ็นต์ % เช่น 50%, 130% หรือ word ข้อความหรือคำ เช่น pixels
>>> Color ค่าของสี ใส่ได้ทั้งชื่อตรงตัว (red, black) ค่าสีRGB(rgb(0,255,0)) และ รหัสค่าสีฐาน16 (#0000FF)
>> Comment << เป็นการเขียนบรรยายเพื่อเตือนความจำ หรือ เพื่ออธิบายคำสั่งนั้นๆ โดยที่ user ไม่สามารถมองเห็น จะใช้เครื่องหมาย "/*" เป็นการเปิด และ "*/" เป็นการปิด
- ตัวอย่าง Comment
- a3.jpg (17.84 KiB) Viewed 2297 times
วิธีนำ css มาใช้งาน มี 3 แบบ
--- inline Style คือการใช้คำสั่ง css เขียนกำกับไว้ใน HTML tag ไม่นิยมใช้ เพราะยากในการอ่าน และแก้ไข
- ตัวอย่างวิธีเขียนแบบ inline Style
- a4.jpg (72.46 KiB) Viewed 2297 times
- ตัวอย่างวิธีเขียนแบบ Internal Style Sheet
- a5.jpg (66.07 KiB) Viewed 2297 times
- ตัวอย่างวิธีเขียนแบบ External Style Sheet และ Code ที่เรียกใช้ไฟล์ .css
- a6.jpg (98.1 KiB) Viewed 2297 times