CSS Text Decoration: ตกแต่งข้อความด้วย underline, overline, line-through

เมื่อออกแบบข้อความบนเว็บ อาจต้องการตกแต่ง เช่น underline เน้นข้อความสำคัญ หรือ line-through ข้อความเก่า

นั่นคือที่มาของ CSS text-decoration property เพิ่ม underline, overline, และ line-through ให้บล็อกข้อความ

บทเรียนนี้อธิบาย text-decoration property และ sub-properties 3 ตัว พร้อมตัวอย่าง จนจบคุณจะตกแต่งข้อความอย่างเชี่ยวชาญ

CSS Text Decoration Property

การตกแต่งข้อความด้วย underline, strikethrough, overline เป็นวิธีดึงดูดความสนใจเนื้อหาสำคัญ

underline บ่งชี้ว่าข้อความนั้นคุ้มค่าที่จะอ่าน นอกจากนี้ text decoration สำคัญสำหรับ accessibility — การพึ่งพาสีเพียงอย่างเดียวไม่เข้าถึงได้สำหรับคนตาบอดสี การเพิ่ม underline/strikethrough/overline ช่วยให้ผู้ใช้สังเกตข้อความที่เน้นได้ง่ายขึ้น

ใน CSS text-decoration shorthand property ระบุการตกแต่งข้อความ เป็น shorthand ของ 3 properties:

• text-decoration-line (required)
• text-decoration-color (optional)
• text-decoration-style (optional)

รวมได้ใน syntax เดียว:

text-decoration: line color style;

ไม่มีลำดับบังคับสำหรับค่าใน text-decoration

ตัวอย่าง: Underline สำหรับหัวข้อร้านเบเกอรี่

ร้านเบเกอรี่ท้องถิ่น ต้องการ underline หัวข้อแต่ละหน้า เช่น "About Us" ใช้ underline สีฟ้าอ่อน solid หนา 2px

<html>
  <h1>About Us</h1>
</html>

<style>
  h1 { text-decoration: lightblue solid underline; }
</style>

CSS ใช้ text-decoration property สร้าง underline: สี lightblue, solid, underline style

Text Decoration Line (text-decoration-line)

text-decoration-line กำหนดประเภทเส้นที่จะแสดง ค่าที่รับได้:

• underline — เส้นใต้ข้อความ
• overline — เส้นเหนือข้อความ
• line-through — เส้นทับกลางข้อความ (strikethrough)
• blink — กระพริบข้อความ (deprecated)

ถ้าใช้ property นี้อย่างเดียว จะได้ underline solid สีดำ

ตัวอย่าง: Underline คำสำคัญในย่อหน้า

ร้าน "Jefferson's Family Bakery" ต้องการ underline คำสำคัญในหน้า About

<html>
  <p>The Jefferson's Family Bakery, founded in 1899... Our bakery is 
     <span class="underline">most well-known for our bagels</span>... 
     If you're in the mood for a good bagel, <span class="underline">come to Jeffersons</span>!</p>
</html>

<style>
  .underline { text-decoration-line: underline; }
</style>

<span class="underline"> แยกข้อความที่ต้องการ underline CSS ใช้ text-decoration-line: underline ใส่ underline สีดำ solid

Text Decoration Color (text-decoration-color)

text-decoration-color กำหนดสีของ text decoration

ตัวอย่าง: ทำ underline สีเขียว

<style>
  .underline {
    text-decoration-line: underline;
    text-decoration-color: green;
  }
</style>

เพิ่ม text-decoration-color: green ต้องมี text-decoration-line ด้วย (required)

Text Decoration Style (text-decoration-style)

text-decoration-style กำหนดรูปแบบเส้น ค่าที่รับได้:

• solid — เส้นเดี่ยว
• double — เส้นคู่
• dashed — เส้นขีด
• dotted — เส้นจุด
• wavy — เส้นคลื่น

ตัวอย่าง: Dotted underline สีฟ้าอ่อน

หัวข้อ "About the Jeffersons" ต้องการ dotted underline สีฟ้าอ่อน

<html>
  <h2>About the Jeffersons</h2>
</html>

<style>
  h2 {
    text-decoration-line: underline;
    text-decoration-color: lightblue;
    text-decoration-style: dotted;
  }
</style>

ลบ Underline จาก Hyperlink

text-decoration มักใช้ลบ underline ของลิงก์ HTML ปกติ ใช้ค่า none

Default <a> tag มี underline หากไม่ต้องการ:

<a href="/contact.html">Contact Us</a>

ลบ underline:

<html>
  <a href="/contact.html">Contact Us</a>
</html>

<style>
  a { text-decoration: none; }
</style>

text-decoration: none ลบ text decoration ทั้งหมดจาก <a> tags

สรุป

Text decoration ดึงดูดสนใจข้อความเฉพาะ และทำให้ข้อความดูสวยงามขึ้น CSS text-decoration property และ properties ที่เกี่ยวข้อง กำหนดการตกแต่งข้อความบนเว็บ บทเรียนนี้ครอบคลุม text-decoration และ sub-properties ทั้ง 3 ตอนนี้คุณตกแต่งข้อความอย่างมืออาชีพได้แล้ว!