Thuộc tính text-decoration-line trong CSS
Bùi Tấn Lực - 915
- 03/10/2025
Chức năng của Thuộc tính text-decoration-line trong CSS
Thuộc tính text-decoration-line trong CSS 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.
Cú pháp của Thuộc tính text-decoration-line trong CSS
text-decoration-line: giatri;
giatri: Giá trị để gạch ngang, gạch dưới, gạch trên cho văn bản (Ví dụ: overline, line-through, underline)
Các giá trị của Thuộc tính text-decoration-line trong CSS
overline: Gạch trên văn bản.
line-through: Gạch ngang văn bản.
underline: Gạch dưới văn bản.
Code Thuộc tính text-decoration-line trong CSS
text-decoration-line: overline; Gạch trên văn bản
text-decoration-line: line-through; Gạch ngang văn bản
text-decoration-line: underline; Gạch dưới văn bản
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-decoration-line trong CSS</title>
</head>
<body>
<h1>Code Thuộc tính text-decoration-line trong CSS</h1>
<p>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:</p>
<p style="text-decoration-line: overline;">text-decoration-line: overline; Gạch trên văn bản</p>
<p style="text-decoration-line: line-through;">text-decoration-line: line-through; Gạch ngang văn bản</p>
<p style="text-decoration-line: underline;">text-decoration-line: underline; Gạch dưới văn bản</p>
<!--Kết hợp các thuộc tính khác-->
<p style="text-decoration-line: underline; text-decoration-style: double; text-decoration-color: red; text-decoration-thickness: 5px;">text-decoration-line: underline; text-decoration-style: double; text-decoration-color: red; text-decoration-thickness: 5px;</p>
</body>
</html>
Cách kết hợp text-decoration-line với các thuộc tính CSS khác
text-decoration-line xác định kiểu đường trang trí cho văn bản, nhưng khi kết hợp thêm các thuộc tính liên quan, bạn có thể kiểm soát chi tiết hơn màu sắc, kiểu nét và độ dày của đường trang trí. Cách kết hợp này phù hợp khi muốn tạo hiệu ứng văn bản rõ ràng mà vẫn giữ giao diện nhất quán.
Kết hợp text-decoration-line với text-decoration-style
text-decoration-style dùng để thay đổi kiểu đường trang trí như nét liền, nét đứt, nét chấm hoặc đường gợn sóng. Khi sử dụng cùng text-decoration-line, bạn có thể xác định cả vị trí lẫn hình thức hiển thị của đường trang trí.
.title {
text-decoration-line: underline;
text-decoration-style: dashed;
}
Trong ví dụ trên, văn bản được gạch chân bằng đường nét đứt. Cách kết hợp này hữu ích khi muốn tạo sự khác biệt trực quan cho liên kết, tiêu đề hoặc những nội dung cần chú ý.
Kết hợp text-decoration-line với text-decoration-color
text-decoration-color cho phép đặt màu riêng cho đường trang trí mà không làm thay đổi màu của phần văn bản. Đây là lựa chọn phù hợp khi cần tạo điểm nhấn nhưng vẫn muốn giữ màu chữ theo thiết kế ban đầu.
.link {
color: #333;
text-decoration-line: underline;
text-decoration-color: red;
}
Với cách viết này, phần chữ vẫn giữ màu đã thiết lập, trong khi đường gạch chân hiển thị bằng màu đỏ. Nhờ đó, đường trang trí có thể trở thành một thành phần nhấn mạnh riêng trong giao diện.
Kết hợp text-decoration-line với text-decoration-thickness
text-decoration-thickness kiểm soát độ dày của đường trang trí. Khi kết hợp với text-decoration-line, thuộc tính này giúp điều chỉnh mức độ nổi bật của đường gạch chân, gạch ngang hoặc các kiểu trang trí khác.
.heading {
text-decoration-line: underline;
text-decoration-thickness: 3px;
}
Độ dày lớn hơn giúp đường trang trí nổi bật hơn, nhưng không nên lạm dụng vì có thể làm văn bản trở nên nặng nề. Với nội dung thông thường, nên chọn độ dày vừa phải để đường trang trí hỗ trợ khả năng đọc thay vì gây phân tán sự chú ý.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-decoration-line 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 *
