เรียนรู้วิธีใช้ HTML <span> ธาตุ
HTML <span> องค์ประกอบเป็นองค์ประกอบคอนเทนเนอร์แบบอินไลน์ทั่วไป ใช้เพื่อทำเครื่องหมายข้อความ มักใช้ในองค์ประกอบอื่น
<span> มักใช้เพื่อทำให้ข้อความบางส่วนดูแตกต่างไปจากส่วนที่เหลือ
ตัวอย่าง:
<p>My hat is <span style="color:red">red.</span></p>
คุณยังสามารถใช้ <span> เพื่อจัดกลุ่มองค์ประกอบที่ใช้ค่าแอตทริบิวต์การจัดรูปแบบเดียวกันผ่าน class .
ตัวอย่างเช่น สมมติว่าคุณกำลังเขียนสูตรอาหาร และคุณต้องการเน้นทุกคำในกรอบข้อความของคุณที่เป็นส่วนประกอบ-คำ ด้วยสีเฉพาะ:
<p>
To make my delicious garlic butter you need just four ingredients,
<span class="ingredient">butter</span>,
<span class="ingredient">garlic</span>,
<span class="ingredient">salt</span> and
<span class="ingredient">black pepper.</span>
</p>จากนั้นคุณสามารถสร้างคลาส CSS ได้ดังนี้:
.ingredient {
color: green;
}
สิ่งที่ฉลาดเกี่ยวกับการใช้คลาสที่นำกลับมาใช้ใหม่ได้ก็คือ ถ้าคุณเปลี่ยนใจเกี่ยวกับรูปลักษณ์ของคำที่เป็นส่วนประกอบ คุณสามารถเปลี่ยนสไตล์ของคลาสได้เพียงครั้งเดียวใน .ingredient คลาส และเอฟเฟกต์จะเกิดขึ้นกับทุก <span> องค์ประกอบที่ใช้คลาสนี้
ตัวอย่างเช่น สมมติว่าคุณต้องการใช้แบบอักษรตัวหนา แทนที่จะใช้สีเพื่อเน้นส่วนผสม:
.ingredient {
font-weight: bold;
}
<span> ลักษณะทั่วไปขององค์ประกอบ ทำให้ ไม่มีความหมาย องค์ประกอบ. ดังนั้นควรใช้องค์ประกอบนี้เฉพาะเมื่อไม่มีองค์ประกอบอื่นที่เหมาะสมกว่าที่จะใช้
<span> องค์ประกอบคล้ายกับ <div> , องค์ประกอบ แต่ความแตกต่างที่สำคัญคือโดยค่าเริ่มต้น <span> เป็นองค์ประกอบแบบอินไลน์และ <block> เป็นองค์ประกอบระดับบล็อก อย่างไรก็ตาม คุณสามารถแทนที่การกำหนดสไตล์เริ่มต้นขององค์ประกอบด้วย CSS
