CSS Links
Text Link Text Link Link Button Link Button
Styling Links
Các link có thể được tạo kiểu với bất kỳ thuộc tính CSS nào (ví dụ: color, font-family, background,...).
a { color: hotpink; }Ngoài ra, các link có thể được tạo kiểu khác nhau tùy thuộc vào trạng thái của chúng.
Bốn trạng thái link là:
- a:link - một link bình thường, chưa được truy cập
- a:visited - một link đã được truy cập
- a:hover - một link khi được di chuột qua
- a:active - một link khi nó được click
/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; }
Text Decoration
Thuộc tính text-decoration được sử dụng để xóa gạch chân khỏi các link:
a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; }
Background Color
Thuộc tính background-color có thể được sử dụng để chỉ định màu nền cho các link:
a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink; }
Link Buttons
Ví dụ này minh họa một ví dụ nâng cao hơn trong đó chúng tôi kết hợp một số thuộc tính CSS để hiển thị các link dưới dạng button:
a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; }