span CSS คืออะไร ใช้งานยังไง พร้อมตัวอย่าง

span CSS คือ การใช้แท็ก span ของ HTML เพื่อจัดรูปแบบข้อมูลแบบคอนเทนเนอร์แบบอินไลน์ ร่วมกับภาษา CSS โดย CSS ใช้สำหรับกำหนด style ให้กับข้อมูลที่อยู่ในแท็ก span เช่น เราใส่ข้อความในแท็ก span จากนั้นกำหนดสีข้อความ ขนาดตัวอักษรด้วย CSS ในบทความนี้คุณจะได้เรียนรู้ผ่านตัวอย่างมากมายเกี่ยวกับวิธีการใช้งาน span CSS

ตัวอย่าง วิธีใช้งาน span CSS ด้วยคำสั่ง style

<span style="color: orange; font-weight:bold;">my name is devdit</span>

จากตัวอย่างใช้แท็ก span กำหนดข้อความว่า ‘my name is devdit’ และกำหนด CSS ด้วยคำสั่ง style คือ ใส่สีส้ม = color: orange; และกำหนดให้เป็นตัวหนา = font-weight:bold; สังเกตว่าจะใช้เครื่องหมายลูกน้ำ (,) คั่นแต่ละคำสั่ง

ตัวอย่าง วิธีใช้งาน span CSS แบบเขียน CSS แยก

<style>
.my_style {
    color: green;
    font-size: 16px;
    font-family: 'Tahoma';
}
</style>

<span class="my_style">my name is devdit</span>

ตัวอย่างนี้กำหนดข้อความ ‘my name is devdit’ ไว้ในแท็ก span จากนั้นเรียกใช้ CSS ผ่าน class ชื่อ my_style โดย class ดังกล่าวมี 3 คำสั่งคือ

1. color: green เท่ากับเปลี่ยนข้อมูลใน span ให้เป็นสีเขียว

2. font-size: 16px เท่ากับเปลี่ยนขนาดตัวอักษรใน span เท่ากับ 16px

3. font-family: 'Tahoma' เท่ากับเปลี่ยนรูปแบบตัวอักษรใน span เป็น ‘Tahoma’

สรุป span CSS เป็นเครื่องมือที่มีประโยชน์อย่างมากสำหรับการจัดรูปแบบแสดงผลแบบคอนเทนเนอร์แบบอินไลน์ โดยการใช้งาน span CSS หลักๆ จะมี 2 วิธีคือ กำหนด CSS แบบอินไลน์ใน span ด้วยคำสั่ง style และการเขียน CSS แยก และเรียกใช้ผ่าน class หรือ id