Thuộc tính text-decoration-line dùng để chỉ định kiểu trang trí văn bản. Ví dụ như gạch chân, gạch trên hoặc gạch ngang. Nó có thể kết hợp với các thuộc tính khác để tạo hiệu ứng phức tạp.
Syntax:
text-decoration-line: none | underline | overline | line-through | initial | inherit;
Thuộc tính text-decoration là một shorthand property cho text-decoration-line(bắt buộc), text-decoration-color, và text-decoration-style.
Property Values: Tất cả các giá trị thuộc tính được mô tả rõ trong ví dụ dưới đây.
. none:
Đây là giá trị mặc định, dùng để bỏ mọi đường kẻ trang trí văn bản.
Syntax:
text-decoration-line: none;
Example: Ví dụ này minh họa việc sử dụng thuộc tính text-decoration-line. Giá trị của thuộc tính này được đặt là none.
HTML<!DOCTYPE html>
<html>
<head>
<title>text-decoration-line property</title>
<!-- text-decoration-line property used here -->
<style>
h1 {
color: green;
text-decoration-line: none;
}
.gfg {
text-decoration-line: none;
font-weight: bold;
}
</style>
</head>
<body style="text-align:center">
<h1>GeeksforGeeks</h1>
<h2>text-decoration-line: none;</h2>
<p class="gfg">
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output:
. underline:
Thuộc tính này được sử dụng để hiển thị một đường kẻ dưới văn bản.
Syntax:
text-decoration-line: underline;
Example: Ví dụ này minh họa việc sử dụng thuộc tính text-decoration-line. Giá trị của thuộc tính được đặt thành underline.
HTML<!DOCTYPE html>
<html>
<head>
<title> text-decoration-line property </title>
<!-- text-decoration-line property used here -->
<style>
h1 {
color: green;
text-decoration-line: underline;
}
.gfg {
text-decoration-line: underline;
font-weight: bold;
}
</style>
</head>
<body style="text-align:center">
<h1>GeeksforGeeks</h1>
<h2>text-decoration-line:underline;</h2>
<p class="gfg">
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output:
. overline:
Nó được dùng để hiển thị một đường kẻ phía trên văn bản.
Syntax:
text-decoration-line: overline;
Example: Ví dụ này minh họa việc sử dụng thuộc tính text-decoration-line. Giá trị của thuộc tính được đặt thành overline.
HTML<!DOCTYPE html>
<html>
<head>
<title> text-decoration-line property </title>
<!-- text-decoration-line property used here -->
<style>
h1 {
color: green;
text-decoration-line: overline;
}
.gfg {
text-decoration-line: overline;
font-weight: bold;
}
</style>
</head>
<body style="text-align:center">
<h1>GeeksforGeeks</h1>
<h2>text-decoration-line:overline;</h2>
<p class="gfg">
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output:
. line-through:
Thuộc tính này được sử dụng để hiển thị một đường kẻ xuyên qua văn bản.
Syntax:
text-decoration-line: line through;
Example: Ví dụ này minh họa việc sử dụng thuộc tính text-decoration-line. Giá trị của thuộc tính được đặt thành line-through.
HTML<!DOCTYPE html>
<html>
<head>
<title> text-decoration-line property </title>
<!-- text-decoration-line property used here -->
<style>
h1 {
color: green;
text-decoration-line: line-through;
}
.gfg {
text-decoration-line: line-through;
font-weight: bold;
}
</style>
</head>
<body style="text-align:center">
<h1>GeeksforGeeks</h1>
<h2>text-decoration-line:line-through;</h2>
<p class="gfg">
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output:
. initial:
Thuộc tính này được sử dụng để đặt thuộc tính CSS của một phần tử về giá trị mặc định. Nó tương tự như thuộc tính none.
Syntax:
text-decoration-line: initial;
Example: Ví dụ này minh họa việc sử dụng thuộc tính text-decoration-line. Giá trị của thuộc tính được đặt thành initial.
HTML<!DOCTYPE html>
<html>
<head>
<title> text-decoration-line property </title>
<!-- text-decoration-line property used here -->
<style>
h1 {
color: green;
text-decoration-line: initial;
}
.gfg {
text-decoration-line: initial;
font-weight: bold;
}
</style>
</head>
<body style="text-align:center">
<h1>GeeksforGeeks</h1>
<h2>text-decoration-line:initial;</h2>
<p class="gfg">
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Output:
Supported Browsers: Các trình duyệt được hỗ trợ bởi thuộc tính text-decoration-line được liệt kê dưới đây:
- Google Chrome 57.0
- Microsoft Edge 79.0
- Firefox 36.0
- Apple Safari 12.1
- Opera 44.0