Thuộc tính text-decoration-style trong CSS
Bùi Tấn Lực - 868
- 03/10/2025
Chức năng của Thuộc tính text-decoration-style trong CSS
Thuộc tính text-decoration-style trong CSS kết hợp với thuộc tính text-decoration-line để tạo ra các kiểu dáng cho những 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-style trong CSS
text-decoration-style: giatri;
giatri: Giá trị để tạo ra các kiểu dáng cho những dấu gạch cho văn bản trong phần tử HTML (Ví dụ: solid, wavy, dashed, dotted, double,.....)
Các giá trị của Thuộc tính text-decoration-style trong CSS
solid: Kiểu đường thẳng.
wavy: Kiểu uống cong.
dashed: Kiểu nét đứt dài.
dotted: Kiểu nét đứt nhỏ.
double: Kiểu 2 đường thẳng.
Code Thuộc tính text-decoration-style trong CSS
text-decoration-style: solid; Kiểu đường thẳng
text-decoration-style: wavy; Kiểu uống cong
text-decoration-style: dashed; Kiểu nét đứt dài
text-decoration-style: dotted; Kiểu nét đứt nhỏ
text-decoration-style: double; Kiểu 2 đường thẳng
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-decoration-style 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-style trong CSS</h1>
<span>Thuộc tính text-decoration-style trong CSS kết hợp với thuộc tính text-decoration-line để tạo ra các kiểu dáng cho những dấu gạch cho văn bản trong phần tử HTML:</span>
<p style="text-decoration-style: solid;">text-decoration-style: solid; Kiểu đường thẳng</p>
<p style="text-decoration-style: wavy;">text-decoration-style: wavy; Kiểu uống cong</p>
<p style="text-decoration-style: dashed;">text-decoration-style: dashed; Kiểu nét đứt dài</p>
<p style=" text-decoration-style: dotted;">text-decoration-style: dotted; Kiểu nét đứt nhỏ</p>
<p style="text-decoration-style: double;">text-decoration-style: double; Kiểu 2 đường thẳng</p>
</body>
</html>
Cách kết hợp text-decoration-style với các thuộc tính CSS khác
text-decoration-style sẽ phát huy hiệu quả tốt hơn khi kết hợp với các thuộc tính khác trong nhóm text-decoration. Cách này cho phép kiểm soát đồng thời kiểu nét, màu sắc, độ dày và vị trí của đường trang trí, từ đó tạo hiệu ứng chữ phù hợp với từng thành phần trên giao diện.
Kết hợp text-decoration-style với text-decoration-color
text-decoration-style quyết định hình dạng của đường trang trí, trong khi text-decoration-color xác định màu sắc của đường đó. Kết hợp hai thuộc tính giúp đường gạch chân nổi bật hơn mà không cần thay đổi màu của phần văn bản.
.link {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
Trong ví dụ trên, đường gạch chân có dạng lượn sóng và màu đỏ, còn nội dung chữ vẫn giữ màu được thiết lập riêng. Cách kết hợp này phù hợp khi cần tạo điểm nhấn cho liên kết, cảnh báo hoặc một đoạn nội dung cần chú ý.
Kết hợp text-decoration-style với text-decoration-thickness
Nếu text-decoration-style kiểm soát kiểu nét thì text-decoration-thickness kiểm soát độ dày của đường trang trí. Hai thuộc tính này có thể sử dụng cùng nhau để tạo đường gạch rõ hoặc nhẹ tùy theo thiết kế.
.title {
text-decoration-line: underline;
text-decoration-style: double;
text-decoration-thickness: 2px;
}
Thiết lập trên tạo đường gạch chân kép với độ dày 2px. Đây là lựa chọn hữu ích khi muốn làm nổi bật tiêu đề hoặc một phần nội dung mà vẫn giữ bố cục gọn gàng.
Kết hợp text-decoration-style với text-underline-offset
Với đường gạch chân, text-underline-offset cho phép điều chỉnh khoảng cách giữa chữ và đường trang trí. Khi kết hợp với text-decoration-style, bạn có thể kiểm soát cả hình dạng lẫn vị trí của đường gạch.
.menu-link {
text-decoration-line: underline;
text-decoration-style: solid;
text-underline-offset: 5px;
}
Khoảng cách 5px giúp đường gạch chân tách khỏi phần chữ, tạo cảm giác thoáng hơn. Cách thiết lập này đặc biệt phù hợp với liên kết điều hướng hoặc các thành phần tương tác cần trạng thái được nhận biết rõ ràng.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-decoration-style 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 *
