CSS Text Decoration - Trang Trí Văn Bản (Gạch Chân, Gạch Ngăn, Gạch Trên)

Khi thiết kế văn bản web, bạn có thể muốn thêm trang trí: gạch chân từ quan trọng, gạch ngang văn bản cũ... Thuộc tính text-decoration xử lý việc này.

Tổng Quan Text Decoration

Trang trí văn bản (underline, overline, line-through) thu hút sự chú ý và hỗ trợ accessibility (người khiếm thị màu vẫn nhận ra nhấn mạnh nhờ gạch chân).

text-decoration là shorthand cho 3 properties:

• text-decoration-line (bắt buộc)
• text-decoration-color (tùy chọn)
• text-decoration-style (tùy chọn)

Cú pháp: text-decoration: line color style; (thứ tự tự do).

Ví Dụ: Tiêu Đề Có Gạch Chân

Trang "About" nhà bánh: tiêu đề "About Us" có gạch chân xanh nhạt, solid, 2px.

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

Chi Tiết 3 Sub-properties

text-decoration-line - Loại Gạch

• underline: Gạch dưới
• overline: Gạch trên
• line-through: Gạch ngang (strikethrough)
• blink: Nhấp nháy (deprecated)

Mặc định: solid black underline.

Ví Dụ: Gạch Chân Từ Khóa Trong Đoạn Văn

<p>... bánh mì <span class="underline">nổi tiếng nhất là bagel</span>... 
   <span class="underline">ghé Jeffrey's</span>!</p>
.underline { text-decoration-line: underline; }

text-decoration-color - Màu Gạch

.underline { 
  text-decoration-line: underline; 
  text-decoration-color: green; 
}

Gạch chân chuyển sang màu xanh lá.

text-decoration-style - Kiểu Gạch

• solid: Đơn
• double: Kép
• dashed: Nét đứt
• dotted: Chấm
• wavy: Sóng

Ví Dụ: Gạch Chân Chấm Xanh Nhạt

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

Xóa Gạch Chân Link Mặc Định

Link <a> mặc định có gạch chân. Dùng text-decoration: none để bỏ.

<a href="/contact.html">Contact Us</a>
a { text-decoration: none; }

Kết Luận

text-decoration và 3 sub-properties cho phép tùy biến gạch chân/trên/ngang: loại, màu, kiểu. Hữu ích cho nhấn mạnh và accessibility. Bạn đã sẵn sàng trang trí văn bản như pro!