Bùi Tấn Lực - 128
- 03/10/2025
Bùi Tấn Lực 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, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính text-decoration trong CSS
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>
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 *
