CSS Updates - Các thuộc tính mới để định dạng trang trí văn bản & gạch chân

Giới thiệu

Với sự ra mắt của các thuộc tính text-decoration mới, chúng ta hiện có thể định dạng văn bản theo nhiều cách hơn trước đây. Thuộc tính text-decoration là viết tắt cho text-decoration-thickness, text-decoration-color, text-decoration-line và text-decoration-style. Các thuộc tính text-decoration-skip, text-decoration-skip-ink, text-decoration, text-underline-offset và text-underline-position cần được chỉ định rõ ràng.

Cú pháp

Cú pháp của CSS text-decoration như sau:

Selector { 
  text-decoration: /*giá trị*/ 
}

Ví dụ 1: Các kiểu trang trí cơ bản

<!DOCTYPE html> 
<html> 
  <head> 
    <style> 
      #one { 
        text-decoration-style: double; 
        text-decoration-skip-ink: auto; 
      } 
      p { 
        padding: 2%; 
        text-decoration-line: underline overline; 
        text-decoration-style: wavy; 
      } 
      p:nth-of-type(even) { 
        text-decoration: overline; 
      } 
      span { 
        text-decoration: line-through; 
      } 
    </style> 
  </head> 
  <body> 
    <p id="one">Random Demo abcdefghijklmnopqrstuvwxyz</p> 
    <p>Random Demo Text</p> 
    <p>Random <span>Demo</span> Text</p> 
  </body> 
</html>

Kết quả hiển thị:

Ví dụ 2: Độ dày và vị trí gạch chân

<!DOCTYPE html> 
<html> 
  <head> 
    <style> 
      p { 
        margin: 3%; 
        font-size: x-large; 
        text-decoration-line: underline overline; 
        text-decoration-style: dotted; 
        text-decoration-skip-ink: none; 
        text-decoration-thickness: 4px; 
      } 
    </style> 
  </head> 
  <body> 
    <p>Super Demo abcdefghijklmnopqrstuvwxyz</p> 
  </body> 
</html>

Kết quả hiển thị: