Thuộc tính text-decoration trong CSS
Bùi Tấn Lực - 934
- 03/10/2025
Chức năng của Thuộc tính text-decoration trong CSS
Thuộc tính text-decoration trong CSS dùng để gạch ngang văn bản, gạch dưới văn bản, gạch trên văn bản để tạo sự khác biệt với các văn bản khác, ngoài ra bạn có thể chọn kiểu gạch đứt, gạch uống cong, màu sắc cho gạch, độ dày,....
Cú pháp của Thuộc tính text-decoration trong CSS
text-decoration: text-decoration-line text-decoration-style text-decoration-color text-decoration-thickness;
text-decoration-line: Dùng để gạch ngang, gạch dưới, gạch trên cho văn bản và kết hợp với các thuộc tính khác như: text-decoration-style để tạo kiểu cho dấu gạch, text-decoration-color để tạo màu cho dấu gạch, text-decoration-thickness để tạo kích thước cho dấu gạch.
Ví dụ: underline (gạch dưới), line-through (gạch ngang), overline (gạch trên)
text-decoration-style:Quy định kiểu dáng của dấu gạch.
Ví dụ: solid (gạch thẳng), wavy (gạch uống cong), double (gạch đôi), dotted (gạch đứt chấm nhỏ), dashed (gạch đứt chấm dài),....
text-decoration-color: Vẽ màu cho dấu gạch.
Ví dụ: red, #008001,.....
text-decoration-thickness: Quy định độ dày cho dấu gạch.
Ví dụ: 5px, 1px, 50%, auto,....
Ngoài ra bạn có thể kết hợp 2 dấu gạch bằng cú pháp:
text-decoration: text-decoration-line text-decoration-line;
Code Thuộc tính text-decoration trong CSS
Thuộc tính text-decoration mặc định trong CSS
Dùng để gạch ngang văn bản, gạch dưới văn bản, gạch trên văn bản để tạo sự khác biệt với các văn bản khác, hoặc kết hợp các gạch với nhau:
text-decoration: overline; Gạch trên văn bản
text-decoration: line-through; Gạch ngang văn bản
text-decoration: underline; Gạch dưới văn bản
text-decoration: underline overline; Gạch trên kết hợp gạch dưới văn bản
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính text-decoration mặc định trong CSS</title>
<style>
p {margin-bottom:30px}
</style>
</head>
<body>
<h1>Thuộc tính text-decoration mặc định trong CSS</h1>
<p>Dùng để gạch ngang văn bản, gạch dưới văn bản, gạch trên văn bản để tạo sự khác biệt với các văn bản khác, hoặc kết hợp các gạch với nhau:</p>
<p style="text-decoration: overline;">text-decoration: overline; Gạch trên văn bản</p>
<p style="text-decoration: line-through;">text-decoration: line-through; Gạch ngang văn bản</p>
<p style="text-decoration: underline;">text-decoration: underline; Gạch dưới văn bản</p>
<!--Kết hợp 2 cái lại-->
<p style="text-decoration: underline overline;">text-decoration: underline overline; Gạch trên kết hợp gạch dưới văn bản</p>
</body>
</html>
Thuộc tính text-decoration kết hợp trong CSS
Dùng để gạch ngang văn bản, gạch dưới văn bản, gạch trên văn bản để tạo sự khác biệt với các văn bản khác, ngoài ra bạn có thể kết hợp thêm kiểu gạch đứt, gạch uống cong, màu sắc cho gạch, độ dày....
text-decoration: overline dotted red; Gạch trên, đường nét đứt, màu đỏ
text-decoration: line-through wavy blue; Gạch ngang, đường uống cong, màu xanh dương
text-decoration: underline wavy blue; Gạch dưới, đường uống cong, màu xanh dương
text-decoration: underline wavy blue 5px;
Gạch dưới, đường uống cong, màu xanh dương, độ dày 5px
text-decoration: underline wavy blue; Gạch dưới, màu xanh dương
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính text-decoration kết hợp trong CSS</title>
<style>
p {margin-bottom:30px}
</style>
</head>
<body>
<h1>Thuộc tính text-decoration kết hợp trong CSS</h1>
<p>Dùng để gạch ngang văn bản, gạch dưới văn bản, gạch trên văn bản để tạo sự khác biệt với các văn bản khác, ngoài ra bạn có thể kết hợp thêm kiểu gạch đứt, gạch uống cong, màu sắc cho gạch, độ dày....</p>
<p style="text-decoration: overline dotted red;">text-decoration: overline dotted red; Gạch trên, đường nét đứt, màu đỏ</p>
<p style="text-decoration: line-through wavy blue;">text-decoration: line-through wavy blue; Gạch ngang, đường uống cong, màu xanh dương</p>
<p style="text-decoration: underline wavy blue;">text-decoration: underline wavy blue; Gạch dưới, đường uống cong, màu xanh dương</p>
<p style="text-decoration: underline wavy blue 5px;">text-decoration: underline wavy blue 5px; Gạch dưới, đường uống cong, màu xanh dương, độ dày 5px</p>
<p style="text-decoration: underline blue;">text-decoration: underline wavy blue; Gạch dưới, màu xanh dương</p>
</body>
</html>
Cách sử dụng text-decoration hiệu quả trong thiết kế giao diện
Thuộc tính text-decoration không chỉ dùng để tạo đường gạch chân cho văn bản. Khi kết hợp đúng với các giá trị như kiểu đường, màu sắc và độ dày, bạn có thể tạo điểm nhấn rõ ràng mà vẫn giữ được sự cân đối cho giao diện.
Tạo kiểu gạch chân phù hợp cho liên kết
Liên kết thường được nhận biết bằng đường gạch chân. Với text-decoration, bạn có thể thay đổi kiểu hiển thị để phù hợp với thiết kế thay vì loại bỏ hoàn toàn dấu hiệu nhận biết này.
Ví dụ, tạo đường gạch chân dạng nét đứt và sử dụng màu tương đồng với nội dung:
<a href="https://example.com" style="text-decoration: underline dashed;">Xem chi tiết</a>
Cách này đặc biệt hữu ích khi giao diện có nhiều liên kết nhưng không muốn tất cả đều sử dụng đường gạch chân liền thông thường.
Kết hợp text-decoration với hiệu ứng hover
Có thể thay đổi kiểu trang trí văn bản khi người dùng di chuyển chuột qua liên kết. Hiệu ứng này giúp trạng thái tương tác dễ nhận biết hơn mà không cần thêm quá nhiều thành phần trực quan.
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Cách triển khai này phù hợp với các menu, nút liên kết hoặc danh sách nội dung. Trên nền sáng hoặc giao diện có nhiều chữ, nên ưu tiên hiệu ứng vừa phải để không làm nội dung bị rối.
Tránh những lỗi thường gặp khi sử dụng text-decoration
Một lỗi phổ biến là loại bỏ hoàn toàn đường gạch chân của liên kết nhưng không tạo ra dấu hiệu thay thế. Điều này có thể khiến người dùng khó phân biệt văn bản thông thường với nội dung có thể nhấp.
Ngoài ra, không nên lạm dụng quá nhiều kiểu trang trí trong cùng một khu vực. Hãy lựa chọn kiểu đường, màu sắc và độ dày phù hợp với vai trò của văn bản, đồng thời duy trì cách thể hiện nhất quán trên toàn bộ website.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-decoration trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
