Thiết kế phong cách cho liên kết bằng CSS

Trong quá trình thiết kế một website chuyên nghiệp, có khá nhiều yếu tố mà bạn cần chú ý đến trong việc thiết lập phong cách cho website. Một trong số đó là cách mà liên kết được hiển thị, tức là phong cách của anchor-text.

Nếu bạn muốn liên kết quả mình trông khác so với kiểu mặc định là gạch chân màu xanh mà hầu hết các trình duyệt sử dụng thì hãy đọc bài viết này. Chúng tôi sẽ trình bày cách làm thế nào để thay đổi màu sắc và bỏ gạch dưới với vài dòng code CSS cơ bản.

Sẽ có nhiều lý do để bạn muốn thay đổi kiểu hiển thị liên kết. Ví dụ như website bạn sử dụng ảnh nền tối màu chẳng hạn, nó sẽ thực sự khủng khiếp đối với chữ màu xanh. Sử dụng chữ màu sáng sẽ tốt hơn nhiều.

Áp dụng các kiểu hiển thị cho anchor text sẽ cho phép bạn thay đổi cách mà liên kết xuất hiện trên toàn bộ website. Nếu bạn không muốn điều đó xảy ra thì bạn phải đặt id hoặc class cụ thể cho đối tượng liên kết mà bạn hướng tới và sửa code CSS liên quan đến nó. Hầu như mọi thứ đều có thể thay đổi được, từ màu sắc, gạch dưới, kiểu chữ... ngoại trừ thuộc tính hover.

Bắt tay vào code luôn nào. Đây là một đoạn code ví dụ cho bạn bắt đầu. Nếu bạn muốn có sự nhấn mạnh khi đưa chuột vào liên kết thì chỉ cần thay đổi giá trị của text-decoration.

1. a {
2. }
3. a:link {
4. color: #666666;
5. text-decoration: none;
6. }
7.  
8. a:active {
9. color: #B73045;
10. text-decoration: none;
11. }
12.  
13. a:visited {
14. color: #999999;
15. text-decoration: none;
16. }
17. a:hover {
18. color: #B73045;
19. text-decoration: none;
20. }

Trước khi rời khỏi đây, có thể bạn sẽ muốn xem qua bài viết Quy tắc bảo mật cơ bản cho mạng xã hội để hiểu rõ thêm về những phương pháp bảo mật khi tham gia vào mạng xã hội.