Các thuộc tính CSS định dạng thẻ a (liên kết)

Nội dung chính

Trong bố cục của một website, thẻ a đóng vai trò rất quan trọng để tạo liên kết giữa các trang trong website cũng như hỗ trợ rất nhiều cho SEO. Ngoài ra các thuộc tính CSS trong thẻ cũng được sử dụng rất nhiều mà bạn thường thấy như màu sắc, gạch chân, hover và link. Bài hôm nay chúng ta sẽ cùng tìm hiểu các thuộc tính CSS này.

Các thuộc tính CSS định dạng thẻ a thông dụng:

Bao gồm một số thuộc tính và sự kiện sau:

1. Định dạng màu sắc cho thẻ a

Mặc định trong thẻ a khi chúng ta tạo một liên kết bất kỳ thì màu sắc sẽ là màu tím. Bạn có thể định dạng lại màu theo cú pháp selector và color như sau:

Ví dụ : Định dạng màu sắc thẻ a là màu đỏ

[html] a {
color:red;
}
[/html]

2. Định dạng background cho liên kết

Để định dạng màu nền chúng ta có thuộc tính Background.

Ví dụ : Định dạng nền màu xanh, chữ màu đỏ cho thẻ a (liên kết)

[html] a {
background: blue;
color: red;
}
[/html]

3. Ẩn dấu gạch chân thẻ a (liên kết)

Khi bạn tạo một liên kết bất kỳ ngoài màu sắc mặc định là màu tím thì còn có dấu gạch chân dưới liên kết. Bạn có thể bỏ dấu này đi bằng cú pháp như sau:

Bài viết liên quan Tạo form đăng ký bằng ngôn ngữ HTML

[html] a {
text-decoration: none;
}
[/html]

4. Các Style sự kiện trong thẻ a (link, visited, active, hover)

Bao gồm 4 style sự kiện chính khi chúng ta nhấp chuột vào hay di chuyển chuột lên liên kết.

link : Màu sắc của thẻ a mà bạn chưa click chuột vào lần nào
visited : Là trạng thái khi bạn click vào thẻ
active : Là trạng thái khi bạn click vào và nhấn giữ chuột liên kết đó
hover : Là trạng thái chuyển màu sắc khi bạn đưa chuột lên liên kết đó

Quy tắc sử dụng các style sự kiện :

[html] a:link{}

a:visited{}

a:active{}

a:hover{}
[/html]

Ví dụ : Style link : Định dạng màu đỏ cho liên kết khi chưa click vào

[html] a:link {
color: red;
}
[/html]

Ví dụ : Style visited : Định dạng màu vàng cho liên kết khi đã click vào

[html] a:visited {
color: yellow;
}
[/html]

Ví dụ : Style active : Định dạng màu xanh cho liên kết khi bạn nhấn giữ chuột

[html] a:active {
color: blue;
}
[/html]

Ví dụ: Style hover : Định dạng màu đen cho liên kết khi đưa chuột vào

[html] a:hover {
color: black;
}
[/html]

5. Ví dụ tổng hợp CSS cho thẻ a

Chúng ta cùng làm một ví dụ đơn giản sau để xem luồng sự kiện CSS của thẻ:

Ban đầu (link) màu sắc màu xanh, không gạch chân
Hover vào (hover) thì màu sắc màu vàng và có gạch chân
Khi nhấn giữ chuột (active) thì màu sắc màu đen và không gạch chân
Khi click xong (visited) thì màu sắc màu trắng và có gạch chân

Bài viết liên quan Các vùng chọn CSS thông dụng (Selector)

Ví dụ :

Lời kết : Kết thúc bài hôm nay chúng ta đã tìm hiểu và nắm được các thuộc tính CSS định dạng thẻ a thông dụng cũng như cách dùng trong một website. Bài tới chúng ta sẽ tìm hiểu về các thuộc tính CSS định dạng văn bản.

Chúc bạn thành công!

Những bài bạn nên xem:

#Cùng chuyên mục : Serie hướng dẫn học HTML căn bản

Rate this post

Các thuộc tính CSS định dạng thẻ a (link)