Thuộc tính text-decoration-color trong CSS
Bùi Tấn Lực - 838
- 03/10/2025
Chức năng của Thuộc tính text-decoration-color trong CSS
Thuộc tính text-decoration-color trong CSS kết hợp với thuộc tính text-decoration-line để vẽ màu cho các dấu gạch cho văn bản trong phần tử HTML.
Cú pháp của Thuộc tính text-decoration-color trong CSS
text-decoration-color: giatri;
giatri: Giá trị để vẽ màu cho các dấu gạch cho văn bản (Ví dụ: red, #008001, rgb(0, 0, 255),.....)
Code Thuộc tính text-decoration-color trong CSS
text-decoration-color: red;
text-decoration-color: #008001;
text-decoration-color: rgb(0, 0, 255);
text-decoration-color: rgba(201, 76, 76, 0.3);
text-decoration-color: hsl(89, 43%, 51%);
text-decoration-color: hsla(89, 43%, 51%, 0.3);
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-decoration-color trong CSS</title>
<style>
span{width:100%; float:left; height:auto; margin-bottom:20px}
p {text-decoration-line: underline;}
</style>
</head>
<body>
<h1>Code Thuộc tính text-decoration-color trong CSS</h1>
<span>Thuộc tính text-decoration-color trong CSS kết hợp với thuộc tính text-decoration-line để vẽ màu cho các dấu gạch cho văn bản trong phần tử HTML:</span>
<!----webkit dùng cho Safari --->
<p style=" -webkit-text-decoration-color: red; text-decoration-color: red;">text-decoration-color: red;</p>
<p style="-webkit-text-decoration-color: #008001; text-decoration-color: #008001;">text-decoration-color: #008001;</p>
<p style="-webkit-text-decoration-color: rgb(0, 0, 255); text-decoration-color: rgb(0, 0, 255);">text-decoration-color: rgb(0, 0, 255);</p>
<p style="-webkit-text-decoration-color: rgba(201, 76, 76, 0.3); text-decoration-color: rgba(201, 76, 76, 0.3);">text-decoration-color: rgba(201, 76, 76, 0.3);</p>
<p style=" -webkit-text-decoration-color: hsl(89, 43%, 51%); text-decoration-color: hsl(89, 43%, 51%);">text-decoration-color: hsl(89, 43%, 51%);</p>
<p style=" -webkit-text-decoration-color: hsla(89, 43%, 51%, 0.3); text-decoration-color: hsla(89, 43%, 51%, 0.3);">text-decoration-color: hsla(89, 43%, 51%, 0.3);</p>
</body>
</html>
Cách kết hợp text-decoration-color với các thuộc tính trang trí văn bản khác
text-decoration-color chỉ quyết định màu của đường trang trí văn bản. Để kiểm soát toàn bộ diện mạo của đường gạch chân, gạch ngang hoặc các kiểu trang trí khác, có thể kết hợp thuộc tính này với text-decoration-style, text-decoration-thickness và text-underline-offset. Cách kết hợp phù hợp giúp văn bản nổi bật nhưng vẫn giữ được sự rõ ràng và cân đối.
Kết hợp text-decoration-color với text-decoration-style
text-decoration-style cho phép thay đổi kiểu đường trang trí như liền, nét đứt, chấm hoặc gợn sóng. Khi đi cùng text-decoration-color, có thể tạo điểm nhấn trực quan rõ hơn mà không cần thay đổi màu chữ.
.highlight {
text-decoration-color: #e63946;
text-decoration-style: wavy;
}
Cách phối hợp này phù hợp với liên kết, từ khóa hoặc nội dung cần thu hút sự chú ý. Chẳng hạn, đường gợn sóng màu đỏ có thể được dùng để nhấn mạnh một cụm từ cần người đọc chú ý.
Điều chỉnh độ dày đường trang trí bằng text-decoration-thickness
Khi đường trang trí quá mảnh, màu sắc có thể khó nhận biết; ngược lại, đường quá dày dễ làm chữ trở nên nặng nề. text-decoration-thickness cho phép kiểm soát độ dày để tạo tỷ lệ phù hợp giữa chữ và đường trang trí.
.link-highlight {
text-decoration-color: #2563eb;
text-decoration-thickness: 2px;
}
Kết hợp màu và độ dày đặc biệt hữu ích khi thiết kế liên kết hoặc tiêu đề cần có dấu hiệu nhận biết riêng. Nên chọn độ dày vừa đủ để đường trang trí nổi bật nhưng không che khuất hình dáng ký tự.
Tạo khoảng cách phù hợp với text-underline-offset
Đối với đường gạch chân, khoảng cách giữa đường và chữ ảnh hưởng trực tiếp đến khả năng đọc. text-underline-offset giúp đưa đường gạch chân ra xa hoặc gần văn bản hơn, từ đó tạo bố cục thoáng và dễ quan sát.
.custom-link {
text-decoration-color: #0d6efd;
text-underline-offset: 4px;
}
Khoảng cách lớn hơn có thể giúp đường gạch chân không bị dính vào các ký tự có phần kéo dài xuống dưới. Khi sử dụng cùng text-decoration-color, người thiết kế có thể kiểm soát cả màu sắc lẫn vị trí của đường gạch chân một cách độc lập.
Khi nào nên dùng shorthand text-decoration?
Nếu cần thiết lập nhiều đặc tính trong cùng một quy tắc CSS, text-decoration có thể giúp mã nguồn ngắn gọn hơn. Thay vì khai báo từng thuộc tính riêng, có thể gom các giá trị liên quan vào một dòng.
.notice {
text-decoration: underline wavy #e63946;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
Cách viết riêng từng thuộc tính vẫn hữu ích khi cần kiểm soát chi tiết hoặc thay đổi từng thành phần ở các trạng thái khác nhau. Với giao diện có nhiều kiểu văn bản, nên ưu tiên cách khai báo dễ đọc và thuận tiện cho việc bảo trì.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-decoration-color 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 *
