Page 1 of 1

สรุปเนื้อหา CSS เบื่องต้น

Posted: 17/08/2013 4:45 pm
by boo_kyoshii
css ย่อมาจาก Cascading Style Sheets เป็นภาษาเฉพาะ ใช้สำหรับตกแต่ง HTML/XHTML ให้มีสีสันสวยงาม

รูปแบบคำสั่ง css มีองค์ประกอบอยู่ด้วยกัน 3 ส่วน คือ Selector , property , value จะกำหนดค่าอยู่ในส่วน Head
a1.jpg
องค์ประกอบทั้ง 3 ส่วน
a1.jpg (24.01 KiB) Viewed 1214 times

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 สามารถตั้งชื่อซ่ำกันได้ )
a2.jpg
ตัวอย่างการใช้โค้ด
a2.jpg (88.9 KiB) Viewed 1214 times


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 ไม่สามารถมองเห็น จะใช้เครื่องหมาย "/*" เป็นการเปิด และ "*/" เป็นการปิด
a3.jpg
ตัวอย่าง Comment
a3.jpg (17.84 KiB) Viewed 1214 times



วิธีนำ css มาใช้งาน มี 3 แบบ

--- inline Style คือการใช้คำสั่ง css เขียนกำกับไว้ใน HTML tag ไม่นิยมใช้ เพราะยากในการอ่าน และแก้ไข
a4.jpg
ตัวอย่างวิธีเขียนแบบ inline Style
a4.jpg (72.46 KiB) Viewed 1214 times


--- Internal Style Sheet คือการใช้สไตล์ที่เก็บอยู่ภายในเว็บเพจนั้น ดีกว่าแบบ inline แต่ก็ยังมีข้อเสียอยู่ เพราะจะทำให้ส่วนหัว(head) โตทำให้โหลดช้าและหนักไฟล์
a5.jpg
ตัวอย่างวิธีเขียนแบบ Internal Style Sheet
a5.jpg (66.07 KiB) Viewed 1214 times


--- External Style Sheet คือการนำสไตล์ที่เก็บอยู่ในไฟล์ .css เข้ามาใช้บนเว็บเพจ วิธีนี้นิยมใช้กันมาก เพราะง่ายต่อการใช้งาน เพียงเราสร้าง Style Sheet ที่ต้องการแล้ว Save เป็น .css ก็สามาเรียกใช้งานได้ทุกครั้งที่เราต้องการ แต่ก่อนที่เราจะใช้งานไฟล์ .css ได้นั้นเราต้องทีการแทรกโค้ดลงไปในหน้าเว็บเพจก่อน โดยโค้ดที่ใช้คือ
a6.jpg
ตัวอย่างวิธีเขียนแบบ External Style Sheet และ Code ที่เรียกใช้ไฟล์ .css
a6.jpg (98.1 KiB) Viewed 1214 times