Tidadigi Logo

CSS text-decoration Property

Trong CSS, text-decoration property dùng để điều khiển trang trí văn bản. Các trang trí bao gồm gạch chân, gạch trên, gạch ngang và hiệu ứng nhấp nháy. Thuộc tính này chấp nhận các giá trị như none, underline, overline, và line-through. Nó kế thừa để tạo kiểu trang trí văn bản tương ứng. Hiểu thuộc tính text-decoration và các biến thể shorthand của nó giúp ích rất nhiều. Nó cho phép các nhà phát triển web tăng cường hiệu quả hiển thị văn bản. Bài viết này khám phá cú pháp, trường hợp sử dụng và hỗ trợ trình duyệt. Tất cả đều dành cho thuộc tính text-decoration trong CSS.


Tìm hiểu về thuộc tính text-decoration

Thuộc tính text-decoration trong CSS là thuộc tính shorthand. Nó dùng để thiết lập trang trí văn bản trong một khai báo. Nó kết hợp các thuộc tính text-decoration-line, text-decoration-style, text-decoration-color và text-decoration-thickness.

Cú pháp:

text-decoration: line style color | initial | inherit;
/* for example
text-decoration: underline dashed green;
*/

Thuộc tính CSS text-decoration shorthand cho:

  • text-decoration-line: dùng để thiết lập kiểu đường kẻ trang trí cho văn bản.
  • text-decoration-color: dùng để thiết lập màu cho đường kẻ trang trí.
  • text-decoration-style: dùng để thiết lập kiểu cho đường kẻ được chỉ định. Đường kẻ được chỉ định bởi text-decoration-line.
  • text-decoration-thickness: dùng để thiết lập độ dày của đường kẻ. Đường kẻ này được dùng trong trang trí.

Ví dụ về thuộc tính CSS text-decoration:

Ví dụ 1: Đây là biểu diễn 3 giá trị của thuộc tính CSS text-decoration.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>Text Decoration Example</title>
    <style>
        h2{
            text-decoration: underline dashed green;
        }
    </style>
</head>
<body>
    <h2>
        Text Decoration Example
    </h2>
   
</body>
</html>

Đầu ra:


css-text-decoration-property
Thuộc tính CSS text-decoration


Ví dụ 2: Đây là biểu diễn một giá trị của thuộc tính CSS text-decoration.

JavaScript 
<!DOCTYPE html>
<html>
    <head>
        <title>Text Decoration Example</title>
        <style>
            h2 {
                text-decoration-line: overline;
                text-decoration-style: solid;
                text-decoration-color: blue;
            }
        </style>
    </head>
    <body>
        <h2>Text Decoration Example</h2>
    </body>
</html>

Đầu ra:


css-text-decoration-property
Ví dụ về giá trị đơn của CSS Text-Decoration


Thuộc tính text-decoration trong CSS là một công cụ linh hoạt cho nhà phát triển web. Nó giúp kiểm soát hiển thị trực quan của văn bản. Bằng cách kết hợp các thuộc tính như text-decoration-line, text-decoration-style, text-decoration-color và text-decoration-thickness, bạn có thể tạo trang trí văn bản hấp dẫn. Nó giúp nâng cao trải nghiệm người dùng và tính thẩm mỹ của trang web. Hiểu cách sử dụng hiệu quả thuộc tính này đảm bảo nội dung web của bạn vừa phong cách vừa dễ tiếp cận. Luôn cập nhật khả năng tương thích của trình duyệt để duy trì giao diện nhất quán trên các nền tảng khác nhau.

Các trình duyệt được hỗ trợ:

Các trình duyệt được hỗ trợ bởi thuộc tính value trong thẻ option được liệt kê dưới đây:


Last Updated : 21/07/2025