Áp dụng style cho các liên kết đã truy cập - :visited - trong CSS

Trong thiết kế web, việc định dạng các liên kết khác nhau là một phần quan trọng nhằm tạo ra giao diện người dùng trực quan và hấp dẫn. Một trong những thành phần thiết yếu trong CSS giúp chúng ta làm điều này là khả năng áp dụng style cho các liên kết đã truy cập bằng cách sử dụng pseudo-class :visited. Pseudo-class này cho phép chúng ta thay đổi phong cách của các liên kết sau khi người dùng đã nhấp vào chúng, giúp cải thiện trải nghiệm người dùng.

Cú pháp cơ bản của :visited

Ứng dụng pseudo-class :visited trong CSS rất đơn giản. Bạn chỉ cần thêm nó vào bộ chọn của mình, ví dụ:

a:visited {
    color: purple;
}

Dòng mã trên sẽ biến đổi màu sắc của các liên kết đã truy cập thành màu tím. Đây là cách dễ dàng để người dùng nhận biết được những liên kết mà họ đã nhấp chuột vào.

Các thuộc tính có thể sử dụng với :visited

Do lý do bảo mật và quyền riêng tư, không phải tất cả các thuộc tính CSS đều có thể áp dụng với :visited. Các thuộc tính được hỗ trợ bao gồm:

1. Color (màu sắc)
2. Background-color (màu nền)
3. Border-color (màu viền) và các thuộc tính khác liên quan đến viền nhưng chỉ thiết lập màu
4. Outline-color (màu viền ngoài)

Điều này ngăn chặn việc các trang web có thể suy đoán lịch sử duyệt web của người dùng.

Ví dụ thực tiễn

Hãy xem xét ví dụ cụ thể hơn:

a {
    color: blue;
    text-decoration: none;
}

a:visited {
    color: green;
    background-color: yellow;
}

a:hover {
    color: red;
    text-decoration: underline;
}

Trong đoạn mã này:

• Liên kết chưa truy cập sẽ hiển thị màu xanh và không có gạch chân.
• Liên kết đã truy cập sẽ hiển thị màu xanh lá cây với nền màu vàng.
• Khi người dùng di chuột qua liên kết, nó sẽ hiển thị màu đỏ và có gạch chân.

Lợi ích của việc định dạng liên kết đã truy cập

1. Cải thiện trải nghiệm người dùng: Người dùng dễ dàng nhận biết các liên kết họ đã nhấp vào, giúp họ tránh việc truy cập lại những trang không cần thiết.
2. Tăng khả năng điều hướng: Bằng cách đổi màu sắc hoặc định dạng liên kết đã truy cập, người dùng có thể tìm thấy các tài nguyên mới mà họ chưa duyệt qua.
3. Tạo giao diện trực quan hấp dẫn: Sử dụng phong cách phù hợp có thể làm nổi bật thiết kế tổng thể của trang web.

Một số lưu ý quan trọng

• Thứ tự của các pseudo-class: Khi sử dụng nhiều pseudo-class, thứ tự định nghĩa chúng trong CSS rất quan trọng. Theo thứ tự chuẩn của CSS, thứ tự sẽ là: :link, :visited, :hover, :active (thường viết tắt là LVHA).

  a:link { /* Chưa truy cập */ }
  a:visited { /* Đã truy cập */ }
  a:hover { /* Khi di chuột qua */ }
  a:active { /* Khi bấm chuột */ }
  

• Bảo mật và quyền riêng tư: Tránh sử dụng các thuộc tính không được hỗ trợ với :visited như background-image hoặc các thuộc tính thao tác kích thước. Những hành động này có thể làm lộ lịch sử duyệt web của người dùng.

Tổng kết lại, việc áp dụng style cho các liên kết đã truy cập là một kỹ thuật thiết yếu trong CSS giúp nâng cao trải nghiệm người dùng và tạo ra một trang web dễ sử dụng. Bằng cách chú ý đến quyền riêng tư và bảo mật, bạn có thể tận dụng pseudo-class :visited để làm cho giao diện web của bạn trở nên chuyên nghiệp và tiện ích hơn.