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

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

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

User avatar
boo_kyoshii
PHP Super Member
PHP Super Member
Posts: 343
Joined: 02/08/2013 10:08 am

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

Post by boo_kyoshii » 17/08/2013 4:45 pm

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

รูปแบบคำสั่ง css มีองค์ประกอบอยู่ด้วยกัน 3 ส่วน คือ Selector , property , value จะกำหนดค่าอยู่ในส่วน Head
องค์ประกอบทั้ง 3 ส่วน
องค์ประกอบทั้ง 3 ส่วน
a1.jpg (24.01 KiB) Viewed 1245 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 (88.9 KiB) Viewed 1245 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 ไม่สามารถมองเห็น จะใช้เครื่องหมาย "/*" เป็นการเปิด และ "*/" เป็นการปิด
ตัวอย่าง Comment
ตัวอย่าง Comment
a3.jpg (17.84 KiB) Viewed 1245 times

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

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

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 10 guests