Rate this post

Thuộc tính CSS viết tắt của text-decoration thiết lập sự xuất hiện của các dòng trang trí trên văn bản. Nó là cách viết tắt của text-decoration-line, text-decoration-color, text-decoration-style, mới hơn là kiểu text-decoration-thickness.

Trang trí văn bản được vẽ trên các yếu tố văn bản con. Điều này có nghĩa là nếu một phần tử chỉ định trang trí văn bản thì phần tử con không thể xóa trang trí đó.

Ví dụ: trong phần đánh dấu <p> Văn bản này có <em> một số từ được nhấn mạnh </em> trong đó. </p>, quy tắc kiểu p {text-decoration: underline; } sẽ khiến toàn bộ đoạn văn bị gạch chân.

Quy tắc kiểu em {text-decoration: none; } sẽ không gây ra bất kỳ thay đổi nào; toàn bộ đoạn văn vẫn sẽ được gạch chân. Tuy nhiên, quy tắc em {text-decoration: overline; } sẽ khiến trang trí thứ hai xuất hiện trên “một số từ được nhấn mạnh”.

Các bài viết liên quan:

Tóm tắt nội dung

Các loại Text-decoration

Trong HTML và CSS, có một số loại Text-decoration được sử dụng để định dạng văn bản. Các loại Text-decoration phổ biến bao gồm:

Underline (gạch chân): Loại này thêm một đường gạch chân dưới văn bản.
Overline (gạch trên): Loại này thêm một đường gạch trên văn bản.
Line-through (gạch ngang): Loại này thêm một đường gạch ngang qua văn bản.
Blink (nhấp nháy): Loại này làm cho văn bản nhấp nháy.
None (không có): Loại này không có Text-decoration nào được áp dụng cho văn bản.

Các loại Text-decoration có thể được sử dụng độc lập hoặc kết hợp với nhau để định dạng văn bản theo cách tùy chỉnh. Ví dụ, bạn có thể áp dụng gạch chân và gạch ngang cùng một lúc để tạo một hiệu ứng gạch xuyên qua văn bản.

Thuộc tính

Thuộc tính này là cách viết tắt của các thuộc tính CSS sau:

text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness

Cú Pháp

Thuộc tính trang trí văn bản được chỉ định là một hoặc nhiều giá trị được phân tách bằng dấu cách đại diện cho các thuộc tính trang trí văn bản tay dài khác nhau.

Value

text-decoration-line. Đặt loại trang trí được sử dụng, chẳng hạn như gạch dưới hoặc gạch ngang.
text-decoration-color. Đặt màu sắc của trang trí.
text-decoration-style. Đặt kiểu của đường được sử dụng cho trang trí, chẳng hạn như nét liền, lượn sóng hoặc nét đứt.
text-decoration-thickness. Đặt độ dày của đường được sử dụng để trang trí.

text-decoration-color

“text-decoration-color” là một thuộc tính CSS được sử dụng để định dạng màu sắc cho các đường gạch chân, gạch trên hoặc gạch xuyên qua của một đoạn văn bản. Thuộc tính này chỉ có hiệu lực khi được sử dụng kèm với thuộc tính “text-decoration-line” và “text-decoration-style”.

Ví dụ, nếu bạn muốn áp dụng đường gạch chân màu xanh lá cây cho một đoạn văn bản, bạn có thể sử dụng cú pháp sau:

text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: green;

Trong đó:

“text-decoration-line: underline” áp dụng đường gạch chân cho đoạn văn bản.
“text-decoration-style: solid” áp dụng đường gạch chân kiểu liền và không có khoảng trống giữa các đoạn gạch.
“text-decoration-color: green” áp dụng màu xanh lá cây cho đường gạch chân.

Lưu ý rằng thuộc tính “text-decoration-color” chỉ có hiệu lực trên các đường gạch kiểu liền (“solid”), đường gạch chấm (“dotted”) và đường gạch đứt (“dashed”).

text-decoration-line

“text-decoration-line” là một thuộc tính CSS được sử dụng để xác định kiểu gạch chân, gạch trên hoặc gạch xuyên qua được áp dụng cho văn bản. Thuộc tính này cho phép bạn tạo các đường gạch chân, gạch trên hoặc gạch xuyên qua trên văn bản và điều chỉnh kiểu và kích thước của chúng.

Có 4 giá trị khác nhau mà bạn có thể sử dụng cho thuộc tính “text-decoration-line”, bao gồm:

“none”: không áp dụng gạch chân, gạch trên hoặc gạch xuyên qua cho văn bản.
“underline”: áp dụng đường gạch chân cho văn bản.
“overline”: áp dụng đường gạch trên cho văn bản.
“line-through”: áp dụng đường gạch xuyên qua cho văn bản.

Ví dụ, nếu bạn muốn áp dụng gạch chân cho văn bản, bạn có thể sử dụng cú pháp sau:

text-decoration-line: underline;

Nếu bạn muốn áp dụng đường gạch trên cho văn bản, bạn có thể thay đổi giá trị của thuộc tính thành “overline”, và nếu muốn áp dụng đường gạch xuyên qua cho văn bản, bạn có thể thay đổi giá trị thành “line-through”. Nếu bạn muốn loại bỏ gạch chân, gạch trên hoặc gạch xuyên qua từ văn bản, bạn có thể thay đổi giá trị thành “none”.

text-decoration-style

“text-decoration-style” là một thuộc tính CSS được sử dụng để xác định kiểu đường gạch chân, gạch trên hoặc gạch xuyên qua được áp dụng cho văn bản. Thuộc tính này cho phép bạn tùy chỉnh kiểu của các đường gạch chân, gạch trên hoặc gạch xuyên qua được áp dụng cho văn bản.

Có 4 giá trị khác nhau mà bạn có thể sử dụng cho thuộc tính “text-decoration-style”, bao gồm:

“solid”: đường gạch chân, gạch trên hoặc gạch xuyên qua sẽ là một đường liền.
“double”: đường gạch chân, gạch trên hoặc gạch xuyên qua sẽ là một đường kép.
“dotted”: đường gạch chân, gạch trên hoặc gạch xuyên qua sẽ là một chuỗi các dấu chấm.
“dashed”: đường gạch chân, gạch trên hoặc gạch xuyên qua sẽ là một chuỗi các dấu gạch ngang.

Ví dụ, nếu bạn muốn tạo một đường gạch chân đứt đoạn cho văn bản, bạn có thể sử dụng cú pháp sau:

text-decoration-style: dashed;

Nếu bạn muốn tạo một đường gạch trên kép cho văn bản, bạn có thể thay đổi giá trị của thuộc tính thành “double”, và nếu muốn tạo một chuỗi các dấu chấm cho đường gạch chân, gạch trên hoặc gạch xuyên qua, bạn có thể thay đổi giá trị thành “dotted”. Nếu bạn muốn tạo một đường gạch chân liền, bạn có thể thay đổi giá trị thành “solid”.

text-decoration-thickness

“text-decoration-thickness” là một thuộc tính CSS mới được giới thiệu trong phiên bản CSS 4 và được sử dụng để chỉ định độ dày của các đường trang trí văn bản, chẳng hạn như các đường gạch chân, gạch trên hoặc gạch xuyên qua.

Hiện tại, “text-decoration-thickness” chưa được hỗ trợ rộng rãi trên các trình duyệt web phổ biến. Tuy nhiên, khi nó được hỗ trợ, nó sẽ cung cấp cho các nhà thiết kế web một cách để tùy chỉnh độ dày của các đường trang trí văn bản một cách nhanh chóng và dễ dàng hơn.

Ví dụ, nếu bạn muốn tạo một đường gạch chân dày hơn cho văn bản, bạn có thể sử dụng cú pháp sau:

text-decoration: underline;
text-decoration-thickness: 2px;

Trong ví dụ này, thuộc tính “text-decoration” được sử dụng để tạo đường gạch chân, và thuộc tính “text-decoration-thickness” được sử dụng để đặt độ dày của đường gạch chân thành 2px. Tùy thuộc vào trình duyệt và phiên bản CSS, cú pháp này có thể không hoạt động hoặc được hỗ trợ khác nhau.

Ví dụ:

Ví dụ sử dụng Text-decoration

Ví dụ sau đây sẽ minh họa cách sử dụng các loại Text-decoration:

<p>Đây là ví dụ về cách sử dụng Text-decoration:</p>

<p style="text-decoration: underline;">Gạch chân</p>

<p style="text-decoration: overline;">Gạch trên</p>

<p style="text-decoration: line-through;">Gạch ngang</p>

<p style="text-decoration: blink;">Nhấp nháy</p>

<p style="text-decoration: underline line-through;">Gạch xuyên qua</p>

<p style="text-decoration: none;">Không có Text-decoration</p>

Một số câu hỏi phổ biến về Text-decoration trong CSS

Đây là một số câu hỏi phổ biến về text-decoration trong CSS:

Text-decoration là gì? Text-decoration là một thuộc tính CSS được sử dụng để thêm hoặc loại bỏ các trang trí văn bản, chẳng hạn như gạch chân, gạch ngang hoặc gạch chéo.
Có bao nhiêu giá trị text-decoration có thể được sử dụng? Có bốn giá trị text-decoration có thể được sử dụng:

underline: thêm gạch chân cho văn bản.
overline: thêm gạch ngang phía trên văn bản.
line-through: thêm gạch ngang giữa văn bản.
blink: tạo hiệu ứng nhấp nháy cho văn bản. Tuy nhiên, giá trị này không được hỗ trợ trên tất cả các trình duyệt.

Làm thế nào để thêm text-decoration cho một phần tử HTML? Để thêm text-decoration cho một phần tử HTML, ta có thể sử dụng thuộc tính text-decoration trong CSS. Ví dụ:

a {
  text-decoration: underline;
}

Trong đoạn mã trên, tất cả các thẻ <a> sẽ được thêm gạch chân.

Làm thế nào để loại bỏ text-decoration cho một phần tử HTML? Để loại bỏ text-decoration cho một phần tử HTML, ta có thể sử dụng giá trị none của thuộc tính text-decoration trong CSS. Ví dụ:

a {
  text-decoration: none;
}

Trong đoạn mã trên, tất cả các thẻ <a> sẽ không có text-decoration nào.

Làm thế nào để thêm text-decoration cho một phần tử khi chuột di chuyển qua đó? Để thêm text-decoration cho một phần tử khi chuột di chuyển qua đó, ta có thể sử dụng giá trị underline của thuộc tính text-decoration trong CSS và kết hợp với pseudo-class :hover. Ví dụ:

a:hover {
  text-decoration: underline;
}

Trong đoạn mã trên, khi chuột di chuyển qua một thẻ <a>, nó sẽ được thêm gạch chân.

Làm thế nào để thêm text-decoration cho một phần tử khi đã được truy cập? Để thêm text-decoration cho một phần tử khi đã được truy cập, ta có thể sử dụng giá trị underline của thuộc tính text-decoration trong CSS và kết hợp với pseudo-class :visited. Ví dụ:

a:visited {
  text-decoration: underline;
}

Trong đoạn mã trên, khi một thẻ <a> đã được truy cập, nó sẽ được thêm gạch chân.

Làm thế nào để thay đổi màu sắc của text-decoration? Để thay đổi màu sắc của text-decoration, ta có thể sử dụng thuộc tính color trong CSS. Ví dụ:

a {
  text-decoration: underline;
  color: red;
}

Trong đoạn mã trên, tất cả các thẻ <a> sẽ được thêm gạch chân màu đỏ.

Làm thế nào để thay đổi độ dày của text-decoration? Để thay đổi độ dày của text-decoration, ta có thể sử dụng thuộc tính text-decoration-thickness trong CSS. Ví dụ:

a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

Trong đoạn mã trên, tất cả các thẻ <a> sẽ được thêm gạch chân với độ dày là 2px.

Làm thế nào để thay đổi kiểu của text-decoration? Để thay đổi kiểu của text-decoration, ta có thể sử dụng thuộc tính text-decoration-style trong CSS. Ví dụ:

a {
  text-decoration: underline;
  text-decoration-style: dotted;
}

Trong đoạn mã trên, tất cả các thẻ <a> sẽ được thêm gạch chân dạng chấm. Các giá trị khác của text-decoration-style bao gồm solid (gạch liền), double (gạch đôi), dashed (gạch đứt) và wavy (gạch sóng).

Làm thế nào để thay đổi khoảng cách giữa các đường trong text-decoration? Để thay đổi khoảng cách giữa các đường trong text-decoration, ta có thể sử dụng thuộc tính text-decoration-skip trong CSS. Ví dụ:

a {
  text-decoration: underline;
  text-decoration-skip: spaces;
}

Trong đoạn mã trên, tất cả các thẻ <a> sẽ được thêm gạch chân với khoảng cách giữa các đường được bỏ qua các khoảng trống. Các giá trị khác của text-decoration-skip bao gồm none (không bỏ qua khoảng cách) và ink (bỏ qua khoảng cách giữa mực in).

CSS

Text-decoration trong CSS