Text-decoration trong CSS

Text-decoration trong CSS

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:

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í.

Ví dụ:

#example1 {
            text-decoration: underline dotted;
        }
#example2 {
            text-decoration: underline wavy;
        }
#example3 {
            text-decoration: underline dashed;
        }

Leave a Reply