text-decoration

Try it

text-decoration: underline;

text-decoration: underline dotted;

text-decoration: underline dotted red;

text-decoration: green wavy underline;

text-decoration: underline overline #ff3028;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

Các trang trí văn bản được vẽ xuyên qua các phần tử văn bản con cháu. Đ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ụ, với đánh dấu <p>This text has <em>some emphasized words</em> in it.</p>, quy tắc kiểu p { text-decoration: underline; } sẽ làm cho toàn bộ đoạn văn có gạch chân. Quy tắc 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ẽ làm xuất hiện một trang trí thứ hai trên "some emphasized words".

Các thuộc tính thành phần

Thuộc tính này là 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

text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

/* Giá trị toàn cục */
text-decoration: inherit;
text-decoration: initial;
text-decoration: revert;
text-decoration: revert-layer;
text-decoration: unset;

Thuộc tính text-decoration được chỉ định bằng một hoặc nhiều giá trị phân tách bằng dấu cách, đại diện cho các thuộc tính longhand text-decoration khác nhau.

Giá trị

text-decoration-line

Đặt loại trang trí được sử dụng, chẳng hạn như underline hoặc line-through.

text-decoration-color

Đặt màu của trang trí.

text-decoration-style

Đặt kiểu đường sử dụng cho trang trí, chẳng hạn như solid, wavy hoặc dashed.

text-decoration-thickness

Đặt độ dày của đường sử dụng cho trang trí.

Định nghĩa hình thức

Cú pháp hình thức

text-decoration = 
  <'text-decoration-line'>       ||
  <'text-decoration-thickness'>  ||
  <'text-decoration-style'>      ||
  <'text-decoration-color'>      

<text-decoration-line> = 
  none                                                |
  [ underline || overline || line-through || blink ]  |
  spelling-error                                      |
  grammar-error                                       

<text-decoration-thickness> = 
  auto                 |
  from-font            |
  <length-percentage>  |
  <line-width>         

<text-decoration-style> = 
  solid   |
  double  |
  dotted  |
  dashed  |
  wavy    

<text-decoration-color> = 
  <color>  

<length-percentage> = 
  <length>      |
  <percentage>  

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

Ví dụ

Minh họa các giá trị text-decoration

.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}

<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>
  This <a class="plain" href="#">link will not be underlined</a>, as links
  generally are by default. Be careful when removing the text decoration on
  anchors since users often depend on the underline to denote hyperlinks.
</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="thick">
  This text has a really thick purple underline in supporting browsers.
</p>
<p class="blink">
  This text might blink for you, depending on the browser you use.
</p>

Kết quả

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• Các thuộc tính text-decoration riêng lẻ: text-decoration-line, text-decoration-color, text-decoration-style và text-decoration-thickness.
• Các thuộc tính text-decoration-skip-ink, text-underline-offset và text-underline-position cũng ảnh hưởng đến text-decoration, nhưng không được bao gồm trong thuộc tính viết tắt.
• Thuộc tính list-style kiểm soát giao diện của các mục trong danh sách HTML <ol> và <ul>.
• Thuộc tính SVG text-decoration