Liên kết trong CSS

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

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

Liên kết (link) hoặc siêu liên kết (hyperlink) 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 khác. 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 của 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 trong HTML để tìm hiểu thêm về liên kết và cách tạo chúng.

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 CSS khác nhau thông qua việc sử dụng các bộ chọn pseudo-class (pseudo-class selector) sau:

• a:link – xác định kiểu cho các liên kết bình thường hoặc chưa đượ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 một liên kết khi người dùng di con trỏ chuột lên nó.
• 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 ví dụ như color, font, background, border, v.v. cho các bộ chọn để tùy chỉnh kiểu của các liên kết, giống như bạn làm với các văn bản bình thường.

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ự bạn đặt cho các trạng thái khác nhau của liên kết trong CSS rất quan trọng, vì những quy tắc CSS ở cuối cùng được ưu tiên hơn các quy tắc CSS được xác định trước đó.

Lưu ý: Nói chung, thứ tự của các pseudo-class nên như sau – :link, :visited, :hover, :active, :focus để hoạt động tốt.

Thay đổi kiểu liên kết mặc định

Trong tất cả các trình duyệt web phổ biến như Chrome, Firefox, Safari, v.v., liên kết trên các trang web có gạch chân 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ạo 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 không được truy cập dưới dạng văn bản màu xanh dương đượ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 đang hoạt động dưới dạng văn bản màu đỏ được gạch dưới.

Tuy nhiên, không có sự thay đổi nào 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 dương, tím hoặc đỏ tùy thuộc vào trạng thái của liên kết (tức là không được truy cập, đã truy cập hoặc đang hoạt động).

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

Đổi màu của liên kết

Chỉ cần sử dụng thuộc tính color của CSS để 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 lựa chọn màu sắc, 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à các liên kết.

Hãy thử ví dụ sau để hiểu cơ bản về cách 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 chân mặc định trên các liên kết, bạn có thể chỉ cần sử dụng thuộc tính text-decoration của CSS để loại bỏ nó. Ngoài ra, bạn có thể áp dụng các kiểu khác trên các liên kết như màu nền, đường viền dưới cùng, phông chữ đậm, v.v. để làm cho nó nổi bật hơn văn bản bình thường một chút.

Ví dụ sau đây cho thấy cách xóa hoặc tạo 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 liên kết trông giống như nút bấm

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

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;
}