Để chuyển trang giữa các trang trong hệ thống website thì thẻ <a> là cách được sử dụng. Không những vậy 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 rất tốt cho SEO. Về thẻ <a> chúng ta có thể xác định chiều cao, độ lớn chữ, màu sắc, hover, …
Màu sắc cho thẻ <a>
Mặc định thẻ a nó cũng đã có màu nên khi muốn thay đổi màu sắc thì chúng ta có thể sử dụng cách sau:
Chọn màu đỏ cho thẻ a:
[css]
a{
color:red;
}
[/css]
Gạch chân cho thẻ <a>
Mặc định khi thẻ <a> đươc tạo sẽ có gạch chân, vấn đề này có thể sử dụng text-decoration như thuộc tính trong văn bản:
- text-decoration: overline //gạch trên chữ
- text-decoration: underline //gạch dưới chữ
- text-decoration: line-through //gạch ngang chữ
- text-decoration: none //không có gạch gì cả
[css]
a{
color: red;
text-decoration: none;
}
[/css]
Background cho thẻ <a>
Cũng tương tự ta có thể sử dụng background cho thẻ a, ví dụ: chọn background màu xanh và màu chữ màu trắng cho thẻ a
[css]
a{
background: blue;
color:#FFF; /*white*/
}
[/css]
Các sự kiện cho thẻ <a>
Các sự kiện này xảy ra khi chúng ta dùng chuột thao tác lên nó.
- hover: Khi bạn hover chuột qua nó sẽ có tác dụng
- visited: khi ấn click vào thẻ 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
Cách viết như sau:
a:hover{}
a.active:active{}
a#menu:link{}
a:visited{}
[css]
a:hover{
color: red;
text-decoration: none;
}
a:visited{
color: yellow;
}
a:link{
color: red;
}
a:active{
color: yellow;
}
[/css]
Để có thể sử dụng 4 loại trên thì khi viết chúng ta phải viết theo thứ tự (link -> visited -> hover -> active).
Đến đây chúng ta đã tìm hiểu một số thuộc tính định dạng cho thẻ a và xử lý các sự kiện liên quan đến thẻ a, đây là những thuộc tính rất hay sử dụng trên các website.
[thongbao]
- Nếu có thắc mắc gì các bạn để lại comment bên dưới mình sẽ trả lời sớm nhất có thể.
- Cảm ơn các bạn đã đọc.
[/thongbao]