Thẻ a đóng vai trò rất quan trọng vì nhiệm vụ của nó là giúp chuyển trang giữa các file trong hệ thống website. Không những vậy mà bên SEO nó cũng có tác dụng chuyển hướng trang để các công cụ tìm kiếm có thể lọc toàn bộ website của bạn.
Trong thẻ a có rất nhiều thuộc tính kèm theo như: Gạch chân text, màu sắc, size text, đậm nhạt, màu nền,… các thành phần này cũng đã giới thiệu qua trong các bài trước, hãy đọc lại nếu bạn đã quên.
Trong bài này mình giới thiệu mới các thuộc tính khi rê chuột lên nó:
- hover: Khi bạn hover chuột qua nó sẽ có tác dụng
- visited: khi ạn click vào the a thì trạng thái của thẻ a đó là visited.
- active: Khi ạn click vào thẻ a nhưng nhấn giữ chuột
- link: thẻ a nào bạn chưa click lần nào thì nó sẽ có tác dụng.
Danh sách bên trên tương đương với đoạn code sau:
a:hover{}
a:active{}
a:link{}
a:visited{}
Một thẻ a bình thường không có CSS mặc định thường sẽ là gạch chân và font Time New Roman, nếu muốn thay đổi nó, bạn hãy viết CSS bao gồm các thuộc tính:
- text-decoration: none; – Nếu muốn xóa gạch chân đi.
- color: mã màu; – Nếu muốn hay đổi màu thẻ a.
- font-size: px; – Nếu muốn thay đổi kích thước chữ.
- font-family: Tên font; – Nếu muốn thay đổi font chữ.
Ngoài ra để định dạng nâng cao thêm bạn có thể viết như sau:
a {
text-decoration: none; //Ẩn gạch chân
color: #000; //Text trong thẻ a màu Đen
font-family: Arial; //Text trong thẻ a là font Arial
font-size: 14px; //Kích thước font là 14px
font-weight: bold; //Text trong thẻ a được in đậm
border: 1px solid #ddd; //Thẻ a được bao phủ bởi 1 đường kẻ bao quanh với màu #ddd
background: #efefef; //Thẻ a có màu nền là #efefef
}
Nếu bạn muốn thẻ a có hình nền thì dòng màu nền đổi thành url ảnh như bài “Bài 4: Thiết lập nền với CSS background”.
Các thuộc tính khi rê chuột lên được giới thiệu ở đầu bài, khi các bạn áp dụng vào thẻ, có thể bạn sẽ cần viết những CSS mình muốn thay đổi.
Ví dụ mình sẽ dùng thuộc tính :hover vào thẻ a như sau:
a {
color: #000;
background: #efefef;
}
a:hover {
color: red;
}
Có nghĩa là sau khi rê thuộc, text từ màu đen sẽ chuyển sang màu đỏ. Nếu các thuộc tính ở thẻ a mặc định không muốn thay đổi thì bạn không cần viết lại.