Thuộc tính text-decoration-thickness trong CSS
Bùi Tấn Lực - 890
- 03/10/2025
Chức năng của Thuộc tính text-decoration-thickness trong CSS
Thuộc tính text-decoration-thickness trong CSS kết hợp với thuộc tính text-decoration-line để chỉ định độ dày của dấu gạch cho văn trong phần tử HTML, bạn có thể dùng px, em, % để canh chỉnh.
Cú pháp của Thuộc tính text-decoration-thickness trong CSS
text-decoration-thickness: giatri;
giatri: Giá trị để chỉ định độ dày của dấu gạch cho văn trong phần tử HTML (Ví dụ: 1px, 5px, 1em, 2%, auto, ...)
Code Thuộc tính text-decoration-thickness trong CSS
text-decoration-thickness: auto;
text-decoration-thickness: 5px;
text-decoration-thickness: 1px;
text-decoration-thickness: 1em;
text-decoration-thickness: 50%;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-decoration-thickness trong CSS</title>
<style>
span {width:100%; float: left; heigt:auto; margin-bottom:10px;}
p {text-decoration-line: underline;margin-bottom:30px}
</style>
</head>
<body>
<h1>Code Thuộc tính text-decoration-thickness trong CSS</h1>
<span>Thuộc tính text-decoration-thickness trong CSS kết hợp với thuộc tính text-decoration-line để chỉ định độ dày của dấu gạch cho văn trong phần tử HTML, bạn có thể dùng px, em, % để canh chỉnh:</span>
<p style=" text-decoration-thickness: auto;">text-decoration-thickness: auto; </p>
<p style="text-decoration-thickness: 5px;">text-decoration-thickness: 5px; </p>
<p style="text-decoration-thickness: 1px;">text-decoration-thickness: 1px; </p>
<p style="text-decoration-thickness: 1em;">text-decoration-thickness: 1em; </p>
<p style="text-decoration-thickness: 50%;">text-decoration-thickness: 50%;</p>
</body>
</html>
Cách kết hợp text-decoration-thickness với các thuộc tính CSS khác
text-decoration-thickness phát huy hiệu quả tốt hơn khi được sử dụng cùng các thuộc tính thuộc nhóm text-decoration. Việc kết hợp này cho phép kiểm soát đồng thời vị trí, màu sắc, kiểu và độ dày của đường trang trí, từ đó tạo ra cách trình bày phù hợp với từng thành phần trên trang.
Kết hợp text-decoration-thickness với text-decoration-line
text-decoration-line xác định loại đường trang trí được áp dụng cho văn bản, chẳng hạn như gạch chân hoặc gạch ngang. Khi kết hợp với text-decoration-thickness, bạn có thể chủ động thiết lập độ dày cho đường trang trí thay vì sử dụng thiết lập mặc định của trình duyệt.
<p class="underline">Văn bản có đường gạch chân dày hơn.</p>
Cách kết hợp này phù hợp khi cần làm nổi bật liên kết, tiêu đề hoặc một đoạn văn bản quan trọng mà không muốn thay đổi kích thước chữ.
Kết hợp text-decoration-thickness với text-decoration-style
text-decoration-style kiểm soát kiểu hiển thị của đường trang trí như liền, nét đứt, chấm hoặc gợn sóng. Khi đi cùng text-decoration-thickness, kiểu đường và độ dày có thể được điều chỉnh độc lập để tạo hiệu ứng rõ ràng hơn.
<p class="highlight">Nội dung cần được chú ý.</p>
Ví dụ trên tạo đường gạch chân dạng gợn sóng với độ dày cố định. Đây là cách hữu ích khi muốn tạo dấu hiệu trực quan cho nội dung mà vẫn giữ nguyên kiểu chữ.
Kết hợp text-decoration-thickness với text-decoration-color
text-decoration-color cho phép thay đổi màu của đường trang trí mà không làm ảnh hưởng đến màu chữ. Khi kết hợp với text-decoration-thickness, đường gạch chân có thể được thiết kế nổi bật hơn và tách biệt rõ với nội dung văn bản.
<p class="link-style">Tìm hiểu thêm về CSS.</p>
Cách này đặc biệt phù hợp với các liên kết hoặc cụm từ cần nhấn mạnh. Việc điều chỉnh màu và độ dày riêng biệt giúp đường trang trí dễ nhận biết mà không cần sử dụng thêm phần tử HTML.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-decoration-thickness 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 *
