CSS แบบอินไลน์ (Inline CSS) ใช้สำหรับกำหนดสไตล์ CSS โดยตรงภายในแท็ก HTML ขององค์ประกอบ แอตทริบิวต์ style ของ HTML ใช้ตั้งค่าสไตล์ขององค์ประกอบนั้น กฎ CSS แบบอินไลน์จะมีความสำคัญสูงกว่าสไตล์จากแหล่งอื่น เนื่องจากถูกนำไปใช้กับองค์ประกอบโดยตรง
บทนำเกี่ยวกับ CSS และวิธีการเพิ่มสไตล์
ภาษา HTML ใช้สำหรับกำหนดโครงสร้างของหน้าเว็บ ส่วน CSS (Cascading Style Sheets) ให้คุณสามารถเพิ่มสไตล์เฉพาะตัวให้กับองค์ประกอบ HTML ได้ ทำให้คุณสามารถปรับแต่งรูปลักษณ์ขององค์ประกอบต่างๆ บนหน้าเว็บ มี 3 วิธีหลักในการเพิ่ม CSS ลงในหน้าเว็บ ได้แก่
- CSS แบบอินไลน์ (Inline CSS) – ใช้สำหรับกำหนดสไตล์เฉพาะองค์ประกอบเดี่ยว
- CSS แบบภายใน (Internal CSS) – ใช้แท็ก
<style>ภายในไฟล์ HTML เพื่อกำหนดสไตล์ - CSS แบบภายนอก (External CSS) – สร้างไฟล์ CSS แยกต่างหากเพื่อจัดเก็บสไตล์ทั้งหมด
บทความนี้จะเน้นไปที่ CSS แบบอินไลน์ รวมถึงไวยากรณ์และวิธีการใช้งาน
พื้นฐาน CSS
CSS ถูกนำเสนอในปี 1996 ทำให้สามารถแยกการนำเสนอ (presentation) ออกจากเนื้อหา (content) ของเว็บไซต์ได้ ใช้ CSS คุณสามารถเพิ่มสไตล์ให้หน้าเว็บและนำไปใช้กับองค์ประกอบเฉพาะได้อย่างง่ายดาย
คู่มือ CSS แบบอินไลน์
CSS แบบอินไลน์ ใช้สำหรับกำหนดสไตล์ให้กับองค์ประกอบ HTML โดยตรง คุณต้องระบุสไตล์สำหรับแต่ละองค์ประกอบที่ต้องการปรับแต่ง ซึ่งเป็นทางเลือกแทนการใช้ selector เพื่อเลือกองค์ประกอบ
ตัวอย่างเช่น ถ้าคุณต้องการเปลี่ยนสีหรือขนาดฟอนต์ของย่อหน้าเดียวบนหน้าเว็บ แทนที่จะเขียนกฎในไฟล์สไตล์แยก คุณสามารถเพิ่มสไตล์โดยตรงลงในแท็ก <p> นั้นได้
กฎที่ใช้แบบอินไลน์จะลับสับสนกฎที่กำหนดในไฟล์สไตล์ภายในหรือภายนอก
เพื่อใช้ CSS แบบอินไลน์ ให้ระบุสไตล์ CSS โดยตรงในแอตทริบิวต์ style ขององค์ประกอบ ดูตัวอย่างด้านล่าง:
ตัวอย่าง: เปลี่ยนสีข้อความของหัวข้อ
<h1 style="color: green;">This is a Heading</h1>
โค้ดข้างต้นตั้งค่าสีฟอนต์ของหัวข้อเป็นสีเขียว เนื่องจากต้องการให้สไตล์ใช้กับหัวข้อนี้เพียงอย่างเดียว จึงเพิ่มสไตล์โดยตรงด้วย CSS แบบอินไลน์
เมื่อควรใช้ CSS แบบอินไลน์
CSS แบบอินไลน์เหมาะสำหรับ:
- ดูตัวอย่างการเปลี่ยนแปลง (Preview changes) – สามารถทดสอบการเปลี่ยนแปลงบนองค์ประกอบเฉพาะโดยไม่ต้องแก้ไขไฟล์สไตล์ทั้งหมด
- ปรับแต่งองค์ประกอบเดี่ยว – เช่น ตั้งค่าความกว้างของย่อหน้าเดียวเป็น 500px
อย่างไรก็ตาม การใช้ CSS แบบอินไลน์มากเกินไปจะทำให้โค้ดยุ่งยากและยากต่อการบำรุงรักษา เนื่องจากต้องแก้ไขสไตล์แต่ละจุดด้วยตนเอง ในขณะที่สไตล์ในไฟล์ CSS สามารถใช้ selector ครอบคลุมหลายองค์ประกอบได้
หากต้องการใช้หลายคุณสมบัติ CSS (เช่น 6-7 คุณสมบัติ) กับองค์ประกอบเดียวกัน แนะนำให้ใช้ Internal หรือ External CSS แทน เพื่อให้โค้ดอ่านง่ายและจัดการได้สะดวกกว่า
สรุป
CSS แบบอินไลน์ใช้สำหรับกำหนดสไตล์ให้กับองค์ประกอบเฉพาะบนหน้าเว็บ เหมาะสำหรับการทดสอบการเปลี่ยนแปลงหรือปรับแต่งองค์ประกอบไม่มากมาย หากต้องการใช้สไตล์จำนวนมาก ควรใช้ไฟล์สไตล์ภายในหรือภายนอกแทน
บทความนี้อธิบายพื้นฐานการจัดสไตล์ด้วย CSS และวิธีใช้ CSS แบบอินไลน์พร้อมตัวอย่าง ตอนนี้คุณพร้อมที่จะใช้ CSS แบบอินไลน์อย่างมืออาชีพแล้ว
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ CSS อ่านคู่มือครบถ้วน How to Learn CSS
