CSS ย่อมาจากคำว่า Cascading Style Sheets บางทีอาจจะเรียกว่า Style Sheets หรือ CSS ซึ่งจริงๆ แล้วมันคือตัวเดียวกัน

 

การทำงานของ CSS จะทำงานร่วมกับ HTML ใช้กำหนดการแสดงผลของสิ่งต่างๆ บนเว็บ เช่น สีอักษร สีพื้นหลัง ขนาดตัวอักษร จัดการเลย์เอ้าท์ (Layout) ให้สวยงามและอื่นๆ

 

ประโยชน์ของ CSS

 

1. CSS มีคุณสมบัติมากกว่า tag ของ html เช่นการกำหนดกรอบให้ข้อความ รวมทั้งสีรูปแบบของข้อความ
2. ทำให้ขนาดไฟล์แต่ละหน้าเล็กลงกว่าเดิม เพราะใช้โค้ดน้อยกว่า
3. มีความยืดหยุ่นสูง… ในการปรับแต่งแก้ไขในอนาคต
4. สามารถกำหนดแยกไว้ต่างหากจากไฟล์เอกสาร html และสามารถนำมาใช้ร่วมกับเอกสารหลายไฟล์ได้
5. การแก้ไขไฟล์เพียงจุดเดียว แต่ส่งผลกับเอกสารทั้งหมดได้ ไม่ต้องไล่ตามแก้ tag ต่างๆ ทั่วทั้งเอกสาร
6. สามารถจัดการเลย์เอ้าท์ได้อย่างละเอียด แม่นยำ
7. ง่ายในการเรียกดู Source
8. ใช้ดีกับระบบเสิร์ชเอ็นจิ้น (search engine) ต่างๆ
9. CSS จะช่วยให้งานที่มีขนาดใหญ่ควบคุมได้ง่ายดาย
10. และอื่นๆ

 

 

ตัวอย่างการใช้งาน

 

การสร้าง Style Sheet ทำได้โดยใช้แท็ก <STYLE TYPE=”text/css”>…</STYLE> และภายในแท็กเราก็ใส่ Style Sheet ของเราลงไป

 

ตัวอย่างโค้ด

 

<STYLE TYPE=”text/css”>
body {background:black; color:red }
h1 { font-size:15pt; font-family:tahoma }

</STYLE>

 

จากตัวอย่างข้างต้น selector ตัวแรกคือ body มีการกำหนด property 2 ตัวคือ background และ color และ selector อีกตัวคือ h1 ที่ถูกกำหนดฟอนต์ และขนาด

 

ข้อควรระวังในการใช้ CSS

 

โปรแกรมเบราว์เซอร์ (Browser) บางค่ายอาจไม่สามารถรองรับคำสั่ง CSS ได้ ดังนั้น ก่อนใช้งาน CSS จึงควรมีการทดสอบทุกครั้ง เพื่อให้ได้งานตามต้องการ

 

เกร็ดความรู้

 

ต้องระวังเคาะเว้นวรรคในตอนประกาศค่า value ด้วย ถ้าเกิดเราประกาศค่าตามนี้

 

โค้ด
p {margin-left: 20px}

 

โค้ดด้านบนนี้เป็นการประกาศที่ถูกต้อง ซึ่งจะมีผลทำให้โค้ดนี้ทำงานได้กับทุกเบราว์เซอร์ แต่ถ้าเราเผลอไปเว้นวรรคในส่วนของหน่วย ซึ่งในที่นี่เป็น px มันก็จะทำให้เกิดข้อแตกต่างทันที

 

โค้ด
p {margin-left: 20 px}

 

โค้ดด้านบนนี้จะทำงานแค่กับ IE เท่านั้น แต่จะไม่ทำงานกับ Firefox และ Netscape จึงต้องระวังการเคาะเว้นวรรคให้ดี…

Comments are closed.

Post Navigation