Các trạng thái của Liên kết trong CSS

Chúng ta có thể định dạng liên kết trong CSS thông qua một số thuộc tính CSS như color, các thuộc tính về font, text…

Các thuộc tính này đã được đề cập rất rõ trong các bài trước về . Do vậy trong bài học này chúng ta sẽ không đi tìm hiểu về các thuộc tính đó nữa mà chúng ta sẽ tập trung tìm hiểu các Trạng thái của liên kết trong CSS.

1. Trạng thái link
Trạng thái link là trạng thái khi người dùng chưa click vào liên kết.
Cú pháp:

a:link {
 thuộc_tính_1: giá_trị_1;
 thuộc_tính_2: giá_trị_2;
 ...
}

Ví dụ: Khi người dùng chưa click vào liên kết thì màu chữ của liên kết là màu xanh (blue)

a:link {
 color: blue;
}

2. Trạng thái hover
Trạng thái hover là trạng thái khi người dùng đưa trỏ chuột lên trên liên kết (nhưng chưa click).
Cú pháp

a:hover {
 thuộc_tính_1: giá_trị_1;
 thuộc_tính_2: giá_trị_2;
 ...
}

Ví dụ: Khi người dùng đưa trỏ chuột lên trên liên kết thì màu chữ sẽ đổi sang màu đen và in nghiêng.

a:hover {
 color: black;
 font-style: italic;
}

3. Trạng thái active
Trạng thái active là trạng thái người dùng giữ trỏ chuột vào liên kết.
Cú pháp

a:active {
 thuộc_tính_1: giá_trị_1;
 thuộc_tính_2: giá_trị_2;
 ...
}

Ví dụ: Khi người dùng giữ trỏ chuột vào liên kết thì liên kết sẽ in đậm và màu chữ chuyển sang đỏ.

a:active {
 font-weight: bold;
 color:red;
}

4. Trạng thái visited
Trạng thái visited là trạng thái khi người dùng đã click vào liên kết.
Cú pháp

a:visited {
 thuộc_tính_1: giá_trị_1;
 thuộc_tính_2: giá_trị_2;
 ...
}

Ví dụ: Khi người dùng đã click vào liên kết thì liên kết chuyển sang màu vàng.

a:visited {
 color: yellow;
}

Tham khảo: KHóa hoc php từ cơ bản đến nâng cao
Nguồn: the gioi web

SHARE THIS