Liên kết là rất phổ biến trên các trang web, nhưng nhiều nhà thiết kế web không nhận ra sức mạnh mà họ có với CSS để thao tác và quản lý các liên kết của họ một cách hiệu quả. Bạn có thể xác định các liên kết có trạng thái được truy cập, di chuột và đang hoạt động. Bạn cũng có thể làm việc với biên giới và hình nền để cung cấp cho các liên kết của bạn nhiều hơn pizzaz hoặc làm cho họ trông giống như các nút hoặc thậm chí hình ảnh.
Hầu hết các nhà thiết kế web bắt đầu bằng cách xác định kiểu trên thẻ "a":
một {color: red; }Điều này sẽ tạo kiểu cho tất cả các khía cạnh của liên kết (di chuột, truy cập và hoạt động). Để tạo kiểu cho từng phần riêng biệt, bạn phải sử dụng các lớp giả liên kết.
Liên kết các lớp giả
Có bốn loại lớp giả liên kết cơ bản mà bạn có thể xác định:
- : link - đây là kiểu mặc định cho liên kết
- : đã truy cập - sau khi một liên kết đã được nhấp
- : di chuột - khi chuột đã sẵn sàng qua liên kết (nhấp chuột trước)
- : đang hoạt động - ngay khi liên kết đang được nhấp
Để xác định một lớp liên kết giả, hãy sử dụng nó với một thẻ trong bộ chọn CSS của bạn. Vì vậy, để thay đổi màu đã truy cập của tất cả các liên kết thành màu xám, hãy viết:
a: đã truy cập {color: gray; }Nếu bạn tạo kiểu cho một lớp giả, bạn nên tạo kiểu cho chúng. Bằng cách đó bạn sẽ không ngạc nhiên bởi kết quả không liên quan. Vì vậy, nếu bạn chỉ muốn thay đổi màu đã truy cập thành màu xám, trong khi tất cả các thuộc tính giả khác của liên kết của bạn vẫn là màu đen, bạn sẽ viết:
a: liên kết, a: hover, a: active {color: black; } a: đã truy cập {color: gray; }Thay đổi màu liên kết
Cách liên kết phong cách phổ biến nhất là thay đổi màu khi con chuột di chuột qua nó:
một màu {color: # 00f; } a: hover {color: # 0f0; }Nhưng đừng quên rằng bạn có thể ảnh hưởng đến cách liên kết trông như khi họ nhấp vào liên kết đó với thuộc tính: hoạt động:
một màu {color: # 00f; } a: active {color: # f00; }Hoặc liên kết trông như thế nào sau khi bạn đã truy cập liên kết với thuộc tính: đã truy cập:
một màu {color: # 00f; } a: đã truy cập {color: # f0f; }Để kết hợp tất cả lại với nhau:
một màu {color: # 00f; } a: đã truy cập {color: # f0f; } a: hover {color: # 0f0; } a: active {color: # f00; }Đặt hình nền trên các liên kết để thêm biểu tượng hoặc dấu đầu dòng
Bạn có thể đặt nền trên liên kết như trong bài viết Nền phong cách, nhưng bằng cách chơi với nền một chút, bạn có thể tạo liên kết có biểu tượng được liên kết. Chọn một biểu tượng nhỏ, khoảng 15px x 15px, trừ khi văn bản của bạn lớn hơn. Đặt nền cho một bên của liên kết và đặt tùy chọn lặp lại thành không lặp lại. Sau đó, padd liên kết để các văn bản trong liên kết được di chuyển trên đủ xa sang trái hoặc phải để xem biểu tượng.
một {padding: 0 2px 1px 15px; background: #fff url (bóng.gif) trái trung tâm không lặp lại; màu: # c00; }Khi bạn đã có biểu tượng của mình, bạn có thể đặt một hình ảnh khác là biểu tượng di chuột, đang hoạt động và đã truy cập để thực hiện thay đổi liên kết:
một {padding: 0 2px 1px 15px; background: #fff url (bóng.gif) trái trung tâm không lặp lại; màu: # c00; } a: hover {background: #fff url (bóng2.gif) trái giữa không lặp lại; } a: active {background: #fff url (bóng3.gif) trái giữa không lặp lại; }Làm cho các liên kết của bạn trông giống như các nút
Các nút rất phổ biến, nhưng cho đến khi CSS xuất hiện, bạn phải tạo các nút bằng hình ảnh , điều này làm cho các trang của bạn mất nhiều thời gian hơn để tải. May mắn thay, có một phong cách biên giới có thể giúp bạn tạo một hiệu ứng giống như nút dễ dàng với CSS.
một đường viền {border: 4px; padding: 2px; text-decoration: none; } a: hoạt động {border: 4px inset; }Lưu ý, khi bạn đặt màu sắc theo kiểu mở đầu và chèn sẵn, trình duyệt không có khả năng hiển thị chúng như bạn mong đợi. Vì vậy, đây là một nút fancier với viền màu:
một {border-style: solid; chiều rộng đường viền: 1px 4px 4px 1px; text-decoration: none; đệm: 4px; màu đường viền: # 69f # 00f # 00f # 69f; }Và bạn cũng có thể ảnh hưởng đến kiểu di chuột và kiểu hoạt động của một liên kết nút, chỉ cần sử dụng các lớp giả đó:
a: liên kết {border-style: solid; chiều rộng đường viền: 1px 4px 4px 1px; text-decoration: none; đệm: 4px; màu đường viền: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }