CSS (Cascading Style Sheets) คือภาษาโปรแกรมที่ใช้ในการกำหนดรูปแบบและการจัดวางขององค์ประกอบบนหน้าเว็บเพจ มันทำงานร่วมกับ HTML ซึ่งเป็นภาษาที่ใช้ในการสร้างโครงสร้างพื้นฐานของเว็บเพจ (เช่น ข้อความ ภาพ ลิงก์) แต่ HTML ไม่สามารถทำให้เว็บเพจดูดีหรือเป็นระเบียบได้เพียงอย่างเดียว CSS จึงเข้ามามีบทบาทในการจัดรูปแบบและทำให้เว็บเพจดูสวยงามและมีความน่าสนใจ
โครงสร้างของ CSS
CSS ใช้ “กฎ” (Rules) เพื่อบอกว่าองค์ประกอบ HTML ใดจะได้รับรูปแบบอย่างไร กฎแต่ละกฎประกอบไปด้วยสองส่วนหลัก
ตัวเลือก (Selector) ระบุว่าองค์ประกอบใดใน HTML ที่จะถูกปรับแต่ง
คุณสมบัติ (Property) และค่า (Value) เป็นคู่ข้อมูลที่กำหนดว่าจะเปลี่ยนลักษณะขององค์ประกอบอย่างไร
ตัวอย่าง
h1 {
color: blue;
font-size: 24px;
}
ในตัวอย่างนี้ h1 เป็น selector ที่บอกว่าให้เปลี่ยนแปลงรูปแบบของหัวข้อ h1 โดยมีการเปลี่ยนสีเป็นสีฟ้า (color: blue;) และขนาดของตัวอักษรเป็น 24 พิกเซล (font-size: 24px;)
การทำงานของ CSS
CSS ทำงานในลักษณะของการ “Cascade” หรือการไหลซ้อน ซึ่งหมายความว่าหากมีกฎหลายกฎที่ใช้กับองค์ประกอบเดียวกัน CSS จะใช้กฎที่มีลำดับความสำคัญมากที่สุดก่อน นอกจากนี้ยังสามารถสืบทอด (inherit) คุณสมบัติบางอย่างจากองค์ประกอบที่เป็นบรรพบุรุษได้ เช่น ขนาดฟอนต์ หรือสีที่ใช้
หน้าที่และความสำคัญของ CSS
- การจัดรูปแบบหน้าเว็บ CSS ช่วยให้เว็บเพจมีสีสัน ขนาดฟอนต์ การจัดวางองค์ประกอบ และเอฟเฟกต์ต่างๆ ที่ทำให้ดูสวยงาม
- แยกการออกแบบออกจากโครงสร้าง CSS แยกการจัดการรูปแบบและโครงสร้างออกจากกัน ซึ่งทำให้โค้ด HTML สะอาดขึ้นและง่ายต่อการบำรุงรักษา
- รองรับการออกแบบตอบสนอง (Responsive Design) CSS สามารถปรับหน้าเว็บให้แสดงผลได้ดีบนอุปกรณ์ทุกขนาดหน้าจอ เช่น มือถือ แท็บเล็ต และคอมพิวเตอร์
- ปรับปรุงประสิทธิภาพและความเร็วของเว็บไซต์ การใช้ CSS อย่างถูกวิธีสามารถทำให้การโหลดหน้าเว็บเร็วขึ้น เนื่องจากไม่ต้องโหลดรูปภาพหรือองค์ประกอบกราฟิกเพื่อสร้างรูปแบบ
วิธีการใช้งาน CSS
CSS สามารถนำมาใช้งานได้ 3 วิธีหลัก
1.Inline CSS: เขียน CSS ภายในแท็ก HTML โดยตรง เช่น
<h1 style="color: blue;">สวัสดีครับ</h1>
2.Internal CSS: เขียน CSS ภายในไฟล์ HTML โดยใช้แท็ก <style> ในส่วน <head> เช่น
<style>
h1 {
color: blue;
}
</style>
3.External CSS: ใช้ไฟล์ CSS แยกออกมาแล้วเรียกใช้ภายในไฟล์ HTML ด้วยการใช้แท็ก <link> เช่น
<link rel="stylesheet" href="styles.css">
CSS เป็นเครื่องมือที่มีความยืดหยุ่นและทรงพลังในการทำให้หน้าเว็บดูดีขึ้น สร้างความเป็นมืออาชีพ และรองรับการแสดงผลในอุปกรณ์หลากหลาย