Hướng dẫn underline css - gạch dưới css
Thuộc tính text-decoration định dạng trang trí phần tử HTMLThuộc tính text-decoration trong CSS đưa thêm các định dạng trang trí cho chữ (các dòng kẻ qua chữ, gạch chân css), thực chất text-decoration trong css nó là dạng viết tổng hợp cho ba thuộc tính CSS riêng lẻ là:text-decoration trong CSS đưa thêm các định dạng trang trí cho chữ (các dòng kẻ qua chữ, gạch chân css), thực chất text-decoration trong css nó là dạng viết tổng hợp cho ba thuộc tính CSS riêng lẻ là: Show
Bằng cách dùng text-decoration bạn có thể viết gộp ba thuộc tính trên cùng một dòng, với cú pháp dạng:text-decoration bạn có thể viết gộp ba thuộc tính trên cùng một dòng, với cú pháp dạng: text-decoration: line color style; Trong đó bạn có thể không cần chỉ ra cả ba tham số, ví dụ thiếu 7, thiếu 8 ..., thành phần thiếu sẽ sử dụng thiết lập mặc định của trình duyệt. Ví dụ 1: trang trí bằng text-decoration yêu cầu gạch chân dòng chữ, màu đường gạch chân là đỏ (red), kiểu đường lượn sóng.: trang trí bằng text-decoration yêu cầu gạch chân dòng chữ, màu đường gạch chân là đỏ (red), kiểu đường lượn sóng.
Kết quả ví dụ 1 Ví dụ 2: Trang trí kẻ qua giữa dòng chữ, kiểu đường kẻ và màu để mặc định => chỉ cần tham số line: Trang trí kẻ qua giữa dòng chữ, kiểu đường kẻ và màu để mặc định => chỉ cần tham số line
Kết quả ví dụ 2 Ví dụ 3: Một số trường hợp hay dùng với text-decoration: Một số trường hợp hay dùng với text-decoration
Hủy text-decoration (none). Văn bản này hiệu ứng trang trí theo phần tử cha. Gạch trên. Gạch dưới. Gạch giữa. Kết quả Hủy text-decoration (none). Văn bản này hiệu ứng trang trí theo phần tử cha. Gạch trên. Gạch dưới. Gạch giữa. Kết quảtext-decoration: line-through underline; vừa gạch chân vừa gạch giữa Bạn có thể kết hợp nhiều giá trị lại với nhau để có nhiều hiệu ứng trang trí trong một dòng CSS. Ví dụ: text-decoration: line-through underline; vừa gạch chân vừa gạch giữaThụt đầu dòng text-indent
Kết quả Bạn có thể kết hợp nhiều giá trị lại với nhau để có nhiều hiệu ứng trang trí trong một dòng CSS. Ví dụ: text-decoration: line-through underline; vừa gạch chân vừa gạch giữatext-indent chỉ ra khoảng thụt đầu dòng (chiều ngang) của văn bản. Thuộc tính này nhận các giá trị theo đơn vị (px, pt, cm, em ...), % và inherit.
Định nghĩa và sử dụngThuộc tính text-decoration thiết lập các trang trí thêm cho text. Cấu trúctag { text-decoration: giá trị; } Với giá trị như sau:
Ví dụMô tả
text-decorationnone text-decoration: none; Định dạng văn bản bình thường, đây là dạng mặc định. underline text-decoration: underline;p.lineUnder { text-decoration: underline; } p.lineOver { text-decoration: overline; } p.lineThrough { text-decoration: line-through; } p.lineBlink { text-decoration: blink; } Xác định đường gạch bên dưới văn bản.none text-decoration: none; Định dạng văn bản bình thường, đây là dạng mặc định. underline text-decoration: underline;Xác định đường gạch bên dưới văn bản. overline text-decoration: overline; |