โดย boo_kyoshii » 08/08/2013 5:35 pm
CSS ย่อมาจาก
Cascading Style Sheets เป็นภาษาเฉพาะ และถูกกำหนดมาตรฐานโดย W3C
ใช้สำหรับตกแต่งเอกสาร HTML/XHTML ให้มีหน้าตา สีสัน ตัวอักษร พื้นหลีง ระยะห่าง ฯลฯ
อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น <body>,<p>,<h1> เป็นต้น
ลักษณะการใช้งาน css แบ่งออกเป็น
--
External Style Sheet คือการนำสไตล์ที่เก็บอยู่ในไฟล์ .css เข้ามาใช้บนเว็บเพจ
--
Internal Style Sheet คือการใช้สไตล์ที่เก็บอยู่ภายในเว็บเพจนั้น
--
inline Style คือการใช้คำสั่ง css กำกับไว้กับแท๊ก HTML
รูปแบบคำสั่ง css ที่ใช้กำหนดคุณสมบัติของสไตล์ประกอบกัน 2 ส่วนคือ
1. Selector คือชื่อของสไตล์ สามารถเป็น HTML Tag ต่างๆ เช่น <body>, <p> หรือเป็น Class name หรือ ID ที่เราตั้งชื่อให้ก็ได้
2. Declaration เป็นส่วนที่กำหนดว่าสไตล์นี้มีรูปแบบอะไร
ซึ่งประกอบไปด้วยคุณสมบัติ
(Property) และค่าของคุณสมบัตินั้น
(Value)
-
property คือ คุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color สำหรับกำหนดสี, font-size สำหรับกำหนดขนาดตัวอักษร
-
value เป็น ค่า ที่เรากำหนดให้กับ property ต่างๆ เช่น color:white, font-size:14px
- css.jpg (38.04 KiB) Viewed 966 times
การแทรกโค้ดเพื่อดึงไฟล์ css มาใช้งาน
ก่อนที่เราจะใช้งานไฟล์ css ได้นั้นเราต้องทีการแทรกโค้ดลงไปในหน้าเว็บเพจก่อน โดยโค้ดที่ใช้คือ
- การแทรโค้ด.jpg (17.39 KiB) Viewed 966 times
CSS ย่อมาจาก [color=#0000BF][b]Cascading Style Sheets[/b][/color] เป็นภาษาเฉพาะ และถูกกำหนดมาตรฐานโดย W3C
ใช้สำหรับตกแต่งเอกสาร HTML/XHTML ให้มีหน้าตา สีสัน ตัวอักษร พื้นหลีง ระยะห่าง ฯลฯ
อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น <body>,<p>,<h1> เป็นต้น
[b]ลักษณะการใช้งาน css แบ่งออกเป็น[/b]
--[b][color=#0080FF]External Style Sheet[/color][/b] คือการนำสไตล์ที่เก็บอยู่ในไฟล์ .css เข้ามาใช้บนเว็บเพจ
--[b][color=#0080FF]Internal Style Sheet[/color][/b] คือการใช้สไตล์ที่เก็บอยู่ภายในเว็บเพจนั้น
--[b][color=#0080FF]inline Style[/color][/b] คือการใช้คำสั่ง css กำกับไว้กับแท๊ก HTML
รูปแบบคำสั่ง css ที่ใช้กำหนดคุณสมบัติของสไตล์ประกอบกัน 2 ส่วนคือ
[b]1. [color=#BF00FF]Selector[/color] [/b]คือชื่อของสไตล์ สามารถเป็น HTML Tag ต่างๆ เช่น <body>, <p> หรือเป็น Class name หรือ ID ที่เราตั้งชื่อให้ก็ได้
[b]2. [color=#BF00FF]Declaration[/color] [/b]เป็นส่วนที่กำหนดว่าสไตล์นี้มีรูปแบบอะไร
ซึ่งประกอบไปด้วยคุณสมบัติ [b](Property)[/b] และค่าของคุณสมบัตินั้น [b](Value)[/b]
- [color=#FF00BF][b]property[/b][/color] คือ คุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color สำหรับกำหนดสี, font-size สำหรับกำหนดขนาดตัวอักษร
- [color=#FF00FF][b]value[/b][/color] เป็น ค่า ที่เรากำหนดให้กับ property ต่างๆ เช่น color:white, font-size:14px
[attachment=0]css.jpg[/attachment]
[b][u]การแทรกโค้ดเพื่อดึงไฟล์ css มาใช้งาน[/u][/b]
ก่อนที่เราจะใช้งานไฟล์ css ได้นั้นเราต้องทีการแทรกโค้ดลงไปในหน้าเว็บเพจก่อน โดยโค้ดที่ใช้คือ
[attachment=1]การแทรโค้ด.jpg[/attachment]