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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
boo_kyoshii
PHP Super Member
PHP Super Member
โพสต์: 343
ลงทะเบียนเมื่อ: 02/08/2013 10:08 am

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

โพสต์โดย boo_kyoshii » 17/08/2013 4:45 pm

css ย่อมาจาก Cascading Style Sheets เป็นภาษาเฉพาะ ใช้สำหรับตกแต่ง HTML/XHTML ให้มีสีสันสวยงาม

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

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) เปิดดู 1177 ครั้ง


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) เปิดดู 1177 ครั้ง



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

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


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


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

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 12 และ บุคคลทั่วไป 0 ท่าน