Trong hướng dẫn này, bạn sẽ học cách định kiểu các trạng thái khác nhau của liên kết bằng CSS.

Tạo kiểu liên kết với CSS

    Liên kết hoặc siêu liên kết là một phần thiết yếu của một trang web. Nó cho phép khách truy cập điều hướng qua trang web. Do đó, tạo kiểu cho các liên kết đúng cách là một khía cạnh quan trọng trong việc xây dựng một trang web thân thiện với người dùng.

    Xem hướng dẫn về liên kết HTML để tìm hiểu thêm về liên kết và cách tạo liên kết.

    Một liên kết có bốn trạng thái khác nhau — link, visited, active và hover. Bốn trạng thái này của một liên kết có thể được tạo kiểu khác nhau thông qua việc sử dụng các bộ chọn lớp giả neo sau đây.

• a:link — xác định kiểu cho các liên kết bình thường hoặc không được truy cập.
• a:visited — xác định kiểu cho các liên kết mà người dùng đã truy cập.
• a:hover — xác định kiểu cho liên kết khi người dùng đặt con trỏ chuột lên liên kết đó.
• a:active — xác định kiểu cho các liên kết khi chúng được nhấp vào.

    Bạn có thể chỉ định bất kỳ thuộc tính CSS nào bạn muốn, chẳng hạn như color, , , v.v. cho từng bộ chọn font này để tùy chỉnh kiểu liên kết, giống như cách bạn thực hiện với văn bản thông thường. backgroundborder

a:link {    /* unvisited link */
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
}
a:visited {    /* visited link */
    color: #ff00ff;
}
a:hover {    /* mouse over link */
    color: #00ff00;
    border-bottom: none;
}
a:active {    /* active link */
    color: #00ffff;
}

    Thứ tự mà bạn đang đặt kiểu cho các trạng thái khác nhau của liên kết là rất quan trọng, bởi vì những gì xác định cuối cùng sẽ được ưu tiên hơn các quy tắc kiểu được xác định trước đó.

Sửa đổi kiểu liên kết tiêu chuẩn

    Trong tất cả các trình duyệt web chính như Chrome, Firefox, Safari, v.v., các liên kết trên các trang web đều có gạch dưới và sử dụng màu liên kết mặc định của trình duyệt, nếu bạn không đặt kiểu dành riêng cho chúng.

    Theo mặc định, các liên kết văn bản sẽ xuất hiện như sau trong hầu hết các trình duyệt:

• Một liên kết chưa được truy cập dưới dạng văn bản màu xanh được gạch dưới.
• Một liên kết đã truy cập dưới dạng văn bản màu tím được gạch dưới.
• Một liên kết hoạt động dưới dạng văn bản màu đỏ được gạch chân.

    Tuy nhiên, không có thay đổi về giao diện của liên kết trong trường hợp trạng thái di chuột. Nó vẫn có màu xanh lam, tím hoặc đỏ tùy thuộc vào trạng thái (tức là chưa được truy cập, đã truy cập hoặc đang hoạt động) mà họ đang ở.

    Bây giờ hãy xem cách tùy chỉnh các liên kết bằng cách ghi đè kiểu dáng mặc định của nó.

Đặt màu tùy chỉnh của liên kết

    Chỉ cần sử dụng thuộc tính CSS color để xác định màu bạn chọn cho các trạng thái khác nhau của liên kết. Nhưng khi chọn màu, hãy đảm bảo rằng người dùng có thể phân biệt rõ ràng giữa văn bản bình thường và liên kết.

    Hãy thử ví dụ sau để hiểu cơ bản nó hoạt động như thế nào:

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

Xóa gạch chân mặc định khỏi liên kết

    Nếu bạn không thích gạch dưới mặc định trên các liên kết, bạn chỉ cần sử dụng thuộc tính text-decoration để loại bỏ nó. Ngoài ra, bạn có thể áp dụng kiểu dáng khác cho các liên kết như màu nền, viền dưới, phông chữ đậm, v.v. để làm cho nó nổi bật hơn một chút so với văn bản bình thường.

    Ví dụ sau đây cho thấy cách loại bỏ hoặc đặt gạch chân cho các trạng thái khác nhau của một liên kết.

a:link, a:visited {
    text-decoration: none; 
}
a:hover, a:active {
    text-decoration: underline;
}

Làm cho các liên kết văn bản trông giống như các nút

    Bạn cũng có thể làm cho các liên kết văn bản thông thường của mình trông giống như nút bằng cách sử dụng CSS. Để làm điều này, chúng ta cần sử dụng thêm một số thuộc tính CSS như background-color, border, display, padding v.v. Bạn sẽ tìm hiểu chi tiết về các thuộc tính này trong các chương sắp tới.

    Hãy xem ví dụ sau và xem nó thực sự hoạt động như thế nào:

a:link, a:visited {
    color: white;    
    background-color: #1ebba3;    
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #099983;
    text-decoration: none;
    text-align: center;
    font: 14px Arial, sans-serif;  
}
a:hover, a:active {
    background-color: #9c6ae1;
    border-color: #7443b6;
}