Lại một thuộc tính làm việc với văn bản có độ thông dụng cao trong CSS. Đó chính là text-decoration. Với người mới tìm hiểu thì mình chắc rằng nó sẽ cực kỳ hữu ích. Hãy cùng xem text decoration là gì và cách dùng như thế nào nhé.
Cú pháp:
tag {
text-decoration: none | underline | overline | line-through | blink | inherit ;
}
Lần lượt lấy ví dụ cho các giá trị ở trên.
<html> <head> <style> /* Mã CSS */ </style> </head> <body> <p> <a href="https://quachquynh.com/">Quách Quỳnh Blog</a> </p> </body> </html>
1. text-decoration: none;
Mình sẽ thêm vào ở đoạn /* Mã CSS */ với lệnh
a {
text-decoration: none;
}
Mặc định ban đầu của siêu liên kết (hyper link) sẽ có gạch chân bên dưới. Khi thêm none vào thì nó sẽ biến mất.
2. text-decoration: underline;
Với underline sẽ xuất hiện đường gạch chân bên dưới.
Mã HTML:
<p> Quách Quỳnh Blog </p>
Mã CSS:
p { text-decoration: underline; }
3. text-decoration: overline;
Cũng với ví dụ thứ 2 bạn sẽ thay thế bằng overline đoạn văn bản sẽ gạch chân trên đầu. Nó ngược lại so với underline.
4. text-decoration: line-through;
Tiếp tục ví dụ vừa nãy giờ thay bằng line-through và kết quả hoàn toàn khác trước. Đoạn text có một dòng kẻ ngang xuát hiện.
5. text-decoration: blink;
Xác định văn bản nhấp nháy.
6. text-decoration: inherit;
Inherit sẽ thừa hưởng thuộc tính từ thành phần cha của nó. Hay còn gọi là phần tử bao ngoài.
Khi làm web thì mình gặp nhiều nhất là none và underline. Còn những cái kia thì khá ít dùng. Với bài viết về thuộc tính text decoration trong CSS bạn có cảm thấy dễ hiểu không? Đừng quên đọc thêm các bài viết trong chuỗi series học CSS cho người mới tại Quách Quỳnh nhé!
