by boo_kyoshii » 17/08/2013 4:45 pm
css ย่อมาจาก Cascading Style Sheets เป็นภาษาเฉพาะ ใช้สำหรับตกแต่ง HTML/XHTML ให้มีสีสันสวยงาม
รูปแบบคำสั่ง css มีองค์ประกอบอยู่ด้วยกัน 3 ส่วน คือ Selector , property , value จะกำหนดค่าอยู่ในส่วน Head
- องค์ประกอบทั้ง 3 ส่วน
- a1.jpg (24.01 KiB) Viewed 1410 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 1410 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
- a3.jpg (17.84 KiB) Viewed 1410 times
วิธีนำ css มาใช้งาน มี 3 แบบ
--- inline Style คือการใช้คำสั่ง css เขียนกำกับไว้ใน HTML tag ไม่นิยมใช้ เพราะยากในการอ่าน และแก้ไข
- ตัวอย่างวิธีเขียนแบบ inline Style
- a4.jpg (72.46 KiB) Viewed 1410 times
--- Internal Style Sheet คือการใช้สไตล์ที่เก็บอยู่ภายในเว็บเพจนั้น ดีกว่าแบบ inline แต่ก็ยังมีข้อเสียอยู่ เพราะจะทำให้ส่วนหัว(head) โตทำให้โหลดช้าและหนักไฟล์
- ตัวอย่างวิธีเขียนแบบ Internal Style Sheet
- a5.jpg (66.07 KiB) Viewed 1410 times
--- External Style Sheet คือการนำสไตล์ที่เก็บอยู่ในไฟล์ .css เข้ามาใช้บนเว็บเพจ วิธีนี้นิยมใช้กันมาก เพราะง่ายต่อการใช้งาน เพียงเราสร้าง Style Sheet ที่ต้องการแล้ว Save เป็น .css ก็สามาเรียกใช้งานได้ทุกครั้งที่เราต้องการ แต่ก่อนที่เราจะใช้งานไฟล์ .css ได้นั้นเราต้องทีการแทรกโค้ดลงไปในหน้าเว็บเพจก่อน โดยโค้ดที่ใช้คือ
- ตัวอย่างวิธีเขียนแบบ External Style Sheet และ Code ที่เรียกใช้ไฟล์ .css
- a6.jpg (98.1 KiB) Viewed 1410 times
[b][size=200][color=#000000]css[/color][/size][/b] ย่อมาจาก Cascading Style Sheets เป็นภาษาเฉพาะ ใช้สำหรับตกแต่ง HTML/XHTML ให้มีสีสันสวยงาม
รูปแบบคำสั่ง css มีองค์ประกอบอยู่ด้วยกัน 3 ส่วน คือ Selector , property , value จะกำหนดค่าอยู่ในส่วน Head
[attachment=5]a1.jpg[/attachment]
[b][color=#FF00FF][size=125]Selector[/size][/color][/b] คือ ชื่อของสไตล์ สามารถเป็น HTML Tag ต่างๆ เช่น <body>, <p> หรือเป็น Class หรือ ID ที่เราตั้งชื่อให้ก็ได้
[b]>>> HTML Tag[/b] เช่น P , Form , table , h1 เป็นต้น
[b]>>> ID[/b] เป็นคำสั่งเพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง โดยใช้ [b]#[/b] นำหน้า ID
เช่น #chapter , #bro01 , #tb1 เป็นต้น
[b]>>> Class [/b] ใช้เมื่อต้องการแสดงผลรูปแบบนั้นซ้ำหลายๆ ครั้ง โดยมีเครื่องหมาย [b].[/b] นำหน้าชื่อ class
เช่น .note , .special , .topic เป็นต้น
**( ID กับ Class ต่างกันตรงที่ ID ไม่สามารถตั้งชื่อซ่ำกันได้ใน 1 Page แต่ Class สามารถตั้งชื่อซ่ำกันได้ )[attachment=4]a2.jpg[/attachment]
[b][color=#008000][size=125]property[/size][/color][/b] คือ คุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color กำหนดสี, font-size กำหนดขนาดตัวอักษร, Backgroud กำหนดพื้นหลัง , Text กำหนดข้อความ เป็นต้น
[b][color=#0040FF][size=125]value[/size][/color][/b] เป็นค่าที่เรากำหนดให้กับ property ต่างๆ (กว้าง, ยาว, สูง, สี, ตำแหน่ง) เช่น color:white, font-size:14px แยกออกได้ 3 ประเภท
[b]>>> Absolute Length (ค่าแบบตายตัว)[/b] พวกหน่วยวัด นิ้ว , เมตร , ตารางเมตร
[b]>>> Relative Length (ค่าแบบอัตราส่วน)[/b] ใช้ใน Bootstrap พวกเปอร์เซ็นต์ % เช่น 50%, 130% หรือ word ข้อความหรือคำ เช่น pixels
[b]>>> Color[/b] ค่าของสี ใส่ได้ทั้ง[u]ชื่อตรงตัว[/u] (red, black) [u]ค่าสีRGB[/u](rgb(0,255,0)) และ [u]รหัสค่าสีฐาน16[/u] (#0000FF)
[b]>> [color=#00BFBF]Comment[/color] <<[/b] เป็นการเขียนบรรยายเพื่อเตือนความจำ หรือ เพื่ออธิบายคำสั่งนั้นๆ โดยที่ user ไม่สามารถมองเห็น จะใช้เครื่องหมาย "[b]/*[/b]" เป็นการเปิด และ "[b]*/[/b]" เป็นการปิด[attachment=3]a3.jpg[/attachment]
[b][u][color=#BF00FF]วิธีนำ css มาใช้งาน มี 3 แบบ[/color][/u][/b]
[b]--- inline Style[/b] คือการใช้คำสั่ง css เขียนกำกับไว้ใน HTML tag ไม่นิยมใช้ เพราะยากในการอ่าน และแก้ไข [attachment=2]a4.jpg[/attachment]
[b]--- Internal Style Sheet[/b] คือการใช้สไตล์ที่เก็บอยู่ภายในเว็บเพจนั้น ดีกว่าแบบ inline แต่ก็ยังมีข้อเสียอยู่ เพราะจะทำให้ส่วนหัว(head) โตทำให้โหลดช้าและหนักไฟล์[attachment=1]a5.jpg[/attachment]
[b]--- External Style Sheet[/b] คือการนำสไตล์ที่เก็บอยู่ในไฟล์ .css เข้ามาใช้บนเว็บเพจ วิธีนี้นิยมใช้กันมาก เพราะง่ายต่อการใช้งาน เพียงเราสร้าง Style Sheet ที่ต้องการแล้ว Save เป็น .css ก็สามาเรียกใช้งานได้ทุกครั้งที่เราต้องการ แต่ก่อนที่เราจะใช้งานไฟล์ .css ได้นั้นเราต้องทีการแทรกโค้ดลงไปในหน้าเว็บเพจก่อน โดยโค้ดที่ใช้คือ [attachment=0]a6.jpg[/attachment]
Log in with LINE