สรุปเนื้อหา CSS เบื่องต้น
โพสต์แล้ว: 17/08/2013 4:45 pm
css ย่อมาจาก Cascading Style Sheets เป็นภาษาเฉพาะ ใช้สำหรับตกแต่ง HTML/XHTML ให้มีสีสันสวยงาม
รูปแบบคำสั่ง css มีองค์ประกอบอยู่ด้วยกัน 3 ส่วน คือ Selector , property , value จะกำหนดค่าอยู่ในส่วน Head
Selector คือ ชื่อของสไตล์ สามารถเป็น HTML Tag ต่างๆ เช่น <body>, <p> หรือเป็น Class หรือ ID ที่เราตั้งชื่อให้ก็ได้
>>> HTML Tag เช่น P , Form , table , h1 เป็นต้น
>>> ID เป็นคำสั่งเพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง โดยใช้ # นำหน้า ID
เช่น #chapter , #bro01 , #tb1 เป็นต้น
>>> Class ใช้เมื่อต้องการแสดงผลรูปแบบนั้นซ้ำหลายๆ ครั้ง โดยมีเครื่องหมาย . นำหน้าชื่อ class
เช่น .note , .special , .topic เป็นต้น
**( ID กับ Class ต่างกันตรงที่ ID ไม่สามารถตั้งชื่อซ่ำกันได้ใน 1 Page แต่ Class สามารถตั้งชื่อซ่ำกันได้ )
property คือ คุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color กำหนดสี, font-size กำหนดขนาดตัวอักษร, Backgroud กำหนดพื้นหลัง , Text กำหนดข้อความ เป็นต้น
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 ไม่สามารถมองเห็น จะใช้เครื่องหมาย "/*" เป็นการเปิด และ "*/" เป็นการปิด
วิธีนำ css มาใช้งาน มี 3 แบบ
--- inline Style คือการใช้คำสั่ง css เขียนกำกับไว้ใน HTML tag ไม่นิยมใช้ เพราะยากในการอ่าน และแก้ไข
--- Internal Style Sheet คือการใช้สไตล์ที่เก็บอยู่ภายในเว็บเพจนั้น ดีกว่าแบบ inline แต่ก็ยังมีข้อเสียอยู่ เพราะจะทำให้ส่วนหัว(head) โตทำให้โหลดช้าและหนักไฟล์
--- External Style Sheet คือการนำสไตล์ที่เก็บอยู่ในไฟล์ .css เข้ามาใช้บนเว็บเพจ วิธีนี้นิยมใช้กันมาก เพราะง่ายต่อการใช้งาน เพียงเราสร้าง Style Sheet ที่ต้องการแล้ว Save เป็น .css ก็สามาเรียกใช้งานได้ทุกครั้งที่เราต้องการ แต่ก่อนที่เราจะใช้งานไฟล์ .css ได้นั้นเราต้องทีการแทรกโค้ดลงไปในหน้าเว็บเพจก่อน โดยโค้ดที่ใช้คือ
รูปแบบคำสั่ง css มีองค์ประกอบอยู่ด้วยกัน 3 ส่วน คือ Selector , property , value จะกำหนดค่าอยู่ในส่วน Head
- องค์ประกอบทั้ง 3 ส่วน
- a1.jpg (24.01 KiB) Viewed 2302 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 2302 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 2302 times
วิธีนำ css มาใช้งาน มี 3 แบบ
--- inline Style คือการใช้คำสั่ง css เขียนกำกับไว้ใน HTML tag ไม่นิยมใช้ เพราะยากในการอ่าน และแก้ไข
- ตัวอย่างวิธีเขียนแบบ inline Style
- a4.jpg (72.46 KiB) Viewed 2302 times
- ตัวอย่างวิธีเขียนแบบ Internal Style Sheet
- a5.jpg (66.07 KiB) Viewed 2302 times
- ตัวอย่างวิธีเขียนแบบ External Style Sheet และ Code ที่เรียกใช้ไฟล์ .css
- a6.jpg (98.1 KiB) Viewed 2302 times